<template>
    <vxe-modal v-model="dialogVisible" :title="`供应信息(共${list.length}条)`" show-zoom resize show-footer destroy-on-close
        transfer @hide="close" :width="width" :z-index="1002">
        <template #default>
            <div class="over-auto" style="height: 80vh;">
                <div class="pd-16 bg-#f7f7f7 mb-16">
                    <div class="mb-10 d-flex">
                        <div class="flex1 ov-hd">
                            <el-tag class="mr-8" type="success" effect="dark">求购</el-tag>
                            <span class="f-s-16 f-w-5 c-333">{{ info?.name }}</span>
                            <span class="f-s-12 c-333">（{{ selectDictLabel(dm_medicine_find_type, info?.type) }}）</span>
                        </div>
                        <div class="c-999 f-s-14">{{ formatDateRelative(info?.createTime) }}发布</div>
                    </div>
                    <div>具体需求：{{ info?.needsDetail }}</div>
                </div>
                <div class="info-title f-s-16 c-333 f-w-5 mb-10">供应信息</div>
                <div v-if="!list.length" class="f-s-14 c-999 t-c p-t-100">暂无供应信息~</div>
                <div v-else>
                    <el-tabs type="card" class="demo-tabs">
                        <el-tab-pane v-for="(item, index) in list" :key="item.id" :label="`供应信息${index + 1}`"
                            :name="item.name">
                            <ViewsSupplyItem :info="item" :dict="dict"></ViewsSupplyItem>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </template>
    </vxe-modal>
</template>

<script setup name="views-supply-info" lang="ts">
import { httpRequests } from '@/utils/httpRequests';
import { propTypes } from '@/utils/propTypes';
import { formatDateRelative } from '@/utils/ruoyi';
import { AreaCascader } from '@/views/components';
import { FormInstance } from 'element-plus';
import { ViewsSupplyItem } from '.';
const emit = defineEmits(['update:show', 'close', 'success']);
const props = defineProps({
    show: propTypes.bool.def(false),
    width: propTypes.number.def(760),
    info: propTypes.any.def(null),
    dict: propTypes.any.def(null)
});
const { dm_medicine_find_type, yes_no, solon_sample_free, solon_report_type } = toRefs(props.dict);
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const dialogVisible = ref(props.show);
const list = ref<any[]>([]);
const formRef = ref<FormInstance>();
const close = () => {
    formRef.value?.resetFields();
    emit('update:show', false);
    emit('close', false);
};
// 获取供应详情
const getSupplyInfo = async (id: string) => {
    const res = await httpRequests.get(`/solon/medicine-identify/getFindInfo/${id}`,);
    console.log(res);
    if (res?.code === 200) {
        list.value = res?.data?.resList || [];
    }
};
watch(
    () => props.show,
    (val) => {
        dialogVisible.value = val;
    }
);
onMounted(() => {
    getSupplyInfo(props.info?.id);
});
</script>
<style lang="scss" scoped>
// 右上角定位三角形文字，背景主题色，颜色白色</style>
