<template>
  <div class="create-shop-wrapper-new">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
      :curmbThird="curmbThird"
      :jumPathThird="jumPathThird"
    ></bread-crumb>
    <div class="create-shop-content screenSet" id="screenSet">
      <el-row class="step-content">
        <el-col :span="20">
          <p class="title">{{ title }}</p>
        </el-col>
        <el-col :span="4" style="text-align: right">
          <el-button size="small" @click="cancelComplete">取消</el-button>
          <el-button size="small" type="primary" @click="complete"
            >保存</el-button
          >
        </el-col>
      </el-row>
      <el-form
        ref="formData3"
        :model="formData3"
        :rules="rules3"
        label-width="150px"
        label-suffix="："
        class="basic-form"
      >
        <div class="basic-item-icon">
          <div class="part-tit">基本信息</div>
          <el-form-item label="商品分类" class="goods-category">
            <el-cascader
              size="small"
              ref="cascader"
              :options="goodsCategoryList"
              :props="cascaderProps"
              clearable
              filterable
              v-model="goodsCategoryIdList"
              @change="searchCategoryChange"
            />
            <div
              v-if="isgoodsCategory"
              :style="{ color: '#f56c6c', fontSize: '12px' }"
            >
              请选择商品分类
            </div>
          </el-form-item>
          <el-form-item
            label="项目-合同名称"
            prop="cooperationProjectId"
            class="project-req"
          >
            <el-select
              v-model="formData3.cooperationProjectId"
              placeholder="请选择"
              size="small"
              :disabled="isEdit && isProject"
              @change="getContract"
              @clear="projectClear"
              clearable
              filterable
            >
              <el-option
                v-for="(item, index) in cooperationProjectList"
                :key="item.projectName + '-' + index"
                :label="item.projectName"
                :value="item.cooperationProjectId"
              ></el-option>
            </el-select>
            <el-select
              v-model="formData3.contractId"
              placeholder="请选择"
              size="small"
              clearable
              :disabled="isEdit && isContract"
              @change="contractChange"
            >
              <el-option
                v-for="(item, index) in contractList"
                :key="item.contractName + '-' + index"
                :label="item.contractName"
                :value="item.contractId"
              ></el-option>
            </el-select>
            <div class="project-tip">未找到项目名称请联系产品经理添加</div>
            <div
              v-if="isProjectId"
              :style="{ color: '#f56c6c', fontSize: '12px' }"
            >
              请关联项目名称
            </div>
          </el-form-item>
          <el-form-item
            label="选择基础药品"
            prop="choiceGoods"
            class="choice-goods"
          >
            <el-col :span="16">
              <el-button type="primary" @click="addMed" :disabled="isShowGoods"
                >+添加药品</el-button
              >
              <el-button
                v-if="idType === 2"
                @click="addNewGoods"
                :disabled="isShowGoods"
                class="add-btn"
                >新增药品</el-button
              >
              <div
                v-if="isShowGoodsMsg && !isShowGoods"
                :style="{ color: '#f56c6c', fontSize: '12px' }"
              >
                请选择基础药品
              </div>
            </el-col>
            <el-table
              v-if="isShowGoods"
              :data="choiceMedData"
              ref="singlTable"
              class="show-goods-table"
            >
              <el-table-column
                property="productName"
                label="产品名称/通用名称"
                width="180"
              ></el-table-column>
              <el-table-column
                property="barCode"
                label="条形码"
                width="180"
              ></el-table-column>
              <el-table-column
                property="goodsName"
                label="商品名称"
                width="180"
              ></el-table-column>
              <el-table-column
                property="approvalNumber"
                label="批准文号"
                width="180"
              ></el-table-column>
              <el-table-column
                property="specifications"
                label="规格"
                width="180"
              ></el-table-column>
              <el-table-column
                property="productionCompany"
                label="生产企业"
                width="180"
              ></el-table-column>
              <el-table-column label="操作" width="180"
                ><span class="del-goods" @click="delGoods"
                  >删除</span
                ></el-table-column
              >
            </el-table>
          </el-form-item>
          <el-form-item label="商品名称" prop="goodsName">
            <el-col :span="13">
              <el-input
                size="small"
                v-model="formData3.goodsName"
                placeholder="请输入商品名称"
                show-word-limit
                maxlength="60"
              ></el-input>
              <!-- <span class="word-num">{{(formData.goodsName).replace(/\s+/g,"").length}}/60</span> -->
            </el-col>
          </el-form-item>

          <el-form-item label="商品介绍" prop="goodsDescription">
            <el-col :span="13">
              <el-input
                type="textarea"
                rows="4"
                size="small"
                v-model="formData3.goodsDescription"
                placeholder="请输入商品介绍"
                maxlength="40"
                show-word-limit
              ></el-input>
              <span class="word-tip"
                >此文案可摘取药品说明书【功能主治】or【适应症】</span
              >
              <span class="word-show" @click="shoImgDialog = true"
                >查看展示位置</span
              >
            </el-col>
          </el-form-item>
          <el-form-item label="商品头图" class="required-label">
            <el-upload
              :file-list="fileGoodsList"
              class="bg-uploader"
              :show-file-list="isShowFileList"
              action="#"
              :before-upload="beforeUploadPic"
              multiple
              :on-exceed="imgExceed"
              :limit="6"
            >
              <img
                class="bg-img"
                src="../../assets/image/small.png"
                v-if="fileGoodsList.length < 6"
              />
              <div class="limit-text" v-if="fileGoodsList.length < 6">
                <p>建议尺寸：750*750</p>
                <p>支持jpeg, png格式</p>
              </div>
            </el-upload>
            <p class="upload-message" v-if="!isgoodsImages">请上传商品头图</p>
            <p class="word-tip">勾选的头图在云鹊健康小程序不可见</p>
          </el-form-item>
          <el-form-item label="" class="required-label">
            <div class="bg-uploader">
              <draggable
                class="image-wrapper"
                :animation="1000"
                v-model="fileGoodsList"
                :sort="true"
              >
                <div :key="item.uid" v-for="(item, index) in fileGoodsList">
                  <div class="img-box">
                    <div class="file-pics" v-if="fileGoodsList.length > 0">
                      <img
                        :src="item.url"
                        @mouseover.stop="headIndex = index"
                        class="bg-img"
                      />
                      <div
                        class="img-delete"
                        v-if="headIndex == index"
                        @click.stop="deleteImg(item, fileGoodsList)"
                        @mouseout.stop="headIndex = -1"
                      >
                        <i class="el-icon-delete"></i>
                      </div>
                    </div>
                    <div class="checkbox" @click.stop>
                      <el-checkbox
                        :true-label="0"
                        :false-label="1"
                        v-model="fileGoodsList[index].miniProgramShow"
                      ></el-checkbox>
                    </div>
                  </div>
                </div>
              </draggable>
            </div>
          </el-form-item>
          <el-form-item label="商品介绍视频" class="label-video">
            <el-upload
              accept=".mp4"
              :on-remove="handleRemoveVideo"
              :file-list="videoList"
              :before-upload="beforeVideoUpload"
              :show-file-list="false"
              :disabled="videoList.length == 1"
              :limit="1"
              action="#"
              class="bg-uploader"
            >
              <video
                id="introVideoLecture"
                :src="videoModel.videoFullPath"
                controls
                preload
                style="width: 100%"
                v-if="videoList.length == 1"
              >
                视频
              </video>
              <img
                class="bg-img"
                src="../../assets/image/video.png"
                v-if="videoList.length < 1"
              />
              <div class="limit-text" v-if="videoList.length < 1">
                <p>建议大小：20M以内</p>
                <p>仅支持MP4格式</p>
                <P>视频名称必须包含3个下划线：举例（YQ_01_02_03.mp4)</P>
              </div>
            </el-upload>

            <el-progress
              :text-inside="true"
              :stroke-width="16"
              :percentage="uploadProgress"
              status="success"
              class="video-progress"
              v-show="uploadProgress > 0 && uploadProgress < 100"
            >
            </el-progress>
            <el-button
              class="dl-video"
              icon="el-icon-delete"
              circle
              @click="deleteVideo"
              v-if="videoList.length == 1"
            ></el-button>
          </el-form-item>

          <el-form-item label="商品详情图片(视频)" class="label-detailimg">
            <el-upload
              class="bg-uploader"
              action="#"
              :show-file-list="false"
              :before-upload="beforeUploadPic1"
            >
              <img
                class="bg-img"
                src="../../assets/image/uploadImgOrVideo.png"
              />
              <div class="limit-text">
                <p>
                  视频：20M以内，仅支持MP4格式，视频名称必须包含3个下划线：举例（YQ_01_02_03.mp4）
                </p>
                <p>图片：2M以内，支持jpeg, png格式</p>
              </div>
            </el-upload>
            <p class="upload-message" v-if="!isSpecification_url">
              请上传商品详情图片
            </p>
            <p class="word-tip">勾选的详情在云鹊健康小程序不可见</p>
          </el-form-item>
          <el-form-item label="" class="required-label">
            <div class="bg-uploader">
              <draggable
                class="image-wrapper"
                :animation="1000"
                v-model="fileIntrList"
                :sort="true"
              >
                <div :key="item.uid" v-for="(item, index) in fileIntrList">
                  <div class="img-box">
                    <div class="file-pics" v-if="item.url || item.imageUrl">
                      <img
                        v-if="item.imageType == 4"
                        :src="item.url"
                        @mouseover.stop="intrIndex = index"
                        class="bg-img"
                      />
                      <video
                        v-if="item.imageType == 5"
                        @mouseover.stop="intrIndex = index"
                        :src="item.imageUrl"
                        controls
                        preload
                        style="width: 100%; height: 100%; object-fit: fill"
                      >
                        视频
                      </video>
                      <div
                        class="img-delete"
                        v-if="intrIndex == index"
                        @click.stop="deleteImg(item, fileIntrList)"
                        @mouseout.stop="intrIndex = -1"
                      >
                        <i class="el-icon-delete"></i>
                      </div>
                    </div>
                    <div class="checkbox" @click.stop>
                      <el-checkbox
                        :true-label="0"
                        :false-label="1"
                        v-model="fileIntrList[index].miniProgramShow"
                      ></el-checkbox>
                    </div>
                  </div>
                </div>
              </draggable>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <!-- 销售信息 -->
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="150px"
        label-suffix="："
        class="basic-form"
      >
        <div class="basic-item-icon">
          <div class="part-tit">销售信息</div>
          <div class="inline">
            <el-form-item label="销售方式" prop="saleType">
              <el-radio-group v-model="formData.saleType" size="small">
                <el-radio :label="1">零售</el-radio>
                <el-radio :label="2" :disabled="commissionFlag == 1"
                  >批发</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </div>

          <div class="inline" v-if="formData.saleType == 1">
            <el-form-item label="零售价" prop="optPrice">
              <el-col :span="20">
                <el-input-number
                  class="stock-com"
                  @input="$forceUpdate()"
                  v-model="formData.optPrice"
                  size="small"
                  :precision="2"
                  :min="0.0"
                  :max="99999.99"
                ></el-input-number>
              </el-col>
            </el-form-item>
          </div>
          <div class="inline">
            <el-form-item label="成本价" prop="realCostPrice">
              <el-col :span="20">
                <el-input-number
                  class="stock-com"
                  @input="$forceUpdate()"
                  v-model="formData.realCostPrice"
                  size="small"
                  :precision="2"
                  :min="0.0"
                  :max="99999.99"
                ></el-input-number>
              </el-col>
            </el-form-item>
          </div>
          <div class="inline" v-if="formData.saleType == 2">
            <el-form-item label="批发价" prop="optPrice">
              <el-col :span="20">
                <el-input-number
                  class="stock-com"
                  @input="$forceUpdate()"
                  v-model="formData.optPrice"
                  size="small"
                  :precision="2"
                  :min="0"
                  :max="20000000.0"
                ></el-input-number>
              </el-col>
            </el-form-item>
          </div>
          <div class="inline" v-if="formData.saleType == 1">
            <el-form-item label="绩效分值">
              <el-col :span="20">
                <el-input-number
                  class="stock-com"
                  @input="$forceUpdate()"
                  v-model="formData.scorePerformance"
                  size="small"
                  :precision="2"
                  :min="0.0"
                  :max="999999.99"
                ></el-input-number>
              </el-col>
            </el-form-item>
          </div>
          <div class="inline">
            <el-form-item label="库存" prop="stock" class="required-label">
              <el-col :span="20">
                <div style="display: flex">
                  <div class="stock-com" style="width: 190px">
                    <span
                      class="sp sp-l"
                      @click="changeStock(1)"
                      :class="{ opac: formData.stock == 0 }"
                      ><i class="el-icon-minus"></i
                    ></span>
                    <span class="sp sp-c">{{ formData.stock }}</span>
                    <span class="sp sp-r" @click="changeStock(2)"
                      ><i class="el-icon-plus"></i
                    ></span>
                  </div>
                  <span
                    class="word-num"
                    style="margin-left: 10px; width: 500px; color: #ec8851"
                    >仓储可销售库存: {{ formData.storageSaleStock || "--" }};{{
                      `{${
                        (formData.storageFrozenGoodsIdList &&
                          formData.storageFrozenGoodsIdList.join(";")) ||
                        ""
                      } }`
                    }}共冻结库存:
                    {{ formData.storageFrozenStock || "--" }};最大可用库存:
                    {{ formData.availableStock || "--" }};</span
                  >
                </div>
                <p class="error-message" v-if="!isgoodStock">库存不能为0</p>
              </el-col>
            </el-form-item>
          </div>

          <div class="inline" v-if="formData.saleType == 1">
            <el-form-item
              label="最小起购件数"
              prop="leastCount"
              class="required-label"
            >
              <el-col :span="20">
                <div class="stock-com" style="width: 500px; display: flex">
                  <el-input-number
                    class="stock-com"
                    @input="$forceUpdate()"
                    v-model="formData.leastCount"
                    size="small"
                    :precision="0"
                    :min="0"
                    :max="9999"
                  ></el-input-number>
                  <span class="word-num" style="margin-left: 10px"
                    >最高9999件哦</span
                  >
                </div>
                <p class="error-message" v-if="formData.leastCount <= 0">
                  最小起购件数不能为0
                </p>
              </el-col>
            </el-form-item>
          </div>
          <div
            class="inline"
            v-if="formData.leastCount > 1 || formData.saleType == 2"
          >
            <el-form-item label="递增方式">
              <el-col :span="24">
                <el-radio size="mini" v-model="formData.incrType" :label="2"
                  >倍数递增</el-radio
                >
                <el-radio v-model="formData.incrType" :label="1"
                  >1件递增</el-radio
                >
              </el-col>
            </el-form-item>
          </div>

          <div class="inline" v-if="formData.saleType == 1">
            <el-form-item
              label="单次购买上限"
              prop="mostCount"
              class="required-label"
            >
              <el-col :span="20" style="width: 300%">
                <div class="stock-com" style="width: 500px; display: flex">
                  <el-input-number
                    class="stock-com"
                    @input="$forceUpdate()"
                    v-model="formData.mostCount"
                    size="small"
                    :precision="0"
                    :min="-1"
                    :max="9999"
                  ></el-input-number>
                  <span class="word-num" style="margin-left: 10px"
                    >数值为-1时，代表单次购买上限已无限制(最高9999件哦)</span
                  >
                </div>
                <p class="error-message" v-if="formData.mostCount === 0">
                  单次购买上限不能为0
                </p>
              </el-col>
            </el-form-item>
          </div>
          <div class="inline" v-if="formData.saleType == 1">
            <el-form-item label="第三方商品编码">
              <el-col :span="20">
                <el-input
                  size="small"
                  v-model="formData.externalGoodsCode"
                  placeholder="请输入第三方商品编码"
                ></el-input>
              </el-col>
            </el-form-item>
          </div>
          <div class="inline">
            <el-form-item label="阳性报销上限" prop="reimburseMax">
              <el-col :span="20">
                <el-input-number
                  class="stock-com"
                  @input="$forceUpdate()"
                  v-model="formData.reimburseMax"
                  size="small"
                  :precision="2"
                  :min="0.0"
                  :max="99999.99"
                ></el-input-number>
              </el-col>
            </el-form-item>
          </div>
          <div class="inline" v-if="formData.saleType == 2">
            <el-form-item
              label="最小起批"
              prop="minWhole"
              class="required-label"
            >
              <el-col :span="20">
                <div class="stock-com" style="width: 500px; display: flex">
                  <el-input-number
                    class="stock-com"
                    @input="$forceUpdate()"
                    v-model="formData.minWhole"
                    size="small"
                    :precision="0"
                    :min="1"
                  ></el-input-number>
                </div>
                <p class="error-message" v-if="formData.minWhole <= 0">
                  最小起批不能为0
                </p>
              </el-col>
            </el-form-item>
          </div>
          <el-form-item
            label="是否支持售后"
            prop="expressLimitFlag"
            v-if="storeType < 3"
          >
            <el-radio-group
              v-model="formData.expressLimitFlag"
              :disabled="!hasRepoFlag"
              @change="radioChange"
            >
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
            <p class="backTip" v-if="!hasRepoFlag" @click="goShopDeatil">
              若需设置商品支持售后，需先至店铺页<span class="ad-back"
                >设置售后地址</span
              >
            </p>
          </el-form-item>
        </div>
        <div class="basic-item-icon" v-if="formData.saleType == 1">
          <div class="part-tit">限购条件</div>
          <div v-for="(item, index) in buyLimitDtoList" :key="index">
            <el-form-item label="限制条件">
              <el-button @click="delLimit(index)" type="text" size="small"
                >删除</el-button
              >
            </el-form-item>
            <el-form-item label="限制对象">
              <el-col :span="10">
                <el-radio-group
                  v-model="item.limitUserType"
                  size="small"
                  @change="changeLimitUserType(item, index)"
                >
                  <el-radio :label="1">开单人</el-radio>
                  <el-radio :label="2">患者</el-radio>
                </el-radio-group>
              </el-col>
            </el-form-item>
            <el-form-item label="购买限制">
              <el-input-number
                v-model="item.days"
                style="margin-left: 5px"
                size="small"
                :precision="0"
                :min="1"
                :max="100000"
              ></el-input-number>
              <el-select v-model="item.daysType" size="small">
                <el-option
                  v-for="(item, index) in daysTypeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <span style="margin-left: 5px">内，最多购买</span>
              <el-input-number
                v-model="item.limitCount"
                style="margin-left: 5px"
                size="small"
                :precision="0"
                :min="1"
                :max="100000"
              ></el-input-number>
              <span style="margin-left: 5px">次</span>
            </el-form-item>
          </div>

          <div class="inline">
            <el-form-item>
              <el-button size="small" type="primary" @click="addBuyingLimit"
                ><i class="el-icon-plus"></i>限购条件</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-dialog
        :title="stock.title"
        :visible.sync="stockDio"
        width="30%"
        center
      >
        <div class="stock-dia">
          <div class="stock-item">更新库存后，将影响买家购买，请谨慎操作</div>
          <div class="stock-item">当前库存：{{ formData.goodsStock }}</div>
          <div class="demo-input-suffix">
            {{ stock.type == 1 ? "减少数量" : "增加数量" }}：
            <el-input
              v-model="stock.num"
              :placeholder="stock.placeholderTxt"
              maxLength="8"
              style="width: 180px"
            ></el-input>
          </div>
        </div>
        <div style="text-align: center; margin-top: 20px; color: #ec8851">
          最大可用库存：{{ formData.availableStock || "--" }}
        </div>
        <span slot="footer" class="dialog-footer" style="text-align: right">
          <el-button type="primary" @click="updateStock">完成</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 添加药品 -->
    <el-dialog
      title="添加药品"
      :visible.sync="baseAddVisible"
      class="add-goods-dialog"
      width="70%"
    >
      <el-row type="flex" class="row-bg">
        <el-col :span="21">
          <el-input
            v-model="filterName"
            clearable
            class="input-el"
            size="middle"
            placeholder="试试搜索：药品69开头条形码/通用名称/商品名称/拼音首字母"
          ></el-input>
        </el-col>
        <el-col :span="2"
          ><el-button
            type="primary"
            @click="getSearchInfo"
            class="add-goods-search"
            >搜索</el-button
          ></el-col
        >
      </el-row>
      <el-table
        :data="medData"
        ref="singleTable"
        highlight-current-row
        @current-change="handleCurrentChange"
        @row-click="handleRowClick"
        class="add-goods-table"
      >
        <el-table-column
          property="productName"
          label="产品名称/通用名称"
          width="150"
        ></el-table-column>
        <el-table-column
          property="barCode"
          label="条形码"
          width="200"
        ></el-table-column>
        <el-table-column
          property="goodsName"
          label="商品名称"
        ></el-table-column>
        <el-table-column
          property="approvalNumber"
          label="批准文号"
          width="150"
        ></el-table-column>
        <el-table-column
          property="specifications"
          label="规格"
          width="200"
        ></el-table-column>
        <el-table-column
          property="productionCompany"
          label="生产企业"
        ></el-table-column>
      </el-table>
      <div class="add-goods--pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleNumChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
      <el-row type="flex" class="row-bg" justify="end">
        <el-col class="add-btn-row">
          <el-button @click="baseAddVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmAddGoods">确认</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 新增药品 -->
    <el-dialog
      title="新增药品"
      :visible.sync="isNewMeddialog"
      class="add-med-dialog"
    >
      <el-form
        :model="formData1"
        ref="formData1"
        :rules="rules1"
        label-width="150px"
        label-suffix="："
      >
        <el-form-item label="药品分类" prop="medicalCategoryId">
          <el-select
            v-model="formData1.medicalCategoryId"
            clearable
            placeholder="请选择药品分类"
            @change="medicalChange"
          >
            <el-option
              v-for="item in medicalCategoryList"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <div v-if="formData1.medicalCategoryId">
          <el-form-item
            :label="mCommonName"
            prop="medicCommonName"
            class="medic-goods-max"
          >
            <el-col :span="16">
              <el-input
                size="small"
                v-model="formData1.medicCommonName"
                :placeholder="mCommonNameLabel"
                style="width: 70%"
                maxlength="60"
                show-word-limit
              ></el-input>
            </el-col>
          </el-form-item>
          <el-form-item
            label="条形码"
            prop="barCode"
            v-if="![4, 5].includes(formData1.medicalCategoryId)"
          >
            <el-col :span="16">
              <el-input
                size="small"
                v-model="formData1.barCode"
                placeholder="请输入条形码"
                @input="changeBarCode"
              ></el-input>
              <span class="fast-opt" @click="fastInput(1)">快速录入</span>
              <span class="word-num">(点击可快速录入下面的基本信息)</span>
            </el-col>
          </el-form-item>
          <el-form-item
            :label="commonName"
            prop="medicGoodsName"
            class="medic-goods-max"
          >
            <el-col :span="16">
              <el-input
                size="small"
                v-model="formData1.medicGoodsName"
                :placeholder="commonPlaceholder"
                maxlength="60"
                show-word-limit
              ></el-input>

              <!-- <span class="word-num">{{(formData.medicGoodsName).replace(/\s+/g,"").length}}/60</span> -->
            </el-col>
          </el-form-item>
          <!-- 批准文号 -->
          <el-form-item
            label="批准文号"
            prop="approvalNumber"
            v-if="![4, 5].includes(formData1.medicalCategoryId)"
          >
            <el-col :span="16">
              <el-input
                size="small"
                v-model="formData1.approvalNumber"
                placeholder="请输入批准文号"
                style="width: 70%"
              ></el-input>
            </el-col>
          </el-form-item>
          <!-- 规格 -->
          <el-form-item
            label="规格"
            prop="specifications"
            v-if="![4, 5].includes(formData1.medicalCategoryId)"
          >
            <el-col :span="18">
              <el-input
                size="small"
                v-model="formData1.specifications"
                placeholder="请输入规格"
                style="width: 70%"
              ></el-input>

              <span class="word-num">例如:0.125g*12袋/盒</span>
            </el-col>
          </el-form-item>
          <!-- 生产企业 -->
          <el-form-item
            label="生产企业"
            prop="productionCompany"
            v-if="![4, 5].includes(formData1.medicalCategoryId)"
          >
            <el-col :span="16">
              <el-input
                size="small"
                v-model="formData1.productionCompany"
                placeholder="请输入生产企业"
                style="width: 70%"
              ></el-input>

              <span class="word-num"></span>
            </el-col>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isNewMeddialog = false">取 消</el-button>
        <el-button type="primary" @click="addNewMed">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看展示 -->
    <el-dialog
      title="查看展示"
      :visible.sync="shoImgDialog"
      width="40%"
      class="example-dialog"
    >
      <img src="../../assets/image/s-example.png" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import BreadCrumb from "@/components/breadcrumb.vue";
import Cropper from "@/components/common/cropper.vue";
import {
  getBarcodeData,
  getCategorysList,
  getContractList,
  getCooperationProjectList,
  getGoodsList,
  getGoodsListAll,
  getMedList,
  saveMedList,
  updateGoods,
  updateStock,
} from "@/utils/goods";
import { isEmptyUtils } from "@/utils/index";
import { createFilePath, doUpload, getFilePath } from "@/utils/qiniu-util";
import { getStoreAdressRepot } from "@/utils/shop";
import { closeLoading, openLoading, signFigures } from "@/utils/utils";
import draggable from "vuedraggable";
import { originForm, originForm1, originForm3 } from "./common/forms";
import { originRules, originRules1, originRules3 } from "./common/rules";

let vm = null;

export default {
  components: {
    BreadCrumb,
    Cropper,
    draggable,
  },
  data() {
    return {
      shoImgDialog: false, // 查看展示
      medicalCategoryList: [], // 药品分类
      isShowGoodsMsg: false,
      medicationId: "", // 药品id (搜索药品列表)
      medicationDetailId: "",
      choiceMedData: [], // 选中的基础药品展示
      isShowGoods: false, // 是否展示商品表格
      filterName: "", // 搜索药品
      // 商品分类级联配置
      goodsCategoryIdList: [],
      cascaderProps: {
        multiple: true,
        value: "id",
        label: "categoryName",
        children: "children",
        // checkStrictly: true
      },
      isNewMeddialog: false, // 新增药品弹窗
      isSelectGoods: false, // 是否选择了添加药品
      medData: [],
      currentRow: null,
      baseAddVisible: false, // 添加药品
      barAndGoodsFlag: false, // 编辑时商品名称和条形码是否可以编辑
      goodDisabled: false, // 商品通用名称是否可编辑
      isEdit: false,
      stock: {
        title: "减少库存",
        type: 1,
        placeholderTxt: "请输入减少的库存数量",
        num: "",
      },
      fileGoodsList: [],
      goodsCheckList: [],
      fileIntrList: [],
      intrIndex: -1,
      isShowFileList: false,
      isgoodStock: true,
      headIndex: -1,
      stockDio: false,
      curmbFirst: "云鹊店铺",
      curmbSecond: "商品管理",
      curmbThird: "编辑商品", // /live-manage?id=
      jumPathThird: "",
      isgoodsImages: true,
      isSpecification_url: true,
      title: "",
      daysTypeList: [
        {
          label: "日",
          value: 1,
        },
        {
          label: "周",
          value: 7,
        },
        {
          label: "月",
          value: 30,
        },
        {
          label: "年",
          value: 365,
        },
      ],
      formData: { ...JSON.parse(JSON.stringify(originForm)), reimburseMax: "" }, // 通用信息
      formData1: JSON.parse(JSON.stringify(originForm1)), // 基本信息
      formData3: JSON.parse(JSON.stringify(originForm3)),
      buyLimitDtoList: [],
      rules: {},
      rules1: {},
      goodsId: 0, // 新增时传0，更新时必需>0
      goodsType: "",
      storeId: "",
      commissionFlag: 2,
      // 不同类型服务的表单通用字段
      // 不同类型服务的表单通用字段
      // 不同类型服务的表单通用字段
      showCropper: false,
      currentOption: {
        offset_x: 120,
        offset_y: 185,
        width: 160,
        height: 120,
        cvWidth: 1000,
        cvHeight: 800,
        uploadType: 1,
        cropDialogWidth: "900px",
        cropBoxResizable: true,
        minCropBoxWidth: 100,
        minCropBoxHeight: 100,
        aspectRatio: 16 / 9,
      },
      slide2: {
        oriUrl: "", // 原图
      },
      imgMouseOver1: false,
      uploadImgMessage1: false, //未上传图片，校验提示语
      isCheckServe: false, // 商品类型选择【检测服务】时！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
      inputType: "",
      limitVisibleFlag: false,
      limit: {
        title: "限购条件",
      },
      storeType: 1, //1: "供货商",2: "小药房",3: "医生小店"
      hasRepoFlag: 0, //店铺是否有退货地址
      videoList: [], //视频上传文件列表
      videoModel: { videoFullPath: "" },
      sumFile: 0,
      uploadProgress: 0, // 上传视频进度条
      cooperationProjectList: [], // 合作项目
      contractList: [], // 合同
      isProject: false, // 是否选择合作项目
      isContract: false, // 是否选择合同
      pageNo: 1,
      pageSize: 10,
      totalRows: 0,
      isAddServe: false, // 新增药品时 添加的是否为服务类 || 虚拟商品
      goodsCategoryList: [],
      isgoodsCategory: false, // 是否选择商品分类
      isProjectId: false,
    };
  },
  computed: {
    mCommonName() {
      return [4, 5].includes(this.formData1.medicalCategoryId)
        ? "产品名称"
        : "通用名称";
    },
    mCommonNameLabel() {
      return [4, 5].includes(this.formData1.medicalCategoryId)
        ? "请输入产品名称"
        : "请输入通用名称";
    },
    commonName() {
      return [4, 5].includes(this.formData1.medicalCategoryId)
        ? "品牌名/商品名"
        : "商品名称";
    },
    commonPlaceholder() {
      return [4, 5].includes(this.formData1.medicalCategoryId)
        ? "请输入品牌名/商品名"
        : "请输入商品名称";
    },
  },
  created() {
    vm = this;
    //Idtype:1,内部 2.外部
    vm.idType = localStorage.getItem("storageIdType");
    const { id, storeId, goodsType, inputType, commissionFlag, storeType } =
      this.$route.query;
    this.goodsType = goodsType;
    this.storeId = storeId;
    this.inputType = inputType || "";
    this.commissionFlag = commissionFlag;
    this.storeType = storeType;

    this.rules = { ...originRules };
    this.rules1 = originRules1;
    this.rules3 = originRules3;

    this.jumPathThird =
      "/goods-manage?storeId=" +
      storeId +
      "&commissionFlag=" +
      this.commissionFlag +
      "&storeType=" +
      this.storeType;
    this.title = id == "add" ? "新增商品" : "编辑商品";
    this.isEdit = id != "add";
    this.curmbThird = this.title;
    this.formData.storeId = Number(storeId) || "";
    this.getCooperationProjectList(); // 获取合作项目
    if (id != "add") {
      this.getDetailByEdit(id, goodsType);
    } else {
      this.getStoreAdress();
    }
    // debugger;
    // 判空
    if (this.formData.leastCount == null || this.formData.leastCount === "") {
      this.formData.leastCount = 1;
    }
    if (this.formData.mostCount == null || this.formData.mostCount === "") {
      this.formData.mostCount = -1;
    }
    if (this.formData.incrType == null || this.formData.incrType === "") {
      this.formData.incrType = 2;
    }
    this.getGoodsListAll();
  },
  methods: {
    radioChange(val) {
      this.formData.expressLimitFlag = val;
    },
    getArr(arr) {
      if (arr.length > 0) {
        let newoodsList = [];
        arr.forEach((item) => {
          const subArr = item.filter((i) => {
            return i !== -1;
          });
          newoodsList.push(subArr);
        });
        return newoodsList;
      } else {
        return [];
      }
    },
    // 获取商品分类
    getGoodsListAll() {
      getGoodsListAll().then((res) => {
        if (res.code == "000000") {
          this.goodsCategoryList = res.data;
        }
      });
    },
    // 取消
    cancelComplete() {
      this.$confirm("取消后您填写的信息将不会被保存", "确认取消吗？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$router.go(-1);
        })
        .catch(() => {});
    },
    // 药品分类切换
    medicalChange(val) {
      if ([4, 5].includes(val)) {
        this.isAddServe = true;
      }
      this.$refs.formData1.clearValidate();
      const formData1Arr = [
        "medicCommonName",
        "barCode",
        "medicGoodsName",
        "approvalNumber",
        "specifications",
        "productionCompany",
      ];
      formData1Arr.map((item) => {
        this.formData1[item] = "";
      });
    },
    // 获取药品分类
    getCategorysList() {
      let params = {
        pageNo: 1,
        pageSize: 999,
        categoryLevel: 1,
        parentId: 0,
      };
      getCategorysList(params).then((res) => {
        if (res.code == "000000") {
          this.medicalCategoryList = res.data.medicalCategorysList;
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.searchAddGoods();
    },
    handleNumChange(val) {
      this.pageNo = val;
      this.searchAddGoods();
    },
    delGoods() {
      this.$confirm("确认要删除该商品吗?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.isShowGoods = false;
          this.choiceMedData = [];
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    },
    contractChange(val) {
      if (val) {
        this.isProjectId = false;
      } else {
        this.isProjectId = true;
      }
    },
    // 商品分类级联多选
    searchCategoryChange(value) {
      console.log(value, "商品分类级联多选");
      if (value.length > 0) {
        this.isgoodsCategory = false;
      } else {
        this.isgoodsCategory = true;
      }
      this.goodsCategoryIdList = value;
      // this.$refs.cascader.toggleDropDownVisible();
    },
    // 确认选择药品
    confirmAddGoods() {
      if (!this.isSelectGoods) {
        this.$message.error("您还未选择药品");
        return;
      }
      if (this.choiceMedData.length > 0) {
        this.isShowGoods = true;
        this.baseAddVisible = false;
      }
    },
    addMed() {
      this.baseAddVisible = true;
      if (this.$refs.singleTable) {
        this.isSelectGoods = false;
        this.$refs.singleTable.setCurrentRow();
      }
    },
    // 点击选择药品
    handleRowClick(row) {
      if (row) {
        this.isSelectGoods = true;
      }
      this.$refs.singleTable.setCurrentRow(row);
    },
    // 点击切换药品
    handleCurrentChange(val) {
      if (val) {
        this.currentRow = val;
        this.formData3.medicationId = val.tradeMedicalLibId;
        this.formData3.medicationDetailId = val.id;
        this.isCheckServe = val.categoryName == 5 ? true : false;
        let current = [this.currentRow];
        this.choiceMedData = current;
      }
    },
    // 新增药品
    addNewMed() {
      let isTrue;
      this.$refs.formData1.validate((valid, object) => {
        isTrue = valid;
        if (!valid) return false;
      });
      if (!isTrue) return;
      let data = {};
      const {
        specifications,
        productionCompany,
        approvalNumber,
        medicGoodsName,
        barCode,
        medicCommonName,
        medicalCategoryId,
      } = this.formData1;
      // 服务类/虚拟商品
      if (this.isAddServe) {
        data = {
          medicalCategoryId,
          medicCommonName,
          medicGoodsName,
          applySource: 2,
        };
      } else {
        data = {
          medicalCategoryId,
          medicCommonName,
          medicGoodsName,
          barCode,
          approvalNumber,
          medicalDetailFieldMap: { specifications, productionCompany },
          applySource: 2,
        };
      }
      this.saveMedList(data);
    },
    // 药品保存
    saveMedList(data) {
      saveMedList(data)
        .then((res) => {
          if (res.code == "000000") {
            this.$message({
              type: "success",
              message: "新增药品成功!",
            });
            this.isNewMeddialog = false;
            this.choiceMedData = [res.data];
            this.formData3.medicationId = res.data.tradeMedicalLibId;
            this.formData3.medicationDetailId = res.data.id;
            this.isShowGoods = true;
            console.log(this.choiceMedData, "this.choiceMedData ");
          } else {
            this.$message({
              type: "error",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: err.message,
          });
        });
    },
    // 新增药品
    addNewGoods() {
      if (this.$refs.formData1) {
        this.$refs.formData1.resetFields();
      }
      this.getCategorysList(); // 获取药品类别
      this.isNewMeddialog = true;
    },
    getSearchInfo() {
      this.pageNo = 1;
      this.searchAddGoods();
    },
    //  基本信息添加药品
    searchAddGoods() {
      let data = {
        filterName: this.filterName.trim(),
        applySource: "2",
        letterPinyin: "",
        goodsName: "",
        categoryName: "",
        categoryIdLevel2: "",
        categoryIdLevel3: "",
        categoryIdLevel4: "",
        barCode: "",
        status: "",
        goodsFlag: 1,
        pageSize: this.pageSize,
        pageNo: this.pageNo,
      };
      getMedList(data).then((res) => {
        if (res.code == "000000") {
          this.medData = res.data.smallStoreList;
          this.totalRows = res.data.totalNum;
        }
      });
    },
    // 获取合同
    getContractList(projectId) {
      getContractList(projectId || 0).then((res) => {
        if (res.code == "000000") {
          this.contractList = res.data;
        }
      });
    },
    //  获取合作项目
    getCooperationProjectList() {
      getCooperationProjectList().then((res) => {
        if (res.code == "000000") {
          this.cooperationProjectList = res.data;
        }
      });
    },
    // 切换合同
    getContract(projectId) {
      this.formData3.contractId = "";
      this.contractList = [];
      this.getContractList(projectId);
    },
    projectClear() {
      this.formData3.contractId = "";
      this.contractList = [];
    },
    // 判断imgurl是否有效
    checkImgExists(imgurl) {
      return new Promise(function (resolve, reject) {
        var ImgObj = new Image();
        ImgObj.src = imgurl;
        ImgObj.onload = function (res) {
          resolve(res);
        };
        ImgObj.onerror = function (err) {
          reject(err);
        };
      });
    },
    //eidt状态
    async getDetailByEdit(id) {
      this.goodsId = id;

      const res = await getGoodsList({
        goodsIdList: [id],
        goodsName: "",
        goodsType: "",
        pageNo: 1,
        pageSize: 10,
        storeId: this.storeId,
        applySource: 2,
      });
      if (res.code != "000000") {
        return this.$message({
          message: res.message,
          type: "error",
        });
      }
      closeLoading(this);
      if (res.data == null) {
        return this.$message({
          type: "error",
        });
      }
      const { goodsList, hasRepoFlag } = res.data;
      const {
        goodsName,
        goodsDescription,
        goodsType,
        expressLimitFlag,
        goodsHeaderImages = [],
        goodsVideoList = [],
        contractId,
        cooperationProjectId,
        goodsCategoryIdArr,
        medicationInfo,
      } = goodsList[0];
      const goodDet = goodsList[0];
      goodDet.otc1 = goodDet.otc ? "1" : "0";
      // 查询药品列表
      this.choiceMedData = [medicationInfo];
      if (this.choiceMedData.length > 0) {
        this.isShowGoods = true;
      }
      this.isProject = Boolean(cooperationProjectId);
      if (this.isProject) {
        this.getContractList(cooperationProjectId);
      }
      this.isContract = Boolean(contractId);
      // this.formData1 = goodDet;
      this.formData = goodDet;

      this.formData3 = {
        goodsName,
        goodsDescription,
        goodsHeaderImages,
        goodsVideoList,
        goodsType,
        contractId,
        cooperationProjectId,
      };
      this.formData3.medicationId = medicationInfo.tradeMedicalLibId;
      this.formData3.medicationDetailId = medicationInfo.id;
      this.goodsCategoryIdList = this.getArr(goodsCategoryIdArr);
      this.hasRepoFlag = hasRepoFlag;
      this.buyLimitDtoList = this.formData.buyLimitDtoList;
      this.formData.expressLimitFlag = expressLimitFlag;
      this.formData.optPrice = this.formData.costPrice / 100;
      this.formData.realCostPrice = this.formData.realCostPrice / 100;
      this.formData.scorePerformance = this.formData.scorePerformance / 100;
      this.fileGoodsList = this.getImages(goodDet.goodsImgList, 1);
      this.fileIntrList = this.getImages(goodDet.goodsDetailImageList, 2);
      this.formData.stock = this.formData.goodsStock;
      this.formData.reimburseMax = this.formData.reimburseMax / 100;
      if (goodDet.goodsVideoList.length > 0) {
        this.videoList.push(goodDet.goodsVideoList[0]);
        this.videoModel.videoFullPath = this.videoList[0].goodsImgUrl;
      }
      // let newImgList = [];
      // this.fileGoodsList.map((item, index) => {
      //   this.checkImgExists(item.imageUrl).then(()=> {
      //     newImgList.push(item)
      //   }).catch(()=> {
      //     newImgList = this.fileGoodsList.splice(index,1);
      //   })
      // })
      // this.fileGoodsList = newImgList;

      console.log("fileGoodsList", this.fileGoodsList);
      this.rules = {
        ...this.rules,
        ...originRules,
      };
    },
    getImages(d, type) {
      return d.map((v) => ({
        url: type == 1 ? v.goodsImgUrl : v.imageUrl,
        imageUrl: type == 1 ? v.goodsImgUrl : v.imageUrl,
        goodsImgUrl: type == 1 ? v.goodsImgUrl : v.imageUrl,
        id: v.id,
        imageSort: v.imageSort,
        imgSort: v.imgSort,
        imageType: type == 1 ? v.imgType : v.imageType,
        miniProgramShow: v.miniProgramShow === 0 ? 0 : 1,
      }));
    },
    // 修改条形码
    changeBarCode(val) {
      // this.$refs.formData1.resetFields();
      this.formData1.barCode = val;
      // this.goodDisabled = false;
    },
    //快速录入
    fastInput(type) {
      const code = this.formData1.barCode.trim();
      if (code == "") {
        // this.$refs.formData1.validateField("barCode")
        this.$message({
          message: "请输入条形码",
          type: "error",
        });
        return;
      }
      getBarcodeData(code).then((res) => {
        if (res.code != "000000") {
          return this.$message({
            message: res.message,
            type: "error",
          });
        }
        if (res.data == null) {
          return this.$message({
            message: "未查询到数据，请手动输入",
            type: "warning",
          });
        }
        const {
          medicCommonName,
          medicGoodsName,
          medicalDetailFieldMap,
          approvalNumber,
        } = res.data;
        const { productionCompany, specifications } = medicalDetailFieldMap;
        let fastParm = {
          medicCommonName,
          medicGoodsName,
          specifications,
          productionCompany,
          approvalNumber,
        };
        this.formData1 = Object.assign(this.formData1, fastParm);
      });
    },
    updateStock() {
      let r = /^\+?[1-9][0-9]*$/;
      //造假  接口来了删掉
      if (this.stock.num <= 0) {
        return this.$message({
          message: "增加库存数量不得为0",
          type: "warning",
        });
      }
      if (!r.test(this.stock.num)) {
        return this.$message({
          message: "库存数量必须正整数",
          type: "warning",
        });
      }

      if (this.stock.type == 1) {
        if (this.stock.num > this.formData.goodsStock) {
          return this.$message({
            message: "减少库存数量不得大于当前库存",
            type: "warning",
          });
        }
        this.formData.stock = this.formData.goodsStock - this.stock.num;
        this.formData.decrStock = Number(this.stock.num);
        this.formData.incrStock = "";
      } else if (this.stock.type == 2) {
        this.formData.stock =
          Number(this.stock.num) + Number(this.formData.goodsStock);
        this.formData.incrStock = Number(this.stock.num);
        this.formData.decrStock = "";
      }
      //this.formData.goodsStock = this.formData.stock
      this.isgoodStock = true;
      this.stockDio = false;
    },
    changeStock(type) {
      if (this.formData.stock == 0 && type == 1) {
        return;
      }
      let str = type == 1 ? "减少" : "增加",
        txt = `请输入${str}的库存数量`,
        tit = str + "库存";
      this.stock = {
        title: tit,
        type,
        num: "",
        placeholderTxt: txt,
      };
      this.stockDio = true;
    },
    complete() {
      let formNameList = ["formData", "formData3"];
      this.formData = { ...this.formData, ...this.formData3 };

      for (let i = 0; i < this.fileGoodsList.length; i++) {
        this.fileGoodsList[i].imageSort = i + 1;
      }
      for (let j = 0; j < this.fileIntrList.length; j++) {
        this.fileIntrList[j].imageSort = j + 1;
      }
      this.formData.categoryId = this.formData.goodsType;
      this.formData.otc = this.formData.otc1 == 1 ? true : false;
      this.isgoodStock = this.formData.stock > 0 ? true : false;
      this.formData.goodsId = this.goodsId;
      this.formData.goodsImages = this.fileGoodsList;
      this.formData.goodsHeaderImages = this.fileGoodsList;
      this.formData.goodsVideoList = this.videoList;
      this.formData.goodsDetailImages = this.fileIntrList; // 商品详情图
      this.formData.buyLimitDtoList = this.buyLimitDtoList;
      this.formData.goodsCategoryIdList = this.goodsCategoryIdList;
      this.isgoodsImages = this.formData.goodsImages.length == 0 ? false : true;
      this.isSpecification_url =
        this.formData.goodsDetailImages.length == 0 ? false : true;
      // 判断是否只选择了项目-合同名称的其中一项
      const { cooperationProjectId, contractId, goodsCategoryIdList } =
        this.formData;
      if (!goodsCategoryIdList.length) {
        this.isgoodsCategory = true;
        return this.$message({
          message: "请选择商品分类",
          type: "error",
        });
      }
      if (!cooperationProjectId || !contractId) {
        this.isProjectId = true;
        return this.$message({
          message: "请关联项目名称",
          type: "error",
        });
      }
      // 是否选择新增药品
      if (this.choiceMedData.length == 0) {
        this.isShowGoodsMsg = true;
        this.$message({
          message: "请选择基础药品",
          type: "error",
        });
        return;
      }
      let isTrue = false;
      let item = "";
      for (let i = 0; i < formNameList.length; i++) {
        item = formNameList[i];
        this.$refs[item].validate((valid, object) => {
          isTrue = valid;
          if (!valid) return false;
        });
        if (!isTrue) {
          return;
        }
      }

      // 是否上传商品头图 || 是否上传商品详情图片 || 库存是否为0 || 单次购买上线是否符合要求
      if (
        !this.isgoodsImages ||
        !this.isSpecification_url ||
        !this.isgoodStock ||
        !this.checkCount()
      )
        return;

      if (!isTrue) {
        return false;
      } else {
        this.formData.costPrice = signFigures(this.formData.optPrice * 100, 10);
        this.formData.realCostPrice = signFigures(
          this.formData.realCostPrice * 100,
          10
        );
        this.formData.reimburseMax = signFigures(
          this.formData.reimburseMax * 100,
          10
        );
        this.formData.hasChanged = true;
        this.formData.inputType = this.inputType;
        this.updateGoodsInfo();
      }
    },
    //更新商品
    updateGoodsInfo() {
      console.log("提交值", JSON.parse(JSON.stringify(this.formData)));
      // const submieFn = this.isCheckServe ? updateGoodsV2 : updateGoods;
      const submieFn = updateGoods;
      let params = JSON.parse(JSON.stringify(this.formData));
      params.scorePerformance = params.scorePerformance * 100;
      console.log("提交params", params);
      submieFn(params).then((res) => {
        if (res.code !== "000000") {
          return this.$message({
            message: res.message,
            type: "error",
          });
        }

        vm.$message.success("操作成功");
        this.$router.push({
          path: "/goods-manage",
          query: {
            storeId: this.formData.storeId,
            commissionFlag: this.commissionFlag,
            storeType: this.storeType,
          },
        });
      });
    },
    imgExceed(file) {
      if (file.length > 6) {
        this.$message.error("最多只能上传6张图片");
      }
    },
    //上传商品头图
    beforeUploadPic(file) {
      // if(this.fileGoodsList.length > 6){
      //     this.$message.error("最多只能上传6张图片");
      //     return ;
      // }
      let vm = this;
      let picTypes = ["image/jpeg", "image/png"];

      const isLt200k = file.size / 1024 < 200;
      if (picTypes.indexOf(file.type) == -1) {
        return this.$message.error("请上传jpeg或png格式的图片");
      }
      let _img = new FileReader();
      _img.readAsDataURL(file);

      _img.onload = function (theFile) {
        let image = new Image();
        image.src = theFile.target.result;
        vm.slide2.oriUrl = theFile.target.result;
        image.onload = function () {
          let _this = this;
          if (_this.width !== 750 || _this.height !== 750) {
            vm.$message.error("图片长宽尺寸必须为750*750");
            return;
          }
          openLoading(vm);
          doUpload(
            vm,
            file,
            getFilePath(file, null),
            "preview4",
            "progress1",
            1
          ).then(function (path) {
            closeLoading(vm);
            console.log("上传成功后路径", path);
            let len = vm.fileGoodsList.length;
            vm.fileGoodsList.push({
              miniProgramShow: 1,
              url: path.fullPath,
              goodsImgUrl: path.fullPath,
              imageUrl: path.fullPath,
              imgSort: len + 1,
              imageSort: len + 1,
              goodsId: vm.formData.goodsId,
            });
            vm.isgoodsImages = true;

            // vm.fileGoodsList.push({url:path.fullPath,goodsImgUrl: path.fullPath,imageUrl:path.fullPath,imageName:'',imageSort: len+1,imageType: 2,id: null,})
            vm.$message.success("上传成功");
          });
        };
      };
    },
    //上传商品详情图片
    beforeUploadPic1(file, type) {
      // 图片 jpeg png 视频 mp4
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isMP4 = file.type === "video/mp4";
      if (isMP4) {
        this.beforeUploadVideo(file);
      }
      if (isPNG || isJPG) {
        this.beforeUpload(file);
      }
    },
    //上传商品详情图片
    beforeUpload(file) {
      let vm = this;
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        vm.$message.error("图片格式不符合规范，请根据规范上传图片");
        return;
      }
      if (!isLt2M) {
        vm.$message.error("图片大小请控制在2M以内 ");
        return;
      }
      let _img = new FileReader();
      _img.readAsDataURL(file);
      _img.onload = function (theFile) {
        let image = new Image();
        image.src = theFile.target.result;
        vm.slide2.oriUrl = theFile.target.result;
        image.onload = function () {
          openLoading(vm);
          doUpload(
            vm,
            file,
            getFilePath(file, null),
            "preview4",
            "progress1",
            1
          ).then(function (path) {
            closeLoading(vm);
            let len = vm.fileIntrList.length;
            vm.fileIntrList.push({
              miniProgramShow: 1,
              url: path.fullPath,
              imageUrl: path.fullPath,
              imageSort: len + 1,
              id: null,
              imageType: 4,
            });
            vm.isSpecification_url = true;
            vm.$message.success("上传成功");
          });
          //}
        };
      };
      return isJPG && isLt2M;
    },
    //上传商品详情视频
    beforeUploadVideo(file) {
      console.log("file :>> ", file);
      let self = this;

      if (file.name.indexOf(" ") != -1) {
        self.$message.warning("文件名不能包含空格");
        return;
      }

      const isLt20M = file.size / 1024 / 1024 < 20;
      if (!isLt20M) {
        self.$message.warning("视频文件不能大于20M");
        return;
      }

      let updateFlag = self.checkUpdate(file.name);
      if (updateFlag == false) return;

      //如果没有选择文件,返回
      if (isEmptyUtils(file)) return;
      console.log("object :>> ", file.type.split("/"));

      let filety = "." + file.type.split("/")[1];
      if (filety != ".mp4") {
        self.$message.error("仅支持上传mp4格式视频");
        return;
      }

      var name_ = file.name.split("_");
      if (name_.length != 4) {
        self.$message.error(
          "上传视频文件名格式不正确：举例（GXY_001_02_03.mp4)"
        );
        return;
      }

      self.$message.info("开始上传");

      const videoPath = createFilePath(file, file.name);

      doUpload(self, file, videoPath, "preview4", "uploadProgress1", "").then(
        function (result) {
          // self.videoModel.videoFullPath = result.fullPath;
          let fileItem = {
            goodsImgUrl: result.fullPath,
            uid: file.uid,
            imageUrl: result.fullPath,
            imageType: 5,
            goodsId: self.formData.goodsId,
            id: null,
            deleteFlag: 0,
          };
          self.fileIntrList.push(fileItem);
          console.log("object :>> ", self.fileIntrList);
          return false;
        }
      );
    },
    //删除图片
    deleteImg(item, d) {
      let index = "";
      for (let i = 0; i < d.length; i++) {
        if (item.url == d[i].url) {
          index = i;
          break;
        }
      }
      d.splice(index, 1);
    },
    // 获取裁剪的图片数据
    getCropImg(argument) {
      this.showCropper = false;
      this.cropData = argument[1];
      vm.doUploadQiNiu(argument[2]);
      argument[3] && argument[3].destroy();
      // vm.slide2.oriUrl = "";
    },
    // 单次购买上限和最大购买数
    minusCount(type) {
      if (type === 1) {
        if (this.formData.leastCount >= 2) {
          this.formData.leastCount -= 1;
          this.formData1.leastCount = this.formData.leastCount;
        }
      } else if (type === 2) {
        if (this.formData.mostCount > -1) {
          this.formData.mostCount -= 1;
          this.formData1.mostCount = this.formData.mostCount;
        }
      } else if (type === 3) {
        if (this.formData.minWhole >= 2) {
          this.formData.minWhole -= 1;
        }
      }
      // if (this.formData.mostCount < this.formData.leastCount) {
      //   this.formData.mostCount = this.formData.leastCount;
      // }
    },
    plusCount(type) {
      if (type === 1) {
        this.formData.leastCount += 1;
        this.formData1.leastCount = this.formData.leastCount;
      } else if (type === 2) {
        this.formData.mostCount += 1;
        this.formData1.mostCount = this.formData.mostCount;
      } else if (type === 3) {
        this.formData.minWhole += 1;
      }
      // if (this.formData.mostCount < this.formData.leastCount) {
      //   this.formData.mostCount = this.formData.leastCount;
      // }
    },
    // 上传七牛
    doUploadQiNiu(file) {
      doUpload(
        this,
        file,
        getFilePath(file, null),
        "preview4",
        "uploadProgress1",
        ""
      ).then(function (path) {
        vm.formData.headUrl = path.fullPath;

        vm.$message.success("上传成功");
      });
    },
    addBuyingLimit() {
      if (this.buyLimitDtoList != null && this.buyLimitDtoList.length == 2) {
        this.$message({
          message: "最多添加两个限制条件",
          type: "warning",
        });
        return;
      }
      if (this.buyLimitDtoList == null || this.buyLimitDtoList.length == 0) {
        this.buyLimitDtoList.push({
          days: 0,
          daysType: 1,
          limitCount: 0,
          limitUserType: 1,
        });
        return;
      }

      if (this.buyLimitDtoList.length < 2) {
        let limitUserType = 1;
        if (this.buyLimitDtoList[0].limitUserType == 1) {
          limitUserType = 2;
        }
        this.buyLimitDtoList.push({
          days: 0,
          daysType: 1,
          limitCount: 0,
          limitUserType: limitUserType,
        });
      }
      // this.limitVisibleFlag = true;
    },
    delLimit(index) {
      this.buyLimitDtoList.splice(index, 1);
    },
    changeLimitUserType(item, index) {
      if (item.limitUserType == 1) {
        if (this.buyLimitDtoList.length == 2 && index == 0) {
          this.buyLimitDtoList[1].limitUserType = 2;
        } else if (this.buyLimitDtoList.length == 2 && index == 1) {
          this.buyLimitDtoList[0].limitUserType = 2;
        }
      } else {
        if (this.buyLimitDtoList.length == 2 && index == 0) {
          this.buyLimitDtoList[1].limitUserType = 1;
        } else if (this.buyLimitDtoList.length == 2 && index == 1) {
          this.buyLimitDtoList[0].limitUserType = 1;
        }
      }
    },
    checkCount() {
      let flag = true;
      if (this.formData.saleType == 1 && this.formData.mostCount == 0) {
        flag = false;
        this.$message({
          message: "单次购买上限不能为0",
          type: "warning",
        });
        return flag;
      }

      if (
        this.formData.saleType == 1 &&
        this.formData.mostCount != -1 &&
        this.formData.mostCount < this.formData.leastCount
      ) {
        flag = false;
        this.$message({
          message: "单次购买上限不能小于最小起购件数",
          type: "warning",
        });
        return flag;
      }
      return flag;
    },
    goShopDeatil() {
      this.$router.push({
        path: `/create-shop`,
        query: {
          storeId: this.storeId,
          // storeData: JSON.stringify(row),
        },
      });
    },
    //店铺是否配置售后地址
    getStoreAdress() {
      getStoreAdressRepot(this.storeId).then((res) => {
        if (res.code == "000000") {
          // repotList 地址数组
          if (res.data && res.data.repotList && res.data.repotList.length) {
            this.hasRepoFlag = true;
          } else {
            this.hasRepoFlag = false;
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 视频
    deleteVideo(videoList) {
      this.videoList = [];
      this.videoModel.videoFullPath = "";
    },
    beforeVideoUpload(file) {
      const video2M = file.size / 1024 / 1024 < 20;
      console.log(file.size, "video2Mvideo2Mvideo2M");

      if (!video2M) {
        this.$message.error("上传视频大小不能超过20M!");
      } else {
        this.doVideoUpload(file, 1);
      }
    },
    handleRemoveVideo(file, videoList) {
      for (let i = 0; i < this.videoList.length; i++) {
        if (this.videoList[i].name == file.name) {
          this.videoList.splice(i, 1);
          console.log("删除" + i);
        }
      }
    },
    checkUpdate(name) {
      let flag = true;
      for (let i = 0; i < this.videoList.length; i++) {
        if (this.videoList[i].name == name) {
          flag = false;
          this.$message.warning("上传文件重发");
        }
      }
      console.log("name", name, "", this.videoList);
      return flag;
    },
    doVideoUpload(file, index) {
      console.log("file", file);
      //console.log('videoList项目列表：',this.videoList);
      this.videoModel.videoFullPath = "";
      if (file.name.indexOf(" ") != -1) {
        this.$message.warning("文件名不能包含空格");
        return;
      }
      let updateFlag = this.checkUpdate(file.name);
      if (updateFlag == false) {
        return;
      }
      var ext = file.type;
      var arr = ext.split("/");
      var filety = "." + arr[1];
      /*if (filety.indexOf(".pdf") < 0 && filety.indexOf(".jpeg") < 0 && filety.indexOf(".jpg") < 0
            && filety.indexOf(".png") < 0 && filety.indexOf(".mp4") < 0) {
            this.$message.warning('文件格式错误');
            return
        }*/

      let self = this;
      //如果没有选择文件,返回
      if (isEmptyUtils(file)) {
        return;
      }

      console.log("file.type", file.type);
      if (filety != ".mp4") {
        // if (file.type !== 'video/mp4') {
        self.$message.error("仅支持上传mp4格式视频");
        return;
      }

      var arr = file.name.split("_");
      if (arr.length != 4) {
        self.$message.error(
          "上传视频文件名格式不正确：举例（GXY_001_02_03.mp4)"
        );
        return;
      }

      self.$message.info("开始上传");
      self.videoModel.videoPath = createFilePath(file, file.name);
      //  let videoPath = createFilePath(file,file.name)
      doUpload(
        self,
        file,
        self.videoModel.videoPath,
        "preview4",
        "uploadProgress1",
        ""
      ).then(function (result) {
        console.log("成功result", result);
        self.videoModel.videoFullPath = result.fullPath;
        // self.model.size = result.size;
        // self.model.ext = result.ext;
        // self.model.name = self.model.videoPath;
        let fileItem = {
          goodsImgUrl: result.fullPath,
          uid: "",
          imageUrl: result.fullPath,
          imageType: 9,
          goodsId: self.formData.goodsId,
          id: null,
          deleteFlag: 0,
        };
        self.videoList.push(fileItem);
        self.$message.success("上传成功");
        console.log("sumFile", self.sumFile, "videoList", self.videoList);
        return false;
      });
    },
  },
};
</script>
<style lang="scss">
@import "./create-good-new.scss";
</style>
