<template>
  <div v-loading="cardLoading" class="card-todo card-mode">
    <div v-for="item in cardData" :key="item.key" class="card-todo__wrap">
      <span class="card-items-title">
        {{ item.procDefName }}
        <el-button v-if="isShowDetail" type="text" @click="handleBack">
          返回
        </el-button>
      </span>
      <span v-if="!isShowDetail" class="card-items-title items-total">
        ({{ cardType === 'todo' ? cardTodoCount[item.key] : item.count }})
      </span>
      <div class="card-content">
        <div
          v-for="it in currentShowCardList(item.list)"
          :key="it.id"
          class="card-item__wrap"
          :class="{ 'is-checked-item': it.checked }"
        >
          <el-checkbox
            v-model="it.checked"
            @change="(value) => handleCheckbox(value, it)"
          ></el-checkbox>
          <div class="card-item-content">
            <div class="card-item-top" @click="handleCardClick(it)">
              <ht-icon
                name="dot"
                :class="statusDotClassName[it.status]"
              ></ht-icon>
              <span class="item-text item-subject">{{ it.subject }}</span>
            </div>
            <div class="item-bottom">
              <div class="card-item">
                <ht-icon name="user"></ht-icon>
                <span class="item-text">{{ it.creator }}</span>
              </div>
              <div class="card-item item-padding">
                <!-- <i class="el-icon-document-copy"></i> -->
                <span
                  class="item-text copy-id"
                  @click="(event) => clipboard(it.procInstId, event)"
                >
                  复制流程编号
                </span>
              </div>
            </div>
          </div>
        </div>
        <div
          v-if="isShowMore(item.list) && !isShowDetail"
          class="card-more"
          @click="handleClick(item.list)"
        >
          <span>
            查看全部
            <ht-icon
              name="cardMore"
              class="card-more-icon"
              scale="0.9"
            ></ht-icon>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { STATUS_DOT_CLASS_NAME_MAP } from './const'

  import { getTodoCardCount } from '@/api/process'

  import clipboard from '@/utils/clipboard'

  export default {
    name: 'CardTodo',
    props: {
      cardData: {
        type: [Object, Array],
        default: () => {
          return {}
        },
      },
      cardLoading: {
        type: Boolean,
        default: false,
      },
      cardTodoDetailList: {
        type: Array,
        default: () => {
          return []
        },
      },
      cardType: {
        type: String,
        default: 'todo',
      },
    },
    data() {
      return {
        statusDotClassName: STATUS_DOT_CLASS_NAME_MAP,
        isShowDetail: false,
        cardTodoCount: {},
        procDefKey: '',
        procDefName: '',
        currentCheckedList: [],
      }
    },
    computed: {
      currentShowCardList() {
        return (list) => {
          const lessThanFiveCardList = list?.filter((item, index) => index < 10)
          return this.isShowDetail ? list : lessThanFiveCardList
        }
      },
      isShowMore() {
        return (list) => {
          return list?.length > 10
        }
      },
    },
    mounted() {
      if (this.cardType === 'todo') {
        this.getTodoCardCount()
      }
    },
    methods: {
      handleClick(list) {
        const procDefKey = list[0]?.procDefKey
        const procDefName = list[0]?.procDefName
        this.isShowDetail = true
        this.$emit('click-more', { procDefKey, procDefName })
      },
      getTodoCardCount() {
        getTodoCardCount().then((res) => {
          if (res.state) {
            this.cardTodoCount = res.value
          }
        })
      },
      handleCardClick(row) {
        this.$emit('card-click', row)
      },
      handleBack() {
        // this.isShowDetail = false
        this.$emit('card-back', () => {
          this.isShowDetail = false
        })
      },
      handleCheckbox(val, item) {
        val && this.currentCheckedList.push(item)
        this.$emit('checkbox-change', this.currentCheckedList)
      },
      //复制流程实例id
      clipboard,
    },
  }
</script>

<style lang="scss" scoped>
  @mixin title-style {
    font-size: $base-font-size-big;
    color: $base-dark-title-color;
    font-weight: bold;
  }
  .card-todo {
    .card-todo__wrap {
      .card-items-title {
        font-weight: 300;
      }
      .card-content {
        display: flex;
        flex-wrap: wrap;
        margin: 16px 0px 40px 1px;
        .card-item__wrap {
          height: 84px;

          .card-item-content {
            width: 100%;
            padding-left: 8px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .item-bottom {
              display: flex;
              justify-content: space-between;
              .item-text {
                padding-left: 6px;
                font-size: $base-font-size-small;
                color: $base-card-second-color;
              }
              .copy-id {
                cursor: pointer;
                color: var(--themeColor);
              }
            }
            .card-item-top {
              display: flex;
              cursor: pointer;
              .item-subject {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                flex: 1;
                font-size: $base-font-size-default;
                color: $base-dark-title-color;
                font-weight: 200;
              }
            }
          }
        }
        .is-checked-item {
          border-color: var(--themeColor);
          box-shadow: 0px 0px 4px rgba(var(--themeColorRgb), 0.65);
        }
      }
    }
  }
</style>