<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="textCommentPoints"
          >
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.textCommentPoints"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="视频图文评价1个商品可获积分/成长值"
            prop="imageTextCommentPoints"
          >
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.imageTextCommentPoints"
              :min="0"
              label="请输入"
            ></el-input-number>
          </el-form-item>
          <el-form-item
            label="该任务每日最高可获积分/成长值："
            prop="dailyPointsLimit"
          >
            <el-input-number
              style="width: 150px"
              controls-position="right"
              :precision="0"
              v-model="modalData.dailyPointsLimit"
              :min="0"
              label="请输入"
            ></el-input-number>
            <div>
              <el-checkbox
                v-model="modalData.enableDailyPointsLimit"
              ></el-checkbox>
              <span style="margin-left: 10px">不勾选则无上限</span>
            </div>
          </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: {
        textCommentPoints: [
          {
            required: true,
            message: "请输入文字评价积分",
            trigger: ["blur", "change"],
          },
        ],
        imageTextCommentPoints: [
          {
            required: true,
            message: "请输入视频图文评价积分",
            trigger: ["blur", "change"],
          },
        ],
        dailyPointsLimit: [
          {
            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 = {
            textCommentPoints: 0,
            imageTextCommentPoints: 0,
            enableDailyPointsLimit: true,
            dailyPointsLimit: 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,
              commentGoodsSettings: this.modalData,
            };
            this.$refs.modalForm.validate((valid) => {
              if (valid) {
                this.$api.marketing.settingTaskDetail(data).then((res) => {
                  this.toggle();
                  this.$emit("getList");
                });
              }
            });
          },
        },
      ];
    },
  },
  asyncComputed: {},
};
</script>
<style lang="scss" scoped>
</style>