<template>
    <div id="pipe-map">
        <div style="height: 320px; width:auto">
            <ol-map style="height: 400px;" :map="map" :layers="layers" :dragbox="true" @clear-select="clearSelect" @done-select="doneSelect" :show-cur-geo="true">
            </ol-map>
        </div>
        <div class="pipe-style">
            <table class="{{classname}}">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="row in model">
                    <td>{{row.attributes.OLDNO}}</td>
                    <td>{{row.attributes.DRAWNAME}}</td>
                    <td>
                        <button type="button" name="button" class="btn btn-link" @click="hilight(row)">选择</button>
                        <button type="button" name="button" class="btn btn-link" @click="bind(row)">绑定</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>

    import { HttpResetClass } from 'vue-client'
    import Overlay from 'ol/overlay'

    export default {
        title: 'PipeMap',
        props: {
            classname: {
                type: String,
                default: 'table table-bordered'
            },
          user:{
                type:Object
          }
        },
        data () {
            return {
                map: {
                    center: [3206.764198839668,3155.45597165823],
                    curz: 2,
                    minz: 2,
                    maxz: 9,
                    mapp: 'EPSG:2381',
                    viewp: 'EPSG:2381',
                    ext: [-8254.48211669922, -9234.77789306641, 18015.3302001953, 13400.870605468801],
                },
                layers: [
                    // {
                    //     lt: 'xyz',
                    //     url: 'http://192.168.2.54:6080/arcgis/rest/services/基础地形图/MapServer/tile/{z}/{y}/{x}',
                    //     ext: [-7831.703308105469, -9041.772583007812, 17935.82958984375, 12823.33740234375],
                    //     ori: [-5123200.0, 1.00021E7],
                    //     res: [
                    //         31.750063500127002,
                    //         15.875031750063501,
                    //         7.9375158750317505,
                    //         3.9687579375158752,
                    //         2.116670900008467,
                    //         1.0583354500042335,
                    //         0.5291677250021167,
                    //         0.26458386250105836,
                    //         0.13229193125052918,
                    //         0.05291677250021167,
                    //     ],
                    //     tileSize: 256,
                    // },
                    {
                        lt: 'arcTile',
                        url: 'http://192.168.2.54:6080/arcgis/rest/services/基础地形图/MapServer',
                    },
                    {
                        lt: 'arcTile',
                        url: 'http://192.168.2.54:6080/arcgis/rest/services/管网/MapServer',
                    },
                ],
                timeoutHandle: null,
                overlay: null,
                msg: null,
                model:[],
                curPipe: null,
                f_plumb_id:''
            }
        },

        ready () {
            console.log('pipe-map ready')
          console.log('this.curPipe'+this.curPipe)
          console.log('window.curPipe'+ window.curPipe)
          console.log('jdjjdjdjdjd:' + JSON.stringify(this.user) )
            this.curPipe = window.curPipe
        },

        methods: {
          doneSelect: function (ext) {
            console.log(ext)
            let url = `http://192.168.2.54:6080/arcgis/rest/services/%E7%AE%A1%E7%BD%91/MapServer/2/query?f=json&where=SUBTYPE=30005001&Value=30005001&returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=%7B%22`
            url += `rings%22%3A%5B%5B%5B${ext[0]}%2C${ext[1]}%5D%2C%5B${ext[2]}%2C${ext[1]}%5D%2C%5B${ext[2]}%2C${ext[3]}%5D%2C%5B${ext[0]}%2C${ext[3]}%5D%2C%5B${ext[0]}%2C${ext[1]}%5D%5D%5D%2C%22`
            url += `spatialReference%22%3A%7B%22wkid%22%3A2381%2C%22latestWkid%22%3A2381%7D%7D&geometryType=esriGeometryPolygon&inSR=2381&outFields=*&outSR=2381`
            let http = new HttpResetClass()
            http.load('GET', url, {data: {}}, {warnMsg: null,resolveMsg: null, rejectMsg: '查询失败！'}).then((res) => {
              console.log('地图查询结果'+ res.data.features)
              let fs = res.data.features
              this.$set('model', fs)
            })
          },

            hilightBonded: function (sid) {
                // console.log('查询绑定的引入管sid=' + sid)
                // this.$broadcast('poi-plumb', [4682.068786621094,-1338.3131103515625], 'haha')
                let url = `http://192.168.2.54:6080/arcgis/rest/services/%E7%AE%A1%E7%BD%91/MapServer/2/query?where=SID%3D%27${sid}%27&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&f=pjson`
                let http = new HttpResetClass()
                http.load('GET', url, {data: {}}, {warnMsg: null,resolveMsg: null, rejectMsg: '查询失败！'}).then((res) => {
                    this.hilight(res.data.features[0], res.data.features[0].attributes.SID)
                })
            },

            clearSelect: function (evt) {
                this.$set('model', [])
                this.$broadcast('removeOverlays')
            },

            hilight: function(row, label) {
                console.log(JSON.stringify(row))
                this.$broadcast('poi-plumb', [row.geometry.x, row.geometry.y], row.attributes.OLDNO)
                console.log(row.geometry.x)
                console.log(row.geometry.y)
                console.log(label)
            },

            bind: function(row) {
              console.log('jdjjdjdjdjd:' + JSON.stringify(this.user) + " " + row.attributes.OLDNO)
              console.log('jdjjdjdjdjd:' + this.user.f_card_id + " " + row.attributes.OLDNO)
              this.f_plumb_id = row.attributes.OLDNO
              HostApp.__this__ = this
              this.logicWithHint('AndroidUpdatePlumbId', {
                userInfo:this.user,
                f_plumb_id:row.attributes.OLDNO
              }, 'javascript:HostApp.__this__.bindCallBack()', 1)
                //
                // let r = this.$androidUtil.bzLogic('updatePlumbId',{f_card_id:this.user.f_card_id})
                // let r = HostApp.bindUserAndPlumb(window.cardId, row.attributes.SID)
            },
          bindCallBack(jo){
            if (jo.state == 'ok') {
              let result = JSON.parse(jo.result)
              if (result.code === 200) {
                this.$showMessage(`立管挂接成功！`)
                this.$dispatch('setPlumbId',this.f_plumb_id)
              } else {
                this.$showMessage('立管挂接失败！')
              }
            } else {
              this.$showMessage('服务器内部错误！')
            }
          },
          logicWithHint(logic, data, callback, backresult) {
            HostApp.logicWithHint({
              // logic别名，key必须为logic
              'logic': logic,
              // 回调执行方法名，key必须为callback
              'callback': callback,
              // logic执行需要的业务参数
              'data': data,
              // 固定key，代表是否将logic执行结果作为参数传入回调方法，1代表true，0代表false，
              // 执行回调方法传入key为backresult
              // 如需额外拼接参数，写在logic返回值的params，例如xxlogic返回:{"params": "success"}
              'backresult': backresult
            })
          },
        },
    }
</script>

<style scoped>
    #pipe-map {
        display: flex;
        flex-direction: column;
    }

    #pipe-map div {
        height: auto;
    }

    .pipe-style {
        flex: 1;
        overflow: auto;
    }
</style>
