<template>
  <a-modal
    centered
    :footer="null"
    :maskClosable="false"
    class="sales-print-type-modal"
    v-model="isShow"
    @cancel="isShow=false"
    :width="900">
    <solt name="title" v-if="detailInfo"><div>提示：（销售单号：{{ detailInfo.salesBillNo }}      客户名称：{{ detailInfo.buyerName }}）</div></solt>
    <solt name="title" v-else>提示</solt>
    <a-spin :spinning="spinning" tip="Loading...">
      <div class="tipModal-content">
        <strong class="tipModal-tit">销售单以下产品价格发生变更，请确认</strong>
        <a-table
          class="sTable"
          ref="table"
          size="small"
          :rowKey="(record) => record.allocateSn"
          :columns="columns"
          :dataSource="dataList"
          :scroll="{ y: 300 }"
          :pagination="false"
          bordered>
          <!-- 初始价 省  市  特约-->
          <template slot="provincePriceOrig" slot-scope="text, record">
            <span v-if="record.provincePriceOrig||record.provincePriceOrig==0">
              <span :class="record.provincePriceOrig!=record.provincePrice?'redWord':''">{{ toThousands(record.provincePriceOrig) }}</span>
            </span>
            <span v-else>--</span>
          </template>
          <template slot="cityPriceOrig" slot-scope="text, record">
            <span v-if="record.cityPriceOrig||record.cityPriceOrig==0">
              <span :class="record.cityPriceOrig!=record.cityPrice?'redWord':''">{{ toThousands(record.cityPriceOrig) }}</span>
            </span>
            <span v-else>--</span>
          </template>
          <template slot="specialPriceOrig" slot-scope="text, record">
            <span v-if="record.specialPriceOrig||record.specialPriceOrig==0">
              <span :class="record.specialPriceOrig!=record.specialPrice?'redWord':''">{{ toThousands(record.specialPriceOrig) }}</span>
            </span>
            <span v-else>--</span>
          </template>
          <!-- 最新价  省  市  特约 -->
          <template slot="provincePrice" slot-scope="text, record">
            <span v-if="record.provincePrice||record.provincePrice==0">
              <span :class="record.provincePrice!=record.provincePriceOrig?'redWord':''">{{ toThousands(record.provincePrice) }}</span>
            </span>
            <span v-else>--</span>
          </template>
          <template slot="cityPrice" slot-scope="text, record">
            <span v-if="record.cityPrice||record.cityPrice==0">
              <span :class="record.cityPrice!=record.cityPriceOrig?'redWord':''">{{ toThousands(record.cityPrice) }}</span>
            </span>
            <span v-else>--</span>
          </template>
          <template slot="specialPrice" slot-scope="text, record">
            <span v-if="record.specialPrice||record.specialPrice==0">
              <span :class="record.specialPrice!=record.specialPriceOrig?'redWord':''">{{ toThousands(record.specialPrice) }}</span>
            </span>
            <span v-else>--</span>
          </template>
        </a-table>
        <div>
          <a-radio-group v-model="priceVal">
            <a-radio :value="item.id" v-for="item in priceSelectList" :key="item.id">
              {{ item.nameWord }}
            </a-radio>
          </a-radio-group>
        </div>
        <div style="margin-top:36px;text-align:center;">
          <a-button @click="isShow = false" style="margin-right: 15px" id="chooseCustom-btn-back">取消</a-button>
          <a-button type="primary" @click="handleSubmit" id="chooseCustom-btn-submit">确定</a-button>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
export default {
  name: 'TipModal',
  mixins: [commonMixin],
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      isShow: this.openModal,
      spinning: false,
      detailInfo: null,
      sourceData: [],
      priceVal: undefined,
      columns: [
        { title: '产品编码', dataIndex: 'productCode', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '价格级别', dataIndex: 'priceLevelDictValue', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '价格变更前',
          children: [
            {
              title: '省级价',
              align: 'right',
              dataIndex: 'provincePriceOrig',
              scopedSlots: { customRender: 'provincePriceOrig' }
            },
            {
              title: '市级价',
              align: 'right',
              dataIndex: 'cityPriceOrig',
              scopedSlots: { customRender: 'cityPriceOrig' }
            },
            {
              title: '特约价',
              dataIndex: 'specialPriceOrig',
              align: 'right',
              scopedSlots: { customRender: 'specialPriceOrig' }
            }
          ],
          width: '30%' },
        { title: '价格变更后',
          children: [
            {
              title: '省级价',
              dataIndex: 'provincePrice',
              align: 'right',
              scopedSlots: { customRender: 'provincePrice' }
            },
            {
              title: '市级价',
              dataIndex: 'cityPrice',
              align: 'right',
              scopedSlots: { customRender: 'cityPrice' }
            },
            {
              title: '特约价',
              dataIndex: 'specialPrice',
              align: 'right',
              scopedSlots: { customRender: 'specialPrice' }
            }
          ],
          width: '30%' }
      ],
      priceSelectList: [{
        id: 0,
        nameWord: '以【价格变更前】为准'
      }, {
        id: 1,
        nameWord: '以【价格变更后】为准'
      }]
    }
  },
  methods: {
    // 获取弹窗显示信息
    getShowInfo (obj) {
      this.detailInfo = obj
    },
    //  保存
    handleSubmit () {
      const _this = this
      if (_this.priceVal === undefined) {
        this.$message.warning('请选择价格变更标准！')
        return
      }
      const objInfo = {
        productPriceChangeFlag: _this.priceVal
      }
      _this.$emit('ok', objInfo)
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.priceVal = undefined
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .tipModal-content{
    width:85%;
    margin:30px auto 0;
    text-align:center;
    .tipModal-tit{
      font-size: 20px;
    }
    .sTable{
      margin:15px 0 25px;
    }
   .ant-radio-wrapper:first-child{
      margin-right:70px !important;
    }
    .redWord{
      color:#ed1c24;
    }
  }
</style>
