<template>
  <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 type="primary" @click="save()">提交</a-button>
          <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.refuseReason }}</detail-list-item>
      <detail-list-item term="创建人">{{ model.createdUserName }}</detail-list-item>
      <detail-list-item term="更新时间">{{ model.updateTime }}</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"></title-divider>
    <a-row class="form-row" :gutter="16">
      <a-col :lg="12" :md="12" :sm="24">

        <a-radio-group v-model="auditFlag">
          <a-radio :value="1">通过</a-radio>
          <a-radio :value="0">拒绝</a-radio>
        </a-radio-group>
      </a-col>
    </a-row>
    <a-row class="form-row" :gutter="16">
      <a-col :lg="12" :md="12" :sm="24">
        <a-form-item
          label="审核描述"
        >
          <a-textarea
            v-model="refuseReason"/>
        </a-form-item>
      </a-col>
    </a-row>

  </a-card>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
import { audit, fetchSupplier } from '@/api/purchase/supplier'
const DetailListItem = DetailList.Item

export default {
  name: 'SupplierAudit',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
      confirmLoading: false,
      visible: false,
      auditFlag: 1,
      refuseReason: '',
      taskId: '',
      supplyTypeMap: {},
      typeMap: {},
      nodeMap: {},
      statusMap: {},
      natureMap: {},
      imgSize: 0,
      // 下拉框map
      model: {
        'id': null,
        '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.supplyTypeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.PURCHASE_TYPE)
    this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SUPPLIER_TYPE)
    this.statusMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SUPPLIER_STATUS)
    this.natureMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.SUPPLIER_NATURE)
  },
  props: {
  },
  methods: {
    base (record) {
      this.model = {}
      this.taskId = record.taskId
      fetchSupplier({ id: record.targetId }).then(res => {
        const data = res.data
        const imgUrls = data.imgUrls
        if (imgUrls) {
          this.model.imgUrls = imgUrls.split(',')
        } else {
          this.model.imgUrls = []
        }
        this.model = data
        this.visible = true
        this.imgSize = this.model.imgUrls.length
      })
    },
    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
    },
    save () {
      audit({ id: this.model.id, refuseReason: this.refuseReason, auditFlag: this.auditFlag, taskId: this.taskId })
        .then(() => {
          this.$message.info('操作成功')
          this.handleCancel()
        }).catch(() => {
          this.confirmLoading = false
        })
    },
    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>
