<template>
  <a-modal
    centered
    class="merchantInfoManagement-modal"
    :footer="null"
    :maskClosable="false"
    :title="title"
    v-model="isShow"
    @cancel="isShow=false"
    :width="960">
    <a-spin :spinning="spinning" tip="Loading...">
      <div style="max-height: 400px;overflow: auto;" ref="merchantInfoDetail">
        <!-- 基础信息 -->
        <a-card title="基础信息" size="small" style="margin-bottom: 15px;">
          <a-descriptions :column="2" bordered size="small">
            <a-descriptions-item label="经销商名称">{{ form&&form.dealerName ? form.dealerName : '--' }}</a-descriptions-item>
            <a-descriptions-item label="经销商别名">{{ form&&form.dealerAlias ? form.dealerAlias : '--' }}</a-descriptions-item>
            <a-descriptions-item label="商户类型">{{ form&&form.dealerTypeName1 ? form.dealerTypeName1+'>'+form.dealerTypeName2 : '--' }}</a-descriptions-item>
            <a-descriptions-item label="联系人1">{{ form&&form.contact ? form.contact : '--' }}</a-descriptions-item>
            <a-descriptions-item label="联系手机1">{{ form&&form.contactMobile ? form.contactMobile : '--' }}</a-descriptions-item>
            <a-descriptions-item label="联系角色1">{{ form&&form.contactRole ? form.contactRole : '--' }}</a-descriptions-item>
            <a-descriptions-item label="联系电话">{{ form&&form.dealerTelephone ? form.dealerTelephone : '--' }}</a-descriptions-item>
            <a-descriptions-item label="地址">
              <span v-if="form&&(form.provinceName || form.cityName || form.districtName || form.address)">
                {{ form&&form.provinceName ? form.provinceName : '' }}
                {{ form&&form.cityName ? form.cityName : '' }}
                {{ form&&form.districtName ? form.districtName : '' }}
                {{ form&&form.address ? form.address : '' }}
              </span>
              <span v-else>--</span>
            </a-descriptions-item>
            <a-descriptions-item v-if="!isAudit&&form&&form.auditState != 'WAIT'" label="授权类型">{{ form&&form.menuMouldIdDictValue ? form.menuMouldIdDictValue : '--' }}</a-descriptions-item>
            <a-descriptions-item label="财务编码">{{ form&&form.kdMidCustomerFnumber ? form.kdMidCustomerFnumber : '--' }}</a-descriptions-item>
            <a-descriptions-item label="默认仓库">{{ form&&form.defaultWarehouseName ? form.defaultWarehouseName : '--' }}</a-descriptions-item>
            <!-- <a-descriptions-item label="轮胎省仓">{{ form&&form.tireStorage ? form.tireStorage : '--' }}</a-descriptions-item> --> -->
          </a-descriptions>
        </a-card>
        <a-card title="公司信息" size="small" style="margin-bottom: 15px;">
          <a-descriptions :column="2" bordered size="small">
            <a-descriptions-item label="经营方式">{{ form&&form.busniessMode ? form.busniessMode : '--' }}</a-descriptions-item>
            <a-descriptions-item label="经营项目">{{ form&&form.busniessItmes ? form.busniessItmes : '--' }}</a-descriptions-item>
            <a-descriptions-item label="营业执照名称">{{ form&&form.licenseName ? form.licenseName : '--' }}</a-descriptions-item>
            <a-descriptions-item label="公司规模">{{ form&&form.busniessScope ? form.busniessScope : '--' }}</a-descriptions-item>
            <a-descriptions-item label="成立时间">{{ form&&form.buildDate ? form.buildDate : '--' }}</a-descriptions-item>
            <a-descriptions-item label="一般纳税人">
              <span v-if="form&&form.isTaxpayer">{{ form&&form.isTaxpayer == 1 ? '是':'否' }}</span>
              <span v-else>--</span>
            </a-descriptions-item>
            <a-descriptions-item label="身份证号码">{{ form&&form.indentityCard ? form.indentityCard : '--' }}</a-descriptions-item>
            <a-descriptions-item label="生日">{{ form&&form.brithday ? form.brithday : '--' }}</a-descriptions-item>
            <a-descriptions-item label="籍贯">{{ form&&form.nativePlace ? form.nativePlace : '--' }}</a-descriptions-item>
            <a-descriptions-item label="邮箱">{{ form&&form.mail ? form.mail : '--' }}</a-descriptions-item>
            <a-descriptions-item label="联系人2">{{ form&&form.contact2 ? form.contact2 : '--' }}</a-descriptions-item>
            <a-descriptions-item label="联系角色2">{{ form&&form.contractRole2 ? form.contractRole2 : '--' }}</a-descriptions-item>
            <a-descriptions-item label="联系手机2">{{ form&&form.contactMobile2 ? form.contactMobile2 : '--' }}</a-descriptions-item>
            <a-descriptions-item label="邮政编码">{{ form&&form.zipCode ? form.zipCode : '--' }}</a-descriptions-item>
            <a-descriptions-item label="收货人">{{ form&&form.receiveContact ? form.receiveContact : '--' }}</a-descriptions-item>
            <a-descriptions-item label="收货人电话">{{ form&&form.receiveMobile ? form.receiveMobile : '--' }}</a-descriptions-item>
            <a-descriptions-item label="收货地址">
              <span v-if="form&&(form.receiveProvinceName || form.receiveCityName || form.receiveDistrictName || form.receiveAddress)">
                {{ form&&form.receiveProvinceName ? form.receiveProvinceName : '' }}
                {{ form&&form.receiveCityName ? form.receiveCityName : '' }}
                {{ form&&form.receiveDistrictName ? form.receiveDistrictName : '' }}
                {{ form&&form.receiveAddress ? form.receiveAddress : '' }}
              </span>
              <span v-else>--</span>
            </a-descriptions-item>
            <a-descriptions-item label="银行账户">{{ form&&form.tradeAccountName ? form.tradeAccountName : '--' }}</a-descriptions-item>
            <a-descriptions-item label="开户行">{{ form&&form.tradeBankName ? form.tradeBankName : '--' }}</a-descriptions-item>
            <a-descriptions-item label="银行账号">{{ form&&form.tradeBankAccount ? form.tradeBankAccount : '--' }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
        <a-card title="总部信息" size="small">
          <a-descriptions :column="2" bordered size="small">
            <a-descriptions-item label="箭冠汽配代码">{{ form&&form.jgAutoPartsCode ? form.jgAutoPartsCode : '--' }}</a-descriptions-item>
            <a-descriptions-item label="门头更换日期">{{ form&&form.jgDoorHeaderChangeTime ? form.jgDoorHeaderChangeTime : '--' }}</a-descriptions-item>
            <a-descriptions-item label="特约价是否可见">
              <span v-if="form&&form.isShowSpecialPrice">{{ form&&form.isShowSpecialPrice == 1 ? '是':'否' }}</span>
              <span v-else>--</span>
            </a-descriptions-item>
            <a-descriptions-item label="备注">{{ form&&form.remark ? form.remark : '--' }}</a-descriptions-item>
          </a-descriptions>
        </a-card>
      </div>
      <div class="btn-cont">
        <a-button
          id="merchantInfoManagement-audit"
          size="large"
          v-if="isAudit"
          type="primary"
          class="button-primary"
          style="margin-right: 50px;"
          @click="visibleAudit=true">审核</a-button>
        <a-button id="merchantInfoManagement-back" size="large" @click="isShow = false" style="font-size: 12px;">返回列表</a-button>
      </div>
    </a-spin>
    <!-- 审核 -->
    <auditModal :openModal="visibleAudit" :spinning="spinningAudit" @close="visibleAudit=false" @ok="auditOrder('PASS')" @fail="auditOrder('REJECT')" />
  </a-modal>
</template>

<script>
// 组件
import auditModal from '@/views/common/auditModal.vue'
// 接口
import { dealerAudit, dealerDetailBySn, dealerFindUpdateInfoBySn } from '@/api/dealer'
export default {
  name: 'MerchantInfoManagementModal',
  components: { auditModal },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemId: { // 单据id
      type: [Number, String],
      default: ''
    },
    isAudit: Boolean // 是否显示审核按钮
  },
  data () {
    return {
      spinning: false,
      isShow: this.openModal, //  是否打开弹框
      form: null, // 详情内容数据
      title: '', // 弹窗标题
      visibleAudit: false, // 是否打开审核弹窗
      spinningAudit: false// 审核按钮加载状态
    }
  },
  methods: {
    // 审核
    auditOrder (auditState) {
      this.spinningAudit = true
      dealerAudit({
        dealerAuditSn: this.form.dealerAuditSn,
        auditState: auditState
      }).then(res => {
        if (res.status == 200) {
          this.visibleAudit = false
          this.$message.success(res.message)
          this.$emit('ok')
          this.spinningAudit = false
        } else {
          this.visibleAudit = false
          this.spinningAudit = false
        }
      })
    },
    // 详情编辑
    getDetail () {
      this.spinning = true
      // 根据是否审核状态选择不同的接口
      const funs = this.isAudit ? dealerFindUpdateInfoBySn : dealerDetailBySn
      funs({ sn: this.itemId }).then(res => {
        if (res.status == 200) {
          this.form = res.data
        }
        this.spinning = false
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.form = null
      } else {
        this.title = this.isAudit ? '审核资料' : '查看详细'
        this.$nextTick(() => {
          this.$refs.merchantInfoDetail.scrollTop = 0
        })
      }
    },
    itemId (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.getDetail()
      }
    }
  }
}
</script>

<style lang="less">
  .merchantInfoManagement-modal{
    .ant-modal-body {
      padding: 24px!important;
    }
    .ant-descriptions-item-label.ant-descriptions-item-colon{
      width: 130px;
    }
    .merchantInfoManagement-cont-m{
      margin-bottom: 10px;
    }
    .btn-cont {
      text-align: center;
      margin: 15px 0 10px;
      button{
        width: 150px;
      }
    }
  }
</style>
