<template>
  <div class="dashboard ibps-fixed-bottom">
    <!-- <van-nav-bar
      :title="generateTitle()"
      fixed
    /> -->

    <!--幻灯片-->
    <div class="dashboard-swipe ">
      <van-swipe :autoplay="11000">
        <van-swipe-item v-for="(swipe, index) in swipes" :key="index">
          <img v-lazy="swipe.image||blankImage">
        </van-swipe-item>
      </van-swipe>
    </div>

    <!--通知-->
    <template v-if="noticeList && noticeList.length > 0">
      <div class="dashboard-notice" style="height: 52px;background: #F3F3F3;">
        <van-swipe :autoplay="6000" :height="44" :show-indicators="false" :initial-swipe="initialNotice()"
          style="height:44px;" vertical>
          <van-swipe-item v-for="(notice, index) in noticeList" :key="index">
            <van-notice-bar background="#ffffff" style="height:44px;" color="#979797" mode="link"
              @click="onNotice(notice)">
              <span class="ibps-pl-10"> {{ notice.title }}</span>
              <template #left-icon>
                <ibps-avatar icon="volume-o" bg-color="#3396FB" color="#ffffff" radius="8" width="24" height="24"
                  icon-size="12" />
              </template>
            </van-notice-bar>
          </van-swipe-item>
        </van-swipe>
      </div>
    </template>
    <template v-else>
      <div v-if="!emptyNoticeData" class="dashboard-notice__empty van-skeleton--animate" />
    </template>

    <!--栏目-->
    <template v-if="dashboards && dashboards.length >0">
      <van-collapse v-model="activeDashboards" :border="false">
        <van-collapse-item v-for="(dashboard,index) in dashboards" :key="dashboard[aliasKey]+index"
          :name="dashboard[aliasKey]" :border="false" :is-link="false">
          <template #title>
            <h2 class="menus-title">
              <van-icon :name="dashboard.icon" :color="dashboard.iconBgColor" class-prefix="ibps-icon" />
              {{ getText(dashboard) }}
              <span class="icon-wrapper">
                <van-icon :name="getIcon(dashboard.alias) ?'arrow-down':'arrow-up'" class="icon-displacement" />
              </span>
            </h2>
          </template>
          <van-grid :column-num="4" :border="false" class="avatar-grid">
            <van-grid-item v-for="menu in dashboard[childrenKey]" :key="menu[aliasKey]" :badge="getBadge(menu)"
              :text="getText(menu)" @click.native="onClick(menu)">
              <template #icon>
                <ibps-avatar :icon="menu.icon" :text="getText(menu)" :bg-color="menu.iconBgColor"
                  :color="menu.iconFontColor" icon-prefix="ibps-icon" radius="17" class="ibps-mb-10 avatar-layout" />
              </template>

            </van-grid-item>
          </van-grid>
        </van-collapse-item>
      </van-collapse>
    </template>
    <div v-else>
      <van-empty v-if="emptyData" :type="resultType" :description="resultMessage" />
      <!--骨架屏-->
      <template v-else>
        <div v-for="i in 8" :key="i" class="van-hairline--bottom dashboard-menus empty-data van-skeleton--animate">
          <h2 class="menus-title">&nbsp;</h2>
          <van-grid :column-num="4" :border="false">
            <van-grid-item v-for="j in 8" :key="j">
              <template #icon>
                <div class="avatar avatar--rounded">&nbsp;</div>
              </template>
              <template #text>
                <div class="title">&nbsp;</div>
              </template>
            </van-grid-item>
          </van-grid>
        </div>
      </template>
    </div>

    <notice-dialog :id="noticeId" :visible="noticeVisible" readonly @close="visible => noticeVisible = visible" />
  </div>
</template>
<script>
  import Vue from 'vue'
  import { getMenuData, getInfoCount } from '@/api/platform/auth/appres'
  import { queryPageList } from '@/api/platform/system/news'
  import ActionUtils from '@/utils/action'
  // import navbar from '@/mixins/navbar'
  import { Lazyload } from 'vant'
  Vue.use(Lazyload)
  import TreeUtils from '@/utils/tree'
  import i18n from '@/utils/i18n' // Internationalization 国际化
  import IbpsAvatar from '@/components/ibps-avatar'
  import NoticeDialog from '@/views/platform/notice/edit'
  // 透明图片
  const BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  export default {
    name: 'dashboard',
    // mixins: [navbar],
    components: {
      IbpsAvatar,
      NoticeDialog
    },
    data() {
      const { userInfo } = this.$store.getters
      return {
        userInfo,
        idKey: 'id',
        aliasKey: 'alias',
        labelKey: 'name',
        parentIdKey: 'parentId',
        childrenKey: 'children',
        urlKey: 'defaultUrl',
        dashboards: [],
        emptyData: false,
        resultType: 'empty',
        resultMessage: '没有应用，请联系管理员',
        countInfo: {}, // 右上角图标
        swipes: [],
        blankImage: BLANK,

        noticeList: [],
        emptyNoticeData: false,
        activeDashboards: [],
        noticeVisible: false,
        noticeId: ''
      }
    },
    created() {
      this.loadData()
    },
    methods: {
      getIcon(data) {
        return this.activeDashboards.includes(data)
      },
      changeIcon(data) {
        console.info(data, this.activeDashboards)
      },
      svgName(name) {
        return `#${name}`
      },
      getImage(menu) {
        if (menu.iconType === 'image') {
          return menu.icon
        }
        return
      },
      getText(menu) {
        return i18n.generateTitle(menu[this.aliasKey], menu[this.labelKey])
      },
      getBadge(menu) {
        const info = this.countInfo[menu[this.aliasKey]]
        if (this.$utils.isNotEmpty(info)) { return info > 99 ? '99+' : info === '0' ? '' : info }
      },
      loadData() {
        this.loadMenus()
        this.loadCountInfo()
        this.loadNotice()
      },
      loadMenus() {
        this.swipes = [{}]
        this.swipes = [
          { image: './images/swipes/banner1.png' },
          { image: './images/swipes/banner2.png' },
          { image: './images/swipes/banner3.png' }
        ]
        if (this.userInfo.employee.jiNengZhiCheng !== 'inside' && this.userInfo.employee.isSuper === 'N') {
          this.dashboards = []
          if (this.$utils.isNotEmpty(this.dashboards)) {
            const activeDashboards = []
            this.dashboards.forEach((d) => {
              activeDashboards.push(d[this.aliasKey])
            })
            this.activeDashboards = activeDashboards
          }
          this.emptyData = !(this.dashboards.length > 0)
        } else {
          getMenuData().then(response => {
            const data = response.data
            const listData = data.filter((d) => {
              return d.id !== '0'
            })
            this.dashboards = TreeUtils.transformToTreeFormat(listData, {
              idKey: this.idKey,
              parentIdKey: this.parentIdKey,
              childrenKey: this.childrenKey
            })
            if (this.$utils.isNotEmpty(this.dashboards)) {
              const activeDashboards = []
              this.dashboards.forEach((d) => {
                activeDashboards.push(d[this.aliasKey])
              })
              this.activeDashboards = activeDashboards
            }
            this.emptyData = !(listData.length > 0)
          }).catch((e) => {
            this.emptyData = true
            this.resultType = 'error'
            this.resultMessage = e.message
          })
        }
      },
      loadCountInfo() {
        getInfoCount().then(response => {
          const data = response.data
          const countInfo = {}
          data.forEach((d) => {
            countInfo[d.alias] = d.dataText
          })
          this.countInfo = countInfo
        }).catch((e) => {
        })
      },

      loadNotice() {
        this.emptyNoticeData = false
        const params = ActionUtils.formatParams({ status: 'publish' }, { page: 1, limit: 5 })
        queryPageList(params).then(response => {
          this.noticeList = response.data.dataResult
          this.emptyNoticeData = !(this.noticeList.length > 0)
        }).catch((e) => {
          this.emptyNoticeData = true
        })
      },
      initialNotice() {
        return Math.floor((Math.random() * this.noticeList.length))
      },
      onClick(menu) {
        const url = (menu.alias == "myTest" ? "/bpmn/myTest/index" : menu[this.urlKey])
        // const url =  menu[this.urlKey]
        console.log("url", url);
        if (this.$utils.isNotEmpty(url)) {
          if (/^https:\/\/|http:\/\//.test(url)) {
            this.$utils.open(url)
          } else {
            this.$router.push({ path: url })
          }
        } else {
          // 判断是否有下级菜单如果有
          if (this.$utils.isNotEmpty(menu.children)) {
            this.$router.push({
              name: 'next-menu',
              params: {
                title: menu.name,
                menus: menu.children
              }
            })
          } else {
            this.$notify({
              type: 'danger',
              message: '未配置菜单的url路径,请在PC后台配置！'
            })
          }
        }
      },
      onNotice(item) {
        this.noticeId = item.id
        this.noticeVisible = true
        // this.$router.push({
        //   name: 'noticeDetail',
        //   query: {
        //     id: item.id
        //   }
        // })
      }
    }
  }
</script>
<style lang="scss">
  .dashboard {
    .dashboard-menus {
      margin: 0 15px;
    }

    .menus-title {
      margin: 0;
      font-weight: 600;
      font-size: 14px;
    }

    .van-grid-item__text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    /**滚屏 */
    .dashboard-swipe {
      .van-swipe {
        cursor: pointer;
      }

      .van-swipe-item {
        color: #fff;
        font-size: 20px;
        text-align: center;
        line-height: 120px
      }

      .van-swipe-item:nth-child(even) {
        background-color: #f7f7f7;
        background: -webkit-linear-gradient(#f7f7f7, #f0f7fb);
      }

      .van-swipe-item:nth-child(odd) {
        background-color: #f0f7fb;
        background: -webkit-linear-gradient(#f0f7fb, #f7f7f7);
      }

      .van-swipe img {
        width: 100%;
        height: 180px;
        display: block;
        box-sizing: border-box;
        pointer-events: none;
      }
    }

    /**公告 */
    .dashboard-notice {
      .van-swipe-item {
        text-align: center;
        line-height: 36px
      }

      .van-swipe-item:nth-child(even) {
        background-color: #f7f7f7;
        background: -webkit-linear-gradient(#f7f7f7, #f0f7fb);
      }

      .van-swipe-item:nth-child(odd) {
        background-color: #f0f7fb;
        background: -webkit-linear-gradient(#f0f7fb, #f7f7f7);
      }
    }

    .dashboard-notice__empty {
      width: 100%;
      height: 36px;
      background-color: #f2f3f5;
    }

    .empty-data {
      .menus-title {
        background-color: #f7f7f7;
        background: -webkit-linear-gradient(#f7f7f7, #f0f7fb);
        width: 70px;
        margin: 10px;
        height: 16px;
      }

      .avatar {
        width: 48px;
        height: 48px;
        background: #f9f9f9;
        margin-bottom: 5px;
        border-radius: 12px;
      }

      .title {
        width: 48px;
        height: 16px;
        background: #f9f9f9;
      }
    }

    .avatar-grid {
      margin: -12px -16px;
    }

    .avatar-layout {
      height: 50px;
      width: 50px;
    }

    .icon-wrapper {
      position: relative;
      margin-left: 5px;

      .icon-displacement {
        position: absolute;
        top: 1px;
      }
    }
  }
</style>