<template>
    <el-dialog title="学校选择" v-model="data.showFlag">
        <div class="app-container">
            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
                <el-form-item label="学校名称" prop="name">
                    <el-input
                            v-model="queryParams.name"
                            placeholder="请输入学校名称"
                            clearable
                            @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="区域" prop="areaId">
                    <el-select v-model="queryParams.areaId" placeholder="请选择区域" clearable style="width: 168px">
                        <el-option
                                v-for="dict in gk_province"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="学校编码" prop="code">
                    <el-input
                            v-model="queryParams.code"
                            placeholder="请输入学校编码"
                            clearable
                            @keyup.enter="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="学段" prop="grade" style="width: 168px">
                    <el-select v-model="queryParams.grade" placeholder="请选择学段" clearable>
                        <el-option
                                v-for="dict in rank"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                        />
                    </el-select>
                </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">
                <el-col :span="1.5">
                    <el-button
                            type="primary"
                            plain
                            icon="Plus"
                            @click="handleAdd"
                            v-hasPermi="['platform:office:add']"
                    >新增
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                            type="success"
                            plain
                            icon="Edit"
                            :disabled="single"
                            @click="handleUpdate"
                            v-hasPermi="['platform:office:edit']"
                    >修改
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                            type="danger"
                            plain
                            icon="Delete"
                            :disabled="multiple"
                            @click="handleDelete"
                            v-hasPermi="['platform:office:remove']"
                    >删除
                    </el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button
                            type="warning"
                            plain
                            icon="Download"
                            @click="handleExport"
                            v-hasPermi="['platform:office:export']"
                    >导出
                    </el-button>
                </el-col>
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
            </el-row>

            <el-table v-loading="loading" :data="officeList" @selection-change="handleSelectionChange">

                <el-table-column width="55" align="center" v-if="isRadio=='1'" fixed>
                    <template v-slot="scope">
                        <el-radio-group v-model="scope.row.selected">
                            <el-radio :value="scope.row.id" @click="handleRowChange(scope.row)">
                            </el-radio>
                        </el-radio-group>

                    </template>
                </el-table-column>
                <el-table-column type="selection" width="55" align="center" v-if="isRadio!='1'"/>
                <el-table-column label="学校名称" align="center" prop="name"/>
                <el-table-column label="区域" align="center" prop="areaId">
                    <template #default="scope">
                        <dict-tag :options="gk_province" :value="scope.row.areaId"/>
                    </template>
                </el-table-column>
                <el-table-column label="学校编码" align="center" prop="code"/>
                <el-table-column label="学段" align="center" prop="grade">
                    <template #default="scope">
                        <dict-tag :options="rank" :value="scope.row.grade"/>
                    </template>
                </el-table-column>
                <el-table-column label="LOGO" align="center" prop="logo" width="100">
                    <template #default="scope">
                        <image-preview :src="scope.row.logo" :width="50" :height="50"/>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                                   v-hasPermi="['platform:office:edit']">修改
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                                   v-hasPermi="['platform:office:remove']">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <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="500px" append-to-body>
                <el-form ref="officeRef" :model="form" :rules="rules" label-width="80px">
                    <el-form-item label="学校名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入学校名称"/>
                    </el-form-item>
                    <el-form-item label="顺序" prop="sort">
                        <el-input v-model="form.sort" placeholder="请输入顺序"/>
                    </el-form-item>
                    <el-form-item label="区域" prop="areaId">
                        <el-select v-model="form.areaId" placeholder="请选择区域">
                            <el-option
                                    v-for="dict in gk_province"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学校编码" prop="code">
                        <el-input v-model="form.code" placeholder="请输入学校编码"/>
                    </el-form-item>
                    <el-form-item label="学段" prop="grade">
                        <el-select v-model="form.grade" placeholder="请选择学段">
                            <el-option
                                    v-for="dict in rank"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="LOGO" prop="logo">
                        <image-upload v-model="form.logo"/>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="submitForm">确 定</el-button>
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </el-dialog>
</template>

<script setup name="Office">
    import {listOffice, getOffice, delOffice, addOffice, updateOffice} from "@/api/xjc-platform/office"

    const {proxy} = getCurrentInstance()
    const {rank, gk_province} = proxy.useDict('rank', 'gk_province')

    const officeList = ref([])
    const open = ref(false)
    const loading = ref(true)
    const showSearch = ref(true)
    const ids = ref([])
    const single = ref(true)
    const multiple = ref(true)
    const total = ref(0)
    const title = ref("")

    defineExpose({
        show, setIsRadio
    })
    const emit = defineEmits(["onSelected"])

    const shouShowRadio = (row) => {
        return false
    }
    const data = reactive({

        showFlag: false,

        form: {},
        queryParams: {
            pageNum: 1,
            pageSize: 10,
            parentId: null,
            parentIds: null,
            name: null,
            sort: null,
            areaId: null,
            code: null,
            type: null,
            grade: null,
            address: null,
            zipCode: null,
            master: null,
            phone: null,
            fax: null,
            email: null,
            useable: null,
            primaryPerson: null,
            deputyPerson: null,
            remarks: null,
            category: null,
            vip: null,
            rank: null,
            xjc: null,
            xiaoyang: null,
            xiaoyangid: null,
            xyprefix: null,
            logo: null,
            xlpt: null,
            fromtype: null,
            xiaoyangsite: null
        },
        rules: {}
    })

    const {queryParams, form, rules} = toRefs(data)

    const props = defineProps({
        isRadio : Number
    })

    function show() {
        data.showFlag = true
        officeList.value.forEach(function (item,index) {
            item.selected = false
        })
    }

    function setIsRadio(value) {
        data.isRadio = value
    }

    function handleRowChange(row) {
        row.selected = true
        data.showFlag = false
        emit('onSelected', row)
    }

    /** 查询学校列表 */
    function getList() {
        loading.value = true
        listOffice(queryParams.value).then(response => {
            officeList.value = response.rows
            officeList.value.forEach(function (item,index) {
                item.selected = false
            })
            total.value = response.total
            loading.value = false
        })
    }

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

    // 表单重置
    function reset() {
        form.value = {
            id: null,
            parentId: null,
            parentIds: null,
            name: null,
            sort: null,
            areaId: null,
            code: null,
            type: null,
            grade: null,
            address: null,
            zipCode: null,
            master: null,
            phone: null,
            fax: null,
            email: null,
            useable: null,
            primaryPerson: null,
            deputyPerson: null,
            createBy: null,
            createTime: null,
            updateBy: null,
            updateTime: null,
            remarks: null,
            delFlag: null,
            category: null,
            vip: null,
            rank: null,
            xjc: null,
            xiaoyang: null,
            xiaoyangid: null,
            xyprefix: null,
            logo: null,
            xlpt: null,
            fromtype: null,
            xiaoyangsite: null
        }
        proxy.resetForm("officeRef")
    }

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

    /** 重置按钮操作 */
    function resetQuery() {
        proxy.resetForm("queryRef")
        handleQuery()
    }

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

    /** 新增按钮操作 */
    function handleAdd() {
        reset()
        open.value = true
        title.value = "添加学校"
    }

    /** 修改按钮操作 */
    function handleUpdate(row) {
        reset()
        const _id = row.id || ids.value
        getOffice(_id).then(response => {
            form.value = response.data
            open.value = true
            title.value = "修改学校"
        })
    }

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

    /** 删除按钮操作 */
    function handleDelete(row) {
        const _ids = row.id || ids.value
        proxy.$modal.confirm('是否确认删除学校编号为"' + _ids + '"的数据项？').then(function () {
            return delOffice(_ids)
        }).then(() => {
            getList()
            proxy.$modal.msgSuccess("删除成功")
        }).catch(() => {
        })
    }

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

    getList()
</script>
