<template>
  <el-dialog
    :title="dialogObj.title"
    :visible.sync="dialogObj.show"
    :close-on-click-modal="false"
    center
    width="500px">
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="赠品名称" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="成本价格" prop="cost_price">
        <el-input v-model="form.cost_price"></el-input>
      </el-form-item>
      <el-form-item label="赠品总数" prop="gift_num">
        <el-input v-model="form.gift_num"></el-input>
      </el-form-item>
      <el-form-item label="库存数量" prop="stock_num">
        <div>{{form.stock_num}}</div>
      </el-form-item>
      <el-form-item label="赠品类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择" clearable>
          <el-option label="渠道赠品（市场渠道或投放需求关联的赠品）" value="1"></el-option>
          <el-option label="活动赠品（全勤打卡或其他运营活动关联的赠品）" value="2"></el-option>
          <el-option label="关联赠品（销售为了关单而赠送的赠品）" value="3"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogObj.show = false">取 消</el-button>
    <el-button type="primary" @click="sub">保 存</el-button>
  </span>
  </el-dialog>
</template>

<script>
    import {giftConfigAddApi, giftConfigEditApi} from "../../service/api";

    export default {
        name: "dialogObj",
        props: [
            'dialogObj'
        ],
        data() {
            const validGiftNum = (rule, value, callback) => {
                if (!/^[0-9]+$/.test(value)) {
                    callback(new Error('只能填数字'));
                } else {
                    callback();
                }
            };

            const validCostPrice = (rule, value, callback) => {
                if (!/^[\.\d]*$/.test(value)) {
                    callback(new Error('只能填数字和小数'));
                } else {
                    callback();
                }
            };

            return {
                form: {
                    name: '',
                    cost_price: '',
                    gift_num: '',
                    stock_num: 0,
                    type: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入赠品名称'},
                        {max: 20, message: '赠品名称不能超过20汉字'}
                    ],
                    cost_price: [
                        {required: true, message: '请输入成本价格'},
                        {validator: validCostPrice}
                    ],
                    gift_num: [
                        {required: true, message: '请输入赠品总数'},
                        {validator: validGiftNum}
                    ],
                    type: [
                        {required: true, message: '请选择赠品类型', trigger: 'change'}
                    ]
                }
            }
        },
        methods: {
            sub() {
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        let json = {
                            name: this.form.name,
                            cost_price: this.form.cost_price,
                            type: this.form.type,
                            gift_num: this.form.gift_num
                        };
                        switch (this.dialogObj.type) {
                            case 0:
                                giftConfigAddApi(json).then(res => {
                                    this.$message({
                                        type: 'success',
                                        message: '新增成功!'
                                    });
                                    this.$emit("reflash");
                                    this.dialogObj.show = false;
                                });
                                break;
                            case 1:
                                giftConfigEditApi(this.dialogObj.id, json).then(res => {
                                    this.$message({
                                        type: 'success',
                                        message: '修改成功!'
                                    });
                                    this.$emit("reflash");
                                    this.dialogObj.show = false;
                                });
                                break;
                        }

                    } else {
                        return false;
                    }
                });
            }
        },
        watch: {
            'dialogObj.show'() {
                this.$nextTick(() => {
                    this.$refs['form'].resetFields();
                    if (this.dialogObj.type == 1) {
                        this.form.name = this.dialogObj.name;
                        this.form.cost_price = this.dialogObj.cost_price;
                        this.form.gift_num = this.dialogObj.gift_num;
                        this.form.stock_num = this.dialogObj.stock_num;
                        this.form.type = this.dialogObj.gift_type.toString();
                    }
                });

            }
        }
    }
</script>

<style scoped>

</style>