<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <a-card :bordered="false" v-show="visible" class="card" title="详情">
    <a-row :gutter="48" slot="extra">
      <a-col :md="48" :sm="48">
        <span class="table-page-search-submitButtons" style="float: right">
          <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>
        </span>
      </a-col>
    </a-row>

    <title-divider title="基本信息" width="90px"></title-divider>
    <detail-list title="" :col="3">
      <detail-list-item term="账号">{{ model.account }}</detail-list-item>
      <detail-list-item term="名称">{{ model.name }}</detail-list-item>
      <detail-list-item term="类型">{{ BaseTool.Util.getCustomRenderMultiDictValue(model.type, typeMap) }}</detail-list-item>
      <detail-list-item term="单位性质">{{ BaseTool.Util.getCustomRenderDictValue(model.unitNature, natureMap) }}</detail-list-item>
      <detail-list-item term="单位法人">{{ model.legalPerson }}</detail-list-item>
      <detail-list-item term="电话">{{ model.phone }}</detail-list-item>
      <detail-list-item term="联系人">{{ model.contactPerson }}</detail-list-item>
      <detail-list-item term="注册资本">{{ BaseTool.Amount.formatter(model.registerCapital) }}</detail-list-item>
      <detail-list-item term="注册地址">{{ model.registerAddress }}</detail-list-item>
      <detail-list-item term="供货类别">{{ BaseTool.Util.getCustomRenderMultiDictValue(model.supplyType, supplyTypeMap) }}</detail-list-item>
      <detail-list-item term="授权书">{{ model.authorization }}</detail-list-item>
      <detail-list-item term="邮箱">{{ model.email }}</detail-list-item>
      <detail-list-item term="QQ">{{ model.qq }}</detail-list-item>
      <detail-list-item term="微信">{{ model.wechat }}</detail-list-item>
      <detail-list-item term="状态"><badge :status="DictCache.COLOR.SUPPLIER_STATUS[model.status]" :text="statusMap[model.status]"></badge></detail-list-item>
      <detail-list-item term="申请时间">{{ model.applyTime }}</detail-list-item>
      <detail-list-item term="提交审核时间">{{ model.submitTime }}</detail-list-item>
      <detail-list-item term="审核时间">{{ model.auditTime }}</detail-list-item>
      <detail-list-item term="创建人">{{ model.createdUserName }}</detail-list-item>
      <detail-list-item term="更新时间">{{ model.updateTime }}</detail-list-item>
      <detail-list-item term="审核描述">{{ model.refuseReason }}</detail-list-item>
    </detail-list>
    <detail-list title="" :col="2">
      <detail-list-item term="供货品牌">{{ model.supplyBrand }}</detail-list-item>
      <detail-list-item term="主营业务">{{ model.mainBusiness }}</detail-list-item>
      <detail-list-item term="经营范围">{{ model.businessScope }}</detail-list-item>

      <detail-list-item term="备注">{{ model.remark }}</detail-list-item>
    </detail-list>

    <title-divider title="资质信息" width="90px"></title-divider>
    <detail-list title="" :col="1">
      <detail-list-item term="" v-if="imgSize > 0">
        <viewer :images="model.imgUrls" @inited="inited" ref="viewer" :index="1" >
          <img v-for="(src,index) in model.imgUrls" :src="src" :key="index" class="image">
        </viewer>
      </detail-list-item>
      <detail-list-item term="" v-if="imgSize === 0">
        暂无
      </detail-list-item>
    </detail-list>

<!--    <title-divider title="审批信息" width="90px" v-if="auditFlag"></title-divider>
    <a-card :bordered="false" title="" v-if="auditFlag">
      <a-steps
        :direction="'horizontal'"
        :current="current"
        :status="status"
        progressDot>

        <a-step
          v-for="item in currentNodes"
          :key="item.nodeValue"
          :title="item.nodeName"
        >
          <template v-slot:description v-if="item.userName">
            <div class="antd-pro-pages-profile-advanced-style-stepDescription">
              {{ item.userName }}
              <div>{{ item.createTime }}</div>
            </div>
          </template>
        </a-step>
      </a-steps>
    </a-card>
    <a-table
      v-if="auditFlag"
      :columns="auditColumns"
      :dataSource="auditData"
      :pagination="false"
    >
    </a-table>-->

  </a-card>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import { getAuditRecord } from '@/api/activiti/activiti'
const DetailListItem = DetailList.Item

export default {
  name: 'SupplierDetail',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
      confirmLoading: false,
      visible: false,
      imgSize: 0,
      auditColumns: [
        {
          title: '审批人',
          dataIndex: 'userName',
          key: 'userName',
          width: '20%'
        },
        {
          title: '审批时间',
          dataIndex: 'createTime',
          key: 'auditTime',
          width: '30%',
          scopedSlots: { customRender: 'keyword' }
        },
        {
          title: '审批结果',
          dataIndex: 'flag',
          key: 'flag',
          width: '30%',
          customRender: (text, row, index) => {
            return text ? '通过' : '不通过'
          }
        },
        {
          title: '审批意见',
          dataIndex: 'opinion',
          key: 'opinion'
        }
      ],
      auditData: [],
      nodeMap: {},
      nodes: [],
      auditFlag: false,
      current: 0,
      status: 'process',
      currentNodes: [],
      // 下拉框map
      model: {
        'account': null,
        'name': null,
        'type': null,
        'unitNature': null,
        'legalPerson': null,
        'phone': null,
        'contactPerson': null,
        'registerCapital': null,
        'registerAddress': null,
        'supplyType': null,
        'authorization': null,
        'supplyBrand': null,
        'mainBusiness': null,
        'businessScope': null,
        'refuseReason': null,
        'qq': null,
        'wechat': null,
        'imgUrls': null,
        'email': null,
        'status': null,
        'applyTime': null,
        'auditTime': null,
        'submitTime': null,
        'delFlag': null,
        'remark': null,
        'createdUserId': null,
        'updateUserId': null,
        'updateUserName': null,
        'updateTime': null
      }
    }
  },
  created () {
    // 下拉框map
    this.nodeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SUPPLIER_AUDIT_NODE)
  },
  props: {
    statusMap: {
      type: Object,
      default: () => {}
    },
    typeMap: {
      type: Object,
      default: () => {}
    },
    supplyTypeMap: {
      type: Object,
      default: () => {}
    },
    natureMap: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    base (record) {
      this.visible = true
      const imgUrls = record.imgUrls
      if (imgUrls) {
        record.imgUrls = imgUrls.split(',')
      } else {
        record.imgUrls = []
      }
      this.model = record
      this.imgSize = this.model.imgUrls.length
      this.getAuditRecords(record)
      // this.$viewer.show()
    },
    inited (viewer) {
      this.$viewer = viewer
      // this.$viewer.index = 0
      // // 不要他的按钮
      // this.$viewer.options.button = false
      // // 不要他的底部缩略图
      // this.$viewer.options.navbar = false
      // // 不要他的底部标题
      // this.$viewer.options.title = false
      // // 不要他的底部工具栏
      // this.$viewer.options.toolbar = false
    },
    getAuditRecords (record) {
      const processInstanceId = record.processInstanceId
      if (processInstanceId) {
        this.auditFlag = true
        const currentNodes = []
        for (const value in this.nodeMap) {
          currentNodes.push({
            nodeValue: value,
            nodeName: this.nodeMap[value]
          })
        }
        getAuditRecord(processInstanceId).then(res => {
          this.auditData = res.data
          for (let i = 0; i < this.auditData.length; i++) {
            const item = this.auditData[i]
            for (let j = 0; j < currentNodes.length; j++) {
              const elem = currentNodes[j]
              if (item.node === parseInt(elem.nodeValue)) {
                elem.createTime = item.createTime
                elem.userName = item.userName
                elem.flag = item.flag
                elem.opinion = item.opinion
                currentNodes[j] = elem
              }
            }
            if (item.node === 0) {
              break
            }
          }
          this.currentNodes = currentNodes
          const first = this.auditData[0]
          const flag = first.flag
          const node = first.node
          let index = 1
          for (let j = 0; j < currentNodes.length; j++) {
            const elem = currentNodes[j]
            if (node === parseInt(elem.nodeValue)) {
              index = j
            }
          }
          if (!flag) {
            this.status = 'error'
            this.current = index
          } else {
            this.current = index + 1
            if (this.current === currentNodes.length - 1) {
              this.status = 'finish'
            } else {
              this.status = 'process'
            }
          }
        })
      }
    },
    handleCancel () {
      this.visible = false
      this.confirmLoading = false
      this.$emit('ok', {})
    }

  }
}
</script>
<style scoped>
  .image {
    width: calc(20% - 10px);
    cursor: pointer;
    margin: 5px;
    display: inline-block;
  }
</style>
