<template>
  <a-modal
    v-model="opened"
    title="提交"
    centered
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    width="30%"
    :footer="null"
    @cancel="cancel"
  >
    <a-spin :spinning="spinning" tip="Loading...">
      <div style="display:flex;align-items:center;justify-content:center;">
        <a-icon type="warning" theme="twoTone" two-tone-color="#D9001b" style="font-size:60px;margin-right:30px;"/>
        <div>
          <div style="margin-bottom:10px;font-weight:bold;">销售单部分产品价格发生变更，请确认</div>
          <a-radio-group v-model="priceVal">
            <a-radio value="0" :style="radioStyle">
              以【当前】价格为准，总金额：{{ totalRealAmount }}元
            </a-radio>
            <a-radio value="1" :style="radioStyle">
              以【最新】价格为准，总金额：{{ totalAmount }}元
            </a-radio>
          </a-radio-group>
        </div>
      </div>
      <div style="margin-top:36px;text-align:center;">
        <a-button @click="cancel" style="margin-right: 15px" id="chooseCustom-btn-back">取消</a-button>
        <a-button type="primary" :loading="confirmLoading" @click="handleSubmit" id="chooseCustom-btn-submit">确定</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
export default {
  name: 'SetPriceModal',
  mixins: [commonMixin],
  props: {
    show: [Boolean],
    // 变更前总金额
    totalRealAmount: {
      type: [String, Number],
      default: ''
    },
    // 变更后总金额
    totalAmount: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      opened: this.show,
      spinning: false,
      priceVal: undefined, // 价格类型
      confirmLoading: false, // 按钮loading
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      }
    }
  },
  methods: {
    //  保存
    handleSubmit () {
      if (!this.priceVal) {
        this.$message.warning('请选择价格变更类型！')
        return
      }
      this.$emit('ok', this.priceVal)
    },
    cancel () {
      this.opened = false
      this.$emit('cancel')
    }
  },
  watch: {
    show (newValue, oldValue) {
      this.opened = newValue
      if (!newValue) {
        this.priceVal = undefined
      }
    }
  }
}
</script>
