<!--工情测站-->
<template>
    <div class="comp-container engineer-container">
        <el-tabs
            v-model="activeName"
            type="border-card"
            @tab-click="handleTabClick"
            class="tab-inner"
        >
            <el-tab-pane
                :label="tab.name"
                :name="tab.value"
                v-for="tab in gqsslx"
                :key="tab.value"
                :ref="`comContainer_${tab.value}`"
            >
                <!-- <div class="section-container"> -->
                <div class="search-container" :ref="`searchPanle_${tab.value}`">
                    <el-row class="search-row">
                        <el-tag size="mini" class="label" effect="dark">
                            水库名称
                        </el-tag>
                        <el-select
                            style="width: 98%"
                            size="mini"
                            filterable
                            v-model="params.rscd"
                            clearable
                            placeholder="请选择水库名称"
                            @change="changeSearch"
                        >
                            <el-option
                                v-for="item in rsnms"
                                :key="item.id"
                                :label="item.rsnm"
                                :value="item.rscd"
                            ></el-option>
                        </el-select>
                    </el-row>
                    <el-row class="search-row">
                        <el-tag size="mini" class="label" effect="dark">
                            测点名称
                        </el-tag>
                        <el-input
                            style="width: 98%"
                            clearable
                            v-model="params.mpnm"
                            placeholder="请输入名称"
                            size="mini"
                            @change="changeSearch"
                        ></el-input>
                    </el-row>
                </div>
                <el-table
                    :data="filterData"
                    :height="tableHeight"
                    stripe
                    size="mini"
                    highlight-current-row
                    :cell-class-name="tableRowClassName"
                    @row-click="rowClick"
                >
                    <el-table-column
                        label="测点名称"
                        prop="mpnm"
                        align="center"
                        min-width="100"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="所属水库"
                        prop="rsnm"
                        min-width="100"
                        align="center"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        label="运行状态"
                        prop="wkcn"
                        align="center"
                        show-overflow-tooltip
                    >
                        <template slot-scope="scope">
                            {{ scope.row.wkcn == 0 ? '异常' : '在线' }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column
                        label="测站类型"
                        prop="cdlx"
                        align="center"
                        show-overflow-tooltip
                    ></el-table-column> -->
                </el-table>
                <!-- </div> -->
            </el-tab-pane>
        </el-tabs>
        <EngineerStationModel
            ref="EngineerStationModel"
            v-show="showInfo"
            :currentPoint="currentPoint"
            :stationType="activeName"
        ></EngineerStationModel>
    </div>
</template>

<script>
import EngineerStationModel from './module/EngineerStationModel.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import gisMap from '@/api/frontScreen/gisMap.js'
import {gisCompMixin} from '@/mixins/gisCompMixin.js'
export default {
    name: 'EngineerStation',
    components: {EngineerStationModel},
    mixins: [gisCompMixin],
    data() {
        return {
            tabComp: true,
            // 指定坐标字段
            lg: 'lgtd',
            lt: 'lttd',
            modelName: 'EngineerStationModel',
            // 是否需要区别icon
            typeIcon: true,
            // 不同类型icon的key
            iconTypeKey: 'wkcn',
            activeName: '',
            form: {
                mpnm: '',
            },
            iconUrl0: require('./../../../../assets/img/gis_enginStation_b.png'),
            iconUrl1: require('./../../../../assets/img/gis_enginStation_gary.png'),
            filterData: [],
            params: {
                id: '',
                mpcd: '',
                mpnm: '',
                rscd: '',
                stlc: '',
                sttp: '',
                wkcn: '',
            },
            originData: [
                {
                    mpnm: '测站1',
                    cdlx: '山洪',
                    lgtd: '106.484406',
                    lttd: '29.831273',
                    wkcn: '0',
                    mptp: 4,
                },
                {
                    mpnm: '测站2',
                    cdlx: '山洪',
                    lgtd: '106.367665',
                    lttd: '29.762964',
                    wkcn: '1',
                    mptp: 3,
                },
                {
                    mpnm: '测站3',
                    cdlx: '山洪',
                    lgtd: '106.448409',
                    lttd: '29.68299',
                    wkcn: 'g',
                    mptp: 4,
                },
                {
                    mpnm: '测站4',
                    cdlx: '水文',
                    lgtd: '106.448509',
                    lttd: '29.68239',
                    wkcn: 'g',
                    mptp: 3,
                },
                {
                    mpnm: '测站5',
                    cdlx: '水文',
                    lgtd: '106.434606',
                    lttd: '29.837273',
                    wkcn: 'r',
                    mptp: 3,
                },
                {
                    mpnm: '测站6',
                    cdlx: '水文',
                    lgtd: '106.388665',
                    lttd: '29.767964',
                    wkcn: 'g',
                    mptp: 4,
                },
                {
                    mpnm: '测站7',
                    cdlx: '水文',
                    lgtd: '106.398409',
                    lttd: '29.78399',
                    wkcn: 'r',
                    mptp: 3,
                },
                {
                    mpnm: '测站8',
                    cdlx: '水库',
                    lgtd: '106.598709',
                    lttd: '29.89799',
                    wkcn: 'r',
                    mptp: 4,
                },
                {
                    mpnm: '测站9',
                    cdlx: '水库',
                    lgtd: '106.498709',
                    lttd: '29.69799',
                    wkcn: 'g',
                    mptp: 3,
                },
            ],
            gqsslx: [
                {
                    name: '位移',
                    value: '1',
                },
                // todo 20220607 暂时取消
                // {
                //     name: '渗流',
                //     value: '2',
                // },
                // todo 20220607 暂时取消
                {
                    name: '渗压',
                    value: '3',
                },
            ], //工情设施类型
            rsnms: [],
            currentPoint: {
                mpnm: '',
            },
        }
    },
    created() {
        // this.filterData = this.originData
        this.getFindRiverList()
    },
    mounted() {
        this.$nextTick(async () => {
            // this.gqsslx = dictUtils.getDictItemsFromCache('gqsslx')
            this.activeName = this.gqsslx[0].value
            await this.getFindGqStation()
            this.initMarkers()
        })
   //自动刷新获取数据(1000*60*10=>毫秒*秒*分钟，此时表示为10分钟)
   	this.refreshData=setInterval(()=>{
   	this.getFindGqStation()
   	this.updateMarkers()
   	},1000*60*10);
   },
   //生命周期若已设置定时器，需清空定时器beforeDestroy()
   beforeDestroy(){
   	clearInterval(this.refreshData);
   	this.refreshData=null;
   },
    methods: {
        getFindRiverList() {
            gisMap.geFindAll({}, (res) => {
                if (res.value) {
                    this.rsnms = res.value
                }
            })
        },
        getFindGqStation() {
            return new Promise((resolve, reject) => {
                this.params.sttp = this.activeName
                gisMap.findGqStation(this.params, (res) => {
                    if (res.state) {
                        this.filterData = res.value
                        // this.filterData.forEach(e=>{
                        // 	e.lgtd= '106.367665'
                        // 	e.lttd= '29.762964'
                        // })
                        resolve()
                    }
                    reject()
                })
            })
        },
        async handleTabClick(key) {
            this.calcTableHeight()
            this.map.closePopup()
            await this.getFindGqStation()
            this.updateMarkers()
        },
        drwaMarkers(latlng, name, item) {
            // 图片
            let icon = new L.icon({
                iconUrl: this[`${item.wkcn == 0 ? 'g' : 'r'}IconUrl`],
                iconSize: new L.point(24, 24),
                iconAnchor: new L.point(12, 20),
            })
            // 标点
            const sectionMarker = new L.marker(latlng, {icon})

            // label
            // const label = new T.Label({
            //     text: name,
            //     position: latlng,
            //     offset: new this.T.Point(-9, 18),
            // })
            let infoWin = this.infoWindow()
            this.sectionMarker.addEventListener('click', () => {
                this.currentPoint = item
                infoWin.update()
                this.showInfo = true
                this.sectionMarker.openInfoWindow(infoWin)
            }) // 将标注添加到地图中
            this.map.addLayer(sectionMarker)
            // this.map.addOverLay(label)
        },
        tableRowClassName(row) {
            if (row.row.wkcn == 0) {
                return 'warning-row'
            }
        },
        infoWindow() {
            let sContent = this.$refs.EngineerStationModel.$el
            var infoWin = new L.popup({
                autoPan: true,
                maxHeight: 300,
                minWidth: 440,
                maxWidth: 600,
            }).setContent(sContent)
            return infoWin
        },
        async changeSearch() {
            // this.params.mpnm=this.form.mpnm
            await this.getFindGqStation()
            this.updateMarkers()
        },
        updateMarkers() {
            // 获得新的列表数据后清除旧的标点、重新创建地图标点
            this.searchClear = true
            this.clearMarkers()
            this.searchClear = false
            this.initMarkers()
        },
    },
}
</script>

<style lang="scss" scoped>
@import './../../css/gisComp.scss';
.engineer-container{
}
/deep/ .el-table .warning-row {
		color: #999999 !important;
	
		div {
			color: #999999 !important;
		}
	}
</style>