<template>
  <div>
    <obj-modal
      ref="modal"
      labelWidth="150px"
      :modalCols="modalCols"
      :modalConfig="modalConfig"
      :modalData="modalData"
      :modalHandles="modalHandles"
    >
      <template slot="dialog__after">
        <el-form
          label-width="150px"
          :rules="rules"
          :model="modalData"
          ref="modalForm"
        >
          <el-form-item label="连续签到1天" prop="oneDay">
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.oneDay"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="连续签到2天" prop="twoDay">
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.twoDay"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="连续签到3天" prop="threeDay">
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.threeDay"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="连续签到4天" prop="fourDay">
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.fourDay"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="连续签到5天" prop="fiveDay">
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.fiveDay"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="连续签到6天" prop="sixDay">
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.sixDay"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="连续签到7天" prop="sevenDay">
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.sevenDay"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </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: "700px",
      },
      modalData: {},
      settingId: "",
      form: {},
      rules: {
        oneDay: [
          {
            required: true,
            message: "请输入签到积分",
            trigger: ["blur", "change"],
          },
        ],
        twoDay: [
          {
            required: true,
            message: "请输入签到积分",
            trigger: ["blur", "change"],
          },
        ],
        threeDay: [
          {
            required: true,
            message: "请输入签到积分",
            trigger: ["blur", "change"],
          },
        ],
        fourDay: [
          {
            required: true,
            message: "请输入签到积分",
            trigger: ["blur", "change"],
          },
        ],
        fiveDay: [
          {
            required: true,
            message: "请输入签到积分",
            trigger: ["blur", "change"],
          },
        ],
        sixDay: [
          {
            required: true,
            message: "请输入签到积分",
            trigger: ["blur", "change"],
          },
        ],
        sevenDay: [
          {
            required: true,
            message: "请输入签到积分",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  watch: {
    "modalConfig.show"(newVal) {
      if (!newVal) {
        //关闭弹窗清空校验
        setTimeout(() => {
          this.$refs.modalForm.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) => {
          this.modalData = {
            oneDay: 0,
            twoDay: 0,
            threeDay: 0,
            fourDay: 0,
            fiveDay: 0,
            sixDay: 0,
            sevenDay: 0,
          };
          this.modalConfig.title = "每日积分设置";
          this.isAdd = true;
        },
        update: () => {
          this.modalConfig.title = "修改成长值";
          this.isAdd = false;
        },
      };
    },
    init(row) {
      this.settingId = row.id;
      console.log(row);
      // this.modalData = row;
    },
  },
  computed: {
    modalCols() {
      return [];
    },
    modalHandles() {
      return [
        {
          label: "取消",
          handle: () => {
            this.toggle();
          },
        },
        {
          label: "确认",
          type: "primary",
          handle: () => {
            console.log(this.modalData);
            let data = {
              id: this.settingId,
              dailySignSettings: this.modalData,
            };
            this.$refs.modalForm.validate((valid) => {
              if (valid) {
                this.$api.marketing.settingTaskDetail(data).then((res) => {
                  console.log(res);
                  this.toggle();
                  this.$emit("getList")
                });
              }
            });
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>