<template>
  <div id="index">
    <el-row>
      <el-col
        :span="24"
        class="main animate__animated animate__backInRight"
        v-loading="loadings"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <span v-show="view === 'list'">
          <el-col class="top-btn">
            <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
          </el-col>
          <el-col :span="24" class="one"> <span>平台活动商品</span> </el-col>
          <el-col :span="24" class="two">
            <search-1 :form="searchForm" @onSubmit="search" @toReset="toClose"></search-1>
          </el-col>
          <el-col :span="24" v-if="type != '4'">
            <el-col :span="24" class="thr">
              <el-button type="primary" size="mini" @click="toAdd()">新增</el-button>
            </el-col>
            <el-col :span="24" class="four" v-if="type != '3'">
              <data-table :fields="fields" :opera="opera" @query="search" :data="list" :total="total" @del="toDel" @set="toSet"> </data-table>
            </el-col>
            <el-col :span="24" class="four" v-if="type == '3'">
              <data-table :fields="spFields" :opera="opera" @query="search" :data="list" :total="total" @del="toDel" @set="toSet"> </data-table>
            </el-col>
          </el-col>
          <el-col :span="24" v-if="type == '4'">
            <el-tabs type="border-card">
              <el-tab-pane label="基础商品">
                <el-col :span="24" class="thr">
                  <el-button type="primary" size="mini" @click="toAdd('basic')">新增</el-button>
                </el-col>
                <data-table :fields="fields" :opera="operas" @query="search" :data="list" :total="total" @del="toDel"> </data-table>
              </el-tab-pane>
              <el-tab-pane label="加价商品">
                <el-col :span="24" class="thr">
                  <el-button type="primary" size="mini" @click="toAdd('plus')">新增</el-button>
                </el-col>
                <data-table :fields="plusFields" :opera="opera" @query="search" :data="plusList" :total="plusTotal" @del="toDel" @set="toSet"> </data-table>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </span>
        <goodsEdit v-if="view === 'info'" :ids="ids" :type="type" @toBack="toBack1"></goodsEdit>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('goodsJoinAct');
const { mapActions: dictData } = createNamespacedHelpers('dictData');
export default {
  name: 'index',
  props: {},
  components: {
    search1: () => import('../search/search-2.vue'),
    goodsEdit: () => import('./goods/goodsEdit.vue'),
  },
  data: function () {
    const that = this;
    return {
      loadings: true,
      view: 'list',
      // 列表
      opera: [
        { label: '删除', method: 'del', confirm: true, type: 'danger' },
        { label: '活动设置', method: 'set', display: (i) => i.platform_act_type != '5' && i.platform_act_type != '6' },
      ],
      operas: [{ label: '删除', method: 'del', confirm: true, type: 'danger' }],
      fields: [
        { label: '商品名称', model: 'goods_name', showTip: false },
        { label: '商品规格', model: 'spec_name', showTip: false },
        // { label: '店铺名称', model: 'shop_name' },
        { label: '商品原价', model: 'sell_money' },
      ],
      // 特价
      spFields: [
        { label: '商品名称', model: 'goods_name', showTip: false },
        { label: '商品规格', model: 'spec_name', showTip: false },
        // { label: '店铺名称', model: 'shop_name' },
        { label: '商品原价', model: 'sell_money' },
        { label: '特价金额', model: 'config.sp_price' },
      ],
      // 加价购
      plusFields: [
        { label: '商品名称', model: 'goods_name', showTip: false },
        { label: '商品规格', model: 'spec_name', showTip: false },
        // { label: '店铺名称', model: 'shop_name' },
        { label: '商品原价', model: 'sell_money' },
        { label: '加价金额', model: 'config.plus_money' },
      ],
      list: [],
      total: 0,
      plusTotal: 0,
      plusList: [],
      // 查询
      searchForm: {},
      // 状态
      statusList: [],
      ids: '',
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...dictData({ dictQuery: 'query' }),
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    // 查询
    async search({ skip = 0, limit = this.$limit, ...info } = {}) {
      info.platform_act = this.id;
      if (this.type == '4') info.goods_type = 'basic';
      const condition = _.cloneDeep(this.searchForm);
      let res = await this.query({ skip, limit, ...condition, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, 'list', res.data);
        this.$set(this, 'total', res.total);
      }
      if (this.type == '4') {
        let arr = await this.query({ skip, limit, ...condition, ...info, goods_type: 'plus' });
        if (this.$checkRes(arr)) {
          this.$set(this, 'plusList', arr.data);
          this.$set(this, 'plusTotal', arr.total);
        }
      }
      this.loadings = false;
    },
    // 活动设置
    toSet({ data }) {
      this.$set(this, `ids`, data._id);
      this.$set(this, `view`, 'info');
    },
    // 新增
    toAdd(data) {
      let query = { id: this.id, type: this.type };
      if (this.type == '4') query.goods_type = data;
      this.$router.push({ path: './goods/goodsDetail', query: query });
    },
    // 删除
    async toDel({ data }) {
      let res = await this.delete(data._id);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `刪除信息成功` });
        this.search();
      }
    },
    // 重置
    toClose() {
      this.searchForm = {};
      this.search();
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 审核状态
      res = await this.dictQuery({ code: 'platformAct_goods_status' });
      if (this.$checkRes(res)) this.$set(this, `statusList`, res.data);
    },
    // 返回
    toBack() {
      window.history.go('-1');
    },
    // 返回
    toBack1() {
      this.view = 'list';
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    type() {
      return this.$route.query.type;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .top-btn {
    margin: 20px 0;
  }
  .one {
    margin: 0 0 10px 0;

    span:nth-child(1) {
      font-size: 20px;
      font-weight: 700;
      margin-right: 10px;
    }
  }
  .two {
    margin: 0 0 10px 0;
  }
  .thr {
    display: flex;
    justify-content: space-between;
    margin: 0 0 10px 0;
  }
}
.el-col {
  margin: 10px 0;
}
</style>
