<template>
    <div class="edit-popup">
        <popup ref="popupRef" :async="true" width="60vw" @close="handleClose" :bottom-btn="false">

            <el-descriptions class="margin-top" :title="popupTitle" :column="3" border>
                <el-descriptions-item label="供应商头像">
                    <material-picker v-model="formData.mer_avatar" disabled />
                </el-descriptions-item>
                <el-descriptions-item label="供应商名称">
                    {{ formData.mer_name }}
                </el-descriptions-item>
                <el-descriptions-item label="供应商分类">
                    <dict-value :options="dictData.mer_category_type" :value="formData.category_id" />
                </el-descriptions-item>
                <el-descriptions-item label="供应商类型">
                    <dict-value :options="dictData.merchat_type" :value="formData.type_id" />
                </el-descriptions-item>
                <el-descriptions-item label="结算周期(天)">
                    {{ formData.settle_cycle }}
                </el-descriptions-item>
                <el-descriptions-item label="利率">
                    {{ formData.interest_rate }}
                </el-descriptions-item>
                <el-descriptions-item label="标签">
                    {{ formData.sys_labels_text }}
                </el-descriptions-item>
                <el-descriptions-item label="城市">
                    {{ formData.city_name }}
                </el-descriptions-item>
                <el-descriptions-item label="区县">
                    {{ formData.area_name }}
                </el-descriptions-item>
                <el-descriptions-item label="镇街">
                    {{ formData.street_name }}
                </el-descriptions-item>
                <el-descriptions-item label="村">
                    {{ formData.village_name }}
                </el-descriptions-item>
                <el-descriptions-item label="供应商地址">
                    {{ formData.mer_address }}
                </el-descriptions-item>
                <el-descriptions-item label="供应商是否禁用">
                    <dict-value :options="dictData.show_status" :value="formData.status" />
                </el-descriptions-item>
                <el-descriptions-item label="提成比例">
                    {{ formData.commission_rate }}
                </el-descriptions-item>
                <el-descriptions-item label="供应商手续费单独设置">
                    <dict-value :options="dictData.show_status" :value="formData.commission_switch" />
                </el-descriptions-item>
                <el-descriptions-item label="经度">
                    {{ formData.long }}
                </el-descriptions-item>
                <el-descriptions-item label="纬度">
                    {{ formData.lat }}
                </el-descriptions-item>
                <el-descriptions-item label="供应商电话">
                    {{ formData.service_phone }}
                </el-descriptions-item>
                <el-descriptions-item label="供应商余额">
                    {{ formData.mer_money }}
                </el-descriptions-item>
                <el-descriptions-item label="银行卡转账信息">
                    {{ formData.financial_bank }}
                </el-descriptions-item>
                <el-descriptions-item label="微信转账信息">
                    {{ formData.financial_wechat }}
                </el-descriptions-item>
                <el-descriptions-item label="支付宝转账信息">
                    {{ formData.financial_alipay }}
                </el-descriptions-item>
                <el-descriptions-item label="默认使用类型">
                    <dict-value :options="dictData.financial_type" :value="formData.financial_type" />
                </el-descriptions-item>
            </el-descriptions>
            <el-card class="mt-5">
                <template #header>
                    <span>供应商银行账户</span>
                </template>
                <el-table :data="formData.supplier_banks">
                    <el-table-column label="id" prop="id" show-overflow-tooltip />
                    <el-table-column label="账户名称" prop="name" show-overflow-tooltip />
                    <el-table-column label="电话" prop="phone" show-overflow-tooltip />
                    <el-table-column label="开户网点" prop="bank_branch" show-overflow-tooltip />
                    <el-table-column label="银行账户" prop="bank_code" show-overflow-tooltip />
                    <el-table-column label="身份证号" prop="id_card" show-overflow-tooltip />
                    <el-table-column label="账户类型" prop="is_own_text" show-overflow-tooltip />
                    <el-table-column label="审核状态" prop="is_check_text" show-overflow-tooltip />
                    <el-table-column label="拒绝原因" prop="fail_msg" show-overflow-tooltip />
                </el-table>
            </el-card>

        </popup>
    </div>
</template>

<script lang="ts" setup name="brandEdit">
import Popup from '@/components/popup/index.vue'

import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')


// 弹窗标题
const popupTitle = computed(() => {
    return '供应商详情'
})

// 表单数据
const formData = reactive({
    id: '',
    category_id: '',
    type_id: '',
    mer_name: '',
    settle_cycle: '',
    interest_rate: '',
    sys_labels: [],
    sys_labels_text: '',
    province_id: '510000',
    city_id: '',
    city_name: "",
    area_id: '',
    area_name: '',
    street_id: '',
    street_name: '',
    village_id: '',
    village_name: '',
    mer_address: '',
    mer_avatar: '',
    mark: '',
    status: '',
    commission_rate: '',
    commission_switch: '',
    long: '',
    lat: '',
    service_phone: '',
    mer_money: '',
    financial_bank: '',
    financial_wechat: '',
    financial_alipay: '',
    financial_type: '',
    supplier_banks: []
})

// 表单验证
const formRules = reactive<any>({
    name: [{
        required: true,
        message: '请输入品牌名称',
        trigger: ['blur']
    }]
})


// 获取详情
const setFormData = async (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }


}



// 提交按钮
// const handleSubmit = async () => {
//     await formRef.value?.validate()
//     const data = { ...formData, }
//     mode.value == 'edit'
//         ? await apiBrandEdit(data)
//         : await apiBrandAdd(data)
//     popupRef.value?.close()
//     emit('success')
// }

//打开弹窗
const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}



defineExpose({
    open,
    setFormData,
})
</script>
