<template>
    <div v-loading="loading" style="position:relative;">
        <!-- 咸宁市地图 -->
        <map-chart ref="mapChart" :tableData="tableData" :centerData="centerData" />
        <!-- 咸宁市各县市明细 -->
        <div style="position:absolute;left:0;top:0;width:30%;height:200px;">
            <el-table border :data="tableData" max-height="550px">
                <el-table-column prop="unitName" label="地区" align="center"></el-table-column>
                <el-table-column prop="sum" label="档案总数(件)" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="showEdit(scope.row)">修改</el-button>
                        <el-button :disabled="scope.row.isOpne==1" type="text" size="mini" @click="startJump(scope.row)">进入</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 修改 -->
        <edit-params :visible="isShowEdit" :form="form" @clickSubmit="clickSubmit" @cancel="cancel"></edit-params>
    </div>
</template>

<script>
import mapChart from "./components/map.vue"
import {selectAll,update} from "@/api/units.js";
import EditParams from "./components/edit.vue"
import {
      message,
      loading,
      loadingClose
    } from "@/utils/common";
export default{
    data(){
        return {
            loading:false,
            centerData:[], // 地图数据
            form:{
                jumpUrl:'',
                fileUrl:'',
                isOpne:'',
                id:''
            },
            isShowEdit:false,
            loading:false,
            tableData:[],

        }
    },
    components:{
        mapChart,
        EditParams
    },
    methods:{
        showEdit(row){
            this.form = {
                jumpUrl:row.jumpUrl,
                filesUrl:row.filesUrl,
                isOpne:Number(row.isOpne),
                id:row.id
            }
            this.isShowEdit = true;
        },
        clickSubmit(params){
            update({...params}).then((res)=>{
                if(res.code == 100){
                    message('warning',res.msg,3000);
                    this.initData();
                }
            }).finally(()=>{
                this.isShowEdit = false;
            })
        },
        startJump(row){
            if(row.jumpUrl == '' || row.jumpUrl == null){
                message('warning','跳转地址为空，请点击修改按钮',3000);
                return;
            }
            window.open(row.jumpUrl,'_blank');
        },
        initData(){
            this.centerData  = [];
            this.loading = true;
            selectAll().then(res=>{
                if(res.code == 100){
                    this.tableData = res.body.list;
                    this.tableData.forEach((item)=>{
                        this.centerData.push({name:item.unitName,value:item.sum})
                    })
                }
            }).finally(()=>{
                this.loading = false;
                this.$refs.mapChart.initMap();
            })
        },
        cancel(){
            this.isShowEdit = false;
        }
    },
    created() {
        this.initData();
    },
}
</script>