<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j page-business-info-reupload">
    <view class="input-con amount-input-con">
      <uni-forms
        ref="businessInfoFormRef"
        :model-value="dataForm"
        :rules="rules"
        validate-trigger="submit"
      >
        <!-- 身份证证件照 -->
        <view class="setting-info-item">
          <view class="title">
            <text class="star">
              *
            </text>
            <text class="txt">
              {{ $t('faRenShenFenZheng') }}
            </text>
          </view>
          <view class="id-upload-image">
            <uni-forms-item
              name="identityCardFront"
              class="id-front"
            >
              <view class="upload-image">
                <view class="upload-con">
                  <view
                    v-if="!dataForm.identityCardFront"
                    class="upload-btn"
                    @tap="onUploadImg('identityCardFront')"
                  >
                    <view class="up-text text-btn">
                      {{ $t('tianJia') }}
                    </view>
                    <view class="up-text">
                      {{ $t('shangChuanShenFenZhengRenXiangMian') }}
                    </view>
                  </view>
                  <view
                    v-if="dataForm.identityCardFront"
                    class="upload-con"
                    @tap.stop="onPreviewImg(dataForm.identityCardFront)"
                  >
                    <image
                      :src="util.checkFileUrl(dataForm.identityCardFront)"
                      mode="aspectFill"
                      class="up-img-con"
                    />
                    <view
                      class="del-btn"
                      @tap.stop="onDelLoadImg('identityCardFront')"
                    >
                      <image
                        class="del-img"
                        src="@/static/images/close2.png"
                      />
                    </view>
                  </view>
                </view>
              </view>
            </uni-forms-item>
            <uni-forms-item name="identityCardLater">
              <view class="upload-image">
                <view class="upload-con">
                  <view
                    v-if="!dataForm.identityCardLater"
                    class="upload-btn"
                    @tap="onUploadImg('identityCardLater')"
                  >
                    <view class="up-text text-btn">
                      {{ $t('tianJia-0') }}
                    </view>
                    <view class="up-text">
                      {{ $t('shangChuanShenFenZhengGuoHuiMian') }}
                    </view>
                  </view>
                  <view
                    v-if="dataForm.identityCardLater"
                    class="upload-con"
                    @tap.stop="onPreviewImg(dataForm.identityCardLater)"
                  >
                    <image
                      :src="util.checkFileUrl(dataForm.identityCardLater)"
                      mode="aspectFill"
                      class="up-img-con"
                    />
                    <view
                      class="del-btn"
                      @tap.stop="onDelLoadImg('identityCardLater')"
                    >
                      <image
                        class="del-img"
                        src="@/static/images/close2.png"
                      />
                    </view>
                  </view>
                </view>
              </view>
            </uni-forms-item>
          </view>
        </view>
        <!-- 营业执照电子版 -->
        <view class="setting-info-item">
          <uni-forms-item name="businessLicense">
            <view class="title">
              <text class="star">
                *
              </text>
              <text class="txt">
                {{ $t('yingYeZhiZhaoDianZiBan') }}
              </text>
            </view>
            <view class="upload-image bus-license">
              <view class="upload-con">
                <view
                  v-if="!dataForm.businessLicense"
                  class="upload-btn"
                  @tap="onUploadImg('businessLicense')"
                >
                  <view class="up-text text-btn">
                    {{ $t('tianJia-1') }}
                  </view>
                  <view class="up-text">
                    {{ $t('shangChuanWenZiQingXiDeZhaoPianLouChuBianKuangHeGuoHui') }}
                  </view>
                </view>
                <view
                  v-if="dataForm.businessLicense"
                  class="upload-con"
                  @tap.stop="onPreviewImg(dataForm.businessLicense)"
                >
                  <image
                    :src="util.checkFileUrl(dataForm.businessLicense)"
                    mode="heightFix"
                    class="up-img-con "
                  />
                  <view
                    class="del-btn"
                    @tap.stop="onDelLoadImg('businessLicense')"
                  >
                    <image
                      class="del-img"
                      src="@/static/images/close2.png"
                    />
                  </view>
                </view>
              </view>
            </view>
          </uni-forms-item>
        </view>
      </uni-forms>
    </view>
    <view
      class="footer-btn"
      @tap="onSubmit"
    >
      {{ $t('queRen') }}
    </view>
  </view>
</template>

<!-- eslint-disable n/no-callback-literal -->
<script setup>
import { onMounted, reactive } from 'vue'
import util from '@/utils/util'
const dataForm = reactive({
  identityCardFront: '',
  identityCardLater: '',
  businessLicense: ''
})
const rules = ref({
  identityCardFront: {
    rules: [
      { required: true, errorMessage: $t('qingShangChuanShenFenZhengRenXiangMian') },
      {
        validateFunction: (rule, value, data, callback) => {
          if (dataForm.identityCardFront.trim().length === 0) {
            callback($t('qingShangChuanShenFenZhengRenXiangMian-0'))
            return false
          }
        }
      }
    ]
  },
  identityCardLater: {
    rules: [
      { required: true, errorMessage: $t('qingShangChuanShenFenZhengGuoHuiMian') },
      {
        validateFunction: (rule, value, data, callback) => {
          if (dataForm.identityCardLater.trim().length === 0) {
            callback($t('qingShangChuanShenFenZhengGuoHuiMian-0'))
            return false
          }
        }
      }
    ]
  },
  businessLicense: {
    rules: [
      { required: true, errorMessage: $t('qingShangChuanYingYeZhiZhaoDianZiBan') },
      {
        validateFunction: (rule, value, data, callback) => {
          if (dataForm.businessLicense.trim().length === 0) {
            callback($t('qingShangChuanYingYeZhiZhaoDianZiBan-0'))
            return false
          }
        }
      }]
  }
})
onMounted(() => {
  onGetShopCompany()
  uni.setNavigationBarTitle({
    title: $t('gongShangXinXi')
  })
})
/**
 * 获取工商信息
 */
let shopCompanyId = null
let shopId = null
const onGetShopCompany = () => {
  const params = {
    url: '/shop/shopCompany',
    method: 'GET'
  }
  http.request(params).then(({ data }) => {
    shopCompanyId = data.shopCompanyId
    shopId = data.shopId
  })
}

/**
 * 上传图片
 * @param {String} type
 */
const onUploadImg = function (type) {
  util.chooseImage({}).then((data) => {
    switch (type) {
      case 'identityCardFront':
        // 上传身份证人像面
        dataForm.identityCardFront = data[0].filePath
        break
      case 'identityCardLater':
        // 上传身份证国徽面
        dataForm.identityCardLater = data[0].filePath
        break
      case 'businessLicense':
        // 营业执照电子版
        dataForm.businessLicense = data[0].filePath
        break
      default:
        break
    }
  })
}
/**
 *  图片预览
 */
const onPreviewImg = (src) => {
  uni.previewImage({
    urls: [util.checkFileUrl(src)]
  })
}
/**
 * 删除图片
 */
const onDelLoadImg = (type) => {
  dataForm[type] = ''
}
// 重新提交
const businessInfoFormRef = ref(null)
const onSubmit = () => {
  businessInfoFormRef.value.validate().then(() => {
    http.request({
      url: '/shop/shopCompany/uploadIdCard',
      method: 'put',
      data: {
        shopCompanyId,
        shopId,
        ...dataForm
      }
    }).then(({ data }) => {
      uni.showToast({
        title: data,
        icon: 'none'
      })
      setTimeout(() => {
        uni.redirectTo({
          url: '/package-settings/pages/store-settings-business/store-settings-business'
        })
      }, 1500)
    })
  })
}
</script>

<style lang="scss" scoped>
@import './business-info-reupload.scss';
</style>
