<template>
  <div id="form-1">
    <el-row>
      <el-col
        :span="24"
        class="main animate__animated animate__backInRight"
        v-loading="loadings"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-col>
          <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col class="top-btn">
          <el-button class="btn" type="success" size="mini" @click="onSubmit('form')">提交保存</el-button>
        </el-col>
        <el-col :span="24" class="one">
          <el-tabs type="border-card">
            <el-tab-pane label="活动基础设置">
              <tabs-1
                :form="form"
                :act_time="act_time"
                :content="content"
                :act_typeList="act_typeList"
                :isuseList="isuseList"
                :url="url"
                :rules="rules"
                :goodsAct="goodsAct"
              ></tabs-1>
            </el-tab-pane>
            <el-tab-pane label="活动程序设置">
              <tabs-2 :form="form" :config="config" :list="list" :rules="rules"></tabs-2>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('platformAct');
const { mapActions: dictData } = createNamespacedHelpers('dictData');
const { mapActions: goodsJoinAct } = createNamespacedHelpers('goodsJoinAct');

export default {
  name: 'form-1',
  props: { id: { type: String } },
  components: {
    tabs1: () => import('./goods/tabs-1.vue'),
    tabs2: () => import('./goods/tabs-2.vue'),
  },
  data: function () {
    return {
      loadings: true,
      url: '/files/point/platformAct/upload',
      form: {},
      rules: {},
      // 活动时间
      act_time: {},
      // 活动说明
      content: {},
      // 设置
      config: {},
      // 满减折扣设置
      // manZhe: {},
      list: [],
      // 满减设置
      // manJian: {},
      // 是否使用
      isuseList: [],
      // 活动类型
      act_typeList: [],
      // 是否有活动商品
      goodsAct: true,
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...goodsJoinAct({ goodsActQuery: 'query' }),
    ...dictData({ dictQuery: 'query' }),
    ...mapActions(['fetch', 'create', 'update']),
    // 查询
    async search() {
      if (this.id) {
        let res = await this.fetch(this.id);
        if (this.$checkRes(res)) {
          this.$set(this, `act_time`, res.data.act_time);
          this.$set(this, `content`, res.data.content);
          if (res.data.type == '5' || res.data.type == '6') this.$set(this, `list`, res.data.config.discount);
          if (res.data.config) {
            if (res.data.config.time_start && res.data.config.time_end) res.data.config.time = [res.data.config.time_start, res.data.config.time_end];
            this.$set(this, `config`, res.data.config);
          }
          this.$set(this, `form`, res.data);
        }
        // 活动类型
        res = await this.goodsActQuery({ platform_act: this.id });
        if (this.$checkRes(res)) {
          if (res.total == 0) this.$set(this, `goodsAct`, true);
          else this.$set(this, `goodsAct`, false);
        }
      } else {
        this.$set(this, `form`, { is_use: '0', show_index: '0' });
        this.$set(this.act_time, `is_use`, '0');
        this.$set(this.content, `is_use`, '0');
      }
      this.loadings = false;
    },
    async onSubmit(formName) {
      let form = this.form;
      let config = this.config;
      if (form.type == '5' || form.type == '6') config.discount = this.list;
      if (config.time) {
        config[`time_start`] = _.head(this.config.time);
        config[`time_end`] = _.last(this.config.time);
      }
      form = { ...form, act_time: this.act_time, content: this.content, config };
      if ((form.type == '5' || form.type == '6') && this.list.length == '0') this.$message.error('请添加活动程序设置');
      else if (!form.config.time) this.$message.error('请添加活动程序设置');
      else if (form.type == '4' && !config.plus_money) this.$message.error('请添加活动程序设置');
      else {
        let res;
        if (form.id) res = await this.update(form);
        else res = await this.create(form);
        if (this.$checkRes(res)) {
          this.$message({ type: `success`, message: `维护信息成功` });
          this.toBack();
        }
      }
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 是否使用
      res = await this.dictQuery({ code: 'use' });
      if (this.$checkRes(res)) this.$set(this, `isuseList`, res.data);
      // 活动类型
      res = await this.dictQuery({ code: 'act_type' });
      if (this.$checkRes(res)) this.$set(this, `act_typeList`, res.data);
    },
    // 返回
    toBack() {
      this.$emit('toBack');
    },
  },
  computed: {},
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.top-btn {
  margin: 10px 0;
  text-align: center;
}
</style>
