<template>
  <div id="tabs-2">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24">
          <el-form ref="config" :model="config" label-width="100px">
            <el-form-item label="活动时间" prop="time">
              <el-date-picker
                v-model="config.time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="加价购下限金额" prop="plus_money" v-if="form.type == '4'">
              <el-input v-model="config.plus_money" type="number" placeholder="请输入加价购下限金额"></el-input>
            </el-form-item>
            <el-col :span="24" v-if="form.type == '5' || form.type == '6'">
              <el-col :span="2" style="text-align: center; font-size: 14px; color: #666">
                <span v-if="form.type == '5'">满减设置</span>
                <span v-if="form.type == '6'">满减折扣设置</span>
              </el-col>
              <el-col :span="21">
                <el-col :span="24" style="margin: 0 0 10px 0">
                  <el-button type="primary" size="mini" @click="toAdd()">添加</el-button>
                </el-col>
                <el-table :data="list" border size="mini">
                  <el-table-column label="消费金额下限" prop="limit" align="center">
                    <template #default="{ row }">
                      <el-input v-model="row.limit" type="number"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="减满金额" prop="number" align="center" v-if="form.type == '5'">
                    <template #default="{ row }">
                      <el-input v-model="row.number" type="number"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="减满折扣" prop="number" align="center" v-if="form.type == '6'">
                    <template #default="{ row }">
                      <el-input v-model="row.number" type="number"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="优惠金额上限" prop="max" align="center" v-if="form.type == '6'">
                    <template #default="{ row }">
                      <el-input v-model="row.max" type="number"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template #default="scope">
                      <el-button type="danger" size="mini" @click="toDel(scope.$index)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
    <e-dialog :dialog="dialog" @toClose="toClose">
      <template v-slot:info>
        <data-form :span="24" :fields="field_manJian" :rules="rules_manJian" v-model="manJian" labelWidth="150px" @save="onSubmit" v-if="form.type == '5'">
        </data-form>
        <data-form :span="24" :fields="field_manZhe" :rules="rules_manZhe" v-model="manZhe" labelWidth="150px" @save="onSubmit" v-if="form.type == '6'">
        </data-form>
      </template>
    </e-dialog>
  </div>
</template>

<script>
const moment = require('moment');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'tabs-2',
  props: {
    form: { type: Object },
    config: { type: Object },
    list: { type: Array },
  },
  components: {},
  data: function () {
    return {
      // 弹框
      dialog: { title: '信息管理', show: false, type: '1' },
      // 满减表单
      rules_manJian: {
        limit: [{ required: true, message: '请输入消费金额下限', trigger: 'blur' }],
        number: [{ required: true, message: '请输入减满金额', trigger: 'blur' }],
      },
      manJian: {},
      field_manJian: [
        { label: '消费金额下限', model: 'limit', type: 'number' },
        { label: '减满金额', model: 'number', type: 'number' },
      ],
      // 满折表单
      rules_manZhe: {
        limit: [{ required: true, message: '请输入消费金额下限', trigger: 'blur' }],
        number: [{ required: true, message: '请输入减满折扣', trigger: 'blur' }],
        max: [{ required: true, message: '请输入优惠金额上限', trigger: 'blur' }],
      },
      manZhe: {},
      field_manZhe: [
        { label: '消费金额下限', model: 'limit', type: 'number' },
        { label: '减满折扣', model: 'number', type: 'number' },
        { label: '优惠金额上限', model: 'max', type: 'number' },
      ],
    };
  },
  created() {},
  methods: {
    // 新增
    async toAdd() {
      this.dialog = { title: '信息管理', show: true, type: '1' };
    },
    // 提交
    onSubmit({ data }) {
      if (!data.id) data.id = moment(new Date()).valueOf();
      let info = this.list.find((f) => f.id == data.id);
      if (info == '' || info == undefined) this.list.push(data);
      this.toClose();
    },
    // 关闭
    toClose() {
      if (this.form.type == '5') {
        this.manJian = {};
        this.dialog = { title: '信息管理', show: false, type: '1' };
      } else if (this.form.type == '6') {
        this.manZhe = {};
        this.dialog = { title: '信息管理', show: false, type: '1' };
      }
    },
    // 修改
    toEdit({ data }) {
      if (this.form.type == '5') {
        this.$set(this, `manJian`, data);
        this.dialog = { title: '信息管理', show: true, type: '1' };
      } else if (this.form.type == '6') {
        this.$set(this, `manZhe`, data);
        this.dialog = { title: '信息管理', show: true, type: '1' };
      }
    },
    // 删除
    toDel(index) {
      let list = this.list;
      list.splice(index, 1);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

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