<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalCols="modalCols"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <template slot="dialog__after"> </template>
    </obj-modal>
  </div>
</template>
<script>
import { debounce, cloneDeep } from "lodash";
import { Divider } from "element-ui";
export default {
  components: {},
  data() {
    return {
      isAdd: true,
      //表格属性
      modalConfig: {
        title: "添加优惠卷",
        show: false,
        width: "60%",
      },
      modalData: {
        couponsName: "",
        couponsThreshold: 0,
        couponsMinus: 0,
        couponsEffectiveTimeType: "1",
      },
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (newVal) {
        //关闭弹窗清空校验
        setTimeout(() => {
          this.$refs.modal.resetFields();
        });
      }
    },
  },
  methods: {
    queryTableData(pageNo, pageSize) {},
    toggle(e) {
      if (this.modalConfig.show == false) {
        this.modalConfig.show = true;
      } else {
        this.modalConfig.show = false;
      }
      if (e) {
        this.init(cloneDeep(e));
      }
      return {
        add: (row) => {
          console.log(row);
          if (row.length > 0) {
            this.modalData = row[0];
          } else {
            console.log("111");
            this.modalData = {
              couponsName: "生日优惠卷",
              couponsThreshold: 0,
              couponsMinus: 0,
              couponsEffectiveTimeType: "1",
            };
          }
          this.modalConfig.title = "添加优惠卷";
          this.isAdd = true;
        },
        update: () => {
          this.isAdd = false;
        },
      };
    },
    init(row) {},
  },
  computed: {
    modalCols() {
      return [
        {
          label: "优惠卷名称",
          prop: "couponsName",
          type: "Input",
          width: "300px",
          rules: { required: true, message: "请优惠卷名称" },
        },
        {
          label: "优惠券门槛金额",
          prop: "couponsThreshold",
          type: "Input",
          width: "300px",
          rules: { required: true, message: "请输入优惠券门槛金额" },
          type: "jsx",
          render: () => {
            return (
              <el-input-number
                controls-position="right"
                precision={0}
                v-model={this.modalData.couponsThreshold}
                min={0}
                max={99999}
                label="请输入"
              ></el-input-number>
            );
          },
        },
        {
          label: "优惠券减免金额",
          prop: "couponsMinus",
          type: "Input",
          width: "300px",
          rules: { required: true, message: "请输入优惠券减免金额" },
          type: "jsx",
          render: () => {
            return (
              <el-input-number
                controls-position="right"
                precision={0}
                v-model={this.modalData.couponsMinus}
                min={0}
                max={99999}
                label="请输入"
              ></el-input-number>
            );
          },
        },
        {
          label: "优惠券有效时间",
          prop: "couponsEffectiveTimeType",
          type: "Input",
          width: "300px",
          rules: { required: true, message: "请输入优惠券有效时间" },
          type: "jsx",
          render: () => {
            return (
              <el-select
                v-model={this.modalData.couponsEffectiveTimeType}
                placeholder="请选择"
              >
                {[
                  { label: "当天", value: "1" },
                  {
                    label: "当周",
                    value: "2",
                  },
                  {
                    label: "当月",
                    value: "3",
                  },
                ].map((item) => {
                  return (
                    <el-option
                      label={item.label}
                      value={item.value}
                    ></el-option>
                  );
                })}
              </el-select>
            );
          },
        },
      ];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: this.isAdd ? "确认添加" : "确认",
          type: "primary",
          loading: this.isLoading,
          submit: true,
          handle: () => {
            console.log(JSON.parse(JSON.stringify(this.modalData)));
            this.$emit(
              "addCouponData",
              JSON.parse(JSON.stringify(this.modalData))
            );
            this.toggle();
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>