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

 https://www.mall4j.com/

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

 版权所有，侵权必究！
-->
<template>
  <div class="Mall4j component-base-info">
    <!-- 基本信息 -->
    <div class="basic-info-mod">
      <!-- 信息 -->
      <el-form
        ref="shopBasicInfoRef"
        class="business-info-mod"
        label-width="140px"
        :model="shopBasicInfo"
        :rules="shopBasicInfoRules"
        @submit.prevent
      >
        <el-form-item
          :label="$t('multishop.shopInformation.supplierName')"
          prop="supplierName"
        >
          <el-input
            v-model="shopBasicInfo.supplierName"
            :placeholder="$t('multishop.shopInformation.supplierTips')"
            maxlength="10"
            style="max-width: 380px"
          />
        </el-form-item>
        <el-form-item
          :label="$t('multishop.shopInformation.contactName')"
          prop="contactName"
        >
          <el-input
            v-model="shopBasicInfo.contactName"
            :placeholder="$t('multishop.shopInformation.contactNameTips')"
            maxlength="10"
            style="max-width: 380px"
          />
        </el-form-item>
        <el-form-item
          :label="$t('multishop.shopInformation.contactPhone')"
          prop="contactPhone"
        >
          <el-input
            v-model="shopBasicInfo.contactPhone"
            :placeholder="$t('multishop.shopInformation.contactPhoneTips')"
            maxlength="11"
            style="max-width: 380px"
            @input="shopBasicInfo.contactPhone=shopBasicInfo.contactPhone.replace(/[^\d|*]/g,'')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('multishop.shopInformation.intro')"
          prop="intro"
        >
          <el-input
            v-model="shopBasicInfo.intro"
            type="textarea"
            :rows="4"
            style="max-width: 380px"
            maxlength="200"
            :placeholder="$t('multishop.shopInformation.introTips')"
          />
        </el-form-item>
      </el-form>
      <div class="footer">
        <div class="foot-box">
          <div
            v-permission="['shop:shopDetail:save']"
            class="btn"
            @click="validationShopBasicInfo"
          >
            {{ $t('multishop.shopInformation.saveInformation') }}
          </div>
        </div>
      </div>
    </div>
    <!-- /基本信息 -->
  </div>
</template>

<script setup>
import * as api from '@/api/multishop/shop-process.js'
import { isEmail, validNoEmptySpace } from '@/utils/validate.js'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/modules/user.js'

const emit = defineEmits(['closeBrowse', 'closeBrowse'])

// eslint-disable-next-line no-unused-vars
const validateEmail = (rule, value, callback) => {
  if (!isEmail(value) || value.indexOf(' ') !== -1) {
    callback(new Error($t('multishop.shopInformation.correctEmail')))
  } else {
    callback()
  }
}

const companyInfoForm = ref(null)
const validRepresentative = (callback) => {
  companyInfoForm.representative = companyInfoForm.representative.trim()
  if (companyInfoForm.representative.indexOf(' ') !== -1) {
    callback(new Error($t('multishop.shopInformation.representativeHasEmpty')))
  } else {
    callback()
  }
}

// eslint-disable-next-line no-unused-vars
const validateMobile = (rule, value, callback) => {
  if (!isStarMobile(value)) {
    callback(new Error($t('multishop.shopInformation.correctContactInformation')))
  } else {
    callback()
  }
}

// 纯空格校验
// eslint-disable-next-line no-unused-vars
const validEmptySpace = (rule, value, callback) => {
  if (validNoEmptySpace(value)) {
    callback(new Error($t('multishop.shopInformation.EmptyTips')))
  } else {
    callback()
  }
}

const shopBasicInfoRules = computed(() => {
  return {
    supplierNumber: [
      { required: true, message: $t('multishop.shopInformation.supplierNumberTips'), trigger: 'blur' }
    ],
    supplierName: [
      { required: true, message: $t('multishop.shopInformation.supplierEmpty'), trigger: 'blur' },
      { min: 2, max: 10, message: $t('multishop.shopInformation.supplierBetween'), trigger: 'blur' },
      { validator: validEmptySpace, trigger: 'blur' }
    ],
    supplierShopName: [
      { required: true, message: $t('multishop.shopInformation.shopNameEmpty'), trigger: 'blur' },
      { min: 2, max: 20, message: $t('multishop.shopInformation.shopNameBetween'), trigger: 'blur' },
      { validator: validEmptySpace, trigger: 'blur' }
    ],
    contactName: [
      { required: true, message: $t('multishop.shopInformation.contactNameEmpty'), trigger: 'blur' },
      { min: 2, max: 10, message: $t('multishop.shopInformation.contactNameBetween'), trigger: 'blur' },
      { validator: validEmptySpace, trigger: 'blur' }
    ],
    contactPhone: [
      { required: true, message: $t('multishop.shopInformation.contactPhoneEmpty'), trigger: 'blur' },
      { validator: validateMobile, trigger: 'blur' }
    ],
    supplierLogo: [
      { required: true, message: $t('multishop.shopInformation.shopLogoTips'), trigger: 'change' }
    ],
    intro: [
      // 店铺简介（非必填,校验纯空格）
      { validator: validEmptySpace, trigger: 'blur' }
    ],
    businessLicense: [
      { required: true, message: $t('multishop.shopInformation.businessLicenseTips'), trigger: 'change' }
    ],
    representative: [
      { required: true, message: $t('multishop.shopInformation.representativeEmpty'), trigger: 'blur' },
      { validator: validRepresentative, trigger: 'blur' }
    ],
    identityCardFront: [
      { required: true, message: $t('multishop.shopInformation.identityCardFrontTips'), trigger: 'change' }
    ],
    identityCardLater: [
      { required: true, message: $t('multishop.shopInformation.identityCardLaterTips'), trigger: 'change' }
    ]
  }
})

onMounted(() => {
  queryShopBasicInfo()
})

const shopBasicInfo = ref({})
/**
 * 查询基本信息
 */
const queryShopBasicInfo = () => {
  api.getBasicInfo().then(data => {
    if (data.type) {
      data.type = data.type.toString()
    }
    data.type = data.type.toString()
    data && Object.assign(shopBasicInfo.value, data)
  })
}

const shopBasicInfoRef = ref(null)
/**
 * 更新店铺申请信息
 */
const validationShopBasicInfo = () => {
  // 基本信息
  shopBasicInfoRef.value?.validate((valid) => {
    if (valid) {
      updateShopBasicInfo()
    }
  })
}
/**
 * 更新基本信息
 */
const updateShopBasicInfo = () => {
  api.saveBasicInfo(shopBasicInfo.value)
    .then(() => {
      ElMessage({
        message: $t('multishop.shopInformation.baseInfoSuccess'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          emit('closeBrowse')
        }
      })
      useUserStore().name = shopBasicInfo.value.supplierName
      useUserStore().avatar = addDomain(shopBasicInfo.value.supplierLogo)
      queryShopBasicInfo()
    })
    .catch(() => {
      emit('closeBrowse')
    })
}
</script>
<style lang="scss" scoped>
@use "index";
</style>
