<template>
  <div class="app-container">

    <div class="step-container">
      <el-steps :active="step" simple style="margin-top: 20px">
        <el-step title="1.编辑基础信息" ></el-step>
        <el-step title="2.编辑商品信息" ></el-step>
        <el-step title="3.编辑商品详情" ></el-step>
      </el-steps>
    </div>

    <!-- 第一步 -->
    <div class="form-container" v-show="step == 0">
      <el-form ref="step1Form" :model="step1Form" :rules="step1FormRules" label-width="120px">
        <el-form-item label="商品名称：" prop="goodsName">
          <el-input v-model="step1Form.goodsName" placeholder="请输入商品名称" maxlength="200" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="商品描述：" prop="goodsDes">
          <el-input v-model="step1Form.goodsDes" type="textarea" placeholder="请输入商品描述" :autosize="{ minRows: 3, maxRows: 6}" maxlength="100" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="商品主图：" prop="imgUrl">
          <el-upload
            class="avatar-uploader"
            style="height:122px"
            :action="baseURL + 'common/upload'"
            :headers="myHeaders"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload">
            <img v-if="step1Form.imgUrl" :src="step1Form.imgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="tips">
            <span>建议尺寸：800*800</span>
          </div>
        </el-form-item>
        <el-form-item label="轮播图：" prop="images">
          <el-upload
            multiple
            :limit="6"
            ref="imageListUpload2"
            class="avatar-uploader2 imageListUpload2"
            style="height: 0;"
            :action="baseURL + 'common/upload'"
            :headers="myHeaders"
            name="file"
            :show-file-list="false"
            :on-success="uploadSuccess2"
            :on-exceed="uploadExceed2"
            :before-upload="beforeUpload2">
          </el-upload>
          <div class="images">
            <div class="item" v-for="(item, index) in step1Form.images" :key="index">
              <div class="img">
                <el-image ref="img" :src="item.url" style="width: 120px; height: 120px" fit="cover"></el-image>
                <div class="mask">
                  <div class="row">
                    <div class="it" @click="uploadImage(item.id)"><i class="el-icon-upload2"></i></div>
                    <div class="it" @click="deleteImage(index)"><i class="el-icon-delete"></i></div>
                  </div>
                  <div class="row">
                    <div class="it" @click="moveForward(index)"><i class="el-icon-back"></i><span>前移</span></div>
                    <div class="it" @click="moveBack(index)"><span>后移</span><i class="el-icon-right"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="add" @click="uploadImage(0)">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
          </div>
          <div class="tips" style="margin-top: 0;">
            <span>建议尺寸：800*800，最多上传6张</span>
          </div>
        </el-form-item>

        <el-form-item label="商品视频：" prop="videoUrl">
          <el-upload
            class="avatar-uploader"
            style="height:122px"
            :action="baseURL + 'common/upload'"
            :headers="myHeaders"
            :show-file-list="false"
            :on-success="uploadSuccess3"
            :before-upload="beforeUpload3">
            <!-- <img v-if="step1Form.videoUrl" :src="step1Form.videoUrl" class="avatar"> -->
            <video v-if="step1Form.videoUrl" :src="step1Form.videoUrl" height="120" style="display: block;"></video>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="tips">
            <span>建议视频宽高比：16:9，建议时长9-30秒</span>
          </div>
        </el-form-item>

        <el-form-item label="商品分类：" prop="classify">
          <el-cascader
            placeholder="请选择商品分类"
            :options="classifyList"
            :props="{ value: 'categoryId', label:'name' }"
            v-model="step1Form.classify"
            style="width: 300px"
            @change="changeClassify()"
            filterable
            clearable>
          </el-cascader>
        </el-form-item>

        <el-form-item label="营销活动：" prop="marketing">
          <el-select v-model="step1Form.marketing" placeholder="请选择营销活动" style="width: 300px" clearable :disabled="!step1Form.classify">
            <el-option
              v-for="item in marketingList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品属性：" prop="attrs">
          <el-select v-model="step1Form.attrs" multiple placeholder="请选择商品属性" clearable style="width: 300px">
            <el-option v-for="item in attrList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品标签：" prop="tags">
          <el-select v-model="step1Form.tags" multiple placeholder="请选择商品标签" clearable style="width: 300px">
            <el-option v-for="item in tagList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="使用优惠券：" prop="couponType">
          <el-radio-group v-model="step1Form.couponType">
            <el-radio :label="1">所有优惠券</el-radio>
            <el-radio :label="2">满减券</el-radio>
            <el-radio :label="3">商品券</el-radio>
            <el-radio :label="0">不可使用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="适用范围：" prop="receiveCrowd">
          <el-radio-group v-model="step1Form.receiveCrowd">
            <el-radio :label="1">所有人</el-radio>
            <el-radio :label="2">普通用户</el-radio>
            <el-radio :label="3">业务员</el-radio>
            <el-radio :label="0">指定用户</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="选择用户：" prop="memberList" v-if="step1Form.receiveCrowd === 0">
          <div style="margin-bottom: 10px" class="clearfix">
            <div class="fl">
              <el-button type="primary" size="small" @click="addMember">添加用户</el-button>
              <el-upload
                style="display: inline-block; margin-left: 10px"
                :action="baseURL + 'common/upload'"
                :http-request="handleImport"
                :file-list="importFileList"
              >
                <el-button size="small" :loading="importLoading">{{ importLoading ? '导入中...' : '导入 (模版第2列为手机号即可)' }}</el-button>
              </el-upload>
            </div>
            <div class="fr">
              <el-input v-model="phoneSearchMember" placeholder="请输入手机号筛选" size="small" clearable></el-input>
            </div>
          </div>

          <el-table :data="memberShowList" element-loading-text="Loading" border fit highlight-current-row stripe height="300px">
            <el-table-column align="center" label="名称" prop="nickName" min-width="100"></el-table-column>
            <el-table-column align="center" label="手机号" prop="mobile" min-width="120"></el-table-column>
            <el-table-column align="center" label="角色" prop="memberName" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.type | MEMBER_CURRENT_TYPE_FILTER }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="是否团长" prop="promotionGroupLeader" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.promotionGroupLeader ? '是':'否' }}
              </template>
            </el-table-column>
            <el-table-column align="center" label="是否内部人员" prop="innerr" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.innerr ? '是':'否' }}
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-popconfirm title="确定删除吗？" @onConfirm="deleteMember(scope.$index)" >
                  <el-button slot="reference" type="text" style="color: #F56C6C;">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </div>

    <!-- 第二步 -->
    <div class="form-container" v-show="step == 1">
      <el-form ref="step2Form" :model="step2Form" :rules="step2FormRules" label-width="176px">
        <div class="title">商品信息</div>
        <el-form-item label="商品详情显示库存：" prop="showStock">
          <el-radio-group v-model="step2Form.showStock">
            <el-radio :label="true">显示</el-radio>
            <el-radio :label="false">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="已售件数：" prop="sales">
          <el-input v-model="step2Form.sales" placeholder="请输入已售件数" class="small"></el-input>
          <div class="tips2">已售件数不计入后台数据统计</div>
        </el-form-item>
        <el-form-item label="商品详情显示销量：" prop="showSales">
          <el-radio-group v-model="step2Form.showSales">
            <el-radio :label="true">显示</el-radio>
            <el-radio :label="false">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="运费模版：" prop="freight">
          <el-select v-model="step2Form.freight" filterable placeholder="请选择运费模版" style="width: 300px">
            <el-option v-for="item in freightList" :key="item.freightTemplateId" :label="item.name" :value="item.freightTemplateId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品状态：" prop="status">
          <el-radio-group v-model="step2Form.status">
            <el-radio :label="true">上架</el-radio>
            <el-radio :label="false">下架</el-radio>
          </el-radio-group>
        </el-form-item>

        <div class="title">商品框信息</div>
        <el-form-item label="设置商品框数量及比例：">
          <el-button type="primary" size="small" @click="addGoodsShelves()">新增商品框</el-button>
        </el-form-item>

        <el-divider></el-divider>

        <div v-for="(item, index) in goodsShelves" :key="index">
          <div class="title">商品框{{index + 1}}<el-button type="danger" size="small" @click="delGoodsShelves(index)">删除商品框</el-button></div>
          <el-form-item label="数量：" label-width="90px">
            <el-input v-model="item.num" placeholder="请输入数量" class="small"></el-input>
          </el-form-item>
          <el-form-item label="参与商品：" label-width="90px">
            <div style="margin-bottom: 10px">
              <el-button type="primary" size="small" @click="addGoods(index)">选择商品</el-button>
            </div>
          </el-form-item>
          <div class="diy-table">
            <div class="table-head clearfix">
              <div class="item goods">商品名称</div>
              <div class="item sort">排序</div>
              <div class="right">
                <div class="item name">规格</div>
                <div class="item input">销售价格</div>
                <div class="item input">分佣比例</div>
                <div class="item input">库存</div>
                <div class="item input">销量</div>
                <div class="item input">限制最高数量</div>
              </div>
              <div class="item opera">操作</div>
            </div>
            <div class="goods-item" v-for="(goodsItem, goodsIndex) in item.goodsList" :key="goodsIndex">
              <div class="goods-info">
                <img :src="goodsItem.imgUrl" alt="">
                {{goodsItem.goodsName}}
              </div>
              <div class="sort">
                <el-input type="number" size="small" v-model="goodsItem.sortNum"></el-input>
              </div>
              <div class="spec-list">
                <div class="spec-item" v-for="(specItem, specIndex) in goodsItem.goodsPackagePopList" :key="specIndex">
                  <div class="col name">{{specItem.specName}}-{{specItem.specValue}}</div>
                  <div class="col input"><el-input type="number" size="small" v-model="specItem.price"></el-input></div>
                  <div class="col input"><el-input type="number" size="small" v-model="specItem.shareRate">
                    <i slot="suffix">%</i>
                  </el-input></div>
                  <div class="col input">{{specItem.stock}}</div>
                  <div class="col input"><el-input type="number" size="small" v-model="specItem.soldNum"></el-input></div>
                  <div class="col input"><el-input type="number" size="small" v-model="specItem.limitNum"></el-input></div>
                </div>
              </div>
              <div class="operation">
                <el-button type="text" style="color: #f56c6c" @click="deleteGoods(index, goodsIndex)">删除</el-button>
              </div>
            </div>
            <div class="empty-text" v-if="item.goodsList.length < 1">暂无数据</div>
          </div>
        </div>
        

      </el-form>
    </div>

    <!-- 第三步 -->
    <div class="form-container" v-show="step == 2">
      <el-form ref="step3Form" :model="step3Form" :rules="step3FormRules" label-width="80px" label-position="top">
        <el-form-item label="说明模块" prop="moduleId">
          <el-select v-model="step3Form.moduleId" filterable placeholder="请选择说明模块" style="width: 300px">
            <el-option v-for="item in moduleList" :key="item.commonTemplateId" :label="item.name" :value="item.commonTemplateId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详情内容" prop="detailContent">
          <el-upload
            ref="imageListUpload"
            class="avatar-uploader2 imageListUpload"
            :action="baseURL + 'common/upload'"
            :headers="myHeaders"
            multiple
            name="file"
            :show-file-list="false"
            :on-success="uploadSuccess4"
            :on-error="uploadError4"
            :before-upload="beforeUpload4">
          </el-upload>
          <!--富文本编辑器组件-->
          <el-row v-loading="quillImgLoading">
            <quill-editor
              v-model="step3Form.detailContent"
              ref="myQuillEditor"
              :options="editorOption">
            </quill-editor>
          </el-row>
        </el-form-item>
      </el-form>
    </div>


    <div class="page-footer">
      <div class="footer">
        <el-button @click="changeStep(0)" v-show="step > 0">上一步</el-button>
        <el-button @click="changeStep(1)" v-show="step < 2">下一步</el-button>
        <el-button type="primary" @click="clickSubmitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交' }}</el-button>
        <el-popconfirm
          title="确定关闭吗？"
          @onConfirm="goBack"
          style="margin-left: 10px;"
        >
          <el-button slot="reference">关 闭</el-button>
        </el-popconfirm>
      </div>
    </div>


    <!-- 选择会员 -->
    <el-dialog title="选择会员" :visible.sync="addMemberVisible" :show-close="false" width="65%" :close-on-click-modal="false">
      <div class="dialog-container2 clearfix">
        <el-form ref="screenForm" :model="member_screenForm" size="small" label-position="left">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :lg="7">
              <el-form-item label="关键词" prop="keyword" label-width="55px">
                <el-input v-model="member_screenForm.keyword" placeholder="请输入会员名称/电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="7">
              <el-form-item label="注册日期" prop="registerDate" label-width="70px">
                <el-date-picker
                  style="width: 100%"
                  v-model="member_screenForm.registerDate"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="7">
              <el-form-item label="" prop="type" label-width="20px">
                <el-radio-group v-model="member_screenForm.type" :disabled="memberList.length > 0 ? true : false">
                  <el-radio :label="'SERVICE'">业务员</el-radio>
                  <el-radio :label="'GENERAL'">普通用户</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :lg="2" class="tr">
              <el-button size="small" type="primary" @click="getMemberListByScreen">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
        <div class="table memberTable" style="margin: 10px 0 20px;">
          <el-table 
            v-loading="memberTable_listLoading" 
            :data="memberTable_dataList" 
            element-loading-text="Loading" 
            tooltip-effect="dark" 
            style="width: 100%" 
            max-height="360"
            @selection-change="handleChooseMember">
            <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
            <el-table-column align="center" prop="nickName" label="会员名称" min-width="150"></el-table-column>
            <el-table-column align="center" prop="sex" label="性别" min-width="100"></el-table-column>
            <!-- <el-table-column align="center" label="地区" prop="city" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.province }}{{ scope.row.city }}
              </template>
            </el-table-column> -->
            <el-table-column align="center" prop="mobile" label="注册手机" min-width="100"></el-table-column>
            <!-- <el-table-column align="center" prop="createTime" label="注册时间" min-width="100"></el-table-column> -->
            <el-table-column align="center" prop="memberName" label="角色" min-width="100">
              <template slot-scope="scope">
                {{ scope.row.type | MEMBER_CURRENT_TYPE_FILTER }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="memberName" label="状态" min-width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status | MEMBER_CURRENT_STATUS_FILTER }}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination clearfix">
          <div class="fr">
            <el-pagination
              @current-change="memberTableCurrentChange"
              :current-page="memberTable_currentPage"
              :page-size="memberTable_pageSize"
              background
              layout="prev, pager, next"
              :total="memberTable_listTotal">
            </el-pagination>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddMember">保 存</el-button>
        <el-button @click="cancelAddMember">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择商品 -->
    <el-dialog title="选择商品" :visible.sync="addGoodsVisible" :show-close="false" width="60%" :close-on-click-modal="false">
      <div class="dialog-container clearfix">
        <div class="left fl">
          <div class="item" @click="changeClassify('')">全部分类</div>
          <div class="group" v-for="(item, index) in classifyList" :key="index">
            <div class="item" @click="toggleOpen(index)">
              <i :class="item.isOpen ? 'el-icon-caret-bottom':'el-icon-caret-right'"></i> {{item.name}}
            </div>
            <div class="child" v-if="item.isOpen">
              <div class="item" v-for="(childItem, childIndex) in item.children" :key="childIndex" @click="changeClassify(childItem.categoryId)">{{childItem.name}}</div>
            </div>
          </div>
        </div>

        <div class="right fl">
          <div class="search">
            <el-input placeholder="请输入商品名称进行搜索" v-model="keyword" class="input-with-select" clearable size="small" style="width: 250px">
              <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
            </el-input>
          </div>
          <div class="table" style="margin: 10px 0 20px;">
            <el-table 
              v-loading="table_listLoading" 
              :data="table_dataList" 
              element-loading-text="Loading" 
              tooltip-effect="dark" 
              style="width: 100%" 
              max-height="270"
              @selection-change="handleChooseGoods">
              <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
              <el-table-column align="center" prop="goodsName" label="商品名称" min-width="200" show-overflow-tooltip></el-table-column>
              <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
              <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
            </el-table>
          </div>
          <div class="pagination clearfix">
            <div class="fr">
              <el-pagination
                @current-change="handleTableCurrentChange"
                :current-page="table_currentPage"
                :page-size="table_pageSize"
                background
                layout="prev, pager, next"
                :total="table_listTotal">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddGoods">保 存</el-button>
        <el-button @click="cancelAddGoods">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { handleImport } from '@/utils/util'
import { getGoodsList, getMemberList } from '@/api/groupbuy'
import { getGoods } from '@/api/package'
import { getClassifyList, getFreightList, addGoods, editGoods, getGoodsDetail, getModuleList, getMarketingList, getTagList } from '@/api/goods'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{'header': 1}, {'header': 2}],
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],
  [{'indent': '-1'}, {'indent': '+1'}],
  [{'direction': 'rtl'}],
  [{'size': ['small', false, 'large', 'huge']}],
  [{'header': [1, 2, 3, 4, 5, 6, false]}],
  [{'color': []}, {'background': []}],
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  // ['clean']
]

const defaultObj = {
  num: '',
  goodsList: [],
}

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: {'x-token': getToken()},
      isEdit: false,
      editId: '',

      step: 0,
      step1Form: {
        goodsName: '',
        goodsDes: '',
        imgUrl: '',
        images: [],
        videoUrl: '',
        classify: '',
        marketing: '',
        attrs: [],
        tags: [],
        couponType: 1,
        receiveCrowd: 1,
      },
      step1FormRules: {
        goodsName: [
          { required: true, message: '请填写商品名称', trigger: 'blur' }
        ],
        imgUrl: [
          { required: true, message: '请上传商品主图', trigger: 'change' }
        ],
        images: [
          { required: true, message: '请上传轮播图', trigger: 'change' }
        ],
        classify: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ],
        couponType: [
          { required: true, message: '请选择使用优惠券', trigger: 'change' }
        ],
        receiveCrowd: [
          { required: true, message: '请选择适用范围', trigger: 'change' }
        ]
      },
      imagesList: [], // 图片墙展示列表

      classifyList: [],
      freightList: [],
      moduleList: [],

      step2Form: {
        showStock: true,
        sales: '',
        showSales: true,
        freight: '',
        status: true,
      },
      step2FormRules: {
        freight: [
          { required: true, message: '请选择运费模版', trigger: 'change' }
        ],
      },

      goodsShelves: [JSON.parse(JSON.stringify(defaultObj))], // 商品框列表

      step3Form: {
        moduleId: '',
        detailContent: '',
      },
      step3FormRules: {
        detailContent: [
          { required: true, message: '请输入详情内容', trigger: 'blur' }
        ],
      },

      quillImgLoading: false, // 富文本上传图片loading
      editorOption: { // 富文本配置
        placeholder: '请输入详情内容',
        theme: 'snow',
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              'image': function (value) {
                if (value) {
                  document.querySelector('.imageListUpload input').click()
                } else {
                  this.quill.format('image', false);
                }
              }
            }
          }
        }
      },

      editorImages: [],
      formLoading: false,
      canChangeGoodsPrice: false,
      uploadImageId: null,
      marketingList: [],
      attrList: [],
      tagList: [],

      canCompute: false,

      phoneSearchMember: '',
      // memberShowList: [], // 会员显示数据
      memberList: [], // 会员数据
      addMemberVisible: false,
      member_screenForm: { // 筛选表单数据
        keyword: '', // 名称
        registerDate: [],
        type: 'SERVICE',
      },
      memberTable_dataList: null, // 列表数据
      memberTable_listLoading: true, // 列表加载loading
      memberTable_currentPage: 1, // 当前页码
      memberTable_pageSize: 10, // 每页数量
      memberTable_listTotal: 0, // 列表总数
      memberTable_choose: [], // table中 当前选择会员

      importLoading: false,
      importFileList: [],

      addGoodsVisible: false,
      addGoodsIndex: 0,
      classifyList: [],
      classifyCurrent: '',
      keyword: '',
      table_dataList: null, // 列表数据
      table_listLoading: true, // 列表加载loading
      table_currentPage: 1, // 当前页码
      table_pageSize: 10, // 每页数量
      table_listTotal: 0, // 列表总数
      table_chooseGoods: [], // table中 当前选择商品

    }
  },
  computed: {
    // 显示的会员列表
    memberShowList() {
      let list = this.memberList.filter((item) => {
        return item.mobile.indexOf(this.phoneSearchMember) >= 0;
      });
      return list;
    },

    // 已选择商品
    allGoodsList() {
      let list = [];
      this.goodsShelves.forEach(item => {
        list = list.concat(item.goodsList);
      })
      return list;
    }
  },
  watch: {
    
  },
  async created() {
    const { id } = this.$route.query;
    this.isEdit = id ? true : false;
    this.editId = id;

    await this.getClassifyList();

    this.getTagList();

    this.getFreightList();
    this.getModuleList();

    if(this.isEdit) {
      this.canCompute = false;
      this.getGoodsDetail(id);
    }else {
      this.canCompute = true;
      this.canChangeGoodsPrice = true;
    }

  },
  methods: {

    async getClassifyList() {
      return new Promise((resolve, reject) => {
        let params = {
          name: '',
          categoryLevel: 1,
          status: true
        };
        getClassifyList(params).then(res => {
          this.classifyList = res.data;
        }).finally(res => {
          resolve();
        })
      })
    },

    getMarketingList() {
      let classifyList = this.classifyList;
      let categoryId = '';
      this.classifyList.forEach(item => {
        classifyList = classifyList.concat(item.children);
      })
      if(typeof this.step1Form.classify == 'string') {
        categoryId = this.step1Form.classify;
      }else {
        categoryId = this.step1Form.classify[1];
      }
      let classifyItem = classifyList.find(item => item.categoryId == categoryId);
      if(classifyItem) {
        getMarketingList({
          type: classifyItem.workOrderType === "INSTALL" ? 1 : 2
        }).then(res => {
          this.marketing = '';
          this.marketingList = res.data;
        })
      }else {
        this.marketing = '';
        this.marketingList = [];
      }
      
    },

    getTagList() {
      getTagList({
        pageNum: 1,
        pageSize: -1,
        type: 1
      }).then(res => {
        let list = [];
        res.data.records.forEach(item => {
          list.push(item.goodsTagName);
        });
        this.attrList = list;
      })

      getTagList({
        pageNum: 1,
        pageSize: -1,
        type: 2
      }).then(res => {
        let list = [];
        res.data.records.forEach(item => {
          list.push(item.goodsTagName);
        });
        this.tagList = list;
      })
    },

    getFreightList() {
      let params = {
        pageNum: 1,
        pageSize: 1000,
        status: true
      };
      getFreightList(params).then(res => {
        this.freightList = res.data.records;
        console.log(this.freightList);
      })
    },

    getModuleList() {
      let params = {
        pageNum: 1,
        pageSize: 1000
      };
      getModuleList(params).then(res => {
        this.moduleList = res.data.records;
        console.log(this.moduleList);
      })
    },

    // 导入会员
    async handleImport(param) {
      this.importLoading = true;
      const file = param.file;
      const formData = new FormData();
      formData.append("multipartFile", file);
      let result = await handleImport('/goods/package/import', formData);
      this.importLoading = false;
      this.importFileList = [];
      if(result.code == 200) {
        this.memberList = this.memberList.concat(result.data);
      }else {
        this.$alert(result.message, '导入失败', {
          confirmButtonText: '确定'
        });
      }
    },

    // 查询重复值并禁选
    checkboxSelect (row, rowIndex) {
      if (row.selected) {
        return false // 禁用
      }else{
        return true // 不禁用
      }
    },

    // 搜索
    getMemberListByScreen() {
      if(this.memberTable_choose.length > 0) {
        return this.$errorMsg('当前已选择会员，不可搜索');
      }
      this.memberTable_currentPage = 1;
      this.getMemberList();
    },

    // 获取会员列表
    getMemberList() {
      getMemberList({
        pageNum: this.memberTable_currentPage,
        pageSize: this.memberTable_pageSize,
        keyword: this.member_screenForm.keyword,
        type: this.member_screenForm.type,
        startTime: this.member_screenForm.registerDate && this.member_screenForm.registerDate[0] ? this.member_screenForm.registerDate[0] + ' 00:00:00' : null,
        endTime: this.member_screenForm.registerDate && this.member_screenForm.registerDate[1] ? this.member_screenForm.registerDate[1] + ' 23:59:59' : null,
      }).then(res => {
        let oldMemberList = this.memberList;
        let newMemberList = res.data.records;
        for(let i = 0; i < oldMemberList.length; i++) {
          let oldItem = oldMemberList[i]
          for(let j = 0; j < newMemberList.length; j++) {
            let newItem = newMemberList[j]
            if(newItem.userId === oldItem.userId){
              newMemberList[j].selected = true;
              break;
            }
          }
        }
        this.memberTable_dataList = newMemberList;
        this.memberTable_listTotal = res.data.total;
        this.memberTable_listLoading = false;
      })
    },

    // 更改列表当前页
    memberTableCurrentChange(val) {
      if(this.memberTable_choose.length > 0) {
        return this.$errorMsg('当前已选择会员，不可切换分页');
      }
      this.memberTable_currentPage = val;
      this.getMemberList();
    },

    // table点击选择会员
    handleChooseMember(val) {
      this.memberTable_choose = val;
    },

    // 添加会员
    addMember() {
      this.addMemberVisible = true;

      if(this.memberList.length > 0) {
        this.member_screenForm.type = this.memberList[0].type;
      }
      
      this.getMemberList();
    },

    // 删除会员
    deleteMember(index) {
      this.memberList.splice(index, 1);
    },

    // 取消 选择会员
    cancelAddMember(){
      this.addMemberVisible = false;
    },

    // 提交 选择会员
    submitAddMember() {
      let oldMemberList = this.memberList;
      let newMemberList = this.memberTable_choose;
      this.memberList = oldMemberList.concat(newMemberList);
      this.addMemberVisible = false;
    },

    // 新增商品框
    addGoodsShelves() {
      this.goodsShelves.push(JSON.parse(JSON.stringify(defaultObj)));
    },

    // 删除商品框
    delGoodsShelves(index) {
      this.goodsShelves.splice(index, 1);
    },

    // 获取分类列表
    getClassifyList() {
      getClassifyList({categoryLevel: 1, status: true}).then(res => {
        res.data.forEach(item => {
          item.isOpen = false;
        });
        this.classifyList = res.data;
        this.classifyCurrent = '';
        this.getGoodsList();
      })
    },

    // 展开/收起 分类
    toggleOpen(index) {
      this.classifyList[index].isOpen = !this.classifyList[index].isOpen;
    },

    // 切换分类
    changeClassify(cid) {
      if(this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可切换分类');
      }
      this.classifyCurrent = cid;
      this.table_currentPage = 1;
      this.getGoodsList();
    },

    // 搜索
    getGoodsListByScreen() {
      if(this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可搜索');
      }
      this.table_currentPage = 1;
      this.getGoodsList();
    },

    // 获取商品列表
    getGoodsList() {
      getGoodsList({
        pageNum: this.table_currentPage,
        pageSize: this.table_pageSize,
        keyword: this.keyword,
        categoryId: this.classifyCurrent,
      }).then(res => {
        let oldGoodsList = this.allGoodsList;
        let newGoodsList = res.data.records;
        for(let i = 0; i < oldGoodsList.length; i++) {
          let oldItem = oldGoodsList[i]
          for(let j = 0; j < newGoodsList.length; j++) {
            let newItem = newGoodsList[j]
            if(newItem.goodsId === oldItem.goodsId){
              newGoodsList[j].selected = true;
              break;
            }
          }
        }
        for(let j = 0; j < newGoodsList.length; j++) {
          let newItem = newGoodsList[j]
          if(newItem.promotionGroup === true){
            newGoodsList[j].selected = true;
          }
        }
        this.table_dataList = newGoodsList;
        this.table_listTotal = res.data.total;
        this.table_listLoading = false;
      })
    },

    // 更改列表当前页
    handleTableCurrentChange(val) {
      if(this.table_chooseGoods.length > 0) {
        return this.$errorMsg('当前已选择商品，不可切换分页');
      }
      this.table_currentPage = val;
      this.getGoodsList();
    },

    // table点击选择商品
    handleChooseGoods(val) {
      this.table_chooseGoods = val;
    },

    addGoods(index) {
      this.addGoodsIndex = index;
      this.addGoodsVisible = true;
      this.getClassifyList();
    },

    // 取消 选择商品
    cancelAddGoods(){
      this.addGoodsVisible = false;
    },

    // 提交 选择商品
    submitAddGoods() {
      let oldGoodsList = this.goodsShelves[this.addGoodsIndex].goodsList;
      let newGoodsList = [];

      this.table_chooseGoods.forEach(item => {
        let obj = {
          goodsId: item.goodsId,
          imgUrl: item.imgUrl,
          goodsName: item.goodsName,
          goodsPackagePopList: []
        }
        item.goodsSpecs.forEach(it => {
          let c_obj = {
            goodsId: item.goodsId,
            goodsSpecId: it.goodsSpecId,
            specName: it.name,
            specValue: it.specValue,
            price: it.price,
            shareRate: '',
            limitNum: '',
            stock: it.stockNum,
            soldNum: it.soldNum
          }
          obj.goodsPackagePopList.push(c_obj);
        })
        newGoodsList.push(obj);
      })
      this.goodsShelves[this.addGoodsIndex].goodsList = oldGoodsList.concat(newGoodsList);
      this.addGoodsVisible = false;
    },

    // 删除商品
    deleteGoods(pidx, idx) {
      this.goodsShelves[pidx].goodsList.splice(idx, 1);
    },

    // 获取详情
    async getGoodsDetail(goodsId) {
      getGoodsDetail({goodsId}).then(res => {
        let data = res.data;
        this.step1Form = {
          goodsName: data.goodsName,
          goodsDes: data.describeText,
          imgUrl: data.imgUrl,
          videoUrl: data.vedio,
          classify: data.categoryId,
          marketing: data.marketingId,
          attrs: data.tags,
          tags: data.tagsLabel,
          couponType: data.useCoupon,
          receiveCrowd: data.packageUserType,
        }
        this.$set(this.step1Form, 'images', data.images);
        this.memberList = data.users;
        this.getMarketingList();

        this.step2Form = {
          specType: data.hasSpec,
          price: data.goodsPrice,
          oldPrice: data.orgGoodsPrice,
          showStock: data.showDetailStock,
          showSales: data.showDetailSold,
          sales: data.soldNum,
          freight: data.freightTemplateId,
          classify: data.categoryId,
          status: data.status,
        }

        this.goodsShelves = [];
        let pops = data.packagePop.split(':');
        this.handleGoods(pops);

        this.step3Form = {
          moduleId: data.templateId,
          detailContent: data.content
        }
        setTimeout(() => {
          this.canChangeGoodsPrice = true;
        }, 1000)
        this.canCompute = true;
      })
    },

    async handleGoods(arr) {
      for (let i = 0; i < arr.length; i++) {
        let data = await this.getGoods(i);
        // 遍历商品
        for(let j = 0; j < data.length; j++) {
          // 遍历规格
          for(let k = 0; k < data[j].goodsPackagePopList.length; k++) {
            data[j].goodsPackagePopList[k].shareRate = data[j].goodsPackagePopList[k].shareRate * 100;
          }
        }
        this.goodsShelves.push({
          num: arr[i],
          goodsList: data,
        })
      }
    },

    // 获取商品框的商品
    async getGoods(index) {
      console.log(index);
      return await new Promise((resolve,reject)=>{
        getGoods({
          goodsId: this.editId,
          type: index+1,
        }).then(res => {
          console.log(index);
          resolve(res.data);
        }).catch(() => {
          reject([]);
        })
      });
    },

    // 切换步骤
    changeStep(type) {
      if(type == 1) {
        this.step ++;
      }else {
        this.step --;
      }
    },

    changeClassify() {
      this.step1Form.marketing = '';
      this.getMarketingList();
    },

    // 将数组加上索引
    listAddIndex(arr) {
      arr.forEach((item, index) => {
        item.index = index;
      })
      return arr;
    },

    // 点击 提交表单
    clickSubmitForm() {
      // 验证第一步
      this.$refs.step1Form.validate((valid) => {
        if (valid) {
          // 验证第二步
          this.$refs.step2Form.validate((valid) => {
            if (valid) {
              // 验证第三步
              this.$refs.step3Form.validate((valid) => {
                if (valid) {
                  this.submitForm();
                }else {
                  this.step = 2;
                }
              })
            }else {
              this.step = 1;
            }
          })
        }else {
          this.step = 0;
        }
      })
    },

    // 提交表单
    submitForm() {
      let images = [];
      for(let i=0; i<this.step1Form.images.length; i++) {
        let obj = {};
        obj.id = this.step1Form.images[i].id;
        images.push(obj);
      }

      let categoryId = '';
      if(typeof this.step1Form.classify == 'string') {
        categoryId = this.step1Form.classify;
      }else {
        categoryId = this.step1Form.classify[1];
      }

      let marketingName = '';
      if(this.step1Form.marketing) {
        marketingName = this.marketingList[this.$findElem(this.marketingList, 'id', this.step1Form.marketing)].name;
      }

      let goodsPackageUserRelas = [];
      if(this.step1Form.receiveCrowd === 0) {
        goodsPackageUserRelas = this.memberList.map(item => {
          return {
            userId: item.userId,
            mobile: item.mobile
          }
        })
      }

      let packagePop = this.goodsShelves.map(item => {
        return item.num;
      }).join(':');

      let goodsPackagePops = [];
      // 遍历商品框
      for(let i = 0; i < this.goodsShelves.length; i++) {
        // 遍历商品
        for(let j = 0; j < this.goodsShelves[i].goodsList.length; j++) {
          // 遍历规格
          for(let k = 0; k < this.goodsShelves[i].goodsList[j].goodsPackagePopList.length; k++) {
            goodsPackagePops.push({
              goodsId: this.goodsShelves[i].goodsList[j].goodsPackagePopList[k].goodsId,
              goodsSpecId: this.goodsShelves[i].goodsList[j].goodsPackagePopList[k].goodsSpecId,
              price: this.goodsShelves[i].goodsList[j].goodsPackagePopList[k].price,
              shareRate: this.goodsShelves[i].goodsList[j].goodsPackagePopList[k].shareRate / 100,
              soldNum: this.goodsShelves[i].goodsList[j].goodsPackagePopList[k].soldNum,
              limitNum: this.goodsShelves[i].goodsList[j].goodsPackagePopList[k].limitNum,
              pop: this.goodsShelves[i].num,
              sortNum: this.goodsShelves[i].goodsList[j].sortNum,
              type: i+1
            })
          }
        }
      }

      let params = {
        goodsType: 'PACKAGE', // 商品类型: COMMON=普通商品 PACKAGE=套购商品
        // 步骤1
        goodsName: this.step1Form.goodsName,
        describeText: this.step1Form.goodsDes,
        imgUrl: this.step1Form.imgUrl,
        images: images,
        vedio: this.step1Form.videoUrl,
        categoryId: categoryId,
        marketingId: this.step1Form.marketing,
        marketingName: marketingName,
        tags: this.step1Form.attrs,
        tagsLabel: this.step1Form.tags,
        useCoupon: this.step1Form.couponType,
        packageUserType: this.step1Form.receiveCrowd,
        goodsPackageUserRelas,

        // 步骤2
        showDetailStock: this.step2Form.showStock,
        showDetailSold: this.step2Form.showSales,
        soldNum: this.step2Form.sales,
        freightTemplateId: this.step2Form.freight,
        status: this.step2Form.status,
        packagePop,
        goodsPackagePops,

        // 步骤3
        templateId: this.step3Form.moduleId,
        content: this.step3Form.detailContent,
      }
      console.log(params);

      this.formLoading = true;
      if(this.isEdit) {
        params.goodsId = this.editId;
        editGoods(params).then(res => {
          this.formLoading = false;
          // this.$refs.mainForm.resetFields();
          this.$successMsg('编辑成功');
          setTimeout(()=>{
            this.goBack();
          }, 1000)
        }).catch(err => {
          this.formLoading = false;
        })
      } else {
        addGoods(params).then(res => {
          this.formLoading = false;
          // this.$refs.mainForm.resetFields();
          this.$successMsg('新增成功');
          setTimeout(()=>{
            this.goBack();
          }, 1000)
        }).catch(err => {
          this.formLoading = false;
        })
      }
    },

    goBack() {
      this.$router.go(-1);
    },

    // 商品主图 - 上传成功
    uploadSuccess(res, file) {
      this.step1Form.imgUrl = res.data.url;
    },

    // 商品主图 - 上传前
    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ['jpg', 'jpeg', 'png'];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传jpg/png文件!');
        return false;
      }
    },

    // 商品视频 - 上传成功
    uploadSuccess3(res, file) {
      this.step1Form.videoUrl = res.data.url;
    },

    // 商品视频 - 上传前
    beforeUpload3(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ['AVI', 'mov', 'rmvb', 'rm', 'FLV', 'mp4'];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传视频文件!');
        return false;
      }
    },

    // 富文本图片 - 上传前
    beforeUpload4() {
      this.quillImgLoading = true;
    },

    // 富文本图片 - 上传成功
    uploadSuccess4(res, file, fileList) {
      console.log(fileList);
      fileList.forEach(item => {
        if(this.editorImages.indexOf(item.response.data.url) < 0) {
          this.editorImages.push(item.response.data.url);
        }
      })
      this.showImage()
      this.quillImgLoading = false;
    },

    // 富文本图片 - 显示图片
    showImage() {
      console.log(this.editorImages);
      let quill = this.$refs.myQuillEditor.quill;
      this.editorImages.forEach(item => {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.info为服务器返回的图片地址
        console.log(item);
        quill.insertEmbed(length, 'image', item);
        // this.$refs.imageListUpload.clearFiles()
        // 调整光标到最后
        quill.setSelection(length + 1);
      })
      this.editorImages = [];
      this.$refs.imageListUpload.clearFiles();
    },

    // 富文本图片 - 上传失败
    uploadError4() {
      this.quillImgLoading = false;
      this.$errorMsg('图片插入失败');
    },

    // 轮播图 - 点击上传图片
    uploadImage(id) {
      this.uploadImageId = id;
      document.querySelector('.imageListUpload2 input').click();
    },

    // 轮播图 - 上传成功
    uploadSuccess2(res, file) {
      if(this.uploadImageId) {
        let index = this.$findElem(this.step1Form.images, 'id', this.uploadImageId);
        this.$set(this.step1Form.images, index, res.data);
      }else {
        if(this.step1Form.images.length >= 6) {
          return this.$errorMsg('最多上传6张轮播图');
        }
        this.step1Form.images.push(res.data);
      }
    },

    // 轮播图 - 超出限制数量
    uploadExceed2(files, fileList) {
      return this.$errorMsg('最多上传6张轮播图');
    },

    // 轮播图 - 上传前
    beforeUpload2(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ['jpg', 'jpeg', 'png'];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传jpg/jpeg/png文件!');
        return false;
      }
    },

    // 轮播图 - 删除图片
    deleteImage(index) {
      this.step1Form.images.splice(index, 1);
    },

    // 轮播图 - 向前移动
    moveForward(index) {
      if(index != 0) {
        let arr = this.step1Form.images;
        let thisItem = arr[index];
        let targetItem = arr[index - 1];
        this.$set(this.step1Form.images, index, targetItem);
        this.$set(this.step1Form.images, index - 1, thisItem);
      }else {
        this.$errorMsg('已经最前，无法前移');
      }
    },

    // 轮播图 - 向后移动
    moveBack(index) {
      if(index+1 < this.step1Form.images.length) {
        let arr = this.step1Form.images;
        let thisItem = arr[index];
        let targetItem = arr[index + 1];
        this.$set(this.step1Form.images, index, targetItem);
        this.$set(this.step1Form.images, index + 1, thisItem);
      }else {
        this.$errorMsg('已经最后，无法后移');
      }
    },

  }

}

</script>

<style scoped lang="scss">
  .step-container {
    padding: 0 10%;
  }
  .form-container {
    margin-top: 40px;
    padding: 0 10%;
    .title {
      font-size: 16px;
      margin-top: 30px;
      margin-bottom: 20px;
      padding-left: 10px;
      font-weight: bold;
      display: flex;
      align-items: center;
      .el-button {
        margin-left: 20px;
      }
    }
    .tips {
      margin-top: 10px;
      span {
        display: inline-block;
        width: 300px;
        text-align: center;
        line-height: 32px;
        background: #ffefef;
        font-size: 14px;
        color: #f66460;
      }
    }
    .tips2 {
      font-size: 12px;
      color: #999999;
      line-height: 30px;
    }
    .container {
      padding: 10px 20px 0;
      background: #f5f5f5;
      border-radius: 10px;
    }
    .addBtn {
      padding: 10px 0;
    }
  }
  .diy-table {
    overflow-x: scroll;
    border-left: 1px solid #f5f5f5;
    margin-top: 20px;
    width: 100%;
    // min-width: 1185px;
    max-width: 100%;
    .table-head {
      display: flex;
      .item {
        height: 40px;
        line-height: 40px;
        float: left;
        font-weight: 500;
        font-size: 14px;
        background: #f5f5f5;
        text-align: center;
      }
      .right {
        float: left;
        width: 74%;
        min-width: 900px;
        flex-shrink: 0;
        height: 40px;
      }
      .goods {
        width: 15%;
        min-width: 170px;
      }
      .sort {
        width: 5%;
        min-width: 80px;
      }
      .name {
        width: 16.666%;
        min-width: 150px;
      }
      .input {
        width: 16.666%;
        min-width: 150px;
      }
      .opera {
        width: 5%;
        min-width: 80px;
      }
      .blank {
        background: #f5f5f5;
        width: 6%;
        min-width: 90px;
      }
    }
    .goods-item {
      display: flex;
      align-content: center;
      .goods-info {
        flex-shrink: 0;
        width: 15%;
        min-width: 170px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        border-right: 1px solid #f5f5f5;
        font-size: 14px;
        &:last-child {
          border-bottom: none;
        }
        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
          flex-shrink: 0;
        }
      }
      .sort {
        width: 5%;
        min-width: 80px;
        border-bottom: 1px solid #f5f5f5;
        border-right: 1px solid #f5f5f5;
        display: flex;
        align-items: center;
        padding: 10px;
      }
      .spec-list {
        width: 74%;
        min-width: 900px;
        border-bottom: 1px solid #f5f5f5;
        border-right: 1px solid #f5f5f5;
        &:last-child {
          border-bottom: none;
        }
        .spec-item {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f5f5f5;
          &:last-child {
            border-bottom: none;
          }
          .col {
            flex-shrink: 0;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            border-right: 1px solid #f5f5f5;
            &:last-child {
              border-right: none;
            }
          }
          .name {
            width: 16.666%;
            min-width: 150px;
            font-size: 14px;
            text-align: center;
          }
          .input {
            width: 16.666%;
            min-width: 150px;
          }
          .btn {
            width: 10%;
            min-width: 80px;
          }
        }
      }
      .operation {
        flex-shrink: 0;
        width: 6%;
        min-width: 90px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #f5f5f5;
        border-right: 1px solid #f5f5f5;
      }
    }
    .empty-text {
      line-height: 60px;
      text-align: center;
      color: #909399;
    }
  }
  .dialog-container {
    .left {
      width: 140px;
      height: 350px;
      overflow-y: scroll;
      .group {
        margin-top: 10px;
      }
      .child {
        margin-top: 5px;
        .item {
          padding-left: 18px;
        }
      }
      .item {
        cursor: pointer;
        line-height: 24px;
      }
    }
    .right {
      width: calc(100% - 140px);
      height: 350px;
      box-sizing: border-box;
      padding-left: 20px;
    }
  }
  @media only screen and (max-width: 1200px) {
    .form-container {
      padding: 0 10%;
    }
  }
  @media only screen and (max-width: 768px) {
    .step-container {
      padding: 0;
    }
    .form-container {
      padding: 0 5%;
    }
  }


  ::v-deep .el-input__suffix {
    line-height: 32px;
  }
</style>

<style lang="scss">
  // 图片墙
  .el-upload-list--picture-card .el-upload-list__item {
    width: 100px;
    height: 100px;
  }
  .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
  }

  .el-input.small input {
    width: 300px;
  }

  .avatar-uploader2 {
    height: 0;
  }

  .container {
    .el-form-item__label {
      padding-bottom: 0;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
  }
  .ql-editor{
    min-height:300px;
  }
</style>

<style scoped lang="scss">
  .images {
    display: flex;
    flex-wrap: wrap;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 120px;
      margin-right: 20px;
      margin-bottom: 20px;
      .img {
        border: 1px dashed #eaeaea;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        .el-image {
          display: block;
        }
        .mask {
          position: absolute;
          left: 0;
          top: 0;
          width: 120px;
          height: 120px;
          background: rgba($color: #000000, $alpha: 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          opacity: 0;
          &:hover {
            opacity: 1;
          }
          .row {
            display: flex;
            align-items: center;
            justify-content: center;
            .it {
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              margin: 5px;
              i {
                font-size: 20px;
                color: #ffffff;
              }
              span {
                font-size: 14px;
                color: #ffffff;
              }
            }
          }
        }
      }
      .add {
        border: 1px dashed #eaeaea;
        border-radius: 5px;
        cursor: pointer;
        .avatar-uploader-icon {
          width: 120px;
          height: 120px;
          line-height: 120px;
        }
        &:hover {
          border: 1px dashed #66b1ff;
        }
      }
    }
  }
  .addMember {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EBEEF5;
    border-top: none;
    height: 50px;
  }
</style>
