<template>
  <a-modal
    v-model="visible"
    :title="title"
    destroy-on-close
    v-bind="{ width: 800 }"
    :mask-closable="false"
  >
    <a-card :class="$style.warp">
      <table :class="$style['act-table']">
        <thead>
          <tr>
            <td :class="$style['column-title']">交接人</td>
            <td :class="$style['column-act']">{{ record ? record.fromUserName : '' }}</td>
          </tr>
          <tr>
            <td>承接人</td>
            <td>{{ record ? record.toUserName : '' }}</td>
          </tr>
          <tr>
            <td>交接时间</td>
            <td>{{ moment(record ? record.transferDate : '').format('YYYY-MM-DD HH:mm:ss') }}</td>
          </tr>
          <tr v-for="item in attrInfo" :key="item.id">
            <td>
              {{ item.name }}
              <a-tooltip v-if="item.id === 'processedNumber'">
                <span slot="title">
                  已办包含已处理和已办结的数据
                </span>
                <a-icon type="question-circle-o" />
              </a-tooltip>
            </td>
            <td>
              {{
                ['roleInfo', 'userGroupInfo'].indexOf(item.id) > -1 ? item.value.length : item.value
              }}
            </td>
          </tr>
        </thead>
      </table>
      <a-collapse v-for="item in attrInfo" :key="item.id" accordion @change="getList">
        <a-collapse-panel :key="item.id" :header="item.label">
          <template v-if="['roleInfo', 'userGroupInfo'].indexOf(item.id) > -1">
            <div
              v-for="(info, index) in item.value"
              :key="info.id"
              :class="$style[index === 0 ? 'detail-first-row' : 'detail-row']"
            >
              {{ info.name }}
            </div>
          </template>
          <template v-else>
            <div
              v-for="(info, index) in item.details"
              :key="info"
              :class="$style[index === 0 ? 'detail-first-row' : 'detail-row']"
            >
              {{ info }}
            </div>
          </template>
        </a-collapse-panel>
      </a-collapse>
    </a-card>

    <template slot="footer">
      <a-button
        type="white"
        @click="
          () => {
            visible = false
          }
        "
        >取消</a-button
      >
    </template>
  </a-modal>
</template>

<script>
import { message } from 'ant-design-vue'
import moment from 'moment'
import components from './_import-components/sd-handover-log-import'
import handoverService from './handover-service'

export default {
  name: 'SdHandoverLog',
  metaInfo: {
    title: 'SdHandoverLog',
  },
  components,
  data() {
    return {
      loadingMsg: null,
      title: '工作交接详情',
      visible: false,
      record: null,
      moment,
      isShow: false,
      attrInfo: [
        {
          name: '待办数量',
          id: 'todoNumber',
          key: 'todoIds',
          label: '交接待办信息',
          reqType: 'todo',
          value: 0,
          details: null,
        },
        {
          name: '已办数量',
          id: 'processedNumber',
          label: '交接已办信息',
          key: 'processedIds',
          reqType: 'processed',
          value: 0,
          details: null,
        },
        {
          name: '待阅数量',
          id: 'toReadNumber',
          label: '交接待阅信息',
          key: 'toReadIds',
          reqType: 'toread',
          value: 0,
          details: null,
        },
        {
          name: '已阅数量',
          id: 'readNumber',
          label: '交接已阅信息',
          key: 'readIds',
          reqType: 'readed',
          value: 0,
          details: null,
        },
        {
          name: '角色数量',
          id: 'roleInfo',
          label: '交接角色信息',
          value: [],
        },
        {
          name: '用户组数量',
          id: 'userGroupInfo',
          label: '交接用户组信息',
          value: [],
        },
      ],
    }
  },
  methods: {
    show(record) {
      this.record = record
      const oTransferNum = JSON.parse(record.transferNum)
      this.attrInfo.forEach((item) => {
        if (['roleInfo', 'userGroupInfo'].indexOf(item.id) > -1) {
          if (oTransferNum[item.id] !== 0) {
            item.value = Object.keys(oTransferNum[item.id]).map((info) => {
              return {
                id: info,
                name: oTransferNum[item.id][info],
              }
            })
          }
        } else {
          item.value = oTransferNum[item.id]
        }
      })
      this.visible = true
      this.isShow = true
    },
    getList(key) {
      if (['roleInfo', 'userGroupInfo'].indexOf(key) > -1 || !key) {
        return
      }
      const item = this.attrInfo.find((info) => {
        return info.id === key
      })
      const oTransferNum = JSON.parse(this.record.transferNum)
      if (item.value === 0) {
        return []
      } else {
        if (item.details) {
          return item.details
        } else {
          this.loadingMsg = message.loading({
            key: this.msgKey,
            content: '处理中...',
            duration: 0,
          })
          handoverService
            .getDetail({ type: item.reqType, ids: oTransferNum[item.key].join(',') })
            .then((res) => {
              item.details = res.data
            })
            .catch(() => message.error('处理失败'))
            .finally(() => {
              this.loadingMsg?.()
            })
        }
      }
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

.warp {
  .act-table {
    width: 100%;

    .column-title {
      width: 30%;
    }
    td {
      padding: 5px 0 5px 5px;
      border: 1px solid;
    }
  }
  .detail-row {
    padding: 8px;
    border-top: 1px solid #d9d9d9;
  }
  .detail-first-row {
    padding: 8px;
  }
  :global(.ant-collapse-content > .ant-collapse-content-box) {
    padding: 0 16px;
  }
}
</style>
