<template>
    <div>
        <template v-if="list != null">
            <el-table :data="list" border>
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <!-- <el-table-column label="维保记录详情id" align="center" prop="maintenanceRecordDetailsId" />
                <el-table-column label="维保记录id" align="center" prop="maintenanceRecordId" /> -->
                <el-table-column type="expand" width="30">
                    <template #default="scope">
                        <div class="padding">
                            <el-descriptions :column="1">
                                <el-descriptions-item label="维保项目">
                                    {{ scope.row.maintenanceProjectName }}
                                </el-descriptions-item>
                                <el-descriptions-item label="维保项目标准">
                                    {{ scope.row.maintenanceProjectStandard }}
                                </el-descriptions-item>
                                <el-descriptions-item label="维保项目责任人">
                                    <TextTag :options="roleList" column="roleId" label="roleName"
                                        :value="scope.row.maintenanceProjectPersonLiable"
                                        style="display:inline-block" />
                                </el-descriptions-item>
                                <el-descriptions-item label="维保项目周期">
                                    <dict-tag :options="maintenance_project_cycle"
                                        :value="scope.row.maintenanceProjectCycle" style="display:inline-block" />
                                </el-descriptions-item>
                                <el-descriptions-item label="状态">
                                    <dict-tag :options="com_maintenance_record_state"
                                        :value="scope.row.maintenanceRecordDetailsState" style="display:inline-block" />
                                </el-descriptions-item>
                                <!-- <el-descriptions-item label="维保项目图片">
                                    <image-upload v-model="scope.row.maintenanceProjectFile" :limit="1" />
                                </el-descriptions-item>
                                <el-descriptions-item label="备注">
                                    <el-input v-model="scope.row.remark" :rows="9" type="textarea" placeholder="请输入备注"
                                        style="display:inline-block" />
                                </el-descriptions-item> -->
                            </el-descriptions>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="维保项目" align="center" prop="maintenanceProjectName" />
                <el-table-column label="维保项目标准" align="center" prop="maintenanceProjectStandard" />
                <el-table-column label="维保项目责任人" align="center" prop="maintenanceProjectPersonLiable" width="150px">
                    <template #default="scope">
                        <TextTag :options="roleList" column="roleId" label="roleName"
                            :value="scope.row.maintenanceProjectPersonLiable" />
                    </template>
                </el-table-column>
                <el-table-column label="维保项目周期" align="center" prop="maintenanceProjectCycle" width="110px">
                    <template #default="scope">
                        <dict-tag :options="maintenance_project_cycle" :value="scope.row.maintenanceProjectCycle" />
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center" prop="maintenanceRecordDetailsState">
                    <template #default="scope">
                        <dict-tag :options="com_maintenance_record_state"
                            :value="scope.row.maintenanceRecordDetailsState" />
                    </template>
                </el-table-column>
                <el-table-column label="维保项目图片" align="center" prop="maintenanceProjectFile" width="170px">
                    <template #default="scope">
                        <image-upload v-model="scope.row.maintenanceProjectFile" :limit="1"
                            @update="handleUploadSuccess" />
                    </template>
                </el-table-column>
                <el-table-column label="备注" align="center" prop="remark">
                    <template #default="scope">
                        <el-input v-model="scope.row.remark" :rows="9" type="textarea" placeholder="请输入备注"
                            @blur="handleBlur" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100"
                    fixed="right" v-if="editable">
                    <template #default="scope">
                        <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <Empty v-else />
    </div>
</template>

<script setup>
import {delMaintenanceRecordDetails} from "@/api/maintenanceRecordDetails/maintenanceRecordDetails";
import {updateMaintenanceRecordDetails } from "@/api/maintenanceRecord/maintenanceRecord";

import { listRole } from "@/api/system/role";

const { proxy } = getCurrentInstance();
const emit = defineEmits();

const { com_maintenance_record_state, maintenance_project_cycle } = proxy.useDict('com_maintenance_record_state', 'maintenance_project_cycle');
const roleList = ref([]);

const props = defineProps({
    editable: {
        type: Boolean,
        default: true,
    },
    list: {
        type: Array,
        default: null,
    },
});
const { editable, list } = toRefs(props)

/** 删除按钮操作 */
function handleDelete(row) {
    const maintenanceRecordDetailsIds = row.maintenanceRecordDetailsId;
    proxy.$modal.confirm('是否确认删除维保记录详情编号为"' + maintenanceRecordDetailsIds + '"的数据项？').then(function () {
        return delMaintenanceRecordDetails(maintenanceRecordDetailsIds);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

function handleUploadSuccess(url) {
    // emit("update", url);
    for (let i in list.value) {
        updateMaintenanceRecordDetails(list.value[i]).then(response => {
            if (i == list.value.length - 1) {
                proxy.$modal.msgSuccess("修改成功");
            }
        });
    }
}

function handleBlur() {
    // emit("update", null);
}


listRole(proxy.addDateRange({
    pageNum: 1,
    pageSize: 9999,
}, undefined)).then(response => {
    roleList.value = response.rows;
});
</script>