<template>
  <div id="form-1">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col class="top-btn">
          <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col :span="24" class="one">
          <data-form :span="24" :fields="fields" v-model="form" :rules="rules" @save="onSubmit">
            <template #act_time>
              <el-form ref="act_time" :model="act_time" label-width="80px">
                <el-form-item>
                  <el-input v-model="act_time.value"></el-input>
                </el-form-item>
                <el-form-item label="是否显示">
                  <el-select v-model="act_time.is_use" placeholder="请选择">
                    <el-option v-for="i in isuseList" :key="i.model" :label="i.label" :value="i.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </template>
            <template #content>
              <el-form ref="content" :model="content" label-width="80px">
                <el-form-item>
                  <editor v-model="content.value" url="/files/point/act/upload" />
                </el-form-item>
                <el-form-item label="是否显示">
                  <el-select v-model="content.is_use" placeholder="请选择">
                    <el-option v-for="i in isuseList" :key="i.model" :label="i.label" :value="i.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </template>
            <template #is_use>
              <el-option v-for="i in isuseList" :key="i.model" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #show_index>
              <el-option v-for="i in isuseList" :key="i.model" :label="i.label" :value="i.value"></el-option>
            </template>
          </data-form>
        </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');

export default {
  name: 'form-1',
  props: {},
  components: {
    editor: () => import('@/components/editor.vue'),
  },
  data: function () {
    return {
      form: {},
      act_time: {},
      content: {},
      rules: {
        label: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
        is_use: [{ required: true, message: '请选择是否开启', trigger: 'change' }],
      },
      fields: [
        { label: '活动标题', model: 'title' },
        { label: '活动时间', model: 'act_time', custom: true },
        { label: '活动说明', model: 'content', custom: true },
        { label: '分享图片(237*190)', model: 'share', type: 'upload', limit: 1, url: '/files/point/act/upload' },
        { label: '封面图片', model: 'cover', type: 'upload', limit: 1, url: '/files/point/act/upload' },
        { label: '是否在首页展示', model: 'show_index', type: 'select' },
        { label: '是否开启', model: 'is_use', type: 'select' },
      ],
      // 是否使用
      isuseList: [],
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...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, `form`, res.data);
          this.$set(this, `act_time`, res.data.act_time);
          this.$set(this, `content`, res.data.content);
        }
      } 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');
      }
    },
    // 提交
    async onSubmit({ data }) {
      let res;
      data.act_time = this.act_time;
      data.content = this.content;
      if (data.id) res = await this.update(data);
      else res = await this.create(data);
      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);
      }
    },
    // 返回
    toBack() {
      window.history.go('-1');
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    status() {
      return this.$route.query.status;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) { },
    },
  },
};
</script>

<style lang="less" scoped></style>
