<template>
  <el-dialog
    v-if="dialogVisible"
    title="商品审核"
    v-el-drag-dialog
    :visible.sync="dialogVisible"
    :append-to-body="isAppend"
    width="1260px"
    top="60px"
    :before-close="handleClose"
    class="projectInfo"
  >
    <div class="acea-row mt10" v-if="isShow">
      <span class="sp"
        >店铺名称：{{
          projectData.merchant && projectData.merchant.mer_name
        }}</span
      >
      <span class="sp"
        >入驻企业名称：{{
          projectData.merchant &&
          projectData.merchant.ext.com &&
          projectData.merchant.ext.com.name
        }}</span
      >
      <span class="sp"
        >店铺联系人:
        {{ projectData.merchant && projectData.merchant.real_name }}</span
      >
      <span class="sp" v-if="projectData.merchant">
        营业执照：
        <div class="demo-image__preview">
          <el-image
            style="width: 60px; height: 60px"
            :src="projectData.merchant.mer_cert"
            :preview-src-list="[projectData.merchant.mer_cert]"
          />
        </div>
      </span>

      <span class="sp"
        >联系人电话：{{
          projectData.merchant && projectData.merchant.service_phone
        }}</span
      >
      <span class="sp" v-if="projectData.refusal"
        >上传拒绝原因：{{ projectData.refusal }}</span
      >
    </div>
    <div class="acea-row" v-if="isShow">
      <span class="sp">商品id：{{ projectData.product_id }}</span>
      <span class="sp">商品名称：{{ projectData.store_name }}</span>
      <span class="sp"
        >平台分类：{{
          projectData.storeCategory ? projectData.storeCategory.cate_name : ""
        }}</span
      >
      <!-- <span class="sp">品牌：{{ projectData.brand?projectData.brand.brand_name:'其他' }}</span> -->
      <span class="sp">商品关键字：{{ projectData.keyword }}</span>
      <span class="sp">商品单位：{{ projectData.unit_name }}</span>
      <span class="sp">
        商品分类：
        <template v-if="projectData.merCateId">
          <span
            v-for="(item, index) in projectData.merCateId"
            :key="index"
            class="mr10"
            >{{ item.category ? item.category.cate_name : "" }}</span
          >
        </template>
        <span v-else>-</span>
      </span>
      <span class="sp">商品简介：{{ projectData.store_info }}</span>
      <span class="sp">商品备注：{{ projectData.remark }}</span>
      <!-- <span class="sp"
        >是否惠美乡村：{{ projectData.is_huimei ? "是" : "否" }}</span
      > -->
      <span class="sp100">
        商品封面图：
        <div class="demo-image__preview">
          <el-image
            style="width: 60px; height: 60px"
            :src="projectData.image"
            :preview-src-list="[projectData.image]"
          />
        </div>
      </span>
      <span class="sp"
        >定制产品：{{ projectData.is_customize ? "是" : "否" }}</span
      >
    </div>
    <el-tabs
      v-if="projectData && isShow"
      v-model="activeNames"
      v-loading="loading"
    >
      <el-tab-pane label="商品信息" name="first">
        <div class="acea-row">
          <span class="sp" v-if="projectData.temp && projectData.temp.name"
            >运费模板：{{ projectData.temp ? projectData.temp.name : "" }}</span
          >
          <span class="sp100" v-if="projectData.temp && projectData.temp.info"
            >运费说明：{{ projectData.temp ? projectData.temp.info : "" }}</span
          >

          <span v-if="projectData.video_link" class="sp100">
            主图视频：
            <video
              style="width: 40%; height: 180px; border-radius: 10px"
              :src="projectData.video_link"
              controls="controls"
            >
              您的浏览器不支持 video 标签。
            </video>
          </span>
          <span class="sp100"
            >商品轮播图：
            <div
              v-for="(item, index) in projectData.slider_image"
              :key="index"
              class="pictrue"
            >
              <el-image
                style="width: 60px; height: 60px"
                :src="item"
                :preview-src-list="[item]"
              />
            </div>
          </span>
        </div>
      </el-tab-pane>
      <el-tab-pane label="资质信息" name="aptitude">
        <span class="sp"
          >商品名称：
          <el-radio-group v-model="qualification.commodity_type">
            <el-radio
              :label="0"
              class="radio"
              :disabled="qualification.commodity_type == 1"
              >国产</el-radio
            >
            <el-radio :label="1" :disabled="qualification.commodity_type == 0"
              >进口</el-radio
            >
          </el-radio-group>
        </span>
        <div v-if="qualification.commodity_type == 0">
          <span class="sp"
            >生产企业名称：{{ qualification.production_name }}</span
          >
          <span class="upload">
            <div class="upload_left">生产营业执照：</div>
            <div class="upload_right">
              <div
                v-for="(item, index) in qualification.businessList"
                :key="index"
              >
                <a
                  class="txt"
                  v-if="getType(item)"
                  :href="item.url"
                  target="downloadFile"
                  download
                  >{{ item.name }}</a
                >
                <div class="pictrue" v-else>
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  />
                </div>
              </div>
            </div>
          </span>
          <span class="upload">
            <div class="upload_left">生产许可证：</div>
            <div class="upload_right">
              <div
                v-for="(item, index) in qualification.licenceList"
                :key="index"
              >
                <a
                  class="txt"
                  v-if="getType(item)"
                  :href="item.url"
                  target="downloadFile"
                  download
                  >{{ item.name }}</a
                >
                <div class="pictrue" v-else>
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  />
                </div>
              </div>
            </div>
          </span>
          <span class="upload">
            <div class="upload_left">商标注册证：</div>
            <div class="upload_right">
              <div
                v-for="(item, index) in qualification.trademarkList"
                :key="index"
              >
                <a
                  class="txt"
                  v-if="getType(item)"
                  :href="item.url"
                  target="downloadFile"
                  download
                  >{{ item.name }}</a
                >
                <div class="pictrue" v-else>
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  />
                </div>
              </div>
            </div>
          </span>
          <span class="upload">
            <div class="upload_left">销售授权及品牌方营业执照：</div>
            <div class="upload_right">
              <div
                v-for="(item, index) in qualification.authorizedList"
                :key="index"
              >
                <a
                  class="txt"
                  v-if="getType(item)"
                  :href="item.url"
                  target="downloadFile"
                  download
                  >{{ item.name }}</a
                >
                <div class="pictrue" v-else>
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  />
                </div>
              </div>
            </div>
          </span>
          <span class="upload">
            <div class="upload_left">商品检测报告及备案：</div>
            <div class="upload_right">
              <div
                v-for="(item, index) in qualification.commodityList"
                :key="index"
              >
                <a
                  class="txt"
                  v-if="getType(item)"
                  :href="item.url"
                  target="downloadFile"
                  download
                  >{{ item.name }}</a
                >
                <div class="pictrue" v-else>
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  />
                </div>
              </div>
            </div>
          </span>
          <span class="upload">
            <div class="upload_left">其他资质：</div>
            <div class="upload_right">
              <div
                v-for="(item, index) in qualification.otherList"
                :key="index"
              >
                <a
                  class="txt"
                  v-if="getType(item)"
                  :href="item.url"
                  target="downloadFile"
                  download
                  >{{ item.name }}</a
                >
                <div class="pictrue" v-else>
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  />
                </div>
              </div>
            </div>
          </span>
        </div>
        <div v-if="qualification.commodity_type == 1">
          <span class="sp"
            >进口/企业境内总代企业名称: {{ qualification.import_name }}</span
          >
          <span class="upload">
            <div class="upload_left">生产营业执照：</div>
            <div class="upload_right">
              <div
                v-for="(item, index) in qualification.importBusinessList"
                :key="index"
              >
                <a
                  class="txt"
                  v-if="getType(item)"
                  :href="item.url"
                  target="downloadFile"
                  download
                  >{{ item.name }}</a
                >
                <div class="pictrue" v-else>
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  />
                </div>
              </div>
            </div>
          </span>
          <span class="upload">
            <div class="upload_left">销售授权及其他：</div>
            <div class="upload_right">
              <div
                v-for="(item, index) in qualification.importAuthorizedList"
                :key="index"
              >
                <a
                  class="txt"
                  v-if="getType(item)"
                  :href="item.url"
                  target="downloadFile"
                  download
                  >{{ item.name }}</a
                >
                <div class="pictrue" v-else>
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  />
                </div>
              </div>
            </div>
          </span>
          <span class="upload">
            <div class="upload_left">海关检验检疫证书及报关单：</div>
            <div class="upload_right">
              <div
                v-for="(item, index) in qualification.customsList"
                :key="index"
              >
                <a
                  class="txt"
                  v-if="getType(item)"
                  :href="item.url"
                  target="downloadFile"
                  download
                  >{{ item.name }}</a
                >
                <div class="pictrue" v-else>
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  />
                </div>
              </div>
            </div>
          </span>
          <span class="upload">
            <div class="upload_left">产品外包装实物图：</div>
            <div class="upload_right">
              <div
                v-for="(item, index) in qualification.packingList"
                :key="index"
              >
                <a
                  class="txt"
                  v-if="getType(item)"
                  :href="item.url"
                  target="downloadFile"
                  download
                  >{{ item.name }}</a
                >
                <div class="pictrue" v-else>
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  />
                </div>
              </div>
            </div>
          </span>
          <span class="upload">
            <div class="upload_left">其他资质：</div>
            <div class="upload_right">
              <div
                v-for="(item, index) in qualification.importOtherList"
                :key="index"
              >
                <a
                  class="txt"
                  v-if="getType(item)"
                  :href="item.url"
                  target="downloadFile"
                  download
                  >{{ item.name }}</a
                >
                <div class="pictrue" v-else>
                  <el-image
                    style="width: 60px; height: 60px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  />
                </div>
              </div>
            </div>
          </span>
        </div>
      </el-tab-pane>
      <el-tab-pane label="商品详情" name="second">
        <span class="sp100">商品详情：</span>
        <div class="contentPic" v-html="projectData.content" />
      </el-tab-pane>
      <el-tab-pane label="其他设置" name="third">
        <span class="sp100">商品排序：{{ projectData.sort }}</span>
        <span class="third mb20">
          <span>商品推荐：</span>
          <el-checkbox-group v-model="checkboxGroup" size="small">
            <el-checkbox
              v-for="(item, index) in recommend"
              :key="index"
              disabled
              :label="item.value"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </span>
        <span
          v-if="
            projectData.guarantee && projectData.guarantee.templateValue.length
          "
          class="third mb20"
        >
          <span>服务保障：</span>
          <span
            v-for="(item, index) in projectData.guarantee.templateValue"
            :key="index"
          >
            <span v-if="item.value"
              >{{ index + 1 }}. {{ item.value.guarantee_name }}；</span
            >
          </span>
        </span>
      </el-tab-pane>
      <el-tab-pane label="商品规格" name="fourth">
        <span class="sp"
          >商品规格：{{
            projectData.spec_type === 0 ? "单规格" : "多规格"
          }}</span
        >
        <span class="sp"
          >佣金设置：{{
            projectData.extension_type === 0 ? "默认设置" : "单独设置"
          }}</span
        >
        <span class="sp100">
          <span class="mb15" style="display: block">商品规格:</span>
          <template v-if="projectData.spec_type === 0">
            <el-table :data="OneattrValue" border size="small">
              <el-table-column align="center" label="图片" min-width="80">
                <template slot-scope="scope">
                  <div class="demo-image__preview">
                    <el-image
                      style="width: 60px; height: 60px"
                      :src="scope.row.image"
                      :preview-src-list="[scope.row.image]"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                v-for="(item, iii) in attrValue"
                :key="iii"
                :label="formThead[iii].title"
                align="center"
                min-width="80"
              >
                <template slot-scope="scope">
                  <a
                    v-if="formThead[iii].title == '依据链接'"
                    :href="scope.row[iii]"
                    target="_blank"
                    >{{ scope.row[iii] }}</a
                  >
                  <span v-else class="priceBox" v-text="scope.row[iii]" />
                </template>
              </el-table-column>
              <template v-if="projectData.extension_type === 1">
                <el-table-column
                  align="center"
                  label="一级返佣(元)"
                  min-width="120"
                >
                  <template slot-scope="scope">
                    <span class="priceBox" v-text="scope.row.extension_one" />
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="二级返佣(元)"
                  min-width="120"
                >
                  <template slot-scope="scope">
                    <span class="priceBox" v-text="scope.row.extension_two" />
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </template>
          <template v-if="projectData.spec_type === 1">
            <el-table :data="ManyAttrValue" border size="small">
              <template v-if="manyTabDate">
                <el-table-column
                  v-for="(item, iii) in manyTabDate"
                  :key="iii"
                  align="center"
                  :label="manyTabTit[iii].title"
                  min-width="80"
                >
                  <template slot-scope="scope">
                    <span class="priceBox" v-text="scope.row[iii]" />
                  </template>
                </el-table-column>
              </template>
              <el-table-column align="center" label="图片" min-width="80">
                <template slot-scope="scope">
                  <div class="upLoadPicBox">
                    <div class="pictrue tabPic">
                      <el-image
                        style="width: 60px; height: 60px"
                        :src="scope.row.image"
                        :preview-src-list="[scope.row.image]"
                      />
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                v-for="(item, iii) in attrValue"
                :key="iii"
                :label="formThead[iii].title"
                align="center"
                min-width="80"
              >
                <template slot-scope="scope">
                  <a
                    v-if="formThead[iii].title == '依据链接'"
                    :href="scope.row[iii]"
                    target="_blank"
                    >{{ scope.row[iii] }}</a
                  >
                  <span v-else class="priceBox" v-text="scope.row[iii]" />
                </template>
              </el-table-column>
              <template v-if="projectData.extension_type === 1">
                <el-table-column
                  align="center"
                  label="一级返佣(元)"
                  min-width="120"
                >
                  <template slot-scope="scope">
                    <span class="priceBox">{{ scope.row.extension_one }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  label="二级返佣(元)"
                  min-width="120"
                >
                  <template slot-scope="scope">
                    <span class="priceBox">{{ scope.row.extension_two }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </template>
        </span>
      </el-tab-pane>
    </el-tabs>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="定制产品" prop="is_customize">
        <el-radio-group v-model="projectData.is_customize">
          <el-radio :disabled="projectData.is_customize == 1" :label="0"
            >否</el-radio
          >
          <el-radio :disabled="projectData.is_customize == 0" :label="1"
            >是</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item
        :label="projectData.status == 15 ? '解锁状态' : '审核状态'"
        prop="status"
      >
        <el-radio-group v-model="ruleForm.status">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="-1">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="佐证图片" prop="status_img" label-width="80px">
        <div class="acea-row">
          <div
            v-for="(item, index) in ruleForm.status_img"
            :key="index"
            class="pictrue"
            draggable="false"
            @dragstart="handleDragStart($event, item)"
            @dragover.prevent="handleDragOver($event, item)"
            @dragenter="handleDragEnter($event, item)"
            @dragend="handleDragEnd($event, item)"
          >
            <!-- <img :src="item"> -->
            <el-image
              style="width: 60px; height: 60px"
              :src="item"
              :preview-src-list="[item]"
            />
            <i class="el-icon-error btndel" @click="handleRemove(index)" />
          </div>
          <div
            v-if="ruleForm.status_img.length < 10"
            class="uploadCont"
            title="750*750px"
          >
            <!-- <div class="upLoadPicBox" @paste="handlePaste" @click="modalPicTap('2')">
                    <div class="upLoad">
                      <i class="el-icon-camera cameraIconfont" />
                    </div>
                  </div> -->
            <el-upload
              :action="fileUrl"
              :show-file-list="false"
              list-type="picture-card"
              multiple
              :headers="myHeaders"
              :on-success="setQualificationsList"
              :before-upload="beforeUploadQualification"
            >
              <i class="el-icon-plus" />
            </el-upload>
          </div>
        </div>
      </el-form-item>
      <el-form-item
        v-if="ruleForm.status === -1 || ruleForm.status === 15"
        :label="projectData.status != 0 ? '锁定原因' : '拒绝原因'"
        prop="refusal"
      >
        <el-input
          v-model="ruleForm.refusal"
          type="textarea"
          placeholder="请输入原因"
        />
      </el-form-item>
    </el-form>
    <div class="edit_mark">
      <div>信息变更：</div>
      <div
        style="color: red; margin-left: 70px"
        v-html="projectData.edit_mark"
      ></div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import SettingMer from "@/libs/settingMer";
import { getToken } from "@/utils/auth";
import elDragDialog from "@/directive/el-drag-dialog";
import {
  productStatusUnlockApi,
  productDetailApi,
  productStatusApi,
  productStatusFirstApi,
  productStatusFirstTwoApi,
  productStatusSecondApi,
} from "@/api/product";
import log from "@/libs/util.log";
const defaultObj = {
  image: "",
  slider_image: [],
  store_name: "",
  store_info: "",
  keyword: "",
  brand_id: "", // 品牌id
  cate_id: "", // 平台分类id
  mer_cate_id: [], // 商户分类id
  unit_name: "",
  sort: 0,
  is_show: 0,
  is_benefit: 0,
  is_new: 0,
  is_good: 0,
  temp_id: "",
  attrValue: [
    {
      image: "",
      price: null,
      svip_price: null,
      cost: null,
      ot_price: null,
      proportion: 0.6,
      coupon: "",
      stock: 0,
      // growth: 0,
      bar_code: "",
      weight: null,
      volume: null,
      gist_url: null,
    },
  ],
  attr: [],
  selectRule: "",
  extension_type: 0,
  content: "",
  spec_type: 0,
};
const objTitle = {
  price: {
    title: "售价",
  },
  svip_price: {
    title: "付费会员价",
  },
  cost: {
    title: "成本价",
  },
  ot_price: {
    title: "市场价",
  },
  proportion: {
    title: "占比",
  },
  coupon: {
    title: "折扣",
  },
  stock: {
    title: "库存",
  },
  growth: {
    title: "成长值",
  },
  bar_code: {
    title: "商品编号",
  },
  weight: {
    title: "重量（KG）",
  },
  volume: {
    title: "体积(m³)",
  },
  gist_url: {
    title: "依据链接",
  },
};
const proOptions = [
  { name: "是否热卖", value: "is_hot" },
  { name: "优品推荐", value: "is_good" },
  { name: "特惠专区", value: "is_benefit" },
  { name: "是否精品", value: "is_best" },
  { name: "是否新品", value: "is_new" },
];
export default {
  name: "Info",
  props: {
    isShow: {
      type: Boolean,
      default: true,
    },
    ids: {
      type: Array,
      default: () => [],
    },
  },

  directives: {
    elDragDialog,
  },
  data() {
    return {
      rules: {
        status: [
          { required: true, message: "请选择审核状态", trigger: "change" },
        ],
        refusal: [
          { required: true, message: "请填写拒绝原因", trigger: "blur" },
        ],
        // status_img: [
        //   {type: 'array', required: true, message: '请上传佐证图片', trigger: 'blur' }
        // ]
      },
      myHeaders: { "X-Token": getToken() },
      isAppend: true,
      proId: 0,
      aptitude: 0,
      qualification: {
        production_name: "",
        businessList: [],
        licenceList: [],
        trademarkList: [],
        authorizedList: [],
        commodityList: [],
        otherList: [],
        importBusinessList: [],
        importAuthorizedList: [],
        customsList: [],
        packingList: [],
        importOtherList: [],
        commodity_type: 0,
        brands_name: "",
        import_name: "",
      },
      ruleForm: {
        refusal: "",
        status: 1,
        id: "",
        // is_customize: 0,
        status_img: [],
      },
      formThead: Object.assign({}, objTitle),
      manyTabDate: {},
      manyTabTit: {},
      loading: false,
      dialogVisible: false,
      activeNames: "first",
      projectData: {
        merchant: {
          ext: {
            com: {},
          },
        },
      },
      recommend: proOptions,
      checkboxGroup: [],
      svip_type: 0,
      OneattrValue: [Object.assign({}, defaultObj.attrValue[0])], // 单规格
      ManyAttrValue: [Object.assign({}, defaultObj.attrValue[0])], // 多规格
    };
  },
  computed: {
    fileUrl() {
      return SettingMer.https + `/upload/image/0/file`;
    },
    attrValue() {
      const obj = Object.assign({}, defaultObj.attrValue[0]);
      if (this.svip_type == 0) delete obj.svip_price;
      delete obj.image;
      return obj;
    },
    oneFormBatch() {
      const obj = [Object.assign({}, defaultObj.attrValue[0])];
      delete obj[0].bar_code;
      return obj;
    },
  },
  methods: {
    handlePaste(event) {
      console.log("粘贴");
      const items = (event.clipboardData || event.originalEvent.clipboardData)
        .items;
      let pasteFiles = [];
      console.log(event);
    },
    // 上传文件之前的钩子函数
    beforeUploadQualification() {
      if (this.ruleForm.status_img.length >= 10) {
        this.$message.error("上传文件最大数量为10张, 上传失败!");
        return false;
      } else {
        return true;
      }
    },
    // 上传成功
    setQualificationsList(response) {
      if (response.status === 200) {
        this.ruleForm.status_img.push(response.data.src);
        console.log(this.ruleForm.status_img);
      } else {
        this.$message.error(response.message);
      }
    },
    handleRemove(i) {
      this.ruleForm.status_img.splice(i, 1);
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.ruleForm.status_img];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.ruleForm.status_img = newItems;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    getType(val) {
      var regex = /(?:\.([^.]+))?$/;
      let suffix = regex.exec(val.url)[1];
      return suffix == "pdf";
    },
    // 点击商品图
    modalPicTap(tit, num, i) {
      const _this = this;
      const attr = [];
      this.$modalUpload(function (img) {
        console.log(_this.ruleForm);
        if (tit === "1" && !num) {
          _this.ruleForm.status_img = img[0];
        }
        if (tit === "2" && !num) {
          img.map((item) => {
            attr.push(item.attachment_src);
            _this.ruleForm.status_img.push(item);
            if (_this.ruleForm.status_img.length > 10) {
              _this.ruleForm.status_img.length = 10;
            }
          });
        }
      }, tit);
    },
    onSubmit() {
      console.log(this.projectData);
      let mode = {
        0: {
          api: productStatusFirstApi,
          status: 9,
        },
        10: {
          api: productStatusSecondApi,
          status: 11,
        },
        9: {
          api: productStatusFirstTwoApi,
          status: 10,
        },
        11: {
          api: productStatusApi,
          status: 1,
        },
        15: {
          api: productStatusUnlockApi,
          status: 10,
        },
      };
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let params = {};
          if (this.isShow) {
            params = {
              ...this.ruleForm,
              id: this.proId,
              status:
                this.ruleForm.status == -1
                  ? -1
                  : mode[this.projectData.status].status,
            };
          } else {
            params = {
              ...this.ruleForm,
              id: this.ids,
              status: this.ruleForm.status == -1 ? -1 : 1,
            };
          }
          mode[this.isShow ? this.projectData.status : 11]
            .api(params)
            .then((res) => {
              this.$message.success(res.message);
              this.dialogVisible = false;
              this.activeNames = "first";
              this.$emit("subSuccess");
            })
            .catch((res) => {
              this.listLoading = false;
              this.$message.error(res.message);
            });
        }
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.activeNames = "first";
    },
    getInfo(id) {
      this.proId = id;
      this.loading = true;
      this.ruleForm.status_img = [];
      this.ruleForm.status = 1;
      this.ruleForm.refusal = "";
      productDetailApi(id)
        .then((res) => {
          this.projectData = res.data;

          this.ruleForm.status_img = res.data.status_img;
          let qualification = {
            production_name: "",
            businessList: [],
            licenceList: [],
            trademarkList: [],
            authorizedList: [],
            commodityList: [],
            otherList: [],
            importBusinessList: [],
            importAuthorizedList: [],
            customsList: [],
            packingList: [],
            importOtherList: [],
            commodity_type: 0,
            brands_name: "",
            import_name: "",
          };
          this.qualification = res.data.qualification || qualification;
          this.qualification.commodityList =
            this.qualification.commodityList.slice(0, 20);
          this.svip_type = res.data.svip_price_type;

          if (this.projectData.spec_type === 0) {
            this.OneattrValue = res.data.attrValue;
          } else {
            this.ManyAttrValue = res.data.attrValue;
          }
          const tmp = {};
          const tmpTab = {};
          this.projectData.attr.forEach((o, i) => {
            tmp["value" + i] = { title: o.value };
            tmpTab["value" + i] = "";
          });
          this.manyTabDate = tmpTab;
          this.manyTabTit = tmp;
          this.checkboxGroup = [];
          this.formThead = Object.assign({}, this.formThead, tmp);
          if (this.projectData.is_hot === 1) this.checkboxGroup.push("is_hot");
          if (this.projectData.is_good === 1)
            this.checkboxGroup.push("is_good");
          if (this.projectData.is_benefit === 1)
            this.checkboxGroup.push("is_benefit");
          if (this.projectData.is_best === 1)
            this.checkboxGroup.push("is_best");
          if (this.projectData.is_new === 1) this.checkboxGroup.push("is_new");
          this.loading = false;
        })
        .catch((res) => {
          this.$message.error(res.message);
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.projectInfo ::v-deep .el-dialog__body {
  padding-top: 0 !important;
}
.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep .el-upload--picture-card {
  width: 58px;
  height: 58px;
  line-height: 70px;
}
.btndel {
  position: absolute;
  z-index: 1;
  width: 20px !important;
  height: 20px !important;
  left: 46px;
  top: -4px;
}
.upload {
  display: flex;
  flex-direction: row;
  align-content: center;
  height: 60px;
  // line-height: 60px;
  margin-bottom: 10px;
  &_right {
    display: flex;
    height: 60px;
  }
  &_left {
    width: 115px;
  }
  .txt {
    width: 60px;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-right: 10px;
    color: blue;
  }
}
.projectInfo ::v-deep .el-tabs__content {
  padding-left: 10px !important;
}
.tabPic {
  width: 40px !important;
  height: 40px !important;
  img {
    width: 100%;
    height: 100%;
  }
}
.sp {
  display: block;
  width: 33%;
  margin-bottom: 20px;
}
.sp100 {
  width: 100%;
  margin-bottom: 15px;
  display: inline-block;
}
.third {
  width: 100%;
  display: flex;
}
.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  img {
    width: 100%;
    height: 100%;
  }
}
.demo-image__preview {
  display: inline-block;
  vertical-align: middle;
}
</style>
