<template>
    <div class="province">
        <div class="province-box" ref="main" id="main">

            <div class="top" :style="`height:${height.top}px`">
                <div class="top-search">
                    <el-input size="mini" v-model="search.word" placeholder="输入代码/名称/拼音" style="width:300px" clearable>
                    </el-input>
                    <el-button size="mini" type="primary" style="margin-left:10px" icon="el-icon-search" title="搜索"
                        @click="loadProvince">搜索
                    </el-button>
                </div>
                <div class="top-button">
                    <el-button-group>
                        <el-button size="mini" type="primary" icon="el-icon-plus" title="新增" v-if="hasPower('新增')"
                            @click="addClick">
                        </el-button>
                        <el-button size="mini" type="warning" icon="el-icon-edit" title="编辑" v-if="hasPower('编辑')"
                            @click="editClick">
                        </el-button>
                        <el-button size="mini" type="danger" icon="el-icon-delete" title="删除" v-if="hasPower('删除')"
                            @click="removeClick">
                        </el-button>
                    </el-button-group>
                </div>
            </div>

            <div class="center" :style="`height:${height.center}px`">
                <el-table :data="tableData" border style="width: 100%" :height="`${height.center}`" size="mini"
                    @selection-change="selectTableDataChange">
                    <el-table-column type="selection" label="" align="center" width="40">
                    </el-table-column>
                    <el-table-column type="index" label="#" align="center" width="55">
                    </el-table-column>
                    <el-table-column prop="code" label="代码" align="center">
                    </el-table-column>
                    <el-table-column prop="fullname" label="全称" align="center">
                    </el-table-column>
                    <el-table-column prop="simplename" label="简称" align="center">
                    </el-table-column>
                </el-table>
            </div>

            <div class="bottom" :style="`height:${height.bottom}px`">
                <el-pagination @size-change="sizeChange" @current-change="indexChange" :current-page="page.index"
                    :page-sizes="page.sizes" :page-size="page.size" layout="total, slot, prev, pager, next, jumper"
                    :total="page.total">
                    <el-select size="mini" v-model="page.size" @change="sizeChange">
                        <el-option v-for="(item, index) in page.sizes" :key="index" :label="item===0?'全部':`${item}条/页`"
                            :value="item"></el-option>
                    </el-select>
                </el-pagination>
            </div>
        </div>

        <el-dialog :title="dialog.mode" :visible.sync="dialog.visible" center>
            <el-form label-position="right" label-width="80px" :model="dialog.data" :rules="dialog.rules" ref="form"
                :show-message="false" size="mini">
                <el-form-item label="代码" prop="code">
                    <el-input v-model="dialog.data.code" placeholder="请输入代码" :disabled="dialog.mode==='编辑'"></el-input>
                </el-form-item>
                <el-form-item label="全称" prop="fullname">
                    <el-input v-model="dialog.data.fullname" placeholder="请输入全称"></el-input>
                </el-form-item>
                <el-form-item label="简称" prop="simplename">
                    <el-input v-model="dialog.data.simplename" placeholder="请输入简称"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog.visible = false">取 消</el-button>
                <el-button type="primary" @click="okClick">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { ProvinceAPI } from '@/apis/ProvinceAPI'
@Component({
    components: {}
})
export default class Province extends Vue {
    // 表格数据
    tableData: any[] = []

    // 已选择的表格数据
    selectedTableData: any[] = []

    // 搜索参数
    search: any = {
        word: ''
    }

    // 分页参数
    page: { index: number; size: number; total: number; sizes: number[] } = {
        size: 20,
        index: 1,
        total: 400,
        sizes: [10, 20, 30, 40, 50, 0]
    }

    // dialog参数
    dialog: any = {
        mode: '新增',
        visible: false,
        data: {},
        rules: {
            contractCode: [{ required: true }],
            code: [{ required: true }]
        }
    }

    // dialog 确定按钮
    okClick() {
        const form = this.$refs.form as any
        form.validate((valid: any) => {
            if (valid) {
                if (this.dialog.mode === '新增') {
                    // 调用新增接口
                    ProvinceAPI.add(this.dialog.data, (res) => {
                        this.dialog.visible = false
                        this.$message.success('新增成功')
                        this.loadProvince()
                    })
                }

                if (this.dialog.mode === '编辑') {
                    // 调用编辑接口
                    ProvinceAPI.update(this.dialog.data, (res) => {
                        this.dialog.visible = false
                        this.$message.success('修改成功')
                        this.loadProvince()
                    })
                }
            } else {
                return false
            }
        })
    }

    // 新增
    addClick() {
        this.dialog.mode = '新增'
        this.dialog.data = {}
        this.dialog.visible = true
    }

    // 编辑
    editClick() {
        if (this.selectedTableData.length === 0) {
            this.$message.info('请选中要修改的数据')
            return
        }

        if (this.selectedTableData.length > 1) {
            this.$message.info('同时只能修改一条数据')
            return
        }

        this.dialog.mode = '编辑'
        this.dialog.data = JSON.parse(JSON.stringify(this.selectedTableData[0]))
        this.dialog.visible = true
    }

    // 删除
    removeClick() {
        if (this.selectedTableData.length === 0) {
            this.$message.info('请选中要删除的数据')
            return
        }

        const ids: any[] = []
        this.selectedTableData.forEach((i) => {
            ids.push(i.id)
        })
        // 调用删除接口
    }

    // 选择表格数据
    selectTableDataChange(value: any[]) {
        this.selectedTableData = value
    }

    sizeChange() {
        this.loadProvince()
    }

    indexChange(val: any) {
        this.page.index = val
        this.loadProvince()
    }

    // 加载省份
    loadProvince() {
        if (this.page.size === 0) {
            ProvinceAPI.getAll(this.search, (res) => {
                this.tableData = res.data
                this.page.total = res.data.length
            })
            return
        }
        this.search.index = this.page.index
        this.search.size = this.page.size
        ProvinceAPI.getPage(this.search, (res) => {
            this.tableData = res.data
            this.page.total = res.total
        })
    }

    // 权限名称
    powerName = ''

    // 是否有权限
    hasPower(name: string) {
        return true
    }

    height: { top: number; center: number; bottom: number } = {
        top: 60,
        center: 0,
        bottom: 30
    }

    elementResizeDetectorMaker = require('element-resize-detector')

    mounted() {
        this.$nextTick(() => {
            this.setTableHeight()
        })

        const erd = this.elementResizeDetectorMaker()
        erd.listenTo(document.getElementById('main'), () => {
            this.setTableHeight()
        })

        this.loadProvince()
    }

    // 设置表的高度
    setTableHeight() {
        const main = this.$refs.main as any
        this.height.center =
            main.clientHeight - this.height.top - this.height.bottom
    }
}
</script>

<style lang="scss" scoped>
.province {
    width: 100%;
    height: 100%;

    box-sizing: border-box;
    padding: 2px 5px 2px 5px;

    .province-box {
        width: 100%;
        height: 100%;

        .top {
            width: 100%;

            .top-search {
                height: 50%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
            }

            .top-button {
                height: 50%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
            }
        }

        .center {
            width: 100%;
        }

        .bottom {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>