<template>
    <div>
        <el-dialog :title="'隐患排查标准'" width="1200px" v-model="props.modelValue" :before-close="closed">
            <div class="btnBox">
                <el-button @click="addkzcs()"> <el-icon>
                        <CirclePlus />
                    </el-icon>新增</el-button>
            </div>
            <div :class="props.Single ? 'table-box-radio' : ''" style="margin-top: 0px;height:100%;">
                <el-table stripe ref="multipleUserRef" v-loading="tableloading"
                    @selection-change="handleSelectionChange" :data="tableData" border :row-key="keyid">
                    <el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single" />
                    <el-table-column width="55" type="selection" #default="{ row }" v-else>
                        <el-radio v-model="ridioIndex" :label="row.id" @click="onClickRadio(row)"></el-radio>
                    </el-table-column>
                    <el-table-column sortable align="center" property="checklibName" label="排查项"></el-table-column>
                    <el-table-column sortable align="center" property="itemName" label="控制措施内容"></el-table-column>
                    <el-table-column sortable align="center" property="yhLv" label="隐患等级" #default="{ row }">
                        <dict-tag :options="D_DBZ_YHDJ" :value="row.yhLv" :tag="false"></dict-tag>
                    </el-table-column>
                    <el-table-column sortable align="center" property="yhNote" label="隐患说明"></el-table-column>
                    <el-table-column sortable align="center" property="yhFlag" label="标红项" #default="{ row }">
                        <dict-tag :options="NYHBZ" :value="row.yhFlag" :tag="false"></dict-tag>
                    </el-table-column>
                     <el-table-column sortable align="center" property="yhLx" label="适用排查场景" #default="{ row }">
                        <dict-tag :options="D_BZ_SYPCCJ" :value="row.yhLx" toArr :tag="false"></dict-tag>
                    </el-table-column>
                    <el-table-column sortable align="center" property="isPic" label="是否必须上传图片" #default="{ row }">
                        <dict-tag :options="NSFBXSCTP" :value="row.isPic" :tag="false"></dict-tag>
                    </el-table-column>
                </el-table>
                <div class="fenye">
                    <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange"
                        @changeSize="handleSizeChange" />
                </div>
            </div>

            <template #footer>

                <span class="dialog-footer">
                    <el-button type="primary" @click="handleSave">
                        <el-icon>
                            <DocumentChecked />
                        </el-icon>
                        <span>确定</span>
                    </el-button>
                    <el-button @click="closed" type="primary">
                        <el-icon>
                            <DocumentDelete />
                        </el-icon>
                        <span>关闭</span>
                    </el-button>
                </span>

            </template>
        </el-dialog>
        <InnerDialog v-if="innerShow" :title="title" :innerShow="innerShow" @changeVi="changeVi"
            :dict="{ D_DBZ_YHDJ, NSFBXSCTP, NYHBZ }" :formValue="InnerForms" />
    </div>
</template>

<script setup>
// 引入
import { defineProps, onMounted, ref, defineEmits, getCurrentInstance } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import InnerDialog from "../kzcsk/innerDialog.vue";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const {
    D_DBZ_YHDJ, NSFBXSCTP, NYHBZ, D_BZ_SYPCCJ
} = proxy.$dict("D_DBZ_YHDJ", "NSFBXSCTP", "NYHBZ", "D_BZ_SYPCCJ");
const tableData = ref([]);
const innerShow = ref(false)
const InnerForms = ref({})
const title = ref('')
const ridioIndex = ref(null);
const multipleUserRef = ref(null);
const tableloading = ref(false);
const listQuery = ref({
    pageCurrent: 1,
    pageSize: 10,
    total: 0,
});
const selectArry = ref([]);//选中的对象
const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true
    },
    titleValue: {
        type: String,
        default: "选择模板"
    },
    // 默认选中
    defaultData: {
        type: Array,
        default: []
    },
    //是否单选
    Single: {
        type: Boolean,
        default: true
    },
    info: Object,//部门
});

const emits = defineEmits(["update:modelValue", "confirm"]);

onMounted(() => {

    listQuery.value = { ...listQuery.value, checklibId: props.info.checklibId }
    getListData()
});
const keyid = (row) => {
    return row.id;
};
// 添加排查分类
const addkzcs = (type) => {
    InnerForms.value.id = null
    InnerForms.value.checklibId = props.info.checklibId
    InnerForms.value.checklibName = props.info.checklibName
    title.value = "新增控制措施";
    innerShow.value = true;

}
// 编辑排查项回调弹窗
const changeVi = (val) => {
    innerShow.value = val;
    getListData()
};
//确认
const handleSave = () => {
    emits("confirm", selectArry.value);
}
//d单选
const onClickRadio = (val) => {
    selectArry.value = [val]
}
//选中(多选)
const handleSelectionChange = (val) => {
    selectArry.value = val

}
//关闭
const closed = () => {
    multipleUserRef.value.clearSelection();
    emits("update:modelValue", false);
};

//列表信息
const getListData = async () => {
    tableData.value = [];
    tableloading.value = true;
    getApi(listQuery.value, "/mosty-jcgl/controlLib/getPageList").then(res => {
        if (res) {
            tableData.value = res.records;
            listQuery.value.total = res.total;
            multipleUser(tableData.value);

        }
    }).finally(() => {
        tableloading.value = false;
    })
};
// 列表回显
function multipleUser(row) {
    props.defaultData.forEach(item => {
        tableData.value.forEach((val) => {
            if (item == val.id) {
                multipleUserRef.value.toggleRowSelection(val, true);
            }
        });
    })
}

const handleCurrentChange = (currentPage) => {
    listQuery.value.pageCurrent = currentPage;
    getListData();
};

const handleSizeChange = (currentSize) => {
    listQuery.value.pageSize = currentSize;
    getListData();
};

</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

::v-deep .el-dialog__body {
    height: 50vh;
}

::v-deep .el-form--inline {
    padding-left: 0 !important;
}

::v-deep .el-radio__label {
    display: none !important;
}

:v-deep .el-tree-node {
    .is-leaf+el-checkbox .el-checkbox__inner {
        display: inline-block;
    }
}

::v-deep .el-overlay-dialog {
    overflow: hidden !important;
}

:v-deep .el-checkbox .el-checkbox__inner {
    display: none;
}

:v-deep .wrap .el-checkbox__input.is-disabled {
    display: none;
}

.el-form {
    margin-top: 10px;
    display: flex;
    //   flex-wrap: wrap;
    justify-content: space-between;
}

.el-form-item {
    text-align: center;
    // width: 400px;
}

.btnBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
}
</style>
