<template>
    <div>
        <template v-if="Object.keys($store.state.data.maintenanceApplyDetails).length > 0 || list != null">
            <el-table :data="list || Object.values($store.state.data.maintenanceApplyDetails)" border
                :height="editable ? `calc((100vh - 290px)/2)` : null">
                <!-- <el-table-column label="${comment}" align="center" prop="maintenanceApplyDetailsId" /> -->
                <!-- <el-table-column label="维保" align="center" prop="materialWarehouseImpaCode">
                    <template #default="scope">
                        <TextTag :options="maintenanceList" column="maintenanceId" label="maintenanceName"
                            :value="scope.row.materialWarehouseImpaCode" />
                    </template>
                </el-table-column> -->
                <el-table-column label="维保项目" align="center" prop="maintenanceProjectName"
                    :show-overflow-tooltip="true" />
                <el-table-column label="维保项目标准" align="center" prop="maintenanceProjectStandard"
                    :show-overflow-tooltip="true" />
                <el-table-column label="维保项目责任人" align="center" prop="maintenanceProjectPersonLiable">
                    <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="maintenanceProjectFile" v-if="editable">
                    <template #default="scope">
                        <image-upload v-model="scope.row.maintenanceProjectFile" />
                    </template>
                </el-table-column>-->
                <!-- <el-table-column label="维保项目图片" align="center" prop="maintenanceProjectFile" width="100"
                    v-if="!editable && showProjectFile">
                    <template #default="scope">
                        <image-preview :src="scope.row.maintenanceProjectFile" :width="50" :height="50" />
                    </template>
                </el-table-column> -->
                <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
                <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="removeMaintenanceApplyDetails(scope.row)">删除
                        </el-button>
                        <!-- v-hasPermi="['business:details:remove']"  -->
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <Empty v-else />

        <div v-if="editable">
            <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="handleAddMaintenanceApplyCustomList">添加</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="danger" icon="Delete" @click="handleDeleteMaintenanceApplyCustomList">删除
                    </el-button>
                </el-col>
            </el-row>
            <el-table :data="$store.state.data.maintenanceApplyDetailsCustomList"
                :row-class-name="rowMaintenanceApplyCustomListIndex"
                @selection-change="handleMaintenanceApplyCustomListSelectionChange" ref="sparePartAccessDetails" border
                height="calc((100vh - 290px)/2)">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="序号" align="center" prop="index" width="50" />
                <!-- <el-table-column label="维保" align="center" prop="materialWarehouseImpaCode">
                    <template #default="scope">
                        <el-tree-select v-model="scope.row.materialWarehouseImpaCode" :data="maintenanceOptions"
                            :props="{ value: 'maintenanceId', label: 'maintenanceName', children: 'children' }"
                            value-key="maintenanceId" placeholder="请选择维保" check-strictly filterable />
                    </template>
                </el-table-column> -->
                <el-table-column label="维保项目" align="center" prop="maintenanceProjectName">
                    <template #default="scope">
                        <el-input maxlength="100" v-model="scope.row.maintenanceProjectName" placeholder="请输入维保项目" />
                    </template>
                </el-table-column>
                <el-table-column label="维保项目标准" align="center" prop="maintenanceProjectStandard">
                    <template #default="scope">
                        <el-input maxlength="100" v-model="scope.row.maintenanceProjectStandard"
                            placeholder="请输入维保项目标准" />
                    </template>
                </el-table-column>
                <el-table-column label="维保项目责任人" align="center" prop="maintenanceProjectPersonLiable">
                    <template #default="scope">
                        <el-select v-model="scope.row.maintenanceProjectPersonLiable" filterable
                            placeholder="请选择维保项目责任人">
                            <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
                                :value="item.roleId" />
                        </el-select>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="维保项目图片" align="center" prop="maintenanceProjectFile">
                    <template #default="scope">
                        <image-upload v-model="scope.row.maintenanceProjectFile" />
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { removeMaintenanceApplyDetails, updateMaintenanceApplyDetails } from "@/utils/maintenanceApplyDetails";
import { listMaintenance } from "@/api/maintenance/maintenance";
import { listRole } from "@/api/system/role";

const { proxy } = getCurrentInstance();
const { maintenance_project_cycle } = proxy.useDict('maintenance_project_cycle');

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

const roleList = ref([]);
const maintenanceList = ref([]);
const maintenanceOptions = ref(undefined);
const checkedMaintenanceApplyDetailsCustomLists = ref([])
const store = useStore();

/** 自定义申购列表添加按钮操作 */
function handleAddMaintenanceApplyCustomList() {
    let obj = {
        maintenanceApplyNum: 1,
        maintenanceProjectFile: '',
    };
    store.state.data.maintenanceApplyDetailsCustomList.push(obj);
    //// console.log(store.state.data.maintenanceApplyDetailsCustomList)
}

/** 自定义申购列表删除按钮操作 */
function handleDeleteMaintenanceApplyCustomList() {
    if (checkedMaintenanceApplyDetailsCustomLists.value.length == 0) {
        proxy.$modal.msgError("请先选择要删除的自定义申购数据");
    } else {
        store.state.data.maintenanceApplyDetailsCustomList = store.state.data.maintenanceApplyDetailsCustomList.filter(function (item) {
            return checkedMaintenanceApplyDetailsCustomLists.value.indexOf(item.index) == -1
        });
    }
}

/** 复选框选中数据 */
function handleMaintenanceApplyCustomListSelectionChange(selection) {
    //// console.log(selection)
    checkedMaintenanceApplyDetailsCustomLists.value = selection.map(item => item.index)
}

/** 自定义申购列表序号 */
function rowMaintenanceApplyCustomListIndex({ row, rowIndex }) {
    row.index = rowIndex + 1;
}



listRole(proxy.addDateRange({
    pageNum: 1,
    pageSize: 9999,
}, undefined)).then(response => {
    roleList.value = response.rows;
});
listMaintenance({ pageNum: 1, pageSize: 9999 }).then(response => {
    response.data.map((item) => {
        item.label = `${item.maintenanceName}`;
    });
    maintenanceList.value = response.data;
    maintenanceOptions.value = proxy.handleTree(response.data, "maintenanceId", "parentId");

});
</script>