<template>
  <div id="index">
    <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">
          <p>平台活动商品规格添加<span>（没有库存的商品，需添加库存才可添加）</span></p>
        </el-col>
        <el-col :span="24" class="four">
          <data-table :fields="fields" :opera="opera" @query="search" :data="list" :total="total" @add="toAdd"> </data-table>
        </el-col>
      </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');
const { mapActions: goodsSpec } = createNamespacedHelpers('goodsSpec');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function () {
    const that = this;
    return {
      // 列表
      opera: [{ label: '添加', method: 'add', display: (i) => i.num > 0 }],
      fields: [
        { label: '规格名称', model: 'name', showTip: false },
        { label: '实际销售价格', model: 'sell_money' },
        { label: '划掉销售价格', model: 'flow_money' },
        { label: '运费', model: 'freight' },
        { label: '库存', model: 'num' },
      ],
      list: [],
      total: 0,
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...dictData({ dictQuery: 'query' }),
    ...goodsSpec({ gQuery: 'query' }),
    ...mapActions(['query', 'fetch', 'create', 'update', 'delete']),
    async search({ skip = 0, limit = this.$limit, ...info } = {}) {
      info.goods = this.goods;
      let res = await this.gQuery({ skip, limit, ...info });
      if (this.$checkRes(res)) {
        this.$set(this, 'list', res.data);
        this.$set(this, 'total', res.total);
      }
    },
    // 新增
    async toAdd({ data }) {
      let form = { platform_act: this.platform_act, shop: this.shop, goods: this.goods, platform_act_type: this.platform_act_type, spec: data._id };
      if (this.platform_act_type == '4') {
        let config = { goods_type: this.goods_type };
        form.config = config;
      }
      let res;
      res = await this.create(form);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `添加商品成功` });
        this.toBack();
      }
    },
    // 返回
    toBack() {
      window.history.go('-2');
    },
    // 查询其他信息
    async searchOther() {
      let res;
    },
  },
  computed: {
    ...mapState(['user']),

    platform_act() {
      return this.$route.query.platform_act;
    },
    goods() {
      return this.$route.query.goods;
    },
    shop() {
      return this.$route.query.shop;
    },
    platform_act_type() {
      return this.$route.query.platform_act_type;
    },
    goods_type() {
      return this.$route.query.goods_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;

    p:nth-child(1) {
      font-size: 20px;
      font-weight: 700;
      margin-right: 10px;
      span {
        font-size: 14px;
        color: #666;
      }
    }
  }
  .two {
    margin: 0 0 10px 0;
  }
  .thr {
    margin: 0 0 10px 0;
    text-align: right;
  }
}
.el-col {
  margin: 10px 0;
}
</style>
