<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="40px">
			<el-form-item label="姓名" prop="crewName">
			    <el-input v-model="queryParams.crewName" placeholder="姓名" clearable
			        @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="职务" prop="crewPost">
			    <el-input v-model="queryParams.crewPost" placeholder="职务" clearable
			        @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="部门" prop="crewDept">
			    <el-input v-model="queryParams.crewDept" placeholder="部门" clearable
			        @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item>
			    <el-button type="primary" icon="Search" @click="handleQuery">搜索
			    </el-button>
			    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="mb8" style="min-height:32px">
			<el-col :span="1.5" v-hasPermi="['crewInformation:crewInformation:add']">
			    <el-button type="primary" plain icon="Plus" @click="handleAdd">新增
			    </el-button>
			</el-col>
			<!-- <el-col :span="1.5" v-hasPermi="['crewInformation:crewInformation:edit']">
			    <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改
			    </el-button>
			</el-col>
			<el-col :span="1.5" v-hasPermi="['crewInformation:crewInformation:remove']">
			    <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除
			    </el-button>
			</el-col> -->
			<el-col :span="1.5" v-hasPermi="['crewInformation:crewInformation:export']">
			    <el-button type="warning" plain icon="Download" @click="handleExport">导出
			    </el-button>
			</el-col>
			<el-col :span="1.5" v-hasPermi="['crewInformation:crewInformation:import']">
			  <ImportData url="crewInformation/crewInformation" title="导入" @success="getList" />
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

        <el-card shadow="never">
            <el-table ref="tableRef" v-loading="loading" :data="crewList"
                @selection-change="handleSelectionChange" :default-sort="defaultSort" @sort-change="handleSortChange">
                <el-table-column type="expand" width="30">
                    <template #default="scope">
                        <div class="padding">
                            <el-descriptions :column="3">
                                <el-descriptions-item label="船员工号：">
                                    {{ scope.row.crewNumber }}
                                </el-descriptions-item>
                                <el-descriptions-item label="船员年龄：">
									{{ scope.row.crewAge }}
                                </el-descriptions-item>
                                <el-descriptions-item label="船员姓名：">
                                    {{ scope.row.crewName }}
                                </el-descriptions-item>
								<el-descriptions-item label="出生年月：">
								    {{ scope.row.crewBirthday }}
								</el-descriptions-item>
								<el-descriptions-item label="外文姓名：">
								    {{ scope.row.crewEnName }}
								</el-descriptions-item>
								<el-descriptions-item label="出生地址：">
								    {{ scope.row.crewBirthplace }}
								</el-descriptions-item>
								<el-descriptions-item label="船员性别：">
								    <dict-tag :options="sys_user_sex" :value="scope.row.crewSex" style="display:inline-block" />
								</el-descriptions-item>
								<el-descriptions-item label="政治面貌：">
								    {{ scope.row.PoliticalOutlook }}
								</el-descriptions-item>
								<el-descriptions-item label="电话号码：">
								    {{ scope.row.crewPhone }}
								</el-descriptions-item>
								<el-descriptions-item label="船员学历：">
								    {{ scope.row.crewEducation }}
								</el-descriptions-item>
								<el-descriptions-item label="船员职务：">
								    {{ scope.row.crewPost }}
								</el-descriptions-item>
                                <el-descriptions-item label="入职时间：">
                                    <span>{{ scope.row.createTime }}</span>
                                </el-descriptions-item>
								<el-descriptions-item label="在职状态：">
								    <dict-tag :options="on_duty_status" :value="scope.row.state" style="display:inline-block"/>
								</el-descriptions-item>
								<el-descriptions-item label="现住地址：">
								    {{ scope.row.crewAddress }}
								</el-descriptions-item>
                            </el-descriptions>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="工号" align="center" prop="crewNumber" />
                <el-table-column label="姓名" align="center" prop="crewName"/>
				<el-table-column label="性别" align="center" prop="crewSex">
					<template #default="scope">
				        <dict-tag :options="sys_user_sex" :value="scope.row.crewSex" />
				    </template>
				</el-table-column>
				<el-table-column label="年龄" align="center" prop="crewAge"/>
                <el-table-column label="职务" align="center" prop="crewPost" />
				<el-table-column label="部门" align="center" prop="crewDept" />
                <el-table-column label="状态" align="center" prop="state">
                    <template #default="scope">
                        <dict-tag :options="on_duty_status" :value="scope.row.state" />
                    </template>
                </el-table-column>
                <el-table-column label="入职时间" align="center" prop="createTime" width="100" sortable="custom"
                    :sort-orders="['descending', 'ascending']">
                    <template #default="scope">
                        <!-- <span>{{ parseTime(scope.row.createTime), "{y}-{m}-{d}" }}</span> -->
						<span>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200"
                    fixed="right"
                    v-hasPermi="['maintenanceApply:maintenanceApply:query', 'maintenanceApply:maintenanceApply:edit', 'maintenanceApply:maintenanceApply:remove']">
                    <template #default="scope">
                        <el-button text type="primary" icon="View" @click="handleView(scope.row)"
                            v-hasPermi="['maintenanceApply:maintenanceApply:query']">详细
                        </el-button>
                        <el-button link icon="Edit" type="success" @click="handleUpdate(scope.row)"
                            v-hasPermi="['maintenanceProject:maintenanceProject:apply']">编辑
                        </el-button>
						<el-button link icon="Delete" type="danger" @click="handleDelete(scope.row)"
						    v-hasPermi="['maintenanceProject:maintenanceProject:deldete']">刪除
						</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />

        <!-- 添加或修改维保申请对话框 -->
        <el-dialog :title="title" v-model="open" width="80%" append-to-body>
            <el-form ref="maintenanceApplyRef" :model="form" :rules="rules" label-width="80px" class="grid col-2">
                <el-form-item label="船员工号" prop="crewNumber">
                    <el-input maxlength="300" v-model="form.crewNumber" placeholder="请输入船员工号" />
                </el-form-item>
                <el-form-item label="船员年龄" prop="crewAge">
                    <el-input maxlength="300" v-model="form.crewAge" placeholder="请输入船员年龄" />
                </el-form-item>
				<el-form-item label="船员姓名" prop="crewName">
				    <el-input maxlength="300" v-model="form.crewName" placeholder="请输入船员姓名" />
				</el-form-item>
				<el-form-item label="出生年月" prop="crewBirthday">
					<el-date-picker :clearable="false" v-model="form.crewBirthday" type="date"
					   value-format="YYYY-MM-DD" placeholder="请选择出生年月">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="外文姓名" prop="crewEnName">
				    <el-input maxlength="300" v-model="form.crewEnName" placeholder="请输入外文姓名" />
				</el-form-item>
				<el-form-item label="出生地址" prop="crewBirthplace">
				    <el-input maxlength="300" v-model="form.crewBirthplace" placeholder="请输入出生地址" />
				</el-form-item>
				<el-form-item label="船员性别" prop="crewSex">
					<el-select v-model="form.crewSex" placeholder="请选择">
						<el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="政治面貌" prop="PoliticalOutlook">
				    <el-input maxlength="300" v-model="form.PoliticalOutlook" placeholder="请输入政治面貌" />
				</el-form-item>
				<el-form-item label="电话号码" prop="crewPhone">
				    <el-input maxlength="300" v-model="form.crewPhone" placeholder="请输入电话号码" />
				</el-form-item>
				<el-form-item label="船员学历" prop="crewEducation">
				    <el-input maxlength="300" v-model="form.crewEducation" placeholder="请输入船员学历" />
				</el-form-item>
				<el-form-item label="船员职务" prop="crewPost">
				    <el-input maxlength="300" v-model="form.crewPost" placeholder="请输入船员职务" />
				</el-form-item>
				<el-form-item label="入职时间" prop="createTime">
					<el-date-picker :clearable="false" v-model="form.createTime" type="date"
					   value-format="YYYY-MM-DD" placeholder="请选择入职时间">
					</el-date-picker>
				</el-form-item>
                <el-form-item label="在职状态" prop="state">
                    <el-select v-model="form.state" placeholder="请选择状态">
                        <el-option v-for="dict in on_duty_status" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
				<el-form-item label="现住地址" prop="crewAddress">
				    <el-input maxlength="300" v-model="form.crewAddress" placeholder="请输入现住地址" />
				</el-form-item>
				<!-- <el-form-item label="证书正面">
				    <image-upload v-model="form.crewImage" :limit="1" />
				</el-form-item> -->
			</el-form>
			<el-divider content-position="center">船员证书列表</el-divider>
			<el-row :gutter="10" class="mb8" style="min-height:32px">
				<el-col :span="1.5">
					<el-button type="primary" icon="Plus" @click="handleAddCrew">添加</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button type="danger" icon="Delete" @click="handleDeleteCrew">删除
					</el-button>
				</el-col>
			</el-row>
			<el-table :data="crewCertificateList" :row-class-name="rowCrewIndex"
				@selection-change="handlecrewCertificateSelectionChange" ref="crewCertificate">
				<el-table-column type="selection" width="50" align="center" />
				<el-table-column label="序号" align="center" prop="index" width="50" />
				<el-table-column label="中文名" prop="certificateName">
					<template #default="scope">
						<el-input maxlength="300" v-model="scope.row.certificateName"
							placeholder="请输入证书中文名" />
					</template>
				</el-table-column>
				<el-table-column label="英文名" prop="certificateEnName">
					<template #default="scope">
						<el-input maxlength="300" v-model="scope.row.certificateEnName"
							placeholder="请输入证书英文名" />
					</template>
				</el-table-column>
				<el-table-column label="编号" prop="certificateNumber">
					<template #default="scope">
						<el-input maxlength="100" v-model="scope.row.certificateNumber"
							placeholder="请输入证书编号" />
					</template>
				</el-table-column>
				<el-table-column label="签发日期" prop="certificateIssueDate">
					<template #default="scope">
						<el-date-picker :clearable="false" v-model="scope.row.certificateIssueDate" type="date"
						   value-format="YYYY-MM-DD" placeholder="请选择签发日期">
						</el-date-picker>
					</template>
				</el-table-column>
				<el-table-column label="失效日期" prop="certificateEffectiveDate">
					<template #default="scope">
						<el-date-picker :clearable="false" v-model="scope.row.certificateEffectiveDate" type="date"
						   value-format="YYYY-MM-DD" placeholder="请选择签发日期">
						</el-date-picker>
					</template>
				</el-table-column>
				<el-table-column label="签发地址" prop="certificateIssueAddress">
					<template #default="scope">
						<el-input maxlength="300" v-model="scope.row.certificateIssueAddress" placeholder="请输入签发地址" />
					</template>
				</el-table-column>
				<el-table-column label="海事局" prop="maritimeBureau">
					<template #default="scope">
						<el-input maxlength="300" v-model="scope.row.maritimeBureau" placeholder="请输入海事局名称" />
					</template>
				</el-table-column>
				<el-table-column label="申办地址" prop="certificateApplicationAddress">
					<template #default="scope">
						<el-input maxlength="300" v-model="scope.row.certificateApplicationAddress" placeholder="请输入申办地址" />
					</template>
				</el-table-column>
				<el-table-column label="备注" prop="remark">
					<template #default="scope">
						<el-input maxlength="300" v-model="scope.row.remark" placeholder="请输入备注" />
					</template>
				</el-table-column>
			</el-table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
        <CrewInformationDetailDrawer ref="CrewInformationDetailDrawerRef" :crewCertificateId="crewCertificateId" />
    </div>
</template>

<script setup name="crewInformation">
// import {  } from "@/api/crewInformation/crewInformation";
import CrewInformationDetailDrawer from "@/components/CrewInformation/detail/drawer";
const { proxy } = getCurrentInstance();
const router = useRouter();
const { sys_user_sex, on_duty_status } = proxy.useDict("sys_user_sex",'on_duty_status');
const crewList = ref([]);
const crewCertificateList = ref([]);
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const checkedCrewCertificateDetails = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const crewCertificateId = ref(null)
const defaultSort = ref({ prop: "createTime", order: "descending" });


const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        crewCertificateId: null,
        maintenanceApplyExplain: null,
        state: null
    },
    rules: {
    }
})
    ;

const { queryParams, form, rules } = toRefs(data);
const baseUrl = import.meta.env.VITE_APP_BASE_API;

/** 查询维保申请列表 */
function getList() {
    loading.value = true;
    listMaintenanceApply(queryParams.value).then(response => {
        crewList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}

function addList() {
    loading.value = true;
    listMaintenanceApply(queryParams.value)
        .then(response => {
            crewList.value.push(...response.rows);
            total.value = response.total;
            if (crewList.value.length >= total.value) finished.value = true;
            loading.value = false;
        })
        .catch(response => {
            loading.value = false;
        });
}

// 下拉刷新
function handlePullDownRefresh() {
    queryParams.value.pageNum = 1;
    crewList.value = [];
    addList();
}

// 滚动到底部的事件
function handleReachBottom() {
    queryParams.value.pageNum++;
    addList();
}

// 取消按钮
function cancel() {
    open.value = false;
    reset();
}

// 表单重置
function reset() {
    form.value = {
		crewNumber: null,
		crewName: null,
		crewEnName: null,
		crewSex: null,
		crewAge: null,
		crewPhone: null,
		crewBirthday: null,
		crewPost: null,
		crewDept: null,
		crewImage: null,
		createTime: null,
		PoliticalOutlook: null,
		crewEducation: null,
		crewUniversity: null,
		crewBirthplace: null,
		crewAddress: null,
        state: null
    };
    crewCertificateList.value = [];
    proxy.resetForm("maintenanceApplyRef");
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    queryParams.value.pageNum = 1;
    proxy.$refs["tableRef"].sort(defaultSort.value.prop, defaultSort.value.order);
    // handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.crewCertificateId);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
    reset();
    open.value = true;
    title.value = "添加船员信息";
}

/** 修改按钮操作 */
function handleUpdate(row) {
    reset();
    const crewId = row.crewCertificateId || ids.value
    // getMaintenanceApply(crewCertificateId).then(response => {
        // form.value = response.data;
		form.value = JSON.parse(JSON.stringify(row));
		crewCertificateList.value = [{
			certificateName: "船员资格证",
			certificateEnName: "Actor Qualification Certificate",
			certificateNumber: "a1d255256ad5",
			certificateIssueDate: "2206-06-04",
			certificateEffectiveDate: "2050-06-04",
			certificateIssueAddress: "广东",
			maritimeBureau: "广东海事局",
			certificateApplicationAddress: "广东",
			remark: ""
		}];
        // crewCertificateList.value = response.data.crewCertificateList;
        open.value = true;
        title.value = "修改船员信息";
    // });
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["maintenanceApplyRef"].validate(valid => {
        if (valid) {
            form.value.crewCertificateList = crewCertificateList.value;
            if (form.value.crewCertificateId != null) {
                // updateMaintenanceApply(form.value).then(response => {
                //     proxy.$modal.msgSuccess("修改成功");
                //     open.value = false;
                //     getList();
                // });
            } else {
                // addMaintenanceApply(form.value).then(response => {
                //     proxy.$modal.msgSuccess("新增成功");
                //     open.value = false;
                //     getList();
                // });
            }
        }
    });
}

/** 删除按钮操作 */
function handleDelete(row) {
    const crewCertificateIds = row.crewName || ids.value;
    proxy.$modal.confirm('是否确认删除"' + crewCertificateIds + '"的数据项？').then(function () {
        // return delMaintenanceApply(crewCertificateIds);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

/** 维保申请详情序号 */
function rowCrewIndex({ row, rowIndex }) {
    row.index = rowIndex + 1;
}

/** 维保申请详情添加按钮操作 */
function handleAddCrew() {
    let obj = {};
	obj.certificateName = "";
	obj.certificateEnName = "";
	obj.certificateNumber = "";
	obj.certificateIssueDate = "";
	obj.certificateEffectiveDate = "";
	obj.certificateIssueAddress = "";
	obj.maritimeBureau = "";
	obj.certificateApplicationAddress = "";
	obj.remark = "";
    crewCertificateList.value.push(obj);
}

/** 维保申请详情删除按钮操作 */
function handleDeleteCrew() {
    if (checkedCrewCertificateDetails.value.length == 0) {
        proxy.$modal.msgError("请先选择要删除的船员信息数据");
    } else {
        const crewCertificateDetailss = crewCertificateList.value;
        const checkedCrewCertificateDetailsss = checkedCrewCertificateDetailss.value;
        crewCertificateList.value = crewCertificateDetailss.filter(function (item) {
            return checkedCrewCertificateDetailsss.indexOf(item.index) == -1
        });
    }
}

/** 复选框选中数据 */
function handleMaintenanceApplyDetailsSelectionChange(selection) {
    checkedCrewCertificateDetailss.value = selection.map(item => item.index)
}

/** 导出按钮操作 */
function handleExport() {
    downloadMaintenanceApply(queryParams.value)
    // proxy.download('maintenanceApply/maintenanceApply/export', {
    //   ...queryParams.value
    // }, `maintenanceApply_${new Date().getTime()}.xlsx`)
}

/** 详细按钮操作 */
function handleView(row) {
    crewCertificateId.value = row.crewCertificateId
    proxy.$refs["CrewInformationDetailDrawerRef"].show()
}



/** 排序触发事件 */
function handleSortChange(column, prop, order) {
    queryParams.value.orderByColumn = column.prop;
    queryParams.value.isAsc = column.order;
    getList();
}

function initialData() {
    getList();
}

onActivated(() => {
    //// console.log("onActivated")
    // initialData();
})
onMounted(() => {
	crewList.value = [{
		crewCertificateId: "NXF5A6SF8567",
		crewNumber: "48242565",
		crewName: "张三",
		crewEnName: "Zhang San",
		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: "广东广州"
	}]
    //// console.log("onMounted")
    // initialData();
})

</script>

