<template>
  <div id="goodsEdit">
    <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 class="top-btn">
          <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <!-- 参加平台活动商品设置 -->
        <el-col :span="24" class="one">
          <el-form :model="form" ref="form" label-width="180px">
            <el-form-item label="设置" prop="config">
              <el-form ref="config" :model="config" :rules="rules" label-width="80px">
                <!-- 特价 -->
                <el-form-item label="特价" prop="sp_price" v-if="form.platform_act_type == '3'">
                  <el-input v-model="config.sp_price" type="number" placeholder="请输入金额"></el-input>
                </el-form-item>
                <!-- 买赠 -->
                <el-form-item label="买赠" v-if="form.platform_act_type == '2'">
                  <el-col :span="24" style="margin: 0 0 10px 0">
                    <el-button type="primary" size="mini" @click="toAdd()">添加</el-button>
                  </el-col>
                  <data-table :usePage="false" :fields="fields_gift" :opera="opera" :data="list" @edit="toEdit" @del="toDel"> </data-table>
                </el-form-item>
                <!-- 加价购 -->
                <el-form-item label="商品类型" prop="goods_type" v-if="form.platform_act_type == '4'">
                  <el-select v-model="config.goods_type" clearable filterable placeholder="请选择商品类型" size="small" style="width: 100%">
                    <el-option v-for="i in goods_typeList" :key="i.value" :label="i.label" :value="i.value"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="加价金额" prop="plus_money" v-if="config.goods_type == 'plus'">
                  <el-input v-model="config.plus_money" type="number" placeholder="请输入加价金额"></el-input>
                </el-form-item>
              </el-form>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('form')">保存</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
    <e-dialog :dialog="dialog" @toClose="toClose">
      <template v-slot:info>
        <el-form :model="fieldform" ref="fieldform" label-width="100px" class="demo-ruleForm">
          <!-- 买赠 -->
          <el-form-item label="赠品类型" prop="type" v-if="form.platform_act_type == '2'">
            <el-select v-model="fieldform.type" clearable filterable placeholder="请选择赠品类型" size="small" style="width: 100%">
              <el-option v-for="i in typeList" :key="i.value" :label="i.label" :value="i.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="goods" v-if="form.platform_act_type == '2' && fieldform.type == '0'">
            <el-select
              v-model="fieldform.goods"
              filterable
              remote
              reserve-keyword
              placeholder="请选择商品名称"
              :remote-method="querySearch"
              :loading="loading"
              @change="goodsSelect"
              size="small"
              style="width: 100%"
            >
              <el-option v-for="item in goodsList" :key="item._id" :label="item.name" :value="item._id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="赠品规格" prop="spec" v-if="form.platform_act_type == '2' && fieldform.type == '0'">
            <el-select v-model="fieldform.spec" clearable filterable placeholder="请选择赠品规格" size="small" style="width: 100%" @change="specSelect">
              <el-option v-for="i in specList" :key="i._id" :label="i.name" :value="i._id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称" prop="goods" v-if="form.platform_act_type == '2' && fieldform.type == '1'">
            <el-input v-model="fieldform.goods" placeholder="请输入商品名称" size="small" @input="goodsInput"></el-input>
          </el-form-item>
          <el-form-item label="赠品规格" prop="spec" v-if="form.platform_act_type == '2' && fieldform.type == '1'">
            <el-input v-model="fieldform.spec" placeholder="请输入赠品规格" size="small" @input="specInput"></el-input>
          </el-form-item>
          <el-form-item label="赠品数量" prop="num" v-if="form.platform_act_type == '2'">
            <el-input v-model="fieldform.num" placeholder="请输入赠品数量" size="small" type="Number"></el-input>
          </el-form-item>
          <el-form-item label="赠品描述" prop="desc" v-if="form.platform_act_type == '2'">
            <el-input v-model="fieldform.desc" placeholder="请输入赠品描述" size="small" type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-col>
              <el-button type="primary" @click="toSave()"> 保存 </el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </template>
    </e-dialog>
  </div>
</template>

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

export default {
  name: 'goodsEdit',
  props: {
    ids: { type: String },
    type: { type: String },
  },
  components: {},
  data: function () {
    return {
      loadings: true,
      form: {},
      list: [],
      // 操作
      opera: [
        { label: '修改', method: 'edit' },
        { label: '删除', method: 'del', confirm: true, type: 'danger' },
      ],
      fields_gift: [
        { label: '赠品', model: 'goods_name' },
        { label: '规格', model: 'spec_name' },
        { label: '赠品描述', model: 'desc' },
      ],
      // 弹框
      dialog: { title: '信息管理', show: false, type: '1' },
      loading: false,
      // 赠品
      // 赠品商品列表
      goodsList: [],
      // 赠品规格列表
      specList: [],
      rules: {},
      config: {},
      // 是否使用
      isuseList: [],
      // 赠品类型
      typeList: [
        { label: '平台商品', value: '0' },
        { label: '输入商品', value: '1' },
      ],
      // 加价购商品类型
      goods_typeList: [
        { label: '基础商品', value: 'basic' },
        { label: '加价商品', value: 'plus' },
      ],
      fieldform: {},
    };
  },
  async created() {
    await this.searchOther();
    await this.search();
  },
  methods: {
    ...dictData({ dictQuery: 'query' }),
    ...mapActions(['fetch', 'create', 'update']),
    ...goods({ goodsQuery: 'query', goodsFetch: 'fetch' }),
    ...goodsSpec({ specQuery: 'query', specFetch: 'fetch' }),
    // 查询
    async search() {
      let res = await this.fetch(this.ids);
      if (this.$checkRes(res)) {
        this.$set(this, `form`, res.data);
        if (res.data.config) {
          this.$set(this, `config`, res.data.config);
          if (res.data.platform_act_type == '2' && res.data.config.gift) this.$set(this, `list`, res.data.config.gift);
        }
      }
      this.loadings = false;
    },
    // 远程查询
    async querySearch(value) {
      this.loading = true;
      let res = await this.goodsQuery({ name: value });
      if (this.$checkRes(res)) this.$set(this, 'goodsList', res.data);
      this.loading = false;
    },
    // 选择商品
    async goodsSelect(value) {
      let res = await this.goodsFetch(value);
      if (this.$checkRes(res)) this.$set(this.fieldform, `goods_name`, res.data.name);
      this.querySpec(value);
    },
    // 输入商品
    goodsInput(value) {
      this.$set(this.fieldform, `goods_name`, value);
    },
    //  获取规格列表
    async querySpec(id) {
      let res = await this.specQuery({ goods: id });
      if (this.$checkRes(res)) this.$set(this, 'specList', res.data);
    },
    // 选择规格
    async specSelect(value) {
      let res = await this.specFetch(value);
      if (this.$checkRes(res)) this.$set(this.fieldform, `spec_name`, res.data.name);
    },
    // 输入规格
    specInput(value) {
      this.$set(this.fieldform, `spec_name`, value);
    },
    // 新增
    async toAdd() {
      this.dialog = { title: '信息管理', show: true, type: '1' };
    },
    // 提交
    toSave() {
      let data = this.fieldform;
      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() {
      this.fieldform = {};
      this.dialog = { title: '信息管理', show: false, type: '1' };
    },
    // 修改
    toEdit({ data }) {
      this.$set(this, `fieldform`, data);
      this.dialog = { title: '信息管理', show: true, type: '1' };
    },
    // 删除
    toDel({ data }) {
      let newList = this.list.filter((i) => i.id != data.id);
      this.$set(this, `list`, newList);
    },
    // 提交
    async onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let form = this.form;
          let config = this.config;
          if (form.platform_act_type == '3') config.sp_price = Number(config.sp_price);
          if (form.platform_act_type == '2') config.gift = this.list;
          form.config = config;
          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();
          }
        } else {
          return false;
        }
      });
    },
    // 查询其他信息
    async searchOther() {
      let res;
      // 是否使用;
      res = await this.dictQuery({ code: 'use' });
      if (this.$checkRes(res)) this.$set(this, `isuseList`, 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></style>
