<template>
  <div class="my-collection card-mode">
    <ht-table
      ref="htTable"
      :data="collectionList"
      :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
      :page-sizes="pageSizes"
      @load="loadData"
    >
      <template #search>
        <ht-table-search-panel
          :divide="3"
          :label-width="80"
          display-style="block"
        >
          <ht-table-search-field
            label="流程名称"
            prop="def.name_"
            operation="LIKE"
          />
          <ht-table-search-field
            label="创建时间"
            prop="def.create_time_"
            type="datetimerange"
            operation="BETWEEN"
          />
        </ht-table-search-panel>
      </template>
      <template #card="{ data }">
        <ul class="card-content">
          <li
            v-for="(item, index) in data"
            :key="index"
            class="card-item__wrap card-item"
          >
            <span class="card-item-subject" @click="handleClickCard(item)">
              {{ item.name }}
            </span>
            <ht-icon
              class="collection-icon"
              name="collection"
              @click="handleCancelCollectProcess(item.defKey)"
            ></ht-icon>
          </li>
        </ul>
      </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 {
    getCollectionProcess,
    collectionProcessOrCancel,
  } from '@/api/process'

  import matter from '@/mixins/matter'
  import tableHeight from '@/mixins/tableHeight'

  export default {
    name: 'MyCollection',
    components: {
      LeaderDialog,
    },
    mixins: [matter, tableHeight],
    data() {
      return {
        collectionList: [],
        quickSearchProps: [
          {
            prop: 'def.name_',
            label: '流程名称',
          },
        ],
        noDataImg: require('@/assets/nodata_images/no-collection.png'),
      }
    },
    activated() {
      this.$refs.htTable.load(true)
    },
    methods: {
      loadData(parms, cb) {
        parms = parms || {}
        parms.querys = parms.querys || []
        if (this.$route.query && this.$route.query.flowKey) {
          parms.querys.push({
            property: 'def.def_key_',
            value: this.$route.query.flowKey,
            operation: 'EQUAL',
            group: 'main',
            relation: 'AND',
          })
        }
        parms.querys = this.getCurrentQuery(parms, 'type_id_')
        getCollectionProcess(parms)
          .then((res) => {
            if (res.state) {
              const { rows, page, pageSize, total } = res.value
              this.collectionList = rows
              this.pageResult = {
                page,
                pageSize,
                total,
              }
            }
          })
          .finally(() => {
            cb?.()
          })
      },
      handleCancelCollectProcess(defKey) {
        collectionProcessOrCancel(defKey, 'cancel').then(
          ({ state, message }) => {
            this.$message[state ? 'success' : 'error'](message)
            state && this.$refs.htTable.load()
          }
        )
      },
      handleClickCard(row) {
        //TODO:1.应用模块跳转2.是否窗口打开页面
        this.$refs.leaderDialog.handleNewProcessJumps(row)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .my-collection {
    height: 100%;
    .card-content {
      .collection-icon {
        cursor: pointer;
        color: var(--themeColor);
      }
      .card-item-subject {
        position: relative;
        margin-left: 20px;
        cursor: pointer;

        flex: 1;
        &::before {
          position: absolute;
          content: '';
          width: 8px;
          height: 8px;
          border-radius: 50%;
          border: 2px solid var(--themeColor);
          top: 2px;
          left: -20px;
        }
      }
    }
  }
</style>