<template>
  <a-modal
    centered
    :footer="null"
    :maskClosable="false"
    class="audit-modal"
    :title="modalTit"
    v-model="isShow"
    @cancel="isShow=false"
    :width="550">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-form-model
        id="audit-modal-form"
        ref="ruleForm"
        :model="detailData"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
      >
        <a-form-model-item label="客户名称">{{ detailData&&detailData.buyerName || '--' }}</a-form-model-item>
        <a-form-model-item label="发货经销商">
          {{ detailData&&detailData.transferDealerName||'--' }}
        </a-form-model-item>
        <div style="margin:20px auto;width:80%;">由于<strong style="color:#ed1c24;">{{ detailData&&detailData.transferDealerName }}</strong>非<strong style="color:#ed1c24;">{{ detailData&&detailData.buyerName }}</strong>的轮胎上级或省仓，需上级审核通过后完成转单。</div>
      </a-form-model>
      <div class="btn-cont">
        <a-button id="audit-modal-back" @click="handleSave('0')">审核不通过</a-button>
        <a-button type="primary" style="margin-left: 15px;" id="audit-modal-save" @click="handleSave('1')">审核通过</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  name: 'AuditConfirmModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    detailData: {
      type: Object,
      default: () => {
        return null
      }
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      spinning: false
    }
  },
  computed: {
    modalTit () {
      const title = (this.detailData && this.detailData.transferDate) ? '（' + this.detailData.transferDate + '）' : ''
      return '转单申请' + title
    }
  },
  methods: {
    // 确认审核
    handleSave (val) {
      this.$emit('ok', val)
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      }
    }
  }
}
</script>

<style lang="less">
  .audit-modal{
    .ant-form-item{
      margin-bottom: 10px;
    }
    .btn-cont {
      text-align: center;
      margin: 40px 0 10px;
    }
  }
</style>
