<template>
  <div class="history-container">
    <div class="search-container">
      <ul class="search-ctn">
        <li>
          <div class="label">报警类型:</div>
          <div class="input-rule">
            <t-select v-model="queryCondition.type" placeholder="请输入...">
              <t-option>落水告警</t-option>
              <t-option>手动告警</t-option>
            </t-select>
          </div>
        </li>
        <li>
          <div class="label">报警人:</div>
          <div class="input-rule">
            <t-select v-model="queryCondition.alarmPerson" placeholder="请输入...">
              <t-option>张三</t-option>
              <t-option>李四</t-option>
            </t-select>
          </div>
        </li>
        <li>
          <div class="input-rule">
            <t-date-picker v-model="queryCondition.rangeDate" limit-date="10" type="dateRange" style="width:250px" placeholder="选择时间段" @date-change="onChange"></t-date-picker>
          </div>
        </li>
        <div class="btns">
          <t-button color="secondary" class="reset-btn" @click="onReset">重置</t-button>
          <t-button color="success" icon="search-outline" @click="onSearch">查询</t-button>
          <t-button color="secondary" icon="upload-outline" @click="toExport">导出至Excel</t-button>
        </div>
      </ul>
    </div>
    <div>
      <t-table :data="table.data">
        <t-table-column type="selection" width="70"></t-table-column>
        <t-table-column width="100" prop="name" label="报警人"></t-table-column>
        <t-table-column width="100" prop="number" label="终端编号"></t-table-column>
        <t-table-column width="100" prop="type" label="报警类型"></t-table-column>
        <t-table-column width="200" prop="address" label="报警位置"></t-table-column>
        <t-table-column width="150" prop="alarmTime" label="报警时间"></t-table-column>
        <t-table-column width="100" prop="rescuePerson" label="救援人"></t-table-column>
        <t-table-column width="150" prop="rescueTime" label="救援时间"></t-table-column>
        <t-table-column width="150" prop="rescueDuration" label="救援时长"></t-table-column>
        <t-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <a href="javascript:void(0)" size="sm" @click="rescuePlayback(scope.row)">救援回放</a>
            <a href="javascript:void(0)" size="sm" @click="deleteHistory(scope.row)">删除</a>
          </template>
        </t-table-column>
      </t-table>
      <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
               :page-size.sync="table.pager.size"
               :sizer-range="[10,20,50]"
               class="px-24 pt-16 float-right"
               show-elevator show-sizer
               @on-size-change="onSizeChange"
               @on-change="onPagerChange">
      </t-pager>
    </div>
    <t-modal :visibled.sync="modal" :footer-visibled="false" class="modal" title="救援回放" width="1200px">
      <div class="operate">
        <div class="label">速度:</div>
        <div class="input-rule">
          <t-select v-model="speed">
            <t-option value="4">4X</t-option>
            <t-option value="2">2X</t-option>
            <t-option value="1">1X</t-option>
            <t-option value="0.5">0.5X</t-option>
            <t-option value="0.25">0.25X</t-option>
          </t-select>
        </div>
        <div class="playback-btn">
          <t-button color="secondary" icon="video-outline" class="reset-btn" @click="onReset">回放</t-button>
        </div>
      </div>
      <div id="playback">

      </div>
    </t-modal>
  </div>
</template>
<script>
import './history.scss'
export default {
  data() {
    return {
      table: {
        data: [
          {
            name: '王小明',
            number: 'ZDBH0001',
            type: '落水告警',
            address: '113.445294°E 23.157791°N',
            alarmTime: '2020.7.10 08:21:43',
            rescuePerson: '海事局A',
            rescueTime: '2020.7.3 11:22:16',
            rescueDuration: '10小时39分钟'
          },
          {
            name: '王小明',
            number: 'ZDBH0001',
            type: '落水告警',
            address: '113.445294°E 23.157791°N',
            alarmTime: '2020.7.10 08:21:43',
            rescuePerson: '海事局A',
            rescueTime: '2020.7.3 11:22:16',
            rescueDuration: '10小时39分钟'
          },
          {
            name: '王小明',
            number: 'ZDBH0001',
            type: '落水告警',
            address: '113.445294°E 23.157791°N',
            alarmTime: '2020.7.10 08:21:43',
            rescuePerson: '海事局A',
            rescueTime: '2020.7.3 11:22:16',
            rescueDuration: '10小时39分钟'
          },
          {
            name: '王小明',
            number: 'ZDBH0001',
            type: '落水告警',
            address: '113.445294°E 23.157791°N',
            alarmTime: '2020.7.10 08:21:43',
            rescuePerson: '海事局A',
            rescueTime: '2020.7.3 11:22:16',
            rescueDuration: '10小时39分钟'
          },
          {
            name: '王小明',
            number: 'ZDBH0001',
            type: '落水告警',
            address: '113.445294°E 23.157791°N',
            alarmTime: '2020.7.10 08:21:43',
            rescuePerson: '海事局A',
            rescueTime: '2020.7.3 11:22:16',
            rescueDuration: '10小时39分钟'
          },
          {
            name: '王小明',
            number: 'ZDBH0001',
            type: '落水告警',
            address: '113.445294°E 23.157791°N',
            alarmTime: '2020.7.10 08:21:43',
            rescuePerson: '海事局A',
            rescueTime: '2020.7.3 11:22:16',
            rescueDuration: '10小时39分钟'
          },
          {
            name: '王小明',
            number: 'ZDBH0001',
            type: '落水告警',
            address: '113.445294°E 23.157791°N',
            alarmTime: '2020.7.10 08:21:43',
            rescuePerson: '海事局A',
            rescueTime: '2020.7.3 11:22:16',
            rescueDuration: '10小时39分钟'
          },
          {
            name: '王小明',
            number: 'ZDBH0001',
            type: '落水告警',
            address: '113.445294°E 23.157791°N',
            alarmTime: '2020.7.10 08:21:43',
            rescuePerson: '海事局A',
            rescueTime: '2020.7.3 11:22:16',
            rescueDuration: '10小时39分钟'
          },
          {
            name: '王小明',
            number: 'ZDBH0001',
            type: '落水告警',
            address: '113.445294°E 23.157791°N',
            alarmTime: '2020.7.10 08:21:43',
            rescuePerson: '海事局A',
            rescueTime: '2020.7.3 11:22:16',
            rescueDuration: '10小时39分钟'
          },
          {
            name: '王小明',
            number: 'ZDBH0001',
            type: '落水告警',
            address: '113.445294°E 23.157791°N',
            alarmTime: '2020.7.10 08:21:43',
            rescuePerson: '海事局A',
            rescueTime: '2020.7.3 11:22:16',
            rescueDuration: '10小时39分钟'
          }
        ],
        pager: {
          currentPage: 1,
          size: 10,
          total: 100
        }
      },
      queryCondition: {
        type: '',
        alarmPerson: '',
        rangeDate: []
      },
      modal: false,
      speed: '1',
      map: null,
      alarmPoint: null,
      rescuePoint: null,
      polyline: null
    }
  },
  mounted() {
    this.map = new Ai.Map('playback', {
      ak: 'MTYwMTEMTAwMU1UWXdNVEV3TXpRek16STVOU014TnpRdw__',
      center: [39.915599, 116.406568],
      zoom: 5
    })
    var maplayer = null
    maplayer = Ai.TileLayer('http://192.168.74.189:9999/tdtvector')
    this.map.addLayer(maplayer)
    var la = Ai.WMTSLayer('http://192.168.74.216:5071/gisserver/dzht:dzht/wmts')
    this.map.addLayer(la)
  },
  methods: {
    onChange(value) {
      console.log('date change:' + value)
    },
    onReset() {
      this.queryCondition = {
        type: '',
        alarmPerson: '',
        rangeDate: []
      }
    },
    onSearch() {

    },
    toExport() {

    },
    onPagerChange(page) {
      console.log(page)
    },
    onSizeChange(number) {
      console.log(number, this.table.pager.currentPage)
    },
    rescuePlayback(row) {
      this.modal = true
      if (this.map.hasLayer(this.alarmPoint)) {
        this.map.removeLayer(this.alarmPoint)
      }
      if (this.map.hasLayer(this.rescuePoint)) {
        this.map.removeLayer(this.rescuePoint)
      }
      if (this.map.hasLayer(this.polyline)) {
        this.map.removeLayer(this.polyline)
      }
      var icon = Ai.Icon({
      // 设置图标URL路径
        iconUrl: '/static/images/worker(1).png',
        // 设置图标大小
        iconSize: [20, 20],
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      })
      this.alarmPoint = Ai.Point([29.86089241772908, 122.09930419921876], {icon: icon})
      this.alarmPoint.on('click', (e) => {
        console.log(e)
        var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>张三</div><div class="hand-alarm">救援人员</div></div><div class="middle"><div class="row">' +
            '<div>终端编号</div>' +
            '<div>ZDBH0001</div>' +
          '</div>' +
          '<div class="row">' +
            '<div>最新定位时间</div>' +
            '<div>2020.08.13 08:24:32</div>' +
          '</div></div></div>'
        var popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: false})
        // 设置弹出框弹出位置
          .setLatLng({lat: 29.86089241772908, lng: 122.09930419921876})
        // 设置弹出框弹出内容
          .setContent(content)
          .openOn(this.map)
      })
      this.map.addLayer(this.alarmPoint)
      this.rescuePoint = Ai.Point([29.388158098102554, 122.45361328125], {icon: Ai.Icon({
      // 设置图标URL路径
        iconUrl: '/static/images/worker.png',
        // 设置图标大小
        iconSize: [20, 20],
        // 设置点对象和图标的相对偏移量
        iconAnchor: [0, 0]
      })})
      this.rescuePoint.on('click', (e) => {
        console.log(e)
        var content = '<div class="tips-item"><div class="top"><div class="user-pic"><t-icon icon="user-outline"></t-icon></div><div>张三</div><div class="alarm">报警人员</div></div><div class="middle"><div class="row">' +
            '<div>终端编号</div>' +
            '<div>ZDBH0001</div>' +
          '</div>' +
          '<div class="row">' +
            '<div>最新定位时间</div>' +
            '<div>2020.08.13 08:24:32</div>' +
          '</div></div></div>'
        var popup = Ai.Popup({minWidth: 300, offset: [0, -10], autoClose: false})
        // 设置弹出框弹出位置
          .setLatLng({lat: 29.388158098102554, lng: 122.45361328125})
        // 设置弹出框弹出内容
          .setContent(content)
          .openOn(this.map)
      })
      this.map.addLayer(this.rescuePoint)
      var lineWktstr = 'LINESTRING ( 122.09930419921876 29.86089241772908,122.18582153320314 29.6913335169976,122.21878051757814 29.42494595179543,122.45361328125 29.388158098102554)'
      this.polyline = Ai.Polyline(lineWktstr, {color: 'red'})
      this.map.addLayer(this.polyline)
      this.map.on('click', function(evt) {
        var lat = evt.latlng.lat // 点击地图时的纬度
        var lng = evt.latlng.lng // 点击地图时的经度
        console.log(lng, lat)
      })
    },
    deleteHistory(row) {
      console.log(1)
      this.$Confirm.confirm({
        title: '确认要删除改历史报警吗？',
        content: '删除后不可恢复',
        ok: () => {
          console.log('点击了确定')
        },
        cancel: () => {
          console.log('点击了取消')
        }
      })
    }
  }
}
</script>