<template>
  <div class="worker" :class="{ 'has-bg': searchKeywords }">
    <div class="worker-header">
      <header class="worker-header--title">工作台</header>
      <van-search
        class="worker-search"
        v-model="searchKeywords"
        @input="handleSearch"
        placeholder="搜索"
      />
      <div class="worker-search--result" v-if="searchKeywords">
        共{{ this.searchResultList.length }}个搜索结果
      </div>
    </div>
    <!-- 查询结果 -->
    <template v-if="searchKeywords">
      <apply-card
        :apply-list="searchResultList"
        @apply-click="handleApplyClick"
      ></apply-card>
      <van-empty
        v-if="this.searchResultList.length == 0"
        class="custom-image"
        :image="noSearchData"
        description="暂无内容"
      />
    </template>
    <div class="worker-content" id="workerContent" v-else>
      <!-- 最新使用 -->
      <apply-card
        :apply-list="latestList"
        title="最近使用"
        @apply-click="handleApplyClick"
        noDataText="最近暂未使用应用哦~"
      ></apply-card>
      <!-- 流程中心 -->
      <apply-card
        :apply-list="processList"
        title="流程中心"
        isProcessCenter
      ></apply-card>
      <!-- 应用中心 -->
      <div class="worker-center">
        <div class="worker-center--title">应用中心</div>
        <van-tabs
          v-model="active"
          scrollspy
          color="#409EFF"
          sticky
          :ellipsis="false"
          offset-top="95px"
          title-active-color="#409EFF"
          title-inactive-color="#262626"
          v-if="applyClassify && applyClassify.length > 1"
        >
          <van-tab
            v-for="(item, index) in applyClassify"
            :key="index"
            :title="
              item.typeName.length > 4
                ? `${item.typeName.substring(0, 4)}...`
                : item.typeName
            "
          >
            <apply-card
              :apply-list="item.appList"
              :title="item.typeName"
              :isShowBottomMargin="false"
              @apply-click="handleApplyClick"
            ></apply-card>
          </van-tab>
        </van-tabs>
        <apply-card
          v-else-if="applyClassify && applyClassify.length === 1"
          :apply-list="applyClassify[0].appList"
          :title="applyClassify[0].typeName"
          :isShowBottomMargin="false"
          @apply-click="handleApplyClick"
        ></apply-card>
        <van-empty
          v-else
          class="custom-image"
          :image="noDataImage"
          description="暂无应用"
        />
      </div>
      <placed-top containerId="workerContent" />
    </div>
    <tabBar :active-index="2"></tabBar>
  </div>
</template>

<script>
  import ApplyCard from '@/views/worker/components/ApplyCard'
  const tabBar = () => import('@/components/TabBar.vue')
  const PlacedTop = () => import('@/components/PlacedTop.vue')
  import {
    getApplyData,
    addRecentlyAppsCount,
    getRecentlyApps,
  } from '@/api/portal'

  const WEBSITE = 1 //站内地址
  const STATION_ADDRESS = 2 // 网页地址
  const FORM_LIST = 3 // 表单列表
  const CHART = 4 //图表
  const NEW_PROCESS = 5 // 新建流程

  export default {
    name: 'worker',
    components: {
      ApplyCard,
      tabBar,
      PlacedTop,
    },
    data() {
      return {
        noDataImage: require('@/assets/images/no_data_list.png'),
        noSearchData: require('@/assets/images/no_data.png'),
        searchKeywords: '',
        searchResultList: [],
        active: '',
        latestList: [],
        processList: [
          {
            name: '新建流程',
            icon: 'icon-xinjianliucheng11',
            iconColor: '#409EFF',
            path: '/matter/newMatter',
          },
          {
            name: '我的任务',
            icon: 'icon-daibanyiban',
            iconColor: '#4053FF',
            path: '/matter/myTask',
          },
          {
            name: '我的申请',
            icon: 'icon-wodeshenqing',
            iconColor: '#F6B85A',
            path: '/matter/myRequest',
          },
          {
            name: '传阅事项',
            icon: 'icon-wodechuanyue',
            iconColor: '#8550E1',
            path: '/matter/circulateMatter',
          },
          /*  {
            name: '我的转办',
            icon: 'icon-wodezhuanban',
            iconColor: '#FF8A46',
            path: '/matter/myDelegate',
          }, */
        ],
        applyClassify: [],
      }
    },
    created() {
      this.getLatestApp()
      this.getApplyList()
    },
    methods: {
      getApplyList() {
        getApplyData().then((res) => {
          if (res && res.length) {
            this.applyClassify = res.map((item) => {
              let childrenAppList = []
              if (item.children && item.children.length) {
                childrenAppList = item.children.map((it) => it.appList).flat()
              }
              return {
                ...item,
                appList: childrenAppList.length
                  ? [...item.appList, ...childrenAppList]
                  : item.appList,
              }
            })
          }
        })
      },
      handleSearch(val) {
        const allApply = this.applyClassify.map((item) => item.appList).flat()
        this.searchResultList = allApply.filter((item) =>
          item.name.includes(val)
        )
      },
      handleApplyClick(item) {
        // 统计点击次数
        addRecentlyAppsCount(item.id)
        this.getLatestApp()
        let content = {}

        if ([FORM_LIST, CHART, NEW_PROCESS].includes(item.mode)) {
          content = JSON.parse(item.content)
        }
        switch (item.mode) {
          case WEBSITE:
            this.$router.push(item.content)
            break
          case STATION_ADDRESS:
            window.location.href = item.content
            break
          case FORM_LIST:
            this.$router.push({
              path: '/worker/formList',
              query: {
                alias: content.alias,
                name: content.name,
              },
            })
            break
          case CHART:
            this.$router.push({
              path: '/worker/previewChart',
              query: {
                chartId: content.id,
                name: content.name,
              },
            })
            break
          case NEW_PROCESS:
            this.$router.push({
              path: '/matter/startProcess',
              query: {
                defId: content.id,
                from: 'worker',
              },
            })
            break
        }
      },
      getLatestApp() {
        getRecentlyApps().then((res) => {
          if (res && res.length) {
            this.latestList = res
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .worker {
    height: $vh;
    &-header {
      &--title {
        height: 44px;
        line-height: 44px;
        background: $base-white-color;
        text-align: center;
        font-size: 17px;
        font-weight: 800;
        color: #222222;
        border-bottom: 1px solid #f6f6f6;
      }
    }
    &-search {
      padding: 16px 16px 0 16px;
      ::v-deep {
        .van-search__content {
          padding-left: 8px;
          border-radius: 8px;
        }
      }
      &--result {
        padding: 16px 0 8px 16px;
        color: #262626;
        font-size: 14px;
      }
    }

    &-content {
      height: calc(#{$vh} - 145px);
      overflow-y: scroll;
    }
    &-center {
      background: #fff;
      &--title {
        padding: 16px 0 8px 16px;
        font-size: 17px;
        font-weight: bold;
        color: $base-text-color;
      }
    }
  }
  .has-bg {
    background: #fff;
  }
</style>