<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form size="small" label-width="100px" inline>
            <el-form-item label="等级名称：" class="width100">
              <el-input v-model="tableFrom.brokerage_name" @keyup.enter.native="getList(1)" placeholder="请输入等级名称" class="selWidth" size="small" clearable>
                <el-button slot="append" icon="el-icon-search" size="small" class="el-button-solt" @click="getList(1)" />
              </el-input>
            </el-form-item>
            <el-button type="primary" @click="groupAdd" size="small" class="filter-item">添加分销员等级</el-button>
          </el-form>
        </div>
      </div>
      <el-table v-loading="listLoading" :data="tableData.data" style="width: 100%" size="mini" class="table" highlight-current-row>
        <el-table-column label="等级信息" prop="nickname" min-width="150" align="center">
          <template slot-scope="scope">
            <div class="user-content">
              <div class="user-avatar" v-if="scope.row.brokerage_icon">
                <img :src="scope.row.brokerage_icon" />
              </div>
              <div class="user-info">
                <div class="nickname">{{ scope.row.brokerage_name }}</div>
                <div class="user-id">ID：{{ scope.row.user_brokerage_id }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="等级权重" min-width="100" align="center">
          <template slot-scope="scope">
            <span>Lv {{scope.row.brokerage_level}}</span>
          </template>
        </el-table-column>
        <el-table-column label="任务描述" min-width="200" align="center">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.brokerage_rule" :key="index">
              <div v-if="item.is_open == 1">
                <div v-if="index=='spread_user'">推广人数{{ item.num }}人</div>
                <div v-if="index=='pay_num'">自身下单{{ item.num }}个</div>
                <div v-if="index=='spread_money'">推广订单金额{{ item.num }}元</div>
                <div v-if="index=='pay_money'">自身消费金额{{ item.num }}元</div>
                <div v-if="index=='spread_pay_num'">推广订单{{ item.num }}个</div>
                <div v-if="index=='many_goods'">购买指定商品之一</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分销员人数" min-width="100" prop="user_num" align="center" />
        <el-table-column prop="extension_one" label="一级返佣上浮比例(%)" min-width="120" align="center" />
        <el-table-column prop="extension_two" label="二级返佣上浮比例(%)" min-width="120" align="center" />
        <el-table-column label="操作" min-width="200" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="mr10" @click="onDetail(scope.row.user_brokerage_id)">详情</el-button>
            <el-button type="text" size="small" class="mr10" @click="onEdit(scope.row.user_brokerage_id)">编辑</el-button>
            <el-button type="text" size="small" class="mr10" @click="onDelete(scope.row.user_brokerage_id, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>

    <!--添加数据-->
    <el-dialog :title="(isEdit ? '编辑' : '添加') + '分销员等级'" :visible.sync="dialogVisible" width="900px" top="5vh" :before-close="handleClose" :close-on-click-modal="false">
      <el-form ref="formValidate" :model="formValidate" :rules="rules" label-width="170px" v-loading="fullscreenLoading" class="demo-promoterForm">
        <el-divider content-position="left">基本设置</el-divider>
        <el-form-item label="等级名称：" required prop="brokerage_name">
          <el-input v-model="formValidate.brokerage_name" placeholder="请输入等级名称"></el-input>
        </el-form-item>
        <el-form-item label="等级权重：" prop="brokerage_level">
          <el-input-number v-model="formValidate.brokerage_level" :min="0" placeholder="请输入任务数量"></el-input-number>
        </el-form-item>
        <el-form-item label="图标：" prop="image">
          <div class="upLoadPicBox" @click="modalPicTap('1')">
            <div v-if="formValidate.brokerage_icon" class="pictrue">
              <img :src="formValidate.brokerage_icon">
            </div>
            <div v-else class="upLoad">
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="extension_one">
          <span slot="label">
            <span>一级返佣(上浮比例)：</span>
            <el-tooltip class="item" effect="dark" content="在分销一级佣金基础上浮（0-100）百分比" placement="top-start">
              <i class="el-icon-warning-outline" />
            </el-tooltip>
          </span>
          <el-input-number v-model="formValidate.extension_one" :precision="2" :step="0.1" :min="0" :max="1000" class="selWidth"></el-input-number>
          <span>%</span>
        </el-form-item>
        <el-form-item prop="extension_two">
          <span slot="label">
            <span>二级返佣(上浮比例)：</span>
            <el-tooltip class="item" effect="dark" content="在分销二级佣金基础上浮（0-1000之间整数）百分比" placement="top-start">
              <i class="el-icon-warning-outline" />
            </el-tooltip>
          </span>
          <el-input-number v-model="formValidate.extension_two" :precision="2" :step="0.1" :min="0" :max="1000" class="selWidth"></el-input-number>
          <span>%</span>
        </el-form-item>
        <!--升级任务-->
        <el-divider content-position="left">升级条件</el-divider>
        <el-tabs tab-position="left" style="margin-bottom: 22px;" v-model="activeName">
          <el-tab-pane label="邀请好友成为下线">
            <el-radio-group v-model.number="formValidate.spread_user.is_open">
              <el-radio-button label="0">关闭</el-radio-button>
              <el-radio-button label="1">开启</el-radio-button>
            </el-radio-group>
            <template v-if="formValidate.spread_user.is_open == 1">
              <el-input class="margin-top-10" placeholder="邀请好友成为下线" v-model="formValidate.spread_user.name">
                <template slot="prepend">任务名称</template>
              </el-input>
              <el-input class="margin-top-10" placeholder="请输入任务条件人数" v-model.number="formValidate.spread_user.num">
                <template slot="prepend">任务条件</template>
                <template slot="append">人</template>
              </el-input>
              <el-input class="margin-top-10" :rows="5" placeholder="任务描述" type="textarea" v-model="formValidate.spread_user.info" resize="none"></el-input>
            </template>
          </el-tab-pane>
          <el-tab-pane label="自身消费金额">
            <el-radio-group v-model.number="formValidate.pay_money.is_open">
              <el-radio-button label="0">关闭</el-radio-button>
              <el-radio-button label="1">开启</el-radio-button>
            </el-radio-group>
            <template v-if="formValidate.pay_money.is_open == 1">
              <el-input class="margin-top-10" placeholder="自身消费金额" v-model="formValidate.pay_money.name">
                <template slot="prepend">任务名称</template>
              </el-input>
              <el-input class="margin-top-10" placeholder="请输入任务条件金额" :step="0.01" v-model.number="formValidate.pay_money.num">
                <template slot="prepend">任务条件</template>
                <template slot="append">元</template>
              </el-input>
              <el-input class="margin-top-10" :rows="5" placeholder="任务描述" type="textarea" v-model="formValidate.pay_money.info" resize="none"></el-input>
            </template>
          </el-tab-pane>
          <el-tab-pane label="自身消费订单数">
            <el-radio-group v-model.number="formValidate.pay_num.is_open">
              <el-radio-button label="0">关闭</el-radio-button>
              <el-radio-button label="1">开启</el-radio-button>
            </el-radio-group>
            <template v-if="formValidate.pay_num.is_open == 1">
              <el-input class="margin-top-10" placeholder="自身消费订单数" v-model="formValidate.pay_num.name">
                <template slot="prepend">任务名称</template>
              </el-input>
              <el-input class="margin-top-10" placeholder="请输入任务条件数量" v-model.number="formValidate.pay_num.num">
                <template slot="prepend">任务条件</template>
                <template slot="append">个</template>
              </el-input>
              <el-input class="margin-top-10" :rows="5" placeholder="请输入任务描述" type="textarea" v-model="formValidate.pay_num.info" resize="none"></el-input>
            </template>
          </el-tab-pane>
          <el-tab-pane label="下级消费金额">
            <el-radio-group v-model.number="formValidate.spread_money.is_open">
              <el-radio-button label="0">关闭</el-radio-button>
              <el-radio-button label="1">开启</el-radio-button>
            </el-radio-group>
            <template v-if="formValidate.spread_money.is_open == 1">
              <el-input class="margin-top-10" placeholder="下级消费金额" v-model="formValidate.spread_money.name">
                <template slot="prepend">任务名称</template>
              </el-input>
              <el-input class="margin-top-10" placeholder="请输入任务条件金额" v-model.number="formValidate.spread_money.num">
                <template slot="prepend">任务条件</template>
                <template slot="append">元</template>
              </el-input>
              <el-input class="margin-top-10" :rows="5" placeholder="请输入任务描述" type="textarea" v-model="formValidate.spread_money.info" resize="none"></el-input>
            </template>
          </el-tab-pane>
          <el-tab-pane label="下级消费订单数">
            <el-radio-group v-model.number="formValidate.spread_pay_num.is_open">
              <el-radio-button label="0">关闭</el-radio-button>
              <el-radio-button label="1">开启</el-radio-button>
            </el-radio-group>
            <template v-if="formValidate.spread_pay_num.is_open == 1">
              <el-input class="margin-top-10" placeholder="下级消费订单数" v-model="formValidate.spread_pay_num.name">
                <template slot="prepend">任务名称</template>
              </el-input>
              <el-input class="margin-top-10" placeholder="请输入任务条件数量" v-model.number="formValidate.spread_pay_num.num">
                <template slot="prepend">任务条件</template>
                <template slot="append">个</template>
              </el-input>
              <el-input class="margin-top-10" :rows="5" placeholder="请输入任务描述" type="textarea" v-model="formValidate.spread_pay_num.info" resize="none"></el-input>
            </template>
          </el-tab-pane>
          <el-tab-pane label="购买指定商品之一">
            <el-radio-group v-model.number="formValidate.many_goods.is_open">
              <el-radio-button label="0">关闭</el-radio-button>
              <el-radio-button label="1">开启</el-radio-button>
            </el-radio-group>
            <template v-if="formValidate.many_goods.is_open == 1">
              <el-button type="info" @click="addGoods">添加商品</el-button>
              <div class="many-goods-content">
                <div class="many-goods-block" v-for="(item,index) in many_goods_list" :key="index">
                  <img class="many-goods-img" :src="item.image" />
                  <div class="info">
                    <div class="info-name">{{item.store_name}}</div>
                    <div class="info-id">ID：{{item.product_id}}</div>
                  </div>
                  <el-button type="danger" icon="el-icon-delete" circle @click="delManyGoods(item)"></el-button>
                </div>
              </div>
            </template>
          </el-tab-pane>
        </el-tabs>
        <el-form-item prop="submit_validate">
          <el-button type="primary" :loading="loading" @click="submitForm('formValidate')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--详情-->
    <el-dialog title="查看详情" :visible.sync="detailDialog" width="700px" :before-close="handleClose">
      <div v-loading="loading">
      <div class="box-container">
        <div class="acea-row">
          <div class="list sp"><label class="name">等级名称：</label>{{ formValidate.brokerage_name }}</div>
        </div>
        <div class="title" style="margin-top: 20px;">分销任务：</div>
        <div class="acea-row">
          <table class="detail-table">
            <tr>
                <th>任务类型</th>
                <th>任务名称</th>
                <th>任务内容</th>
                <th>任务描述</th>
            </tr>
            <tr v-if="formValidate.spread_user.is_open == 1">
                <td>邀请好友成为下线</td>
                <td>邀请好友</td>
                <td>下线满{{formValidate.spread_user.num}}人</td>
                <td>{{formValidate.spread_user.info}}</td>
            </tr>
            <tr v-if="formValidate.pay_money.is_open == 1">
                <td>自身消费金额</td>
                <td>分销自购</td>
                <td>{{formValidate.pay_money.num}}元</td>
                <td>{{formValidate.pay_money.info}}</td>
            </tr>
            <tr v-if="formValidate.pay_num.is_open == 1">
                <td>自身消费订单数</td>
                <td>分销自购</td>
                <td>{{formValidate.pay_num.num}}个订单</td>
                <td>{{formValidate.pay_num.info}}</td>
            </tr>
            <tr v-if="formValidate.spread_money.is_open == 1">
                <td>下级消费金额</td>
                <td>推广订单金额</td>
                <td>{{formValidate.spread_money.num}}元</td>
                <td>{{formValidate.spread_money.info}}</td>
            </tr>
            <tr v-if="formValidate.spread_pay_num.is_open == 1">
                <td>下级消费订单数</td>
                <td>推广订单数</td>
                <td>{{formValidate.spread_pay_num.num}}个订单</td>
                <td>{{formValidate.spread_pay_num.info}}</td>
            </tr>
            <tr v-if="formValidate.many_goods.is_open == 1">
              <td>购买指定商品之一</td>
              <td>购买商品</td>
              <td>-</td>
              <td>-</td>
            </tr>
          </table>
        </div>
        <div class="acea-row">
          <div class="list sp"><label class="name">等级：</label>{{ formValidate.brokerage_level }}级</div>
          <div class="list sp100 image">
            <label class="name">图标：</label>
            <img
              style="max-width: 150px; height: 80px;"
              :src="formValidate.brokerage_icon"
            />
          </div>
          <div class="list sp100"><label class="name">一级返佣(上浮比例)：</label>{{ formValidate.extension_one }}%</div>
          <div class="list sp100"><label class="name">二级返佣(上浮比例)：</label>{{ formValidate.extension_two }}%</div>
        </div>
      </div>
    </div>
    </el-dialog>
    <!--商品选择器-->
    <goodsList ref="goodsList" @onSelectList="selectList" />

  </div>
</template>

<script>
import { distributionLevelLst, membershipDataAddApi, distributionDetail, distributionUpdate, distributionDelete } from '@/api/promoter';
import goodsList from '@/views/marketing/atmosphere/atmosphereList/goodsList.vue';
import { selectProductList } from '@/api/marketing'
import path from 'path'
import modules from '@/components/mobileConfig'
export default {
  name: 'brokerageLevel',
  components: {
    goodsList,
  },
  data() {
    return {
      activeName: '0',
      fullscreenLoading: false,
      cardLists: [],
      isEdit: false,
      tableData: {
        data: [],
        total: 0
      },
      listLoading: true,
      loading: false,
      tableFrom: {
        brokerage_name: '',
        page: 1,
        limit: 20
      },
      id: '',
      dialogVisible: false,
      detailDialog: false,
      uid: '',
      formValidate: {
        brokerage_name: '',
        brokerage_level: '',
        brokerage_icon: '',
        extension_one: 0,
        extension_two: 0,
        // 升级条件
        spread_user: {
          is_open: 0,
          name: '',
          num: '',
          info: '',
        },
        pay_money: {
          is_open: 0,
          name: '',
          num: '',
          info: '',
        },
        pay_num: {
          is_open: 0,
          name: '',
          num: '',
          info: '',
        },
        spread_money: {
          is_open: 0,
          name: '',
          num: '',
          info: '',
        },
        spread_pay_num: {
          is_open: 0,
          name: '',
          num: '',
          info: '',
        },
        many_goods: {
          is_open: 0,
          ids: [],
        },
      },
      rules: {
        brokerage_name: [{ required: true, message: '请输入等级名称', trigger: 'blur' }],
        brokerage_level: [
          { required: true, message: '请输入等级权重', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if(value <= 0) callback(new Error('等级权重必须大于0!'));

              callback()
            }, trigger: 'blur'
          }
        ],
        brokerage_icon: [{ required: true, message: '请上传图标', trigger: 'change' }],
        extension_one: [{ required: true, message: '请输入一级返佣比例', trigger: 'change' }],
        extension_two: [{ required: true, message: '请输入二级返佣比例', trigger: 'change' }],
        /*submit_validate: [{
          validator: (rule, value, callback) => {
            let formData = Object.assign({},this.formValidate);
            // 判断：是否不存在升级条件
            if (!formData.spread_user_num
              && !formData.pay_money_num
              && !formData.pay_num_num
              && !formData.spread_money_num
              && !formData.spread_pay_num_num
              && Object.keys(formData.many_goods.ids).length <= 0) {
              callback(new Error('请至少设置一个升级任务!'));
            }
            // 升级任务是否设置数量
              if ((formData.spread_user_num && !formData.spread_user_name)
                || (formData.pay_money_num && !formData.pay_money_name)
                || (formData.pay_num_num && !formData.pay_num_name)
                || (formData.spread_money_num && !formData.spread_money_name)
                || (formData.spread_pay_num_num && !formData.spread_pay_num_name)
                || (!formData.spread_user_num && formData.spread_user_name)
                || (!formData.pay_money_num && formData.pay_money_name)
                || (!formData.pay_num_num && formData.pay_num_name)
                || (!formData.spread_money_num && formData.spread_money_name)
                || (!formData.spread_pay_num_num && formData.spread_pay_num_name)) {
                callback(new Error('请输入相对应的任务或数量'));
              }

            callback();
          }, trigger: 'blur'
        }]*/
      },
      // 购买指定商品之一 相关信息
      many_goods_list: [],

    }
  },
  mounted() {
    this.getList('')
  },
  methods: {
    // 点击上传图标
    modalPicTap(tit, num, i) {
      const _this = this
      this.$modalUpload(function(img) {
        _this.formValidate.brokerage_icon = img[0]
        _this.$forceUpdate()
      }, tit)
    },
    // 添加数据
    groupAdd() {
      this.activeName = '0';
        this.dialogVisible = true;
        this.isEdit = false;
        this.id= ''
        this.resetData();
    },
    resetData(){



      this.formValidate = {
        brokerage_name: '',
        brokerage_level: '',
        extension_one: 0,
        extension_two: 0,
        spread_user: {
          is_open: 0,
          name: '',
          num: '',
          info: '',
        },
        pay_money: {
          is_open: 0,
          name: '',
          num: '',
          info: '',
        },
        pay_num: {
          is_open: 0,
          name: '',
          num: '',
          info: '',
        },
        spread_money: {
          is_open: 0,
          name: '',
          num: '',
          info: '',
        },
        spread_pay_num: {
          is_open: 0,
          name: '',
          num: '',
          info: '',
        },
        many_goods: {
          is_open: 0,
          ids: [],
        },
      }
    },
    submitForm(name) {
      let formData = this.formValidate
      this.$refs[name].validate(valid => {
        if (valid) {
          this.loading = true
          let params = {
            brokerage_level: formData.brokerage_level,
            brokerage_name: formData.brokerage_name,
            brokerage_icon: formData.brokerage_icon,
            extension_one: formData.extension_one,
            extension_two: formData.extension_two,
            brokerage_rule: {
              spread_user: formData.spread_user || {},
              pay_money: formData.pay_money || {},
              pay_num: formData.pay_num || {},
              spread_money: formData.spread_money || {},
              spread_pay_num: formData.spread_pay_num || {},
              many_goods: formData.many_goods || {},
            }
          };
          // 提交内容
          console.log('提交信息',params);
          if(this.id){
            // 修改数据
            distributionUpdate(this.id, params).then(res => {
              this.loading = false
              this.$message.success(res.message)
              this.dialogVisible = false
              this.getList('')
              this.resetData()
            }).catch((res) => {
              this.$message.error(res.message)
              this.loading = false
            })
          }else{
            // 添加数据
            membershipDataAddApi(params).then(res => {
              this.loading = false
              this.$message.success(res.message)
              this.dialogVisible = false
              this.getList('')
              this.resetData()
            }).catch((res) => {
              this.$message.error(res.message)
              this.loading = false
            })
          }
        }
      })
    },
    // 编辑
    onEdit(id) {
      this.activeName = '0';
        this.id = id;
        this.isEdit = true;
        this.dialogVisible = true
        this.getDetail(id);
    },
    getDetail(id){
      distributionDetail(id).then(res => {
        this.loading = false
        let info = res.data
        this.formValidate = {
          brokerage_name: info.brokerage_name,
          brokerage_level: info.brokerage_level,
          brokerage_icon: info.brokerage_icon,
          extension_one: info.extension_one,
          extension_two: info.extension_two,
          pay_money: {
            is_open: info.brokerage_rule.pay_money.is_open || 0,
            name: info.brokerage_rule.pay_money.name || '',
            num: info.brokerage_rule.pay_money.num || 0,
            info: info.brokerage_rule.pay_money.info || '',
          },
          pay_num: {
            is_open: info.brokerage_rule.pay_num.is_open || 0,
            name: info.brokerage_rule.pay_num.name || '',
            num: info.brokerage_rule.pay_num.num || 0,
            info: info.brokerage_rule.pay_num.info || '',
          },
          spread_money: {
            is_open: info.brokerage_rule.spread_money.is_open || 0,
            name: info.brokerage_rule.spread_money.name || '',
            num: info.brokerage_rule.spread_money.num || 0,
            info: info.brokerage_rule.spread_money.info || '',
          },
          spread_pay_num: {
            is_open: info.brokerage_rule.spread_pay_num.is_open || 0,
            name: info.brokerage_rule.spread_pay_num.name || '',
            num: info.brokerage_rule.spread_pay_num.num || 0,
            info: info.brokerage_rule.spread_pay_num.info || '',
          },
          spread_user: {
            is_open: info.brokerage_rule.spread_user.is_open || 0,
            name: info.brokerage_rule.spread_user.name || '',
            num: info.brokerage_rule.spread_user.num || 0,
            info: info.brokerage_rule.spread_user.info || '',
          },
          many_goods: info.brokerage_rule.many_goods || {
            is_open: info.brokerage_rule.spread_user.is_open || 0,
            ids: [],
          }
        }
        if(Object.keys(this.formValidate.many_goods.ids).length > 0) this.getGoodsList();
      }).catch((res) => {
         this.$message.error(res.message)
         this.loading = false;
      })
    },
    // 详情
    onDetail(id) {
      this.loading = true;
      this.detailDialog = true;
      this.getDetail(id)
    },
    // 删除
    onDelete(id,idx) {
      this.$modalSure('确定删除该等级吗').then(() => {
        distributionDelete(id)
          .then(({ message }) => {
            this.$message.success(message)
            this.tableData.data.splice(idx, 1)
          })
          .catch(({ message }) => {
            this.$message.error(message)
          })
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.detailDialog = false
    },
    selectChange(tab) {
      this.tableFrom.date = tab
      this.timeVal = []
      this.tableFrom.page = 1;
      this.getList('')
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e
      this.tableFrom.date = e ? this.timeVal.join('-') : ''
      this.tableFrom.page = 1;
      this.getList('')
    },
    // 列表
    getList(num) {
      this.listLoading = true
      this.tableFrom.page = num ? num : this.tableFrom.page
      distributionLevelLst(this.tableFrom).then(res => {
        this.tableData.data = res.data.list
        this.tableData.total = res.data.count
        this.listLoading = false
      }).catch((res) => {
        this.$message.error(res.message)
        this.listLoading = false
      })
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getList('')
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val
      this.getList('')
    },
    // 商品选择 - 显示弹框
    addGoods() {
      this.$refs.goodsList.dialogVisible = true;
    },
    // 商品选择 - 选择完商品确定方法
    selectList(spu_ids) {
      // 如果spu_ids有长度，就push商品id，并且去重以后重新请求列表
      let manyGoodsIds = this.formValidate.many_goods.ids || [];
      if (Object.keys(manyGoodsIds).length > 0) {
        manyGoodsIds.push(...spu_ids);
        manyGoodsIds = [...new Set(manyGoodsIds)];
        this.formValidate.many_goods.ids = manyGoodsIds;
      } else {
        this.$set(this.formValidate.many_goods, 'ids', spu_ids);
      }
      this.getGoodsList('');
    },
    // 商品选择 - 获取商品列表
    getGoodsList() {
      if(Object.keys(this.formValidate.many_goods.ids).length <= 0){
        this.many_goods_list = {};
        return false;
      }
      let params = {
        spu_ids: this.formValidate.many_goods.ids,
        page: 1,
        limit: 999
      };
      selectProductList(params).then((res) => {
        this.many_goods_list = res.data.list;
      }).catch((res) => {
        this.$message.error(res.message)
      })
    },
    // 商品选择 - 删除商品
    delManyGoods(item){
      let ids = Object.assign({},this.formValidate.many_goods.ids);
      Object.values(ids).some(function(v,k){
        if(Number(v) === Number(item.spu_id)) {
          delete ids[k];
          return true;
        }
      });

      this.formValidate.many_goods.ids = Object.values(ids);
      this.getGoodsList();
    },




  }
}
</script>

<style scoped lang="scss">
.selWidth {
  width: 300px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  font-size: 12px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.detail-table {
  width: 500px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #e6ebf5;
  border-bottom: none;

  td, th {
    border-bottom: 1px solid #e6ebf5;
    border-right: 1px solid #e6ebf5;

    &:last-child {
      border-right: none;
    }
  }
}
.box-container {
  overflow: hidden;
}
.box-container .list {
  float: left;
  line-height: 40px;
}
.box-container .sp {
  width: 50%;
}
.box-container .sp3 {
  width: 33.3333%;
}
.box-container .sp100 {
  width: 100%;
}
.box-container .list .name {
  display: inline-block;
  color: #606266;
}
.box-container .list .blue {
  color: #437FFD;
}
.box-container .list.image {
  margin: 20px 0;
  position: relative;
}
.box-container .list.image img {
  position: absolute;
  top: -20px;
}
.title {
  margin-bottom: 16px;
  color: #606266;
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 2px;
}
.margin-top-10{
  margin-top: 10px!important;
}
.many-goods-content{
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  .many-goods-block{
    width: calc((100% - (20px * 2)) / 2);
    margin: 10px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);//rgba(0,0,0,.1)
    padding: 10px;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    .many-goods-img{
      width: 80px;
      height: 80px;
    }
    .info{
      width: calc(100% - 90px);
      font-size: 15px;
      font-weight: bold;
      padding: 0 10px;
      .info-name{
        height: 50px;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .info-id{}
    }
  }
}
.user-content{
  --user-content-height-: 80px;

  height: var(--user-content-height-);
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  .user-avatar{
    height: var(--user-content-height-);
    width: var(--user-content-height-);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    img{
      height: 80%!important;
      width: 80%!important;
      border-radius: 50% !important;
    }
  }
  .user-info{
    height: var(--user-content-height-);
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    .nickname{
      font-size: 15px;
      font-weight: bold;
      line-height: calc(var(--user-content-height- * 65%));
    }
    .user-id{
      font-size: 13px;
      line-height: calc(var(--user-content-height- * 35%));
    }
  }
}
</style>
