<script setup lang="ts">
import { watch, ref } from "vue"
import { useVModel } from "@vueuse/core"
import { httpInfo, httpUpdate } from "/@/api/serviceParam/workCompany";
import { useTask } from "/@/hooks/core"

import { invTime } from "/@/utils/validator"

import { contactOptions, upperRules } from "./_options"
import { ElForm } from "element-plus"

const props = defineProps<{ visible: boolean, data: string }>()
const emit = defineEmits(['refresh'])
const visible = useVModel(props, 'visible')

const formData = ref<any>({})
const contactType = ref('0')
const formRef = ref<InstanceType<typeof ElForm> | null>(null)

const upperTask = useTask({success(){
  visible.value = false
  emit('refresh')
}})

const supplierInfoTask = useTask({ initialData: {}, success(data: any){
  const {
    id,
    company, // 公司名称
    nature, //	公司类型
    inv_code, //	纳税识别号
    inv_legaler, //	法人
    inv_time, // 注册日期
    contactor, //		联系人
    inv_scope, //	经营范围
    license_img, //	营业执照
    invoice_title,
    invoice_mobile,
    inv_bank,
    inv_bankNo,
    inv_addr,
    addr
  } = data

  formData.value = {
    id: id || '',
    code: props.data,
    company: company || '', // 公司名称
    type: nature || '', //	公司类型
    inv_code: inv_code || '', //	纳税识别号
    inv_legaler: inv_legaler || '', //	法人
    inv_time: invTime(inv_time) || '', // 注册日期
    inv_addr: '', // 注册地址
    inv_bank: '', //	银行
    inv_bankNo: '', //	银行账户
    contactor: contactor || '', //		联系人
    invoice_mobile: '', //	联系人电话
    addr: addr || '', //		联系地址
    inv_scope: inv_scope || '', //	经营范围
    license_img: license_img || '', //	营业执照
    invoice_title: invoice_title || '',
    invoice_mobile: invoice_mobile || '',
    inv_bank: inv_bank || '',
    inv_bankNo: inv_bankNo || '',
    inv_addr: inv_addr || ''
  }
}})

async function onSubmit(){
  try {
    await formRef.value.validate()
    const { inv_bank, inv_bankNo, inv_addr, invoice_mobile, id, invoice_title, inv_code } = formData.value
    const model = { id, inv_bank, inv_bankNo, inv_addr, invoice_mobile, invoice_title, inv_code }
    upperTask.run(httpUpdate(model))
  }catch(err){
    console.log(err)
  }
}

watch(() => visible.value,(visible) => {
  if(!visible){ return }
  supplierInfoTask.run(httpInfo({ companyNo: props.data }))
}, {
  immediate: true
})
</script>

<template>
  <ElDialog title="供应商升级业务公司" center v-model="visible" top="10px">
    <ElForm label-width="100px" v-loading="supplierInfoTask.loading" :rules="upperRules" :model="formData" ref="formRef">
      <div class="flex flex-col">
        <div class="flex">
          <div class="w-[30px] p-[5px] border-r-1 border-b-1 border-[#ccc]">企业信息</div>
          <div class="flex-1 border-b-1 border-[#ccc]">
            <ElRow>
              <ElCol :span="6">
                <ElFormItem label="法人" required>{{ formData.inv_legaler }}</ElFormItem>
              </ElCol>

              <ElCol :span="6">
                <ElFormItem label="营业执照" required></ElFormItem>
              </ElCol>

              <ElCol :span="12">
                <ElFormItem label="企业名称" required>{{ formData.company}}</ElFormItem>
              </ElCol>

              <ElCol :span="8">
                <ElFormItem label="纳税识别号" required>{{ formData.inv_code }}</ElFormItem>
              </ElCol>

              <ElCol :span="8">
                <ElFormItem label="成立日期" required>{{ formData.inv_time }}</ElFormItem>
              </ElCol>
              
              <ElCol :span="8">
                <ElFormItem label="公司类型" required>{{ formData.type }}</ElFormItem>
              </ElCol>

              <ElCol :span="18">
                <ElFormItem label="详细地址" required>
                  {{ formData.addr }}
                </ElFormItem>
              </ElCol>

              <ElCol :span="6">
                <ElFormItem label="联系人" required>
                  {{ formData.contactor }}
                </ElFormItem></ElCol>

              <ElCol :span="24">
                <ElFormItem label="营业范围" required>
                  {{ formData.inv_scope }}
                </ElFormItem>
              </ElCol>
            </ElRow>
          </div>
        </div>

        <div class="flex">
          <div class="w-[30px] p-[5px] border-r-1 border-[#ccc]">开票信息</div>
          <div class="flex-1">
            <ElRow class="p-[10px]">
              <ElCol :span="12">
                <ElFormItem label="公司抬头" prop="invoice_title">
                  <ElInput placeholder="公司抬头" v-model="formData.invoice_title" maxlength="100" />
                </ElFormItem>
              </ElCol>

              <ElCol :span="12">
                <ElFormItem label="联系电话" prop="invoice_mobile">
                  <ElInput v-model="formData.invoice_mobile">
                    <template #prepend>
                      <ElSelect style="width: 115px" v-model="contactType">
                        <ElOption v-for="c in contactOptions" :key="c.value" :label="c.label" :value="c.value" />
                      </ElSelect>
                    </template>
                  </ElInput>
                </ElFormItem>
              </ElCol>
              
              <ElCol :span="12">
                <ElFormItem label="银行名称" prop="inv_bank">
                  <ElInput placeholder="银行名称" v-model="formData.inv_bank" maxlength="100" />
                </ElFormItem>
              </ElCol>

              <ElCol :span="12">
                <ElFormItem label="银行卡号" prop="inv_bankNo">
                  <ElInput placeholder="银行卡号" v-model="formData.inv_bankNo" maxlength="100" />
                </ElFormItem>
              </ElCol>

              <ElCol :span="24">
                <ElFormItem label="联系地址" prop="inv_addr">
                  <ElInput placeholder="联系地址" v-model="formData.inv_addr" maxlength="100" />
                </ElFormItem>
              </ElCol>

              <ElCol :span="24">
                <div class="flex w-full justify-end">
                  <ElButton @click="visible = false">取消</ElButton>
                  <ElButton type="primary" @click="onSubmit" :loading="upperTask.loading">保存</ElButton>
                </div>
              </ElCol>
            </ElRow>
          </div>
        </div>
      </div>
    </ElForm>
  </ElDialog>
</template>
