<template>
    <el-drawer v-model="open" :title="`船员信息`" :before-close="handleClose" direction="rtl" class="demo-drawer"
        modal-class="el-subscribe-drawer" size="80%">
        <div v-loading="loading">
			<el-row :gutter="10" class="mb8" style="min-height:32px">
				<el-col :span="5">
				    <div style="font-size: 14px;font-weight: bold;">船员照片：</div>
					<div class="margin-right-sm margin-top-sm"><img :src="form.crewImage" alt=""></div>
				</el-col>
				<el-col :span="19">
				    <el-descriptions :column="2">
				        <el-descriptions-item label="船员工号：">
				            {{ form.crewNumber }}
				        </el-descriptions-item>
				        <el-descriptions-item label="船员年龄：">
				    		{{ form.crewAge }}
				        </el-descriptions-item>
				        <el-descriptions-item label="船员姓名：">
				            {{ form.crewName }}
				        </el-descriptions-item>
				    	<el-descriptions-item label="出生年月：">
				    	    {{ form.crewBirthday }}
				    	</el-descriptions-item>
				    	<el-descriptions-item label="外文姓名：">
				    	    {{ form.crewEnName }}
				    	</el-descriptions-item>
				    	<el-descriptions-item label="出生地址：">
				    	    {{ form.crewBirthplace }}
				    	</el-descriptions-item>
				    	<el-descriptions-item label="船员性别：">
				    	    <dict-tag :options="sys_user_sex" :value="form.crewSex" style="display:inline-block" />
				    	</el-descriptions-item>
				    	<el-descriptions-item label="政治面貌：">
				    	    {{ form.PoliticalOutlook }}
				    	</el-descriptions-item>
				    	<el-descriptions-item label="电话号码：">
				    	    {{ form.crewPhone }}
				    	</el-descriptions-item>
				    	<el-descriptions-item label="船员学历：">
				    	    {{ form.crewEducation }}
				    	</el-descriptions-item>
				    	<el-descriptions-item label="船员职务：">
				    	    {{ form.crewPost }}
				    	</el-descriptions-item>
				        <el-descriptions-item label="入职时间：">
				            <span>{{ form.createTime }}</span>
				        </el-descriptions-item>
				    	<el-descriptions-item label="在职状态：">
				    	    <dict-tag :options="com_apply_state" :value="form.state" style="display:inline-block"/>
				    	</el-descriptions-item>
				    	<el-descriptions-item label="现住地址：">
				    	    {{ form.crewAddress }}
				    	</el-descriptions-item>
				    </el-descriptions>
				</el-col>
			</el-row>
			<el-divider content-position="center">船员证书列表</el-divider>
			<el-table :data="form.crewCertificateList">
				<el-table-column label="序号" align="center" prop="index" width="50" />
				<el-table-column label="中文名" prop="certificateName"/>
				<el-table-column label="英文名" prop="certificateEnName"/>
				<el-table-column label="编号" prop="certificateNumber"/>
				<el-table-column label="签发日期" prop="certificateIssueDate"/>
				<el-table-column label="失效日期" prop="certificateEffectiveDate"/>
				<el-table-column label="签发地址" prop="certificateIssueAddress"/>
				<el-table-column label="海事局" prop="maritimeBureau"/>
				<el-table-column label="申办地址" prop="certificateApplicationAddress"/>
				<el-table-column label="备注" prop="remark"/>
			</el-table>
        </div>
    </el-drawer>
</template>

<script setup>
import { getMaintenanceApply } from "@/api/maintenanceApply/maintenanceApply";

const { proxy, ctx } = getCurrentInstance();
const { sys_user_sex, com_apply_state } = proxy.useDict("sys_user_sex",'com_apply_state');
const store = useStore();
const open = ref(false);
const loading = ref(true);

const props = defineProps({
    crewCertificateId: {
        type: [Number, String],
        default: null,
    },
});

const { crewCertificateId } = toRefs(props);
const data = reactive({
    form: {},
})

const { form } = toRefs(data);


// 显示弹框
function show() {
    open.value = true;
    loading.value = true;
    nextTick(() => {
        getData()
    })
}

// 关闭按钮
function handleClose() {
    form.value = {}
    open.value = false;
}
function getData() {
    if (crewCertificateId.value) {
        // getMaintenanceApply(crewCertificateId.value).then(response => {
            // form.value = response.data;
			form.value = {
				crewCertificateId: "NXF5A6SF8567",
				crewNumber: "48242565",
				crewName: "张译",
				crewEnName: "Zhang Yi",
				crewSex: "0",
				crewAge: "45",
				crewPhone: "17878699973",
				crewBirthday: "1978-02-17",
				crewPost: "船长",
				crewDept: "易站智联",
				crewImage: "https://p7.itc.cn/q_70/images03/20220828/dd6691c27be94bf2a9dd40b14470b84d.jpeg",
				state: "0",
				createTime: "2022-06-15",
				PoliticalOutlook: "党员",
				crewEducation: "本科",
				crewUniversity: "哈尔滨话剧学院",
				crewBirthplace: "黑龙江省哈尔滨市",
				crewAddress: "北京市四环",
				crewCertificateList: [{
					certificateName: "演员资格证",
					certificateEnName: "Actor Qualification Certificate",
					certificateNumber: "a1d255256ad5",
					certificateIssueDate: "2206-06-04",
					certificateEffectiveDate: "2050-06-04",
					certificateIssueAddress: "哈尔滨",
					maritimeBureau: "哈尔滨海事局",
					certificateApplicationAddress: "哈尔滨",
					remark: ""
				}]
			};
            loading.value = false;
        // });
    }
}


defineExpose({
    show,
    handleClose,
});
</script>