<template>
  <div class="activeAdd">
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rulesThis"
      ref="ruleForm"
      :size="'mini'"
      label-width="90px"
      class="demo-ruleForm"
    >
      <el-row>
        <el-col :span="16">
          <el-form-item label="活动标题" prop="act_name">
            <el-input
              placeholder="活动标题"
              v-model="ruleForm.act_name"
              maxlength="100"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="活动企业" prop="company_name">
            <el-input
              placeholder="活动企业"
              v-model="ruleForm.company_name"
              maxlength="100"
            />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="活动时间" required style="margin: 0">
            <el-row>
              <el-col :span="11">
                <el-form-item prop="datact_name">
                  <el-date-picker
                    type="datetime"
                    placeholder="开始时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions1"
                    v-model="ruleForm.start"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="tc" :span="2">-</el-col>
              <el-col :span="11">
                <el-form-item prop="end">
                  <el-date-picker
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="结束时间"
                    :picker-options="pickerOptions2"
                    v-model="ruleForm.end"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责人" prop="contactor">
            <el-input placeholder="负责人" v-model="ruleForm.contactor" maxlength="100" />
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="活动地址" prop="web_url">
            <el-input
              placeholder="活动地址"
              show-word-limit
              v-model="ruleForm.web_url"
              maxlength="500"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系方式" prop="mobile">
            <el-input
              placeholder="联系方式"
              show-word-limit
              v-model="ruleForm.mobile"
              maxlength="11"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-col :span="24" style="text-align: right; padding: 0 0 15px 0">
      <el-button :size="'mini'" type="primary" @click="submitForm">保 存 </el-button>
    </el-col>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/youzan/luckDraw";
import resToken from "@/mixins/resToken";
import { mapGetters } from "vuex";

export default {
  name: "activeAdd",
  mixins: [resToken],
  props: ["showModel", "id", "type", "sitem", "newTime"],
  watch: {
    newTime: function (val) {
      console.log(val);
      if (val) {
        this.initForm();
      }
    },
  },
  computed: {
    ...mapGetters(["tablebtnSize", "searchSize", "size", "business_companyNo"]),
    // powers() {
    //   const tran =
    //     this.$store.getters.btnList.find((i) => i.menu_route == "activeDetail") || {};
    //   const { action } = tran ?? {};
    //   return action ?? [];
    // },
  },
  data() {
    return {
      size: "small",
      activeName: "3",
      status: "",
      options: [
        {
          value: "0",
          label: "待审核",
        },
        {
          value: "1",
          label: "通过",
        },
        {
          value: "2",
          label: "驳回",
        },
      ],

      pickerOptions1: {
        disabledDate: (time) => {
          if (this.ruleForm.end != null && this.ruleForm.end != "" && time) {
            return time.getTime() > new Date(this.ruleForm.end).valueOf();
          }
        },
      },
      pickerOptions2: {
        disabledDate: (time) => {
          if (this.ruleForm.start != null && this.ruleForm.start != "" && time) {
            return time.getTime() < new Date(this.ruleForm.start).valueOf();
          }
        },
      },
      loading: false,
      once: false,
      rulesThis: this.rules,
      showGoodModel: false,
      showGoodId: "",
      addStockModel: false,
      addStockSitem: null,
      ruleForm: {},
      // 表格 - 数据
      tableData: [],
      rules: {
        act_name: [
          {
            required: true,
            message: "活动标题不能为空",
            trigger: "blur",
          },
        ],
        company_name: [
          {
            required: true,
            message: "活动公司名称不能为空",
            trigger: "change",
          },
        ],
        contactor: [
          {
            required: true,
            message: "负责人不能为空",
            trigger: "blur",
          },
        ],
        start: [
          {
            required: true,
            message: "开始时间不能为空",
            trigger: "change",
          },
        ],
        end: [
          {
            required: true,
            message: "结束时间不能为空",
            trigger: "change",
          },
        ],

        web_url: [
          {
            required: true,
            message: "活动地址不能为空",
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: "联系方式不能为空",
            trigger: "blur",
          },
        ],

        // good_list: [
        //   {
        //     type: "array",
        //     required: true,
        //     message: "至少选择一个商品！",
        //     trigger: "change,blur",
        //   },
        // ],
      },
    };
  },
  mounted() {
    this.initForm();
  },
  methods: {
    async initForm() {
      this.loading = true;
      this.resetFormData();
      this.rulesThis = this.rules;
      await this.resetForm();
      this.loading = false;
    },
    async resetForm() {
      // 重置
      await this.$nextTick(async () => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields();
          this.$refs.ruleForm.clearValidate();
          this.resetFormData();
        }
      });
    },
    //添加活动库存弹窗
    addStock(index) {
      this.addStockSitem = this.ruleForm.good_list[index];
      this.addStockSitem.actCode = this.sitem.activity_code;
      this.addStockModel = true;
    },
    showGoodModelFun(skuCode) {
      this.showGoodModel = true;
      this.showGoodId = skuCode;
    },
    openCostEditDelete(index) {
      this.ruleForm.good_list.splice(index, 1);
      this.$refs.ruleForm.validateField("good_list");
    },

    resetFormData() {
      this.tableData = [];
      const {
        act_name,
        web_url,
        end,
        start,
        contactor,
        company_name,
        info,
        status,
        mobile,
        actCode,
      } = this.sitem;
      this.ruleForm = {
        actCode: actCode || "actCode",
        act_name: act_name || "11",
        contactor: contactor || "22",
        company_name: company_name || "33",
        start: start || "2022-10-01",
        end: end || "2022-10-10",
        mobile: mobile || "17777777777",
        web_url: web_url || "XXX",
        act_type: "1",
        // good_list: info && info.length > 0 ? JSON.parse(JSON.stringify(info)) : [],
      };
      this.status = status || "";
      this.tableData = info && info.length > 0 ? JSON.parse(JSON.stringify(info)) : [];
    },

    async submitForm() {
      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (!this.loading) {
            this.loading = true;

            const model = JSON.parse(JSON.stringify(this.ruleForm));
            let res = {};
            if (this.type === "add") {
              delete model["actCode"];
              res = await asyncRequest.add(model);
            } else {
              res = await asyncRequest.update(model);
            }
            // console.log(res);
            this.loading = false;
            const { code, data, message } = res;
            if (code === 0) {
              this.$notify.success({
                title: this.type === "add" ? "新建成功！" : "编辑成功！",
                message: "",
              });
              this.showModelThis = false;
              // 刷新
              this.$emit("refresh", true);
            } else if (code >= 100 && code <= 104) {
              await this.logout();
            } else {
              this.$message.warning(message);
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // async initData() {
    //   this.loading = true;
    //   let res = await asyncRequest.detail({ id: this.id });
    //   this.loading = false;
    //   if (res.code === 0) {
    //     await this.resetForm(res.data);
    //   }
    // },
  },
};
</script>
<style lang="scss" scoped>
.activeAdd {
  .activeAdd-title {
    border-top: 1px solid #ebeef5;
    span {
      height: 50px;
      line-height: 50px;
      font-family: "微软雅黑", sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 16fpx;
      text-align: left;
    }
  }
  /deep/ .ddiv {
    border-top: 1px solid #dcdfe6;
  }
  /deep/ .dtitle {
    width: 40px;
    text-align: center;
    height: 100%;
    min-height: 100%;
    ul {
      padding: 20px 0 0 0;
    }
  }
  /deep/ .dmain {
    padding: 20px 0 0 0;
    width: calc(100% - 40px);
    border-left: 1px solid #dcdfe6;
  }
}
</style>
