<template>
  <div class="create-shop-wrapper">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
    ></bread-crumb>
    <div class="create-shop-content screenSet" id="screenSet">
      <el-row class="step-content">
        <el-col :span="20">
          <p class="title">新建店铺</p>
        </el-col>
        <el-col :span="4" style="text-align: right">
          <el-button
            size="small"
            type="primary"
            :disabled="storeData && storeData.tradeStore.storeType == 3"
            @click="complete"
            >完成</el-button
          >
          <el-button size="small" type="primary" @click="back">返回</el-button>
        </el-col>
      </el-row>
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        label-width="150px"
        label-suffix="："
        class="basic-form"
        style="margin-top: 15px"
      >
        <div class="basic-item-icon">
          <el-form-item label="店铺LOGO" class="required-label">
            <el-upload
              v-model="formData.storeLogo"
              class="bg-uploader"
              action="#"
              :show-file-list="false"
              :before-upload="beforeUploadPic1"
            >
              <img
                v-if="formData.storeLogo"
                :src="formData.storeLogo"
                @mouseover.stop="imgMouseOver1 = true"
                class="bg-img"
              />
              <img
                v-if="!formData.storeLogo"
                class="bg-img"
                src="../../assets/image/small.png"
              />
              <div
                v-if="storeData && storeData.tradeStore.storeType == 3"
                class="img-delete"
                v-show="imgMouseOver1"
                @click.stop="deleteImg('storeLogo')"
                @mouseout.stop="imgMouseOver1 = false"
              >
                <i class="el-icon-delete"></i>
              </div>
              <div class="limit-text">
                <p>限制大小: 200kb</p>
                <p>建议尺寸：128*128</p>
                <p>支持jpeg, png格式</p>
              </div>
            </el-upload>
          </el-form-item>
          <p class="upload-message" v-if="uploadImgMessage1">请上传店铺logo</p>
        </div>
        <el-form-item label="店铺名称" prop="storeName">
          <el-col :span="10">
            <el-input
              :disabled="storeData && storeData.tradeStore.storeType == 3"
              size="small"
              v-model="formData.storeName"
              placeholder="请输入店铺名称"
              maxlength="16"
              style="width: 85%"
            ></el-input>
            <span class="word-num"
              >{{ formData.storeName.replace(/\s+/g, "").length }}/16</span
            >
          </el-col>
        </el-form-item>
        <el-form-item label="店铺简介" prop="storeDescription">
          <el-col :span="10">
            <el-input
              :disabled="storeData && storeData.tradeStore.storeType == 3"
              type="textarea"
              rows="4"
              maxlength="400"
              size="small"
              v-model="formData.storeDescription"
              placeholder="请输入店铺简介"
              style="width: 85%"
            ></el-input>
            <span class="word-num"
              >{{
                formData.storeDescription.replace(/\s+/g, "").length
              }}/400</span
            >
          </el-col>
        </el-form-item>
        <el-form-item label="店铺类型" prop="storeType">
          <el-select
            v-model="formData.storeType"
            placeholder="请选择店铺类型"
            size="small"
            clearable
            :disabled="isDisabled"
            style="width: 35%"
          >
            <el-option
              v-for="(item, index) in typeList"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div>
        <div v-if="formData.storeType == 1">
          <el-row>
            <el-col :span="10">
              <el-form-item
                label="入驻企业名称"
                prop="compainName"
                class="required-label"
              >
                <el-input
                  type="text"
                  maxlength="50"
                  size="small"
                  v-model="formData.compainName"
                  placeholder="请输入入驻企业名称"
                  style="width: 85%"
                ></el-input>
                <span class="word-num"
                  >{{
                    formData.compainName.replace(/\s+/g, "").length
                  }}/50</span
                >
              </el-form-item>
            </el-col>
            <el-col :span="10" :offset="1">
              <el-form-item
                label="联系手机号"
                prop="phoneNum"
                label-width="95px"
                class="required-label"
              >
                <el-input
                  type="text"
                  size="small"
                  maxlength="11"
                  :disabled="isDisabled"
                  v-model="formData.phoneNum"
                  placeholder="请输入联系电话"
                  style="width: 85%"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
            <div
              class="main-content"
              v-for="(item, index) in formData.adminList"
              :key="index"
            >
              <el-row>
                <el-col :span="10">
                  <el-form-item label="管理员姓名" class="required-label">
                    <el-input
                      type="text"
                      maxlength="10"
                      size="small"
                      v-model="item.adminName"
                      placeholder="请输入管理员姓名"
                      style="width: 85%"
                    ></el-input>
                    <span class="word-num"
                      >{{ item.adminName.replace(/\s+/g, "").length }}/10</span
                    >
                  </el-form-item>
                </el-col>
                <el-col :span="1" style="text-align: right">
                  <img
                    style="margin-top: 5px"
                    src="../../assets/image/lianjie_icon.png"
                  />
                </el-col>
                <el-col :span="10">
                  <el-form-item
                    label="手机号"
                    label-width="95px"
                    class="required-label"
                  >
                    <el-input
                      type="text"
                      size="small"
                      maxlength="11"
                      v-model="item.adminMobile"
                      placeholder="请输入管理员手机号"
                      style="width: 85%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="2" class="span-mt-10">
                  <img
                    v-if="index < 4 && index == formData.adminList.length - 1"
                    @click="addItem(index)"
                    class="edit-img"
                    src="../../assets/image/plus.png"
                  />
                  <img
                    v-if="formData.adminList.length > 1"
                    @click="deleteItem(index)"
                    class="edit-img"
                    src="../../assets/image/trash.png"
                  />
                </el-col>
              </el-row>
            </div>
          <el-form-item label="营业证明">
            <p class="p-tips">
              若填写的联系人注册不是法定代表人，请上传委托书<br />
              仅支持jpg、png图片文件，且文件小于3M<br />
              上传的证件图片内，必须是加盖过红色公章和法人章，否则视为无效
            </p>
            <div style="display: flex">
              <div class="flex-upload">
                <el-upload
                  v-model="formData.imgUrlP1"
                  class="bg-uploader"
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeUploadProve1"
                >
                  <img
                    v-if="formData.imgUrlP1"
                    :src="formData.imgUrlP1"
                    @mouseover.stop="imgMouseOverP1 = true"
                    class="bg-img"
                  />
                  <img
                    v-if="!formData.imgUrlP1"
                    class="bg-img"
                    src="../../assets/image/small.png"
                  />
                  <div
                    class="img-delete add-left-18"
                    v-show="imgMouseOverP1"
                    @click.stop="deleteImg('imgUrlP1')"
                    @mouseout.stop="imgMouseOverP1 = false"
                  >
                    <i class="el-icon-delete"></i>
                  </div>
                </el-upload>
                <p class="tips">营业执照</p>
              </div>
              <div class="flex-upload">
                <el-upload
                  v-model="formData.imgUrlP2"
                  class="bg-uploader"
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeUploadProve2"
                >
                  <img
                    v-if="formData.imgUrlP2"
                    :src="formData.imgUrlP2"
                    @mouseover.stop="imgMouseOverP2 = true"
                    class="bg-img"
                  />
                  <img
                    v-if="!formData.imgUrlP2"
                    class="bg-img"
                    src="../../assets/image/small.png"
                  />
                  <div
                    class="img-delete add-left-18"
                    v-show="imgMouseOverP2"
                    @click.stop="deleteImg('imgUrlP2')"
                    @mouseout.stop="imgMouseOverP2 = false"
                  >
                    <i class="el-icon-delete"></i>
                  </div>
                </el-upload>
                <p class="tips">药品经营许可证</p>
              </div>
              <div class="flex-upload">
                <el-upload
                  v-model="formData.imgUrlP3"
                  class="bg-uploader"
                  action="#"
                  :show-file-list="false"
                  :before-upload="beforeUploadProve3"
                >
                  <img
                    v-if="formData.imgUrlP3"
                    :src="formData.imgUrlP3"
                    @mouseover.stop="imgMouseOverP3 = true"
                    class="bg-img"
                  />
                  <img
                    v-if="!formData.imgUrlP3"
                    class="bg-img"
                    src="../../assets/image/small.png"
                  />
                  <div
                    class="img-delete add-left-18"
                    v-show="imgMouseOverP3"
                    @click.stop="deleteImg('imgUrlP3')"
                    @mouseout.stop="imgMouseOverP3 = false"
                  >
                    <i class="el-icon-delete"></i>
                  </div>
                </el-upload>
                <p class="tips">委托书</p>
              </div>
            </div>
          </el-form-item>
        </div>
        <div v-if="formData.storeType == 3">
            <el-form-item
              label="医生姓名"
              prop="docName"
              class="required-label"
            >
              <el-input
                :disabled="storeData && storeData.tradeStore.storeType == 3"
                type="text"
                maxlength="50"
                size="small"
                v-model="formData.docName"
                placeholder="请输入医生姓名"
                style="width: 35%"
              ></el-input>
              <span class="word-num"
                >{{ formData.docName.replace(/\s+/g, "").length }}/50</span
              >
            </el-form-item>
            <el-form-item
              label="联系手机号"
              prop="docPhone"
              class="required-label"
            >
              <el-input
                type="text"
                size="small"
                maxlength="11"
                v-model="formData.docPhone"
                :disabled="isDisabled"
                placeholder="请输入联系电话"
                style="width: 35%"
              ></el-input>
            </el-form-item>
        </div>
        <div v-if="formData.storeType == 2">
          <el-col :span="10">
            <el-form-item
              label="入驻药店名称"
              prop="drugstoreName"
              class="required-label"
            >
              <el-input
                type="text"
                maxlength="50"
                size="small"
                v-model="formData.drugstoreName"
                placeholder="请输入入驻药店名称"
                style="width: 85%"
              ></el-input>
              <span class="word-num"
                >{{
                  formData.drugstoreName.replace(/\s+/g, "").length
                }}/50</span
              >
            </el-form-item>
          </el-col>
          <el-col :span="10" :offset="1">
            <el-form-item
              label="联系电话"
              prop="drugstorePhone"
              label-width="95px"
              class="required-label"
            >
              <el-input
                type="text"
                size="small"
                maxlength="11"
                v-model="formData.drugstorePhone"
                :disabled="isDisabled"
                placeholder="请输入联系电话"
                style="width: 85%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="营业证明">
              <p class="p-tips">
                若填写的联系人注册不是法定代表人，请上传委托书<br />
                仅支持jpg、png图片文件，且文件小于3M<br />
                上传的证件图片内，必须是加盖过红色公章和法人章，否则视为无效
              </p>
              <div style="display: flex">
                <div class="flex-upload">
                  <el-upload
                    v-model="formData.imgUrlC1"
                    class="bg-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeUploadC1"
                  >
                    <img
                      v-if="formData.imgUrlC1"
                      :src="formData.imgUrlC1"
                      @mouseover.stop="imgMouseOverC1 = true"
                      class="bg-img"
                    />
                    <img
                      v-if="!formData.imgUrlC1"
                      class="bg-img"
                      src="../../assets/image/small.png"
                    />
                    <div
                      class="img-delete add-left-18"
                      v-show="imgMouseOverC1"
                      @click.stop="deleteImg('imgUrlC1')"
                      @mouseout.stop="imgMouseOverC1 = false"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                  </el-upload>
                  <p class="tips">营业执照</p>
                </div>
                <div class="flex-upload">
                  <el-upload
                    v-model="formData.imgUrlC2"
                    class="bg-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeUploadC2"
                  >
                    <img
                      v-if="formData.imgUrlC2"
                      :src="formData.imgUrlC2"
                      @mouseover.stop="imgMouseOverC2 = true"
                      class="bg-img"
                    />
                    <img
                      v-if="!formData.imgUrlC2"
                      class="bg-img"
                      src="../../assets/image/small.png"
                    />
                    <div
                      class="img-delete add-left-18"
                      v-show="imgMouseOverC2"
                      @click.stop="deleteImg('imgUrlC2')"
                      @mouseout.stop="imgMouseOverC2 = false"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                  </el-upload>
                  <p class="tips">药品经营许可证</p>
                </div>
                <div class="flex-upload">
                  <el-upload
                    v-model="formData.imgUrlC3"
                    class="bg-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeUploadC3"
                  >
                    <img
                      v-if="formData.imgUrlC3"
                      :src="formData.imgUrlC3"
                      @mouseover.stop="imgMouseOverC3 = true"
                      class="bg-img"
                    />
                    <img
                      v-if="!formData.imgUrlC3"
                      class="bg-img"
                      src="../../assets/image/small.png"
                    />
                    <div
                      class="img-delete add-left-18"
                      v-show="imgMouseOverC3"
                      @click.stop="deleteImg('imgUrlC3')"
                      @mouseout.stop="imgMouseOverC3 = false"
                    >
                      <i class="el-icon-delete"></i>
                    </div>
                  </el-upload>
                  <p class="tips">委托书</p>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </div>
        </div>
   
        <div>
          <el-form-item
            label="医疗资质"
            prop="storeQualityUrl"
          >
            <el-input
              size="small"
              v-model="formData.storeQualityUrl"
              placeholder="请填写URL,仅对批发商品生效"
              style="width: 35%"
            ></el-input>
          </el-form-item>
        </div>
       
      </el-form>
      <el-dialog
        class="dialog-title-border-old"
        title="图片裁剪"
        :visible.sync="showCropper"
        :width="currentOption.cropDialogWidth"
        center
      >
        <div slot="title" style="text-align: left">
          <span style="font-weight: 700">图片裁剪</span>
        </div>
        <div v-if="showCropper" style="margin-bottom: 20px">
          <Cropper
            :cropOption="currentOption"
            @getCropImg="getCropImg(arguments)"
            :originImg="slide2.oriUrl"
          />
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "@/components/breadcrumb.vue";
let vm = null;
import { openLoading, closeLoading } from "../../utils/utils";
import { doUpload, getFilePath } from "../../utils/qiniu-util";
import Cropper from "@/components/common/cropper.vue";
import { saveStore, queryStore } from "@/utils/shop";
import { checkMobile } from "@/utils/patients/checkValid";
export default {
  components: {
    BreadCrumb,
    Cropper,
  },
  data() {
    let checkProjectStr = (rule, value, callback) => {
      if (value.indexOf("\\") != -1) {
        callback(new Error("请勿输入字符“ \\ ”"));
      } else if (value.indexOf(".") != -1) {
        callback(new Error("请勿输入字符“ . ”"));
      } else {
        callback();
      }
    };
    return {
      curmbFirst: "云鹊店铺",
      curmbSecond: "新建店铺",
      isDisabled: false,
      storeData: null,
      typeList: [
        {
          label: "供货商",
          value: 1,
        },
        {
          label: "小药房",
          value: 2,
        },
        {
          label: "医生小店",
          value: 3,
        },
      ],
      formData: {
        storeId: null,
        userId: null,
        storeQualityUrl:"",
        storeLogo: "", //店铺logo
        storeName: "",
        storeDescription: "",
        storeType: "",
        storeOwner: "",
        storePhone: "",
        imageList: [],
        adminList: [
          {
            adminName: "",
            adminMobile: "",
            id: null,
          },
        ], //供货商-管理员信息
        compainName: "", //供货商-入驻企业名称
        phoneNum: "", //供货商-联系电话
        imgUrlP1: "", //证明图1
        imgUrlP2: "", //证明图2
        imgUrlP3: "", //证明图3
        docName: "", //医生小店-医生姓名
        docPhone: "", //医生小店-联系电话
        drugstoreName: "", //小药房-药店名称
        drugstorePhone: "", //小药房-联系电话
        imgUrlC1: "", //证明图1
        imgUrlC2: "", //证明图2
        imgUrlC3: "", //证明图3
      },
      supplierImg1: {
        id: null,
        imageSort: 1,
        imageType: 2,
        imageUrl: "",
      },
      supplierImg2: {
        id: null,
        imageSort: 2,
        imageType: 2,
        imageUrl: "",
      },
      supplierImg3: {
        id: null,
        imageSort: 3,
        imageType: 2,
        imageUrl: "",
      },
      drugstoreImg1: {
        id: null,
        imageSort: 1,
        imageType: 2,
        imageUrl: "",
      },
      drugstoreImg2: {
        id: null,
        imageSort: 2,
        imageType: 2,
        imageUrl: "",
      },
      drugstoreImg3: {
        id: null,
        imageSort: 3,
        imageType: 2,
        imageUrl: "",
      },
      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,
        currentPic: "",
      },
      slide2: {
        oriUrl: "", // 原图
      },
      rules: {
        storeName: [
          { required: true, message: "请输入店铺名称", trigger: "blur" },
          {
            min: 2,
            max: 16,
            message: "输入长度为2-16的内容，可包含中英文、数字及特殊符号",
            trigger: "blur",
          },
          { validator: checkProjectStr, trigger: "blur" },
        ],
        storeDescription: [
          { required: false, message: "请输入店铺简介", trigger: "blur" },
          { validator: checkProjectStr, trigger: "blur" },
        ],
        storeType: [
          { required: true, message: "请选择店铺类型", trigger: "blur" },
        ],
        compainName: [
          { required: true, message: "请输入入驻企业名称", trigger: "blur" },
        ],
        phoneNum: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { validator: checkMobile, trigger: ["change", "blur"] },
        ],
        docName: [
          { required: true, message: "请输入医生姓名", trigger: "blur" },
        ],
        docPhone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { validator: checkMobile, trigger: ["change", "blur"] },
        ],
        drugstoreName: [
          { required: true, message: "请输入入驻药店名称", trigger: "blur" },
        ],
        drugstorePhone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { validator: checkMobile, trigger: ["change", "blur"] },
        ],
      },
      imgMouseOver1: false,
      uploadImgMessage1: false, //未上传图片，校验提示语
      imgMouseOverP1: false,
      imgMouseOverP2: false,
      imgMouseOverP3: false,
      imgMouseOverC1: false,
      imgMouseOverC2: false,
      imgMouseOverC3: false,
      addItemFlag: true,
      enterType: 1,
    };
  },
  watch: {},
  created() {
    vm = this;
    this.formData.storeId = this.$route.query.storeId || null;
    this.storeData = this.$route.query.storeData || null;

    if (this.formData.storeId) {
      this.curmbSecond = "编辑店铺";
      this.storeData = JSON.parse(this.storeData);
      this.isDisabled = true;
      this.initInfo();
      this.getStoreInfo();
    } else {
      this.curmbSecond = "新建店铺";
      this.isDisabled = false;
    }
  },
  methods: {
    //回显数据处理
    getStoreInfo() {
      if (!this.storeData || !this.storeData.tradeStore) return;
      const {
        storeLogo,
        storeName,
        storeDescription,
        storeType,
        storeOwner,
        storePhone,
        storeQualityUrl
      } = this.storeData.tradeStore;
      this.formData.storeLogo = storeLogo;
      this.formData.storeName = storeName;
      this.formData.storeQualityUrl=storeQualityUrl;
      this.formData.storeDescription = storeDescription;
      this.formData.storeType = storeType;

      if (storeType == 1) {
        this.formData.compainName = storeOwner;
        this.formData.phoneNum = storePhone;
        if (this.storeData.imageList && this.storeData.imageList.length) {
          this.storeData.imageList.map((item) => {
            if (item.imageSort == 1) {
              this.supplierImg1 = item;
              this.formData.imgUrlP1 = item.imageUrl;
            } else if (item.imageSort == 2) {
              this.supplierImg2 = item;
              this.formData.imgUrlP2 = item.imageUrl;
            } else if (item.imageSort == 3) {
              this.supplierImg3 = item;
              this.formData.imgUrlP3 = item.imageUrl;
            }
          });
        } else {
          this.formData.imgUrlP1 = "";
          this.formData.imgUrlP2 = "";
          this.formData.imgUrlP3 = "";
        }
        //处理管理员数据
        if (this.storeData.adminList && this.storeData.adminList.length) {
          this.formData.adminList = this.storeData.adminList;
        } else {
          this.formData.adminList = [
            {
              adminName: "",
              adminMobile: "",
              id: null,
            },
          ];
        }
      } else if (storeType == 3) {
        this.formData.docName = storeOwner;
        this.formData.docPhone = storePhone;
      } else if (storeType == 2) {
        this.formData.drugstoreName = storeOwner;
        this.formData.drugstorePhone = storePhone;
        if (this.storeData.imageList && this.storeData.imageList.length) {
          this.storeData.imageList.map((item) => {
            if (item.imageSort == 1) {
              this.drugstoreImg1 = item;
              this.formData.imgUrlC1 = item.imageUrl;
            } else if (item.imageSort == 2) {
              this.drugstoreImg2 = item;
              this.formData.imgUrlC2 = item.imageUrl;
            } else if (item.imageSort == 3) {
              this.drugstoreImg3 = item;
              this.formData.imgUrlC3 = item.imageUrl;
            }
          });
        } else {
          this.formData.imgUrlC1 = "";
          this.formData.imgUrlC2 = "";
          this.formData.imgUrlC3 = "";
        }
      }
    },
    initInfo() {
      let req = {
        storeId: this.formData.storeId,
      };
      queryStore(req).then((res) => {
        if (res.code == "000000") {
        } else {
          this.$message.error(res.message);
        }
      });
    },
    complete() {
      let flag = this.submitForm();
      if (flag) {
        // let para = {
        //   storeId: this.formData.storeId,
        //   userId: this.formData.userId,
        //   storeLogo: this.formData.storeLogo,//店铺logo
        //   storeName: this.formData.storeName,
        //   storeDescription: this.formData.storeDescription,
        //   storeType: Number(this.formData.storeType),
        //   storeOwner:this.formData.storeOwner,
        //   storePhone: this.formData.storePhone,
        //   imageList: this.formData.imageList,
        //   adminList:this.formData.adminList,
        // }
        this.formData.storeType = Number(this.formData.storeType);
        this.formData.storeEntry = "PCKAIDIAN"; // 添加店铺渠道
        console.log("提交的数据", this.formData);
        saveStore(this.formData).then((res) => {
          if (res.code == "000000") {
            this.$message.success("操作成功");
            this.$router.push({
              path: "/shop-list",
            });
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },

    // 返回
    back() {
      this.$router.push({
        path: "/shop-list",
      });
    },
    checkPhone(val) {
      if (!/^1[3456789]\d{9}$/.test(val)) {
        return false;
      } else {
        return true;
      }
    },
    resetType(type) {
      this.formData.imageList = [];
      if (type == 1) {
        this.formData.storeOwner = this.formData.compainName;
        this.formData.storePhone = this.formData.phoneNum;
        if (this.formData.imgUrlP1) {
          this.supplierImg1.imageUrl = this.formData.imgUrlP1;
          this.formData.imageList.push(this.supplierImg1);
        }
        if (this.formData.imgUrlP2) {
          this.supplierImg2.imageUrl = this.formData.imgUrlP2;
          this.formData.imageList.push(this.supplierImg2);
        }
        if (this.formData.imgUrlP3) {
          this.supplierImg3.imageUrl = this.formData.imgUrlP3;
          this.formData.imageList.push(this.supplierImg3);
        }
      } else if (type == 3) {
        this.formData.storeOwner = this.formData.docName;
        this.formData.storePhone = this.formData.docPhone;
        this.formData.adminList = [];
      } else if (type == 2) {
        this.formData.storeOwner = this.formData.drugstoreName;
        this.formData.storePhone = this.formData.drugstorePhone;
        this.formData.adminList = [];
        if (this.formData.imgUrlC1) {
          this.drugstoreImg1.imageUrl = this.formData.imgUrlC1;
          this.formData.imageList.push(this.drugstoreImg1);
        }
        if (this.formData.imgUrlC2) {
          this.drugstoreImg2.imageUrl = this.formData.imgUrlC2;
          this.formData.imageList.push(this.drugstoreImg2);
        }
        if (this.formData.imgUrlC3) {
          this.drugstoreImg3.imageUrl = this.formData.imgUrlC3;
          this.formData.imageList.push(this.drugstoreImg3);
        }
      }
    },
    setTypeForData() {
      let flag = false;
      if (this.formData.storeType == 1) {
        if (!this.formData.compainName) {
          this.$message.warning("请输入入驻企业名称");
          return;
        }
        if (!this.formData.phoneNum) {
          this.$message.warning("请输入联系电话");
          return;
        } else {
          if (!this.checkPhone(this.formData.phoneNum)) {
            this.$message.warning("请输入正确的手机号");
            return;
          }
        }
        if (this.formData.adminList && this.formData.adminList.length) {
          for (let i = 0; i < this.formData.adminList.length; i++) {
            if (!this.formData.adminList[i].adminName) {
              this.$message.warning(`请输入第${i + 1}个管理员的姓名`);
              return;
            }
            if (!this.formData.adminList[i].adminMobile) {
              this.$message.warning(`请输入第${i + 1}个管理员的联系电话`);
              return;
            } else {
              if (!this.checkPhone(this.formData.adminList[i].adminMobile)) {
                this.$message.warning(`请输入第${i + 1}个管理员的正确联系电话`);
                return;
              }
            }
          }
        }

        flag = true;
      }
      if (this.formData.storeType == 3) {
        if (!this.formData.docName) {
          this.$message.warning("请输入医生姓名");
          return;
        }
        if (!this.formData.docPhone) {
          this.$message.warning("请输入联系电话");
          return;
        } else {
          if (!this.checkPhone(this.formData.docPhone)) {
            this.$message.warning("请输入正确的联系电话");
            return;
          }
        }
        flag = true;
      }
      if (this.formData.storeType == 2) {
        if (!this.formData.drugstoreName) {
          this.$message.warning("请输入入驻药店名称");
          return;
        }
        if (!this.formData.drugstorePhone) {
          this.$message.warning("请输入联系电话");
          return;
        } else {
          if (!this.checkPhone(this.formData.drugstorePhone)) {
            this.$message.warning("请输入正确的联系电话");
            return;
          }
        }
        flag = true;
      }
      return flag;
    },
    //表单校验
    submitForm() {
      let formName = "formData";
      let submitFlag = false;

      if (!this.formData.storeLogo) {
        this.uploadImgMessage1 = true;
        return;
      } else {
        this.uploadImgMessage1 = false;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.setTypeForData()) {
            return;
          }
          this.resetType(this.formData.storeType);
          submitFlag = true;
        } else {
          submitFlag = false;
        }
      });
      return submitFlag;
    },
    //上传店铺logo
    beforeUploadPic1(file) {
      this.currentOption.aspectRatio = 1 / 1;
      this.currentOption.cropBoxResizable = true;
      this.currentOption.minCropBoxWidth = 128;
      this.currentOption.minCropBoxHeight = 128;
      this.currentOption.currentPic = "storeLogo";
      let fileLimit = {
        width: 128,
        height: 128,
        size: 0.2,
        sizeText: "200K",
        key: "storeLogo",
        more: "imgUrl1More",
        show: "uploadImgMessage1",
      };
      this.beforeUploadLogo(file, fileLimit);
      //this.beforeUpload1(file, fileLimit);
    },
    //上传logo  add
    beforeUploadLogo(file, fileLimit) {
      let vm = this;
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 < 200;
      if (!isJPG && !isPNG) {
        vm.$message.error("仅支持jpeg，png格式");
        // return;
      }
      if (!isLt2M) {
        vm.$message.error("图片大小请控制在200kb以内");
        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 () {
          let _this = this;
          // if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
          let l = _this.width / _this.height;
          if (l != 1) {
            vm.$message.error("图片宽高比例请控制在1:1");
            return;
          } else {
            openLoading(vm);
            doUpload(
              vm,
              file,
              getFilePath(file, null),
              "preview4",
              "progress1",
              1
            ).then(function (path) {
              closeLoading(vm);

              vm.formData[fileLimit.key] = path.fullPath;
              vm.formData[fileLimit.more] = {
                attachmentName: path.storeName,
                attachmentExt: path.ext,
                attachmentSize: path.size,
              };
              vm.$message.success("上传成功");
            });
          }
        };
      };
    },
    setOption(type) {
      // this.currentOption.aspectRatio = 1/1;
      // this.currentOption.cropBoxResizable = true;
      // this.currentOption.minCropBoxWidth = 160;
      // this.currentOption.minCropBoxHeight = 160;
      // this.currentOption.currentPic = type;
      let fileLimit = {
        width: "",
        height: "",
        size: 3,
        sizeText: "3M",
        key: type,
        more: "imgUrlP1More",
      };
      return fileLimit;
    },
    beforeUploadProve1(file) {
      let fileLimit = this.setOption("imgUrlP1");
      this.beforeUpload(file, fileLimit);
    },
    beforeUploadProve2(file) {
      let fileLimit = this.setOption("imgUrlP2");
      this.beforeUpload(file, fileLimit);
    },
    beforeUploadProve3(file) {
      let fileLimit = this.setOption("imgUrlP3");
      this.beforeUpload(file, fileLimit);
    },
    beforeUploadC1(file) {
      let fileLimit = this.setOption("imgUrlC1");
      this.beforeUpload(file, fileLimit);
    },
    beforeUploadC2(file) {
      let fileLimit = this.setOption("imgUrlC2");
      this.beforeUpload(file, fileLimit);
    },
    beforeUploadC3(file) {
      let fileLimit = this.setOption("imgUrlC3");
      this.beforeUpload(file, fileLimit);
    },
    beforeUpload(file, fileLimit) {
      let vm = this;
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
      if (!isJPG && !isPNG) {
        vm.$message.error("仅支持jpeg，png格式");
        return;
      }
      if (!isLt2M) {
        vm.$message.error(`图片大小不可以超过${fileLimit.sizeText}`);
        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 () {
          let _this = this;
          openLoading(vm);
          doUpload(
            vm,
            file,
            getFilePath(file, null),
            "preview4",
            "progress1",
            1
          ).then(function (path) {
            closeLoading(vm);
            vm.formData[fileLimit.key] = path.fullPath;
            vm.formData[fileLimit.more] = {
              attachmentName: path.storeName,
              attachmentExt: path.ext,
              attachmentSize: path.size,
            };
            vm.$message.success("上传成功");
          });
        };
      };
      return isJPG && isLt2M;
    },
    //上传图片
    beforeUpload1(file, fileLimit) {
      let vm = this;
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < fileLimit.size;
      if (!isJPG && !isPNG) {
        vm.$message.error("仅支持jpeg，png格式");
        // return;
      }
      // if (!isLt2M) {
      //   vm.$message.error("图片大小不符合规范，请根据规范上传图片 ");
      //   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 () {
          let _this = this;
          // if (_this.width != fileLimit.width || _this.height != fileLimit.height) {
          if (
            _this.width < fileLimit.width ||
            _this.height < fileLimit.height
          ) {
            vm.$message.error("图片尺寸不符合规范，请根据规范上传图片");
            return;
          } else if (
            _this.width > fileLimit.width ||
            _this.height > fileLimit.height
          ) {
            vm.showCropper = true;
            vm.currentOption.cvWidth = _this.width;
            vm.currentOption.cvHeight = _this.height;
            return;
          } else {
            openLoading(vm);
            doUpload(
              vm,
              file,
              getFilePath(file, null),
              "preview4",
              "progress1",
              1
            ).then(function (path) {
              closeLoading(vm);
              if (fileLimit.show == "uploadImgMessage1") {
                vm.uploadImgMessage1 = false;
              }
              vm.formData[fileLimit.key] = path.fullPath;
              vm.formData[fileLimit.more] = {
                attachmentName: path.storeName,
                attachmentExt: path.ext,
                attachmentSize: path.size,
              };
              vm.$message.success("上传成功");
            });
          }
        };
      };
      return isJPG && isLt2M;
    },
    //删除图片
    deleteImg(type) {
      vm.formData[type] = "";
      const testMouse = new Map()
        .set("storeLogo", "imgMouseOver1")
        .set("imgUrlP1", "imgMouseOverP1")
        .set("imgUrlP2", "imgMouseOverP2")
        .set("imgUrlP3", "imgMouseOverP3")
        .set("imgUrlC1", "imgMouseOverC1")
        .set("imgUrlC2", "imgMouseOverC2")
        .set("imgUrlC3", "imgMouseOverC3");

      function matchType(type) {
        return testMouse.get(type) || "";
      }
      let mark = matchType(type);
      vm[mark] = false;
      /* if (type == 'storeLogo') {
          vm.imgMouseOver1 = false;
        }else if (type == 'imgUrlP1') {
          vm.imgMouseOverP1 = false;
        }else if (type == 'imgUrlP2') {
          vm.imgMouseOverP2 = false;
        }else if (type == 'imgUrlP3') {
          vm.imgMouseOverP3 = false;
        }*/
    },
    // 获取裁剪的图片数据
    getCropImg(argument) {
      this.showCropper = false;
      this.cropData = argument[1];
      vm.doUploadQiNiu(argument[2]);
      argument[3] && argument[3].destroy();
      // vm.slide2.oriUrl = "";
    },
    // 上传七牛
    doUploadQiNiu(file) {
      doUpload(
        this,
        file,
        getFilePath(file, null),
        "preview4",
        "uploadProgress1",
        ""
      ).then(function (path) {
        vm.formData[vm.currentOption.currentPic] = path.fullPath;
        vm.$message.success("上传成功");
      });
    },
    //新增管理员
    addItem(index) {
      if (
        this.formData.adminList != null &&
        this.formData.adminList.length >= 5
      ) {
        this.$message.warning("只可新增5位管理员！");
      } else {
        let item = {
          adminName: "",
          adminMobile: "",
          id: null,
        };
        this.formData.adminList.push(item);
      }
    },
    //删除管理员
    deleteItem(index) {
      if (this.formData.adminList.length == 1 && index == 0) {
        this.$message.warning("最少需要1位管理员哦！");
        return;
      }
      this.formData.adminList.splice(index, 1);
    },
  },
};
</script>
<style lang="scss">
.create-shop-wrapper {
  .create-shop-content {
    background: #fff;
    padding: 10px;
    .step-content {
      overflow: hidden;
      height: 60px;
      padding: 10px 10px 50px;
      border-bottom: 1px solid #efefef;
      .title {
        font-size: 13px;
        color: #449284;
      }
    }
  }
  .el-button--text {
    color: #449284;
    font-size: 14px;
    &::after {
      content: "";
      position: relative;
      height: 14px;
      /*border-right: 1px solid #EBEEF5;*/
      border-right: 1px solid #aaaaaa;
      padding-right: 10px;
    }
    &:last-of-type {
      &::after {
        content: "";
        position: relative;
        width: 1px;
        height: 14px;
        border-right: none;
      }
    }
  }
}
.required-label .el-form-item__label::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.basic-item-icon {
  position: relative;

  .require {
    position: absolute;
    left: 67px;
    top: 11px;
    color: #f56c6c;
  }

  .upload-message {
    position: absolute;
    left: 160px;
    top: 105px;
    font-size: 12px;
    color: #f56c6c;
  }
}

.word-num {
  font-size: 12px;
  color: #999;
  padding-top: 5px;
}

.line {
  margin-left: 10px;
  width: 20px;
}

.flex-upload {
  width: 120px;
  text-align: center;
  .tips {
    font-size: 13px;
    color: #8c8c8c;
    line-height: 24px;
  }
}
.bg-uploader {
  position: relative;
  /*margin-right: 20px;*/
  .bg-img {
    float: left;
    width: 84px;
    height: 100px;
  }
  .img-delete {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 84px;
    height: 100px;
    background: #000;
    opacity: 0.7;
    z-index: 999;
    &.add-left-18 {
      left: 18px;
    }
    i {
      color: #fff;
      margin-top: 39px;
      margin-left: 0px;
    }
  }
  .limit-text {
    float: left;
    margin-left: 10px;
    margin-top: -10px;

    p {
      font-size: 12px;
      color: #999;
      text-align: left;
    }
  }
}
.el-upload__tip {
  position: absolute;
  top: -6px;
  left: 130px;
}
.span-mt-10 {
  .edit-img {
    width: 20px;
    margin-top: 10px;
  }
}
.p-tips {
  font-size: 13px;
  color: #8c8c8c;
  line-height: 26px;
  margin-bottom: 15px;
}
</style>
