<template>
  <view class="checkAudit-container">
    <u-navbar :autoBack="true" :safeAreaInsetTop="true" title="商户入驻申请">
      <template slot="right">
        <view class="btn-login-out" @click="LoginOut">退出登录</view>
      </template>
    </u-navbar>
    <favorite-loading
      class="checkAudit-loading"
      v-show="showLoading"
      :color="'#4b71ff'"
      text=""
      animation="spinner15"
    ></favorite-loading>
    <view v-show="!showLoading">
      <view class="" v-if="auditInfo.approval_status == 1">
        <view class="img-pass"></view>
        <view class="tips"
          >{{ auditInfo.approval_remark }}<br />请留意手机短信!</view
        >
      </view>
      <view class="" v-if="auditInfo.approval_status == 2">
        <view class="img"></view>
        <view class="tips">很遗憾，您无法入驻我们的商城</view>

        <view class="refusal-cause"
          >拒绝原因：{{ auditInfo.approval_remark }}</view
        >
      </view>
      <view class="" v-if="auditInfo.approval_status == 3">
        <view class="img-await"></view>
        <view class="tips">审核中，1-7个工作日内答复，请耐心等待</view>
      </view>
      <view class="time">申请时间:{{ auditInfo.created_at }}</view>
      <u-form :model="form" class="form" ref="uForm" label-width="70">
        <u-form-item
          :label="item.label"
          :prop="item.key"
          required
          v-for="(item, index) of auditInfo.approval_invalid_col"
          :key="index"
          @click="handerItemSkipu(item)"
        >
          <u-input
            v-if="item.type != 'upload'"
            :style="item.style"
            class="form-input"
            v-model="form[item.key]"
            :placeholder="item.placeholder"
            :readonly="item.isReadonly"
          />
          <u-icon
            v-if="item.type == 'select'"
            slot="right"
            style="display: inline-block; margin-left: 8rpx"
            name="arrow-right"
            size="12"
            color="#aaaaaa"
          ></u-icon>
          <u-upload
            v-if="item.type == 'upload'"
            :class="item.imgUrlArr.length == 0 ? item.class : ''"
            :uploadIcon="item.imgUrlArr.length == 0 ? '' : 'camera-fill'"
            @afterRead="afterRead($event, item)"
            @delete="deletePic($event, item)"
            accept="image"
            :fileList="item.imgUrlArr"
            :max-count="item.imgUpMaxCount || 1"
            :width="item.imgWidth"
            :height="item.imgHeight"
            :upload-text="''"
          >
          </u-upload>
        </u-form-item>
      </u-form>
      <view class="btn-content" v-if="auditInfo.approval_status == 2">
        <u-button class="btn-submit" @click="getRestartMerchApply"
          >重新提交</u-button
        >
      </view>
      <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" />
      <u-picker
        v-if="showActionSheet"
        mode="selector"
        :show="showActionSheet"
        :safe-area-inset-bottom="true"
        :default-selector="[0]"
        :columns="bankList"
        keyName="bank_name"
        @cancel="handleBankCancel"
        @confirm="handleBankConfirm"
      >
      </u-picker>
    </view>
  </view>
</template>

<script>
import config from "./formConfig";
import {
  GetAuditInfo,
  GetBankList,
  GetRestartMerchApply,
} from "../../api/audit";
import { GetAccountDashboard } from "../../api/user";
import { UploadFilePromise } from "../../api/upload";
import { mapState, mapActions } from "vuex";
import favoriteLoading from "@/components/favorite-loading/favorite-loading.vue";
export default {
  name: "checkAudit",
  components: {
    favoriteLoading,
  },
  data() {
    return {
      showLoading: true,
      formConfig: JSON.parse(JSON.stringify(config.formConfig)),
      form: {},
      auditInfo: {
        approval_status: 3,
        created_at: "2099-02-17 09:25:53",
        approval_remark: "",
        approval_invalid_col: [],
      },
      manageTypeItem: {},
      columns: [
        [
          {
            id: 1,
            name: "许可证",
          },
          {
            id: 2,
            name: "特许证件",
          },
          {
            id: 3,
            name: "其他证件",
          },
        ],
      ],
      showPicker: false,
      showActionSheet: false,
      bankList: [[]],
    };
  },
  onShow() {
    this.getAuditInfo();
    this.getBankList();
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    ...mapActions("user", ["LoginOut"]),
    async getAuditInfo() {
      var params = {};

      let isContain = this.userInfo.user_mobile.indexOf("86");

      if (isContain != -1 && this.userInfo.user_mobile.length > 11) {
        params.mobile = this.userInfo.user_mobile.slice(2);
      } else {
        params.mobile = this.userInfo.user_mobile;
      }

      let res = await GetAuditInfo(params);
      if (res && res.status == 200) {
        this.auditInfo = res.data || {
          approval_status: 3,
          created_at: "2099-02-17 09:25:53",
          approval_remark: "",
          approval_invalid_col: [],
        };

        if (this.auditInfo.contract_download_url) {
          uni.setStorageSync(
            "contractDownloadUrl",
            this.auditInfo.contract_download_url
          );
        }

        if (this.auditInfo.approval_invalid_col.includes("all")) {
          uni.setStorageSync("auditId", res.data.id);

          uni.navigateTo({
            url: "/pages/audit/shop1",
          });
          return;
        }

        if (
          this.auditInfo.approval_status == 1 &&
          this.auditInfo.signed_status == 2
        ) {
          let result = await GetAccountDashboard();
          if (result && result.status == 200) {
            uni.setStorageSync("accountDashboard", result.data);
            uni.setStorageSync("auditInfo", res.data);
            uni.switchTab({
              url: "/pages/order/order",
            });
          }
        }

        let arr = JSON.parse(res.data.approval_invalid_col);

        const arr2 = this.formConfig.reduce((acc, item) => {
          if (arr.includes(item.key)) {
            this.form[item.key] = "";

            acc.push(item);
          }
          return acc;
        }, []);

        this.auditInfo.approval_invalid_col = arr2;

        let typeItem = uni.getStorageSync("typeItem");

        if (typeItem) {
          this.manageTypeItem = typeItem;
          this.form.biz_category = typeItem.bizSecondCategory.name;
        }

        let locationItem = uni.getStorageSync("locationItem");

        if (locationItem) {
          this.form.mapAddress =
            locationItem.administrativeRegion.label[0] +
            locationItem.administrativeRegion.label[1] +
            locationItem.administrativeRegion.label[2];

          this.form.store_address = locationItem.selectAddress.name;
        }
      }

      this.showLoading = false;
    },
    async getBankList() {
      let res = await GetBankList();
      if (res && res.status == 200) {
        this.bankList[0] = res.data;
      }
    },
    async getRestartMerchApply() {
      console.log(this.auditInfo);

      this.form.id = this.auditInfo.id;

      if (this.form.mapAddress) {
        let locationItem = uni.getStorageSync("locationItem");
        this.form.store_longitude = locationItem.selectAddress.location.lng;
        this.form.store_latitude = locationItem.selectAddress.location.lat;
        this.form.province_id = locationItem.administrativeRegion.value[0];
        this.form.city_id = locationItem.administrativeRegion.value[1];
        this.form.county_id = locationItem.administrativeRegion.value[2];
        this.form.store_address =
          locationItem.administrativeRegion.label[0] +
          locationItem.administrativeRegion.label[1] +
          locationItem.administrativeRegion.label[2] +
          this.form.store_address;
      }

      if (this.form.biz_category) {
        this.form.biz_category = this.manageTypeItem.bizCategory.id;
        this.form.biz_second_category =
          this.manageTypeItem.bizSecondCategory.id;
      }

      if (this.form.storefrontImg) {
        this.form.front_facade_image = this.form.storefrontImg;
      }

      if (this.form.surroundingsImg) {
        this.form.environment_image = this.form.surroundingsImg;
      }

      let res = await GetRestartMerchApply(this.form);
      if (res && res.status == 200) {
        uni.removeStorageSync("locationItem");
        uni.removeStorageSync("auditItem");
        uni.removeStorageSync("typeItem");
        await this.getAuditInfo();
      }
    },
    handerItemSkipu(item) {
      if (!item.type == "select") return;

      switch (item.key) {
        case "mapAddress":
          uni.navigateTo({
            url: "/pages/audit/mapAddress",
          });
          break;
        case "biz_category":
          uni.navigateTo({
            url: "/pages/audit/businessType",
          });
          break;
        case "license_type":
          this.showPicker = true;
          break;
        case "bank_name":
          this.showActionSheet = true;
          break;
      }
    },
    async afterRead(e, item) {
      const imgUrl = e.file.url;

      const group = {
        url: imgUrl,
      };

      item.imgUrlArr.push(group);

      let res = await UploadFilePromise(imgUrl);
      if (res && res.status == 200) {
        if (item.key == "license_image") {
          if (this.form[item.key] == "") {
            this.form[item.key] = String(res.data.url);
          } else {
            this.form[item.key] += "," + String(res.data.url);
          }
        } else {
          this.form[item.key] = res.data.url;
        }
      }
    },
    deletePic(e, item) {
      if (item.key == "license_image") {
        item.imgUrlArr.splice(e.index, 1);
        let arr = this.form[item.key].split(",");
        arr.splice(e.index, 1);
        this.form[item.key] = arr.join(",");
      } else {
        item.imgUrlArr.splice(0, 1);
      }
    },
    handleCancel() {
      this.showPicker = false;
    },
    handleConfirm(e) {
      this.form.license_type = e.value[0].name;
      this.licenseType = e.value[0];

      this.showPicker = false;
    },
    handleBankCancel() {
      this.showActionSheet = false;
    },
    handleBankConfirm(e) {
      this.form.bank_name = e.value[0].bank_name;
      this.showActionSheet = false;
    },
  },
};
</script>

<style lang="scss">
.checkAudit-container {
  .checkAudit-loading {
    margin: 70% auto;
    display: flex;
  }

  .form {
    padding: 48rpx 16rpx;
    background: #fff;
  }

  padding: 0 24rpx;
  .img {
    margin: 0 auto;
    margin-top: 16%;
    width: 320rpx;
    height: 220rpx;
    background-image: url("../../static/no-audit.png");
    background-size: 100% 100%;
  }

  .img-await {
    margin: 0 auto;
    margin-top: 17%;
    margin-bottom: 20%;
    width: 320rpx;
    height: 240rpx;
    background-image: url("../../static/await.png");
    background-size: 100% 100%;
  }

  .img-pass {
    margin: 0 auto;
    margin-top: 17%;
    margin-bottom: 20%;
    width: 320rpx;
    height: 320rpx;
    background-image: url("../../static/pass.png");
    background-size: 100% 100%;
  }

  .tips {
    margin-bottom: 24rpx;
    text-align: center;
    color: #040404;
    font-weight: 500;
    font-size: 36rpx;
  }

  .refusal-cause {
    margin: 48rpx 0;
  }

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

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

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

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

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

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

  .time {
    text-align: center;
  }

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

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

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