<template>
    <el-dialog v-model="isShow" title="选择预案" width="1200px" :before-close="cancel">
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <div style="height:calc(100vh - 500px);">

            <el-table ref="multipleTableRef" stripe v-loading="tableLoading" :data="tableData" style="width: 100%"
                border @row-click="rowClick" height="100%">
                <!-- 序号 -->
                <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
                <el-table-column width="55" #default="{ row }">
                    <el-radio v-model="radioIndex" :label="row.id"></el-radio>
                </el-table-column>
                <el-table-column label="预案名称" show-overflow-tooltip property="planname" width="150"></el-table-column>
                <el-table-column label="主要内容" show-overflow-tooltip property="content"></el-table-column>
                <!-- <el-table-column label="计划演练时间" show-overflow-tooltip property="playdate" /> -->
                <!-- <el-table-column label="演练组织部门" show-overflow-tooltip property="deptname" /> -->
                <el-table-column label="演练参与部门" show-overflow-tooltip property="cydepnames" />
                <el-table-column label="预计参演人数" show-overflow-tooltip property="yjcyrs"></el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 10px">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="listQuery.pageCurrent" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
                layout="total, prev, pager, next, sizes, jumper" :total="tableTotal"></el-pagination>
        </div>
        <template #footer>
            <span class="dialog-footer">

                <el-button type="primary" @click="confirm">确定</el-button>
                <el-button type="warning" @click="cancel">关闭</el-button>
            </span>
        </template>
    </el-dialog>

</template>

<script setup>
import { ref, defineEmits, reactive, onMounted } from "vue"
import { filterYear } from "@/utils/auth.js";
import { getApi, postApi } from "@/api/tobAcco_api.js"

const emits = defineEmits(['close', 'ok','update:modelValue'])
const props = defineProps({
    // editObj: {
    //     type: Object,
    //     default: () => { }
    // }
    modelValue: {
        type: String,
        default: ''
    },

});
const isShow = ref(true)
// 查询参数
const listQuery = reactive({
    pageCurrent: 1,
    pageSize: 20,
    state: '00', // 只查可实施的
    // total: 0,
    year: new Date().getFullYear()
});
const tableData = ref([]);
const tableLoading = ref(false);
const radioIndex = ref(-1);
const rowClick = (row) => {
    // emits('modelValue', row.id)
    radioIndex.value = row.id;
    emits("update:modelValue", radioIndex.value);
};
const tableTotal = ref(0)
// 切换页码
const handleCurrentChange = (val) => {
    listQuery.pageCurrent = val;
    getYaPage();
};
const handleSizeChange = (val) => {
    listQuery.pageSize = val;
    getYaPage();
};
const confirm = () => {
    emits('ok', radioIndex.value)
}
const cancel = () => {
    emits('close')
}
const onSearch = obj => {
    listQuery.pageCurrent = 1;
    listQuery.year = obj.year;
    listQuery.planname = obj.planname;
    getYaPage();
}
// 搜索参数
const searchArr = reactive([
    {
        showType: "select",
        prop: "year",
        options: filterYear(7),
        placeholder: "请选择年份",
        defaultVal: new Date().getFullYear()
    },
    {
        showType: "input",
        prop: "planname",
        width: '250px',
        placeholder: "请输入应急预案名称"
    }
]);
const getYaPage = () => {
    postApi(listQuery, `/mosty-jcgl/yjyl/queryYjyl`).then((res) => {
        if (res.records) {
            tableData.value = res.records;
            tableTotal.value = res.total;
        } else {
            data.tableData = [];
        }
    }).finally(() => {
        tableLoading.value = false;
    });
};
onMounted(()=>{
    radioIndex.value = props.modelValue
    getYaPage();
})
</script>

<style lang="scss" scoped></style>