<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="600px" :close-on-click-modal="false" :append-to-body="true">
        <el-form :model="form" :rules="rules" ref="ruleForm" label-width="120px" label-position="left" class="demo-ruleForm">
            <el-form-item label="时间" prop="saleTime">
                <el-date-picker style="width: 100%" v-model="form.saleTime" type="month" value-format="yyyy-MM" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
            <el-form-item label="地区" prop="saleArea">
                <el-input v-model="form.saleArea" placeholder="请输入地区"></el-input>
            </el-form-item>
            <el-form-item label="销售量/件" prop="saleCount">
                <el-input v-model="form.saleCount" placeholder="请输入销售量"></el-input>
            </el-form-item>
            <el-form-item label="销售额/万元" prop="saleMoney">
                <el-input v-model="form.saleMoney" placeholder="请输入销售额"></el-input>
            </el-form-item>
            <el-form-item label="许可参考值" prop="licenseRate">
                <span>{{ form.licenseRate }}</span>
            </el-form-item>
            <el-form-item label="自定义许可费" prop="customLicenseRate">
                <el-input v-model="form.customLicenseRate" placeholder="请输入自定义许可费率(许可费率介于0-1之间)"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" :loading="btnLoading" @click="submit">确定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    const licenseRateRule = (rule , value ,callback)=>{
      if(value){
         if (!isNaN(value)) {
          if (value>=0 && value<=1) {
            callback()
          } else {
            callback(new Error('输入错误，参考许可费率介于0-1之间'))
          }
        } else {
          callback(new Error('输入错误，参考许可费率介于0-1之间'))
        }
      }else{
        callback()
      }
    }
    return {
        //标题
        title:'',
        //弹窗显示
        dialogVisible:false,
        //表单数据
        form:{},
        //规则
        rules:{
            customLicenseRate:[{ required: false, validator:licenseRateRule, trigger: 'blur' },],
        },
        //按钮加载
        btnLoading:false,
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    open(form){
        this.form = JSON.parse(JSON.stringify(form))
        if(this.form.id){
            this.title = '编辑营销数据'
        }else{
            this.title = '新增营销数据'
        }
        this.dialogVisible = true
    },
    //关闭弹窗
    handleClose(){
        this.dialogVisible = false
    },
    //提交数据
    submit(){
        this.$refs.ruleForm.validate(valid => {
            if (valid) {
                this.btnLoading = true
                if(this.form.id){
                    this.$api.updateProductMarketDat(this.form).then(response=>{
                        if(response.code == 200){
                            this.$emit('submit','修改成功！')
                            this.btnLoading = false
                            this.handleClose()
                        }
                    }).catch(error=>{
                        this.btnLoading = false
                    })
                }else{
                    this.$api.addProductMarketData(this.form).then(response=>{
                        if(response.code == 200){
                            this.$emit('submit','新增成功！')
                            this.btnLoading = false
                            this.handleClose()
                        }
                    }).catch(error=>{
                        this.btnLoading = false
                    })
                }
            }
        })
    }
  },
};
</script>
<style lang="scss" scoped>
</style>