<template>
  <div class="wrapper">
    <div ref="wrapRef" :style="{ height, width }"> </div>
    <div class="right-wrap">
      <BasicTable @register="registerTable" @rowClick="deviceRowClick">
        <template #deviceState="{ record }">
          <Tag
            :color="
              record.deviceState == DeviceState.INACTIVE
                ? 'warning'
                : record.deviceState == DeviceState.ONLINE
                ? 'success'
                : 'error'
            "
            class="ml-2"
          >
            {{
              record.deviceState == DeviceState.INACTIVE
                ? '待激活'
                : record.deviceState == DeviceState.ONLINE
                ? '在线'
                : '离线'
            }}
          </Tag>
        </template>
      </BasicTable>
    </div>
    <a-button type="primary" @click="openHistoryModal">打开弹窗</a-button>
    <BasicModal
      @register="registerModal"
      title="历史数据"
      width="70%"
      :footer="null"
      @cancel="cancelHistoryModal"
    >
      <BasicForm @register="registerForm" />
      <div ref="chartRef" :style="{ height: '300px', width }"></div>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, nextTick, unref, onMounted, Ref } from 'vue';
  import { useScript } from '/@/hooks/web/useScript';
  import { formSchema, columns } from './config.data';
  import { BasicTable, useTable } from '/@/components/Table';
  import { devicePage } from '/@/api/alarm/contact/alarmContact';
  import { Tag } from 'ant-design-vue';
  import { DeviceState } from '/@/api/device/model/deviceModel';
  import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
  import { useModal, BasicModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { schemas } from './config.data';

  import { useECharts } from '/@/hooks/web/useECharts';
  import { getLineData } from './data';

  export default defineComponent({
    name: 'BaiduMap',
    components: {
      BasicTable,
      Tag,
      BasicModal,
      BasicForm,
    },
    props: {
      width: {
        type: String,
        default: '100%',
      },
      height: {
        type: String,
        default: 'calc(100vh - 78px)',
      },
    },
    setup() {
      const wrapRef = ref<HTMLDivElement | null>(null);
      const { toPromise } = useScript({ src: BAI_DU_MAP_URL });

      async function initMap() {
        await toPromise();
        await nextTick();
        const wrapEl = unref(wrapRef);
        const BMap = (window as any).BMap;
        if (!wrapEl) return;
        const map = new BMap.Map(wrapEl);
        const point = new BMap.Point(104.04666605565338, 30.543516387560476);

        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);
      }

      const [registerTable] = useTable({
        api: devicePage,
        columns,
        formConfig: {
          schemas: formSchema,
          labelAlign: 'left',
        },
        showIndexColumn: false,
        useSearchForm: true,
      });
      // 点击表格某一行触发
      const deviceRowClick = (record) => {
        const BMap = (window as any).BMap;
        const wrapEl = unref(wrapRef);
        const map = new BMap.Map(wrapEl);
        if (record.deviceInfo.address) {
          const { name, organizationDTO, updateTime, deviceState, deviceProfile } = record;
          const { longitude, latitude, address } = record.deviceInfo;
          const point = new BMap.Point(longitude, latitude);
          let options = {
            width: 300, // 信息窗口宽度
            height: 220, // 信息窗口高度
          };
          map.centerAndZoom(point, 15);
          map.enableScrollWheelZoom(true);
          // 创建信息窗口对象
          let infoWindow = new BMap.InfoWindow(
            `
          <div style="display:flex;justify-content:space-between; margin:20px 0px;">
            <div style="font-size:16px;font-weight:bold">${name}</div>
            ${
              deviceState === 'INACTIVE'
                ? '<div style="display:flex;align-items:center"><img style="width:15px;height:15px" src="/src/assets/images/djh.png">待激活</div>'
                : deviceState === 'ONLINE'
                ? '<div style="display:flex;align-items:center"><img style="width:15px;height:15px" src="/src/assets/images/online1.png">在线</div>'
                : '<div style="display:flex;align-items:center"><img style="width:15px;height:15px" src="/src/assets/images/lx1.png">离线</div>'
            }
          </div>
          <div>所属组织：${organizationDTO.name}</div>
          <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
          <div style="margin-top:6px;">设备位置：${address}</div>
          <div style="margin-top:6px;">下线时间：${updateTime}</div>
          <div style="display:flex;justify-content:space-between; margin-top:10px">
            <button style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
            <button style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">报警记录</button>
            <button  onclick="historyClick()"style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button>
          </div>
          `,
            options
          );
          map.openInfoWindow(infoWindow, map.getCenter());
          let preMarker = null;
          const rivet =
            deviceState === 'INACTIVE'
              ? '/src/assets/images/djx.png'
              : deviceState === 'ONLINE'
              ? '/src/assets/images/zx.png'
              : '/src/assets/images/lx.png';
          let myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));
          let marker = new BMap.Marker(point, { icon: myIcon });
          if (marker) {
            map.removeOverlay(preMarker);
          }
          map.addOverlay(marker);
        } else {
          const point = new BMap.Point(106.63028229687498, 36.06735821600903);
          let options = {
            width: 100, // 信息窗口宽度
            height: 100, // 信息窗口高度
            title: '提示', // 信息窗口标题
          };
          map.centerAndZoom(point, 5);
          map.enableScrollWheelZoom(true);
          let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象
          map.openInfoWindow(infoWindow, map.getCenter());
        }

        console.log(record);
      };

      const [registerModal, { openModal }] = useModal();
      const [registerForm, { resetFields }] = useForm({
        labelWidth: 120,
        schemas,
      });

      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
      const { lineData, category } = getLineData;
      const openHistoryModal = () => {
        openModal(true);
        setOptions({
          backgroundColor: '#0f375f',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true,
                backgroundColor: '#333',
              },
            },
          },
          xAxis: {
            data: category,
            axisLine: {
              lineStyle: {
                color: '#ccc',
              },
            },
          },
          yAxis: {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#ccc',
              },
            },
          },
          series: [
            {
              name: '当日数据',
              type: 'line',
              smooth: true,
              showAllSymbol: 'auto',
              symbol: 'emptyCircle',
              symbolSize: 15,
              data: lineData,
            },
            {
              name: 'line',
              type: 'bar',
              barGap: '-100%',
              barWidth: 10,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(20,200,212,0.5)' },
                  { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
                  { offset: 1, color: 'rgba(20,200,212,0)' },
                ]),
              },
              z: -12,
              data: lineData,
            },
          ],
        });
      };
      const cancelHistoryModal = () => {
        resetFields();
      };
      onMounted(() => {
        initMap();
      });

      return {
        wrapRef,
        registerTable,
        deviceRowClick,
        DeviceState,
        registerModal,
        registerForm,
        chartRef,
        openHistoryModal,
        cancelHistoryModal,
      };
    },
  });
</script>

<style scoped>
  .wrapper {
    position: relative;
  }
  .active {
    background-color: #fff;
  }
  .right-wrap {
    padding-top: 10px;
    width: 22%;
    height: 95%;
    position: absolute;
    right: 5%;
    top: 3%;
    background-color: #fff;
  }
</style>