<template>
    <div class="container">
        <el-form inline size="small">
            <el-form-item label="数据年份:" label-width="80px">
                <el-select v-model="queryForm.year" :popper-append-to-body="false">
                    <el-option v-for="item in yearDict" :key="item.id" :label="item.label" :value="item.value">
                        <span style="float: left">{{ item.label }}</span>
                        <i class="el-icon-delete option_icon" style="color: #F56C6C;"
                            @click.stop="deleteYear(item)"></i>
                        <i class="el-icon-edit-outline option_icon" style="color: #8492a6;"
                            @click.stop="editYearDialog(item)"></i>
                    </el-option>
                </el-select>
                <i class="el-icon-circle-plus-outline form_icon" @click="openYearDialog"></i>
            </el-form-item>
            <el-form-item label="数据类型:" label-width="80px">
                <el-select v-model="queryForm.orgName" :popper-append-to-body="false">
                    <el-option v-for="item in orgDict" :key="item.id" :label="item.label" :value="item.value">
                        <span style="float: left">{{ item.label }}</span>
                        <i class="el-icon-delete option_icon" style="color: #F56C6C;" @click.stop="deleteOrg(item)"></i>
                        <i class="el-icon-edit-outline option_icon" style="color: #8492a6;"
                            @click.stop="editOrgDialog(item)"></i>
                    </el-option>
                </el-select>
                <i class="el-icon-circle-plus-outline form_icon" @click="openOrgDialog"></i>
            </el-form-item>
            <el-form-item label="请选择导入文件:" label-width="120px">
                <el-upload :multiple="false" :auto-upload="false" ref="upload" action="xxx" class="upload"
                    :on-change="fileChange" :http-request="fileUpload">
                    <el-button size="small" plain>选择文件</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button size="small" icon="el-icon-upload" plain>导入数据</el-button>
            </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <el-form inline size="small">
            <el-form-item>
                <el-button style="margin-left:6px;" size="small" icon="el-icon-pie-chart" plain>分析并导出</el-button>
                <el-button size="small" icon="el-icon-set-up" plain>设置机构字典</el-button>
                <el-button size="small" icon="el-icon-refresh" plain>清空数据</el-button>
            </el-form-item>
        </el-form>
        <!-- 年份字典 -->
        <el-dialog :title="yearDialog.title" :visible.sync="yearDialog.show" close-on-click-modal append-to-body
            width="400px">
            <el-form ref="yearForm" size="small" :model="yearDialog.data" label-width="50px">
                <el-form-item required prop="label" label="标签">
                    <el-input v-model="yearDialog.data.label" />
                </el-form-item>
                <el-form-item required prop="value" label="值">
                    <el-input v-model="yearDialog.data.value" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitYear">确 定</el-button>
                <el-button @click="yearDialog.show = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 机构类型字典 -->
        <el-dialog :title="orgDialog.title" :visible.sync="orgDialog.show" close-on-click-modal append-to-body
            width="400px">
            <el-form ref="orgForm" size="small" :model="orgDialog.data" label-width="100px">
                <el-form-item required prop="value" label="机构类型">
                    <el-input v-model="orgDialog.data.value" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitOrg">确 定</el-button>
                <el-button @click="orgDialog.show = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as Emport from "@/api/emport/Emport";
export default {
    name: "Emport",
    data() {
        return {
            // 页面查询字段
            queryForm: {
                year: "",
                orgName: "", //数据类型
                file: null,
            },
            yearDict: [], // 年份字典
            orgDict: [], // 机构类型字典
            yearDialog: { // 年份dialog
                title: '',
                show: false,
                data: {}
            },
            orgDialog: { // 机构类型dialog
                title: '',
                show: false,
                data: {}
            },
        };
    },
    created() {
        this.initYearDict(() => {
            let now = new Date();
            this.queryForm.year = now.getFullYear() + '';
        })
        this.initOrgDict((list) => {
            if (list && list.length > 0) {
                this.queryForm.orgName = list[0].value
            }
        })
    },
    methods: {
        // 初始化年份字典
        initYearDict(callback) {
            Emport.queryDict("year").then((res) => {
                if (res.code === 200) {
                    this.yearDict = res.data;
                    if (callback) callback(res.data)
                }
            });
        },
        // 初始化机构类型字典
        initOrgDict(callback) {
            Emport.queryDict("org").then((res) => {
                if (res.code === 200) {
                    this.orgDict = res.data;
                    if (callback) callback(res.data)
                }
            });
        },
        // 打开年份字典新增框
        openYearDialog() {
            this.yearDialog.title = "新增年份"
            this.yearDialog.data = {
                type: 'year',
                label: '', value: ''
            }
            this.yearDialog.show = true
        },
        // 打开年份字典编辑框
        editYearDialog(data) {
            this.yearDialog.title = "编辑年份"
            this.yearDialog.data = { ...data }
            this.yearDialog.show = true
        },
        // 提交年份dialog
        submitYear() {
            this.$refs.yearForm.validate(valid => {
                if (valid) {
                    if (this.yearDialog.title === '新增年份') {
                        Emport.addDict(this.yearDialog.data)
                            .then(res => {
                                this.yearDialog.show = false
                                this.initYearDict()
                            })
                    } else {
                        Emport.updateDict(this.yearDialog.data)
                            .then(res => {
                                this.yearDialog.show = false
                                this.initYearDict()
                            })
                    }
                }
            })
        },
        // 删除年份字典
        deleteYear({ id, label }) {
            this.$confirm(`是否删除数据项 ${label} ?`, '删除',
                {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            Emport.deleteDict(id).then(res => {
                                done()
                                this.initYearDict()
                            })
                        } else {
                            done()
                        }
                    }
                }
            )
        },
        // 打开机构类型字典新增框
        openOrgDialog() {
            this.orgDialog.title = "新增机构类型"
            this.orgDialog.data = { type: 'org', value: '' }
            this.orgDialog.show = true
        },
        // 打开机构类型字典编辑框
        editOrgDialog(data) {
            this.orgDialog.title = "编辑机构类型"
            this.orgDialog.data = { ...data }
            this.orgDialog.show = true
        },
        // 提交机构类型dialog
        submitOrg() {
            this.$refs.orgForm.validate(valid => {
                if (valid) {
                    if (this.orgDialog.title === '新增机构类型') {
                        Emport.addDict({
                            ...this.orgDialog.data,
                            label: this.orgDialog.data.value
                        })
                            .then(res => {
                                this.orgDialog.show = false
                                this.initOrgDict()
                            })
                    } else {
                        Emport.updateDict({
                            ...this.orgDialog.data,
                            label: this.orgDialog.data.value
                        })
                            .then(res => {
                                this.orgDialog.show = false
                                this.initOrgDict()
                            })
                    }
                }
            })
        },
        // 删除机构类型字典
        deleteOrg({ id, label }) {
            this.$confirm(`是否删除数据项 ${label} ?`, '删除',
                {
                    type: 'warning',
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            Emport.deleteDict(id).then(res => {
                                done()
                                this.initOrgDict()
                            })
                        } else {
                            done()
                        }
                    }
                }
            )
        },
        // 文件列表发生变化
        fileChange() {

        },
        // 文件上传方法
        fileUpload() {

        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    .form_icon {
        cursor: pointer;
        color: rgb(170, 173, 179);
        font-size: 18px;
        margin-left: 5px;
        padding-top: 5px;
    }

    .option_icon {
        cursor: pointer;
        font-size: 14px;
        float: right;
        margin-left: 3px;
        margin-top: 10px;
    }

    ::v-deep {
        .upload {
            display: flex;
            align-items: center;
        }

        .el-upload-list__item:first-child {
            margin-top: 0;
        }

        .el-upload-list {
            border: 1px solid #dcdfe6;
            min-width: 100px;
            min-height: 30px;
            border-radius: 2px;
        }

        .el-divider{
            margin: -10px 0 10px 0;
        }

    }
}
</style>
