<template>
  <el-form ref="formRef" :model="formData" :class="{ 'view': isDetail, 'mobile-card': mobile }" :rules="formRules"
    label-width="120px" class="overflow-auto" v-loading="formLoading" :disabled="isDetail" style="overflow: hidden;">
    <el-row>
      <el-col :span="12">
        <el-form-item label="商户名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入商户名称" />
        </el-form-item>
      </el-col>
      <!-- 新增的时候不显示状态 -->
      <el-col :span="12" v-if="openType != '新增'">
        <el-form-item label="状态" prop="status">
          <el-select v-model="formData.status" placeholder="请选择商户状态" class="w-1/1" clearable>
            <el-option label="使用中" :value="10" />
            <el-option label="过期" :value="20" />
            <el-option label="停用" :value="30" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="联络人" prop="contact">
          <el-input v-model="formData.contact" placeholder="请输入联络人" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所在地" prop="areaId">
          <el-cascader v-model="formData.areaId" :options="areaTree" :props="defaultProps" class="w-1/1" clearable
            placeholder="请选择所在地" filterable collapse-tags />
        </el-form-item>
        
      </el-col>
      
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="联络人手机号" prop="contactNumber">
          <el-input v-model="formData.contactNumber" placeholder="请输入联络人手机号" maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入邮箱" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="法人" prop="legalPerson">
          <el-input v-model="formData.legalPerson" placeholder="请输入法人" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="法人手机号" prop="legalPersonNumber">
          <el-input v-model="formData.legalPersonNumber" placeholder="请输入法人手机号"  maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')"/>
        </el-form-item>
      </el-col>
    </el-row>
    <div v-if="mobile">
      <el-row>
        <el-col :span="12">
          <el-form-item style="border: none;" label="法人身份证正面" prop="businessLicensePicture" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="identityCardFront" class="pic">
            <UploadImg v-model="formData.identityCardFront" :limit="1" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item style="border: none;" label="法人身份证反面" prop="businessLicensePicture" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="identityCardReverseSide" class="pic">
            <UploadImg v-model="formData.identityCardReverseSide" :limit="1" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <template v-else>
      <el-row>
          <el-col :span="12">
            <el-form-item label="法人身份证正面(国徽面)" prop="identityCardFront">
              <UploadImg v-model="formData.identityCardFront" :limit="1" :disabled="isDetail" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人身份证反面(人像面)" prop="identityCardReverseSide">
              <UploadImg v-model="formData.identityCardReverseSide" :limit="1" :disabled="isDetail" />
            </el-form-item>
          </el-col>
      </el-row>
    </template>
    <el-row>
      <el-col :span="12">
        <el-form-item label="标签">
          <el-input  disabled />
        </el-form-item>
      </el-col>
      <el-col :span="12" >
        <el-form-item label="办公地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入办公地址" />
        </el-form-item>
      </el-col>
      <el-col :span="12" style="display: none;">
        <el-form-item label="服务到期时间" prop="expireTime">
          <el-date-picker v-model="formData.expireTime" type="date" value-format="x" placeholder="选择服务到期时间" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="维权电话" prop="complaintsHotline">
          <el-input v-model="formData.complaintsHotline" placeholder="请输入维权电话"  maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="客服电话" prop="customerServiceHotline">
          <el-input v-model="formData.customerServiceHotline" placeholder="请输入客服电话"  maxlength="11" onkeyup="value=value.replace(/[^\d]/g,'')"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="官网" prop="website">
          <el-input v-model="formData.website" placeholder="请输入官网" />
        </el-form-item>
      </el-col>
      
      <el-col :span="12" v-if="openType === '新增'">
        <el-form-item label="开户银行" prop="bankName">
          <el-input v-model="formData.bankName" placeholder="请输入开户银行" />
        </el-form-item>
      </el-col>
      <!-- 只有查看的时候才显示这个 -->
      <el-col :span="12" v-if="isDetail">
        <el-form-item label="创建时间" prop="customerServiceHotline">
          <el-date-picker v-model="formData.createTime" type="date" value-format="x" disabled />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row  v-if="openType === '新增'">
      <el-col :span="12">
        <el-form-item label="账户名称" prop="accountName">
          <el-input v-model="formData.accountName" placeholder="请输入账户名称"  maxlength="11" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="账户号码" prop="accountNumber">
          <el-input v-model="formData.accountNumber" placeholder="请输入账户号码"  onkeyup="value=value.replace(/[^\d]/g,'')"/>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- {{ mobile }} -->
    <div v-if="mobile">
      <el-row>
        <el-col :span="12">
          <el-form-item style="border: none;" label="Logo" prop="logoUrl" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="logoUrl" class="pic">
            <UploadImg v-model="formData.logoUrl" :limit="1" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item style="border: none;" label="营业执照" prop="businessLicensePicture" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="businessLicensePicture" class="pic">
            <UploadImg v-model="formData.businessLicensePicture" :limit="1" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row>
        <el-col :span="12">
          <el-form-item style="border: none;" label="品牌授权书" prop="brandLicensing" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="brandLicensing" class="pic">
            <UploadImg v-model="formData.businessLicensePicture" :limit="1" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item style="border: none;" label="其他证书" prop="otherCertificate" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="otherCertificate" class="pic">
            <UploadImg v-model="formData.otherCertificate" :limit="1" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item style="border: none;" label="简介" prop="description" />
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-form-item prop="description" class="description">
          <div v-html="formData.description"></div>
        </el-form-item>
      </el-col>
    </div>
    <div v-else>
      <el-row>
        <el-col :span="12">
          <el-form-item label="营业执照" prop="businessLicensePicture">
            <UploadImg v-model="formData.businessLicensePicture" :limit="1" :disabled="isDetail" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="品牌授权书" prop="brandLicensing">
            <UploadImg v-model="formData.brandLicensing" :limit="1" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="其他证书" prop="otherCertificate">
            <!-- {{formData.otherCertificate}} -->
            <UploadImgs v-model:modelValue="formData.otherCertificate" :limit="9" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="简介" prop="description">
            <Editor v-model="formData.description" height="150px" :disabled="isDetail" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>

<script setup lang="ts">
import { MerchantApi, MerchantVO } from '@/api/system/sale/merchant'
import { copyValueToTarget } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import * as AreaApi from '@/api/system/area'
import { defaultProps } from '@/utils/tree'

// 从路由中引入store中的app仓库
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
// const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = reactive({
  id: undefined,
  name: undefined,
  status: undefined,
  description: undefined,
  contact: undefined,
  address: undefined,
  contactNumber: undefined,
  website: undefined,
  createTime: undefined,
  complaintsHotline: undefined,
  customerServiceHotline: undefined,
  email: undefined,
  businessLicensePicture: undefined,
  expireTime: undefined,
  areaId:undefined,
  accountName:undefined,
  accountNumber:undefined,
  bankName:undefined,
  brandLicensing: undefined,
  otherCertificate: [],
  legalPerson:undefined,
  legalPersonNumber:undefined,
  identityCardFront:undefined,
  identityCardReverseSide:undefined,
  logoUrl:undefined
})
const formRules = reactive({
  name: [{ required: true, message: '商户名称不能为空', trigger: 'blur' }],
  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
  contact: [{ required: true, message: '联络人不能为空', trigger: 'blur' }],
  contactNumber: [{ required: true, message: '联络人手机号不能为空', trigger: 'blur' }],
  areaId: [{ required: true, message: '所在地不能为空', trigger: 'blur' }],
  customerServiceHotline: [{ required: true, message: '客服电话不能为空', trigger: 'blur' }],
  email: [{ required: true, message: '邮箱不能为空', trigger: 'blur' }],
  businessLicensePicture: [{ required: true, message: '营业执照不能为空', trigger: 'blur' }],
  accountName: [{ required: true, message: '账户名称不能为空', trigger: 'blur' }],
  accountNumber: [{ required: true, message: '账户号码不能为空', trigger: 'blur' }],
  bankName: [{ required: true, message: '开户银行不能为空', trigger: 'blur' }],
  legalPerson: [{ required: true, message: '法人不能为空', trigger: 'blur' }],
  legalPersonNumber: [{ required: true, message: '法人手机号不能为空', trigger: 'blur' }],
  identityCardFront: [{ required: true, message: '法人身份证正面不能为空', trigger: 'blur' }],
  identityCardReverseSide: [{ required: true, message: '法人身份证反面不能为空', trigger: 'blur' }],
})
const formRef = ref()
const props = defineProps({
  id: {
    type: Number,
    default: 0
  },
  "isDetail": {
    type: Boolean,
    default: false
  },
  "openType": {
    type: String,
    default: "查看" 
  },
  propFormData: {
    type: Object,
    default: () => { }
  }
});
const areaTree = ref([])
onMounted(async () => {
  areaTree.value = await AreaApi.getAreaTree()
})



/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData, data)
    let i = 100;
    formData.otherCertificate =  data['otherCertificate']?.map((item, index) => {
      i ++ ;
			return {
				url: item,
        uid:Math.round(new Date() + i ),
        status:'success',
			};
		});
  },
  {
    immediate: true
  }
)

const emit = defineEmits(['update:activeName'])

const validate = async () => {
  if (!formRef) return
  try {
    await unref(formRef)?.validate()
    // 校验通过更新数据
    Object.assign(props.propFormData, formData)
    return true
  } catch (e) {
    message.error('基本信息不完善，请填写相关信息')
    emit('update:activeName', 'info')
    return false
    throw e // 目的截断之后的校验
  }
}
defineExpose({ validate })
const updateInitialData = inject('updateInitialData');

watch(formData, (data) => {
  try { copyValueToTarget(updateInitialData.value, formData) } catch {
    // console.log(data)
  }
},
  {
    immediate: true
  }
)
</script>

<style src="./MerchantComponents.css"  lang="scss" scoped></style>
