<template>
  <div class="process-overview">
    <ht-table
      :data="cardList"
      :page-result="pageResult"
      :selectable="false"
      :quick-search-props="quickSearchProps"
      :quick-search-width="300"
      :show-export="false"
      pagination-justify="end"
      :show-custom-column="false"
      :card-item-mode="false"
      card-view
      :nopagination="isNoPagination"
      :page-sizes="pageSizes"
      @load="loadData"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
      <template #search>
        <ht-table-search-panel
          :divide="3"
          :label-width="80"
          display-style="block"
        >
          <ht-table-search-field
            label="流程名称"
            prop="name"
            operation="LIKE"
          />
          <ht-table-search-field
            label="创建时间"
            prop="create_time_"
            type="datetimerange"
            operation="BETWEEN"
          />
        </ht-table-search-panel>
      </template>
      <template #card="{ data }">
        <card-view
          ref="cardView"
          v-loading="cardLoading"
          :card-data="data"
          :matter-classify-id="matterClassifyId"
          :is-not-pagination="isNoPagination"
          @card-click="handleClickCard"
          @click-card-more="handleClickCardMore"
          @back-card="handleBack"
        ></card-view>
      </template>
      <template #empty-card>
        <el-image :src="noDataImg"></el-image>
        <p class="no-data-text">暂无流程哦</p>
      </template>
    </ht-table>

    <leader-dialog ref="leaderDialog" />
  </div>
</template>

<script>
  import LeaderDialog from '@/views/matter/components/LeaderDialog'
  import CardView from './CardView'

  import matter from '@/mixins/matter'
  import tableHeight from '@/mixins/tableHeight'
  import { getProcessList, getProcessCard, getFlowTree } from '@/api/process'
  export default {
    name: 'ProcessOverview',
    components: {
      LeaderDialog,
      CardView,
    },
    mixins: [matter, tableHeight],
    data() {
      return {
        isNoPagination: true,
        tableData: [],
        cardList: [],
        cardLoading: false,
        quickSearchProps: [
          {
            prop: 'name',
            label: '流程名称',
          },
        ],
        isMore: false,
        isPageChange: false,
        isPageNumChange: false,
        isSearchByName: false,
        processName: '',
        noDataImg: require('@/assets/nodata_images/no-data.png'),
      }
    },
    computed: {
      isGetProcessList() {
        return (
          this.isPageChange || this.isPageNumChange || this.matterClassifyId
        )
      },
    },
    mounted() {
      this.getProcessCardList()
    },
    methods: {
      loadData(param, cb) {
        const data = {
          pageBean: this.pageResult,
          ...param,
          querys: this.getCurrentQuery(param, 'type_id_'),
        }
        if (this.isGetProcessList) {
          this.getProcessList(data, cb)
        } else {
          this.getProcessCardList(data, cb)
          this.$nextTick(() => {
            this.$refs.cardView.getProcessClassifyCount(data)
          })
        }
      },
      getProcessList(param, cb) {
        getProcessList(param)
          .then((res) => {
            const { rows, page, pageSize, total } = res
            this.pageResult = {
              page,
              pageSize,
              total,
            }
            if (!rows.length) {
              this.cardList = []
              return
            }
            this.isNoPagination = false
            !this.isMore && this.$refs.cardView?.handleHideDetail()
            this.cardList = [
              {
                list: rows || [],
                title: this.getCurrentProcessClassifyName(rows),
              },
            ]
          })
          .finally(() => {
            cb?.()
          })
      },
      handleSizeChange() {
        this.isPageNumChange = true
      },
      handleCurrentChange() {
        this.isPageChange = true
      },
      getCurrentProcessClassifyName(data) {
        const parentNodeId = this.matterClassifyId?.split(',')[0]
        const resultItem = data?.find((item) => item.typeId === parentNodeId)
        return resultItem?.typeName || ''
      },
      handleClickCard(row) {
        this.$refs.leaderDialog.handleNewProcessJumps(row)
      },
      getProcessCardList(data, cb) {
        this.isNoPagination = true
        this.cardLoading = true
        if (data && data.querys && data.querys.length > 0) {
          const queryItem = data.querys.find((item) => item.property === 'name')
          if (queryItem) {
            this.processName = queryItem.value
          }
        }
        getProcessCard({
          querys: (data && data.querys) || [],
        })
          .then(async (res) => {
            if (res.state) {
              const cardObj = res.value || {}
              let processCardList = []
              const data = await getFlowTree()
              //为了按分类树的顺序在概览显示流程，要转化tree为list然后给最后的卡片list排序
              let list = this.treeToList(data)
              list.forEach((item) => {
                for (const key in cardObj) {
                  if (
                    Object.hasOwnProperty.call(cardObj, key) &&
                    key == item.id
                  ) {
                    processCardList.push({
                      key,
                      list: cardObj[key],
                      title: cardObj[key]?.[0]?.typeName,
                    })
                    delete cardObj[key]
                  }
                }
              })
              this.cardList = processCardList
              this.$nextTick(() => {
                this.$refs.cardView?.handleHideDetail()
              })
            }
          })
          .finally(() => {
            this.cardLoading = false
            cb?.()
          })
      },
      handleClickCardMore(key) {
        this.isNoPagination = false
        this.isMore = true
        this.matterClassifyId = key
        const params = {
          pageBean: this.pageResult,
          querys: [
            {
              property: 'type_id_',
              value: key,
              group: 'typeId',
              operation: 'IN',
              relation: 'AND',
            },
            {
              property: 'name',
              value: this.processName,
              group: 'quick',
              relation: 'OR',
              operation: 'LIKE',
            },
          ],
        }
        !key && delete params.querys
        this.getProcessList(params)
      },
      handleBack(cb) {
        this.matterClassifyId = ''
        this.isPageChange = false
        this.isPageNumChange = false
        this.loadData({}, cb)
      },
      //转化tree为list
      treeToList(tree) {
        let list = [] //结果list
        tree.forEach((node) => {
          if (node.children && node.children.length !== 0) {
            //遍历树的第一层,只有一个根结点
            this.toListDF(node.children, list) //遍历子树,并加入到list中.
          }
        })
        return list
      },
      toListDF(tree, list) {
        tree.forEach((node) => {
          list.push({
            id: node.id,
          })
          //如果有子结点,再遍历子结点
          if (node.children && node.children.length !== 0) {
            this.toListDF(node.children, list) //递归
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .process-overview {
    height: 100%;
    .reset-icon {
      overflow: unset;
      vertical-align: -0.1em;
      padding-right: 4px;
    }
    .reset-btn {
      color: $base-dark-title-color;
    }
    ::v-deep {
      .el-pagination {
        text-align: right;
      }
    }
  }
</style>