<template>
  <a-modal
    centered
    class="promotionList-basicInfo-modal"
    :footer="null"
    :maskClosable="false"
    title="规则设置"
    v-model="isShow"
    @cancel="isShow=false"
    width="70%">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-form-model
        id="promotionList-basicInfo-form"
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol" >
        <a-form-model-item label="规则门槛" prop="gateFlag">
          <a-radio-group v-model="form.gateFlag" button-style="solid" size="small">
            <a-radio-button value="1">
              有
            </a-radio-button>
            <a-radio-button value="0">
              无
            </a-radio-button>
          </a-radio-group>
          <div class="ruleDescList">
            购买满
            <a-input-number v-model="form.gateAmount" :min="0" :precision="2" size="small"/>
            元门槛产品，可使用
            <a-input-number v-model="form.quotaAmount" :min="0" :precision="2" size="small"/>
            元配额，采购规则中的特价商品（配额算销售额）
          </div>
        </a-form-model-item>
        <a-form-model-item prop="minOrderFlag">
          <span slot="label">
            <a-tooltip title="What do you want others to call you?">
              <a-icon type="info-circle" />
            </a-tooltip>
            订单起订金额
          </span>
          <a-select default-value="1" :value="form.minOrderFlag" style="width: 160px" size="small">
            <a-select-option value="0">
              不限
            </a-select-option>
            <a-select-option value="1">
              限制
            </a-select-option>
          </a-select>
          <a-input-number
            v-show="form.minOrderFlag && form.minOrderFlag=='1'"
            size="small"
            style="margin-left:10px;width:300px;"
            v-model="form.minOrderAmount"
            :min="0"
            :step="1"
            :precision="2"
            placeholder="请输入金额"/>
        </a-form-model-item>
        <a-form-model-item prop="upperLimitFlag">
          <span slot="label">
            <a-tooltip title="What do you want others to call you?">
              <a-icon type="info-circle" />
            </a-tooltip>
            活动经费上限
          </span>
          <a-select default-value="1" :value="form.upperLimitFlag" style="width: 160px" size="small">
            <a-select-option value="0">
              不限
            </a-select-option>
            <a-select-option value="1">
              限制
            </a-select-option>
          </a-select>
          <a-input-number
            v-show="form.upperLimitFlag&&form.upperLimitFlag=='1'"
            size="small"
            style="margin-left:10px;width:300px;"
            v-model="form.upperLimitAmount"
            :min="0"
            :step="1"
            :precision="2"
            placeholder="请输入金额"/>
        </a-form-model-item>
      </a-form-model>
      <a-card size="small" :bordered="false" class="pages-wrap">
        <div class="flex">
          <a-radio-group v-model="chooseVal" button-style="solid" size="small">
            <a-radio-button value="a" v-show="form.gateFlag==='1'">
              门槛产品
            </a-radio-button>
            <a-radio-button value="c">
              促销产品
            </a-radio-button>
          </a-radio-group>
          <div>
            <a-button
              size="small"
              type="link"
              class="button-info"
              id="promotionList-edit-btn">+导入产品</a-button>
            <a-button
              style="margin-left:10px;"
              size="small"
              type="link"
              class="button-error"
              id="promotionList-edit-btn">+新增产品</a-button>
          </div>
        </div>
        <div v-show="chooseVal=='a'"><tableType1 ref="cillProduct" selectType="gateProduct"></tableType1></div>
        <div v-show="chooseVal=='c'"> <tableType3></tableType3></div>
      </a-card>
      <div class="btn-cont">
        <a-button id="promotionList-basicInfo-modal-back" @click="isShow = false">取消</a-button>
        <a-button style="margin-left: 15px;" type="primary" id="promotionList-modal-save" @click="handleSave">确定</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { VSelect } from '@/components'
import tableType1 from './tableType1.vue'
import tableType3 from './tableType3.vue'
import { sparePartsReturnSave, sparePartsReturnInfo } from '@/api/sparePartsReturn'
export default {
  name: 'PromotionListBasicInfoModal',
  mixins: [commonMixin],
  components: { VSelect, tableType1, tableType3 },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemSn: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      spinning: false,
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 17 }
      },
      form: {
        promotionRuleType: 'PROMO_PROD', // 特价产品
        gateFlag: '0', // 门槛
        gateAmount: '',
        quotaAmount: '',
        minOrderFlag: '1', // 起订金额
        minOrderAmount: '',
        upperLimitFlag: '1', // 活动经费上限
        upperLimitAmount: ''
      },
      rules: {
        gateFlag: [ { required: true, message: '请选择规则门槛', trigger: 'change' } ],
        minOrderFlag: [{ required: true, message: '请选择订单起订金额', trigger: 'change' }],
        upperLimitFlag: [{ required: true, message: '请选择活动经费上限', trigger: 'change' }]
      },
      chooseVal: 'a'
    }
  },
  methods: {
    //  附件上传
    changeAttach (file) {
      this.attachList = JSON.parse(file)
      this.attachList.map(item => {
        item.fileType = item.extName
      })
    },
    // 选择参与客户
    handleDealerModal () {
      this.openDealerModal = true
      const _this = this
      if (_this.chooseDealerList.length == 0) {
        _this.form.promoBuyerList = []
      }
      const arr = _this.chooseDealerList.map(item => {
        return item.buyerSn
      })
      // 选择经销商回显
      _this.$nextTick(() => {
        _this.$refs.dealerChoose.pageInit(arr)
      })
    },
    // 添加经销商
    handleAddDealer (list) {
      this.chooseDealerList = list.map(con => {
        return {
          buyerSn: con.dealerSn,
          buyerName: con.dealerName
        }
      })
      this.openDealerModal = false
      // 移除表单必填项
      this.$refs.ruleForm.clearValidate('promoBuyerList')
    },
    //  保存
    handleSave () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const form = JSON.parse(JSON.stringify(_this.form))
          form.attachmentList = _this.attachList
          _this.spinning = true
          sparePartsReturnSave(form).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              setTimeout(() => {
                _this.isShow = false
                _this.$emit('ok', res.data)
                _this.spinning = false
              }, 1000)
            } else {
              _this.spinning = false
            }
          })
        } else {
          return false
        }
      })
    },
    // 获取编辑详情
    getDetail () {
      sparePartsReturnInfo({ sn: this.itemSn }).then(res => {
        if (res.status == 200) {
          const resultObj = res.data
          this.attachList = resultObj.attachmentList
          const obj = {
            supplierSn: resultObj.supplierSn,
            returnReason: resultObj.returnReason, // 退货原因
            explainInfo: resultObj.explainInfo, // 补充说明
            warehouseSn: resultObj.warehouseSn,
            sparePartsReturnSn: this.itemSn
          }
          this.$nextTick(() => {
            this.$refs.attachList.setFileList(this.attachList)
          })
          this.form = { ...this.form, ...obj }
        } else {
          this.detailsData = null
        }
      })
    },
    // 不可选日期
    disabledDate (date, dateStrings) {
      return date && date.valueOf('day') < moment().subtract(1, 'day') // 今天以后，包含今天
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.attachList = []
        this.supplierName = null
        this.$nextTick(() => {
          this.$refs.attachList.setFileList('')
          this.$refs.ruleForm.resetFields()
        })
      } else {
        if (this.itemSn) {
          this.getDetail()
        } else {
          this.chooseVal = this.form.gateFlag == '0' ? 'c' : 'a'
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .promotionList-basicInfo-modal{
    /deep/.ant-modal-body {
      padding: 40px 40px 24px;
      max-height: 745px !important;
      overflow-y: scroll !important;
    }
    .ant-radio-button-wrapper{
      width:80px;
      text-align: center;
    }
    .ant-form-item{
      margin-bottom:5px;
    }
    .buyerBox{
      border:1px solid #d9d9d9;margin-top:10px;border-radius:4px;padding:4px 10px;background:#f2f2f2;max-height:130px;overflow-y:scroll;
    }
    .btn-cont {
      text-align: center;
      margin: 35px 0 10px;
    }
    .flex{
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
  }

</style>
