<template>
  <view class="shop-2-container">
    <u-navbar
      :autoBack="true"
      :safeAreaInsetTop="true"
      title="填写店铺信息第2步 / 共3步"
    >
      <template slot="right">
        <view class="btn-login-out" @click="LoginOut">退出登录</view>
      </template>
    </u-navbar>
    <view class="shop-2-content">
      <u-subsection
        class="subsection"
        :list="list"
        :current="active"
        @change="handleSubsection"
      ></u-subsection>
      <view
        class="up-block up-block-2"
        v-show="active == 0"
        style="margin-top: 0"
      >
        <u-form :model="form" class="form" ref="uForm" label-width="100">
          <u-form-item
            label="许可证类型"
            required
            prop="license_type"
            @click="showPicker = true"
          >
            <u-input
              style="pointer-events: none"
              class="form-input"
              v-model="form.license_type"
              placeholder="请选择许可证类型"
              readonly
            />
            <u-icon
              style="display: inline-block; margin-left: 8rpx"
              name="arrow-down"
              size="12"
              color="#aaaaaa"
            ></u-icon>
          </u-form-item>
          <u-form-item label="许可证编号" prop="license_number" required>
            <u-input
              class="form-input"
              v-model="form.license_number"
              placeholder="请输入许可证编号"
            />
          </u-form-item>
          <u-form-item label="营业执照编号" prop="biz_license_number" required>
            <u-input
              class="form-input"
              v-model="form.biz_license_number"
              placeholder="请输入营业执照编号"
            />
          </u-form-item>
          <u-form-item
            label="营业执照公司名或真实的公司名"
            prop="biz_license_company"
            required
          >
            <u-input
              class="form-input"
              v-model="form.biz_license_company"
              placeholder="请输入营业执照公司名或真实的公司名"
            />
          </u-form-item>
          <u-form-item label="法人姓名" prop="legal_person_name" required>
            <u-input
              class="form-input"
              v-model="form.legal_person_name"
              placeholder="请输入法人姓名"
            />
          </u-form-item>
          <u-form-item label="法人手机号" prop="legal_person_mobile" required>
            <u-input
              class="form-input"
              v-model="form.legal_person_mobile"
              maxlength="11"
              placeholder="请输入法人手机号"
            />
          </u-form-item>
          <u-form-item
            label="法人身份证号码"
            prop="legal_person_id_number"
            required
          >
            <u-input
              class="form-input"
              maxlength="18"
              v-model="form.legal_person_id_number"
              placeholder="请输入法人证号码"
            />
          </u-form-item>
        </u-form>
      </view>
      <view
        class="up-block up-block-2"
        v-show="active == 1"
        style="margin-top: 0"
      >
        <u-form :model="form2" class="form" ref="uForm2" label-width="100">
          <u-form-item label="身份证号码" prop="individual_id_number" required>
            <u-input
              class="form-input"
              maxlength="18"
              v-model="form2.individual_id_number"
              placeholder="请输入身份证号码"
            />
          </u-form-item>
        </u-form>
      </view>

      <view class="up-block" v-if="active == 0">
        <view class="up-title"> 营业执照 点击上传 </view>
        <u-upload
          :class="fileList.length == 0 ? 'shop2-2-upload' : ''"
          class="shop2-2-upload"
          @afterRead="afterRead($event, 'businessLicense')"
          @delete="deletePic($event, 'businessLicense')"
          accept="image"
          uploadIcon=""
          :fileList="fileList"
          :max-count="1"
          width="125"
          height="88"
        ></u-upload>
      </view>
      <view class="up-block up-block-2" v-if="active == 0">
        <view class="up-title">
          许可证(最大上传{{ fileList2.length }}/5)
          <u-icon
            style="display: inline-block; margin: 0 8rpx"
            @click="handlePopup"
            name="question-circle"
            size="12"
            color="aaaaaa"
          >
          </u-icon>
          点击上传
        </view>
        <u-upload
          :class="fileList2.length == 0 ? 'shop2-3-upload' : ''"
          @afterRead="afterRead($event, 'licenseNumber')"
          @delete="deletePic($event, 'licenseNumber')"
          accept="image"
          :uploadIcon="fileList2.length == 0 ? '' : 'camera-fill'"
          :fileList="fileList2"
          :max-count="5"
          width="125"
          height="88"
        ></u-upload>
      </view>
      <view class="up-block up-block-3" v-if="active == 0">
        <view class="up-title">
          法人身份证正反面（{{ fileList3.length + fileList4.length }} /2）
        </view>
        <view class="up-block-3-content">
          <u-upload
            :class="fileList3.length == 0 ? 'shop2-4-upload' : ''"
            @afterRead="afterRead($event, 'idFront')"
            @delete="deletePic($event, 'idFront')"
            accept="image"
            :fileList="fileList3"
            :max-count="1"
            width="180"
            height="110"
            uploadIcon=""
          ></u-upload>
          <u-upload
            :class="fileList4.length == 0 ? 'shop2-5-upload' : ''"
            @afterRead="afterRead($event, 'idReverse')"
            @delete="deletePic($event, 'idReverse')"
            accept="image"
            :fileList="fileList4"
            :max-count="1"
            width="180"
            height="110"
            uploadIcon=""
          ></u-upload>
        </view>
      </view>
      <!--个人-->
      <view class="up-block up-block-3" v-if="active == 1">
        <view class="up-title">
          法人身份证正反面（{{ fileList5.length + fileList6.length }} /2）
        </view>
        <view class="up-block-3-content">
          <u-upload
            :class="fileList5.length == 0 ? 'shop2-4-upload' : ''"
            @afterRead="afterRead($event, 'personIdFront')"
            @delete="deletePic($event, 'personIdFront')"
            accept="image"
            :fileList="fileList5"
            :max-count="1"
            width="180"
            height="110"
            :upload-text="''"
            uploadIcon=""
          ></u-upload>
          <u-upload
            :class="fileList6.length == 0 ? 'shop2-5-upload' : ''"
            @afterRead="afterRead($event, 'personIdReverse')"
            @delete="deletePic($event, 'personIdReverse')"
            accept="image"
            :fileList="fileList6"
            :max-count="1"
            width="180"
            height="110"
            :upload-text="''"
            uploadIcon=""
          ></u-upload>
        </view>
      </view>
    </view>
    <view class="btn-content">
      <u-button class="btn-next" @click="handleNext">下一步</u-button>
    </view>
    <u-popup
      class="shop2-popup"
      :mask="true"
      @close="closePopup"
      :show="showPopup"
      :closeable="true"
      mode="bottom"
      :mask-close-able="true"
      :safe-area-inset-bottom="true"
    >
      <view class="popup-content">
        <view class="popup-title">可上传证件类型</view>
        <view class="popup-tips"
          >请根据您的主营品类上传真实有效的许可证，能够提高入驻通过的效率。目前支持的许可证如下：</view
        >
        <view class="popuo-prove-item">
          <view class="item-title">许可证</view>
          <view class="item-content">
            《食品经营许可证》丶《餐饮服务许可证》丶《食品流通许可证》丶《药品经营许可证》丶《医疗器械经营许可证》丶《互联网药品信息服务资格证书》
          </view>
        </view>
        <view class="popuo-prove-item">
          <view class="item-title">特许证件</view>
          <view class="item-content">
            《第二类医疗器械经营备案凭证》丶《上海便民饮食店临时备案公示卡》丶《兽药经营许可证》丶《动物诊疗许可证》丶《食品生产经营登记证》
          </view>
        </view>
        <view class="popuo-prove-item">
          <view class="item-title">其他证件</view>
          <view class="item-content">
            支持各种小证,因各地监管规则不一,请联系客服获取其他小证支持情况的详细。
          </view>
        </view>
        <u-button class="btn-queren" @click="showPopup = false"
          >我知道了</u-button
        >
      </view>
    </u-popup>
    <u-picker
      :show="showPicker"
      :columns="columns"
      :safe-area-inset-bottom="true"
      :default-selector="[0]"
      :keyName="'name'"
      @cancel="handleCancel"
      @confirm="handleConfirm"
    ></u-picker>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import { mapActions } from "vuex";
import { UploadFilePromise } from "../../api/upload";
export default {
  data() {
    return {
      active: 0,
      showPopup: false,
      showPicker: false,
      list: [
        {
          name: "企业",
        },
        {
          name: "个人",
        },
      ],
      form: {
        license_type: "", // 许可证类型
        license_number: "", // 许可证编号
        license_image: "", // 许可证路径
        biz_license_number: "", //营业执照编号
        biz_license_company: "", // 公司真实名字
        biz_license_image: "", // 营业执照路径
        legal_person_name: "", //法人姓名
        legal_person_mobile: "", //法人手机号
        legal_person_id_number: "", //法人身份证号
        legal_person_id_images: "", //身份证图片正面路径
        legal_person_id_images2: "", // 身份证图片反面路径
      },
      form2: {
        individual_id_number: "",
        individual_id_images: "",
        individual_id_images2: "",
      },
      action: "",
      fileList: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [], //个人身份证正面
      fileList6: [], //个人身份证反面
      columns: [
        [
          {
            id: 1,
            name: "许可证",
          },
          {
            id: 2,
            name: "特许证件",
          },
          {
            id: 3,
            name: "其他证件",
          },
        ],
      ],
      rules: {
        entity_type: {
          required: true,
          trigger: ["blur"],
          message: "请选择您的许可证类型",
        },
        license_number: {
          required: true,
          message: "请输入许可证编号",
          trigger: ["change", "blur"],
        },
        biz_license_number: {
          required: true,
          message: "请输入营业执照编号",
          trigger: ["change", "blur"],
        },
        biz_license_company: {
          required: true,
          message: "请输入营业执照公司名或真实的公司名",
          trigger: ["blur"],
        },
        legal_person_name: {
          required: true,
          message: "请输入法人姓名",
          trigger: ["change", "blur"],
        },
        legal_person_mobile: [
          {
            required: true,
            message: "请输入法人手机号",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              return uni.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            // 触发器可以同时用blur和change
            trigger: ["blur"],
          },
        ],
        legal_person_id_number: [
          {
            required: true,
            message: "请输入法人身份证号",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              return uni.$u.test.idCard(value);
            },
            message: "身份证号不正确",
            // 触发器可以同时用blur和change
            trigger: ["blur"],
          },
        ],
      },
      rules2: {
        individual_id_number: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              return uni.$u.test.idCard(value);
            },
            message: "身份证号不正确",
            // 触发器可以同时用blur和change
            trigger: ["blur"],
          },
        ],
      },
    };
  },
  onReady() {
    this.$refs["uForm"].setRules(this.rules);
    this.$refs["uForm2"].setRules(this.rules2);
  },
  methods: {
    ...mapActions("user", ["LoginOut"]),
    //营业执照
    async afterRead(e, type) {
      const item = e.file;
      const imgUrl = item.url;

      const group = {
        url: imgUrl,
      };

      switch (type) {
        case "businessLicense":
          this.fileList.push(group);
          break;
        case "licenseNumber":
          this.fileList2.push(group);
          break;
        case "idFront":
          this.fileList3.push(group);
          break;
        case "idReverse":
          this.fileList4.push(group);
          break;
        case "personIdFront":
          this.fileList5.push(group);
          break;
        case "personIdReverse":
          this.fileList6.push(group);
          break;
      }

      let res = await UploadFilePromise(imgUrl);
      if (res && res.status == 200) {
        switch (type) {
          case "businessLicense":
            this.form.biz_license_image = res.data.url;
            break;
          case "licenseNumber":
            if (this.form.license_image == "") {
              this.form.license_image = String(res.data.url);
            } else {
              this.form.license_image += "," + String(res.data.url);
            }
            break;
          case "idFront":
            this.form.legal_person_id_images = res.data.url;
            break;
          case "idReverse":
            this.form.legal_person_id_images2 = res.data.url;
            break;
          case "personIdFront":
            this.form2.individual_id_images = res.data.url;
            break;
          case "personIdReverse":
            this.form2.individual_id_images2 = res.data.url;
            break;
        }
      }
    },
    deletePic(e, type) {
      switch (type) {
        case "businessLicense":
          this.fileList.splice(0, 1);
          break;
        case "licenseNumber":
          this.fileList2.splice(e.index, 1);
          let arr = this.form.license_image.split(",");
          arr.splice(e.index, 1);
          this.form.license_image = arr.join(",");
          break;
        case "idFront":
          this.fileList3.splice(0, 1);
          break;
        case "idReverse":
          this.fileList4.splice(0, 1);
          break;
        case "personIdFront":
          this.fileList5.splice(0, 1);
          break;
        case "personIdReverse":
          this.fileList6.splice(0, 1);
          break;
      }
    },
    handleSubsection(e) {
      this.active = e;
      this.fileList = [];
      this.fileList2 = [];
      this.fileList3 = [];
      this.fileList4 = [];
      this.fileList5 = [];
      this.fileList6 = [];
    },
    handlePopup() {
      this.showPopup = true;
    },
    closePopup() {
      this.showPopup = false;
    },
    handleNext() {
      let auditItem = uni.getStorageSync("auditItem");

      if (this.active == 0) {
        this.$refs.uForm.validate().then((valid) => {
          if (!this.form.biz_license_image) {
            this.$refs.uToast.show({
              message: "请上营业执照片",
              type: "error",
              duration: 1000,
            });
            return;
          }

          if (!this.form.license_image) {
            this.$refs.uToast.show({
              message: "请上许可证照片",
              type: "error",
              duration: 1000,
            });
            return;
          }

          if (!this.form.legal_person_id_images) {
            this.$refs.uToast.show({
              message: "请上身份证图片正面照片",
              type: "error",
              duration: 1000,
            });
            return;
          }

          if (!this.form.legal_person_id_images2) {
            this.$refs.uToast.show({
              message: "请上身份证图片反面照片",
              type: "error",
              duration: 1000,
            });
            return;
          }

          if (valid) {
            auditItem = {
              ...auditItem,
              ...this.form,
            };

            auditItem.entity_type = this.active + 1;
            auditItem.license_type = this.licenseType.id;
            // auditItem.license_image = JSON.stringify(this.fileList2.join(","));

            uni.setStorageSync("auditItem", auditItem);

            uni.navigateTo({
              url: "/pages/audit/shop3",
            });
          }
        });
      } else {
        this.$refs.uForm2.validate().then((valid) => {
          if (!this.form2.individual_id_images) {
            this.$refs.uToast.show({
              message: "请上身份证图片反面照片",
              type: "error",
              duration: 1000,
            });
            return;
          }

          if (!this.form2.individual_id_images2) {
            this.$refs.uToast.show({
              message: "请上身份证图片反面照片",
              type: "error",
              duration: 1000,
            });
            return;
          }

          if (valid) {
            auditItem = {
              ...auditItem,
              ...this.form2,
            };

            auditItem.entity_type = this.active + 1;

            uni.setStorageSync("auditItem", auditItem);

            uni.navigateTo({
              url: "/pages/audit/shop3",
            });
          }
        });
      }
    },
    handleCancel() {
      this.showPicker = false;
    },
    handleConfirm(e) {
      this.form.license_type = e.value[0].name;
      this.licenseType = e.value[0];

      this.showPicker = false;
    },
  },
};
</script>

<style lang="scss">
.shop-2-container {
  background: #f2f2f2;
  // height: 100vh;

  .subsection {
    height: 80rpx;
  }

  .up-block {
    background: #fff;
    padding: 24rpx;

    .up-title {
      font-weight: bold;
      margin-bottom: 40rpx;
    }
  }

  /deep/.shop2-2-upload {
    .u-upload__button {
      // background: url("../../static/shenhe-bg1.png");
      background-image: url("../../static/business-license-bg.png");
      background-size: 100% 100%;
    }
  }

  /deep/.shop2-3-upload {
    .u-upload__button {
      // background: url("../../static/shenhe-bg1.png");
      background-image: url("../../static/permit-bg.png");
      background-size: 100% 100%;
    }
  }

  /deep/.shop2-4-upload {
    .u-upload__button {
      // background: url("../../static/shenhe-bg1.png");
      background-image: url("../../static/id-bg-1.png");
      background-size: 100% 100%;
    }
  }

  /deep/.shop2-5-upload {
    .u-upload__button {
      // background: url("../../static/shenhe-bg1.png");
      background-image: url("../../static/id-bg-2.png");
      background-size: 100% 100%;
    }
  }

  .up-block-2 {
    margin: 20rpx 0;
  }

  .up-block-3-content {
    display: flex;
  }

  .shop-2-content {
    z-index: 1;
  }

  .shop2-popup {
    .popup-content {
      padding: 0 24rpx;
      height: 540px;

      .popup-title {
        font-weight: bold;
        text-align: center;
        height: 90rpx;
        line-height: 90rpx;
        font-size: 36rpx;
      }

      .popup-tips {
        margin: 24rpx 0;
        font-weight: 500;
      }

      .popuo-prove-item {
        margin: 48rpx 0;
        padding: 24rpx;
        border-radius: 24rpx;
        border: 1px solid #ccc;

        .item-title {
          margin-bottom: 16rpx;
          font-size: 28rpx;
          font-weight: bold;
        }

        .item-content {
          font-size: 24rpx;
        }
      }
    }

    .btn-queren {
      background: #4b71ff;
      color: #fff;
    }
  }

  .btn-content {
    // position: fixed;
    bottom: 40rpx;
    width: 94%;
    padding: 48rpx 24rpx;
  }

  .btn-next {
    border-radius: 16rpx;
    background: #4b71ff;
    color: #fff;
  }

  .btn-login-out {
    font-size: 28rpx;
    color: #4b71ff;
  }
}
</style>