<template>
  <a-modal
    centered
    class="productPricingAudit-modal"
    :footer="null"
    :maskClosable="false"
    title="定价审核"
    v-model="isShow"
    @cancel="isShow=false"
    :width="800">
    <a-spin :spinning="spinning" tip="Loading...">
      <!-- 定价审核 -->
      <div>
        <a-descriptions bordered :column="1">
          <a-descriptions-item label="成本价">
            <div v-if="detailsData && detailsData.supplierProductList" style="margin-top: 8px;">
              <p v-for="(item, index) in detailsData.supplierProductList" :key="index" style="margin: 0;">{{ ((item.cost || item.cost==0) ? toThousands(item.cost) : '--') + ' -- ' + (item.supplierName||'') + '；' }}</p>
            </div>
            <span v-else>--</span>
          </a-descriptions-item>
          <a-descriptions-item label="省级价">
            {{ detailsData && (detailsData.afterProvincePrice || detailsData.afterProvincePrice==0) ? toThousands(detailsData.afterProvincePrice) : '--' }}
            <span v-if="detailsData && (detailsData.afterProvincePrice != detailsData.beforeProvincePrice)">
              （原{{ (detailsData.beforeProvincePrice || detailsData.beforeProvincePrice==0) ? toThousands(detailsData.beforeProvincePrice) : '--' }}）
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="市级价">
            {{ detailsData && (detailsData.afterCityPrice || detailsData.afterCityPrice==0) ? toThousands(detailsData.afterCityPrice) : '--' }}
            <span v-if="detailsData && (detailsData.afterCityPrice != detailsData.beforeCityPrice)">
              （原{{ (detailsData.beforeCityPrice || detailsData.beforeCityPrice==0) ? toThousands(detailsData.beforeCityPrice) : '--' }}）
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="特约价">
            {{ detailsData && (detailsData.afterSpecialPrice || detailsData.afterSpecialPrice==0) ? toThousands(detailsData.afterSpecialPrice) : '--' }}
            <span v-if="detailsData && (detailsData.afterSpecialPrice != detailsData.beforeSpecialPrice)">
              （原{{ (detailsData.beforeSpecialPrice || detailsData.beforeSpecialPrice==0) ? toThousands(detailsData.beforeSpecialPrice) : '--' }}）
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="终端价">
            {{ detailsData && (detailsData.afterTerminalPrice || detailsData.afterTerminalPrice==0) ? toThousands(detailsData.afterTerminalPrice) : '--' }}
            <span v-if="detailsData && (detailsData.afterTerminalPrice != detailsData.beforeTerminalPrice)">
              （原{{ (detailsData.beforeTerminalPrice || detailsData.beforeTerminalPrice==0) ? toThousands(detailsData.beforeTerminalPrice) : '--' }}）
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="车主价">
            {{ detailsData && (detailsData.afterCarOwnersPrice || detailsData.afterCarOwnersPrice==0) ? toThousands(detailsData.afterCarOwnersPrice) : '--' }}
            <span v-if="detailsData && (detailsData.afterCarOwnersPrice != detailsData.beforeCarOwnersPrice)">
              （原{{ (detailsData.beforeCarOwnersPrice || detailsData.beforeCarOwnersPrice==0) ? toThousands(detailsData.beforeCarOwnersPrice) : '--' }}）
            </span>
          </a-descriptions-item>
          <a-descriptions-item label="变更原因">{{ detailsData && detailsData.changeReason || '--' }}</a-descriptions-item>
          <a-descriptions-item label="是否显示">
            <a-radio-group v-model="priceShow">
              <a-radio value="1">
                显示
              </a-radio>
              <a-radio value="0">
                不显示
              </a-radio>
            </a-radio-group>
          </a-descriptions-item>
        </a-descriptions>
        <div class="btn-cont">
          <a-button type="primary" id="productPricingAudit-back" @click="handleAudit('AUDIT_REJECT')" style="margin-right: 15px;">审核不通过</a-button>
          <a-button type="primary" class="button-info" id="productPricingAudit-save" @click="handleAudit('PRICED')">审核通过</a-button>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { toThousands } from '@/libs/tools.js'
// 接口
import { productPricingSnDetail, productPricingAudit } from '@/api/product'
export default {
  name: 'ProductPricingAuditModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemSn: {// 审核sn
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      spinning: false,
      toThousands, // 金额 截取到两位函数 3位添加‘,’
      isShow: this.openModal, //  是否打开弹框
      detailsData: null, //  详情数据
      priceShow: undefined
    }
  },
  methods: {
    //  获取详情数据
    getDetail () {
      productPricingSnDetail({ sn: this.itemSn }).then(res => {
        if (res.status == 200) {
          this.detailsData = res.data
          this.priceShow = this.detailsData.FirstPriceFlag == 1 ? '1' : '0'
        } else {
          this.detailsData = null
        }
      })
    },
    // 审核  type =='AUDIT_REJECT'?'不通过':'通过(PRICED)'
    handleAudit (type) {
      if (this.priceShow == undefined) {
        this.$message.warning('请选择是否显示')
        return
      }
      const ajaxData = {
        id: this.detailsData.id,
        productSn: this.detailsData.productSn,
        auditState: type,
        enabledFlag: this.priceShow
      }
      this.spinning = true
      productPricingAudit(ajaxData).then(res => {
        if (res.status == 200) {
          this.isShow = false
          this.$emit('ok')
          this.spinning = false
        } else {
          this.spinning = false
        }
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      }
    },
    itemSn (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.getDetail()
      }
    }
  }
}
</script>

<style lang="less">
  .productPricingAudit-modal{
    .ant-modal-body {
      padding: 40px 40px 24px;
    }
    .btn-cont {
      text-align: center;
      margin: 35px 0 30px;
    }
  }
</style>
