<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>
    <BasicModal
      @register="registerModal"
      title="历史数据"
      width="70%"
      :minHeight="400"
      :footer="null"
      @cancel="cancelHistoryModal"
      :canFullscreen="false"
    >
      <BasicForm @register="registerForm" />
      <div v-show="isNull" ref="chartRef" :style="{ height: '600px', width }"></div>
      <Empty v-show="!isNull" />
    </BasicModal>
    <DeviceDetailDrawer @register="registerDetailDrawer" />
  </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, Empty } 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 {
    getDeviceHistoryInfo,
    getDeviceDataKeys,
    getDeviceActiveTime,
  } from '/@/api/alarm/position';
  import { useDrawer } from '/@/components/Drawer';
  import DeviceDetailDrawer from '/@/views/device/list/cpns/modal/DeviceDetailDrawer.vue';
  import moment from 'moment';
  // 导入一些静态图片,避免打包时不能正确解析
  import djx from '/@/assets/images/djx.png';
  import zx from '/@/assets/images/zx.png';
  import lx from '/@/assets/images/lx.png';
  import djh from '/@/assets/images/djh.png';
  import online from '/@/assets/images/online1.png';
  import lx1 from '/@/assets/images/lx1.png';
  export default defineComponent({
    name: 'BaiduMap',
    components: {
      BasicTable,
      Tag,
      Empty,
      BasicModal,
      BasicForm,
      DeviceDetailDrawer,
    },
    props: {
      width: {
        type: String,
        default: '100%',
      },
      height: {
        type: String,
        default: 'calc(100vh - 78px)',
      },
    },
    setup() {
      let entityId = '';
      let keys = [];
      let globalRecord: any = {};
      const wrapRef = ref<HTMLDivElement | null>(null);
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
      const isNull = ref(true);
      const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
      const [registerDetailDrawer, { openDrawer }] = useDrawer();
      const [registerModal, { openModal }] = useModal();
      const [
        registerForm,
        { resetFields, getFieldsValue, setFieldsValue, validate, updateSchema },
      ] = useForm({
        labelWidth: 120,
        schemas,
        async submitFunc() {
          // 表单验证
          await validate();
          let { endTs, interval, agg } = getFieldsValue();
          if (!endTs || !keys.length) return;
          // 数据收集
          const dataArray: any[] = [];
          const startTs = Date.now() - endTs;
          endTs = Date.now();
          // 发送请求
          const res = await getDeviceHistoryInfo({
            entityId,
            keys: keys.join(),
            startTs,
            endTs,
            interval,
            agg,
          });
          // 判断数据对象是否为空
          if (!Object.keys(res).length) {
            isNull.value = false;
            return;
          } else {
            isNull.value = true;
          }
          // 处理数据
          for (const key in res) {
            for (const item1 of res[key]) {
              let { ts, value } = item1;
              const time = moment(ts).format('YYYY-MM-DD HH:mm:ss');
              value = Number(value).toFixed(2);
              dataArray.push([time, value, key]);
            }
          }
          const series: any = keys.map((item) => {
            return {
              name: item,
              type: 'line',
              stack: 'Total',
              data: dataArray.filter((item1) => item1[2] === item),
            };
          });
          // 设置数据
          setOptions({
            tooltip: {
              trigger: 'axis',
            },
            legend: {
              data: keys,
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true,
            },
            dataZoom: [
              {
                type: 'inside',
                start: 0,
                end: 50,
              },
              {
                start: 20,
                end: 40,
              },
            ],
            xAxis: {
              type: 'time',
              boundaryGap: false,
            },
            yAxis: {
              type: 'value',
              boundaryGap: [0, '100%'],
            },
            series,
          });
        },
      });
      const [registerTable] = useTable({
        api: devicePage,
        columns,
        formConfig: {
          schemas: formSchema,
          labelAlign: 'left',
        },
        showIndexColumn: false,
        useSearchForm: true,
        pagination: {
          showSizeChanger: false,
        },
      });

      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 deviceRowClick = async (record) => {
        entityId = record.tbDeviceId;
        globalRecord = record;
        const BMap = (window as any).BMap;
        const wrapEl = unref(wrapRef);
        const map = new BMap.Map(wrapEl);
        if (record.deviceInfo.address) {
          keys = await getDeviceDataKeys(entityId);
          const { name, organizationDTO, deviceState, deviceProfile } = record;
          const { longitude, latitude, address } = record.deviceInfo;
          const point = new BMap.Point(longitude, latitude);
          let options = {
            width: 300, // 信息窗口宽度
            height: 230, // 信息窗口高度
          };
          map.centerAndZoom(point, 15);
          map.enableScrollWheelZoom(true);
          // 创建信息窗口对象
          const res = await getDeviceActiveTime(entityId);

          let { value: activeStatus, lastUpdateTs } = res[0];
          lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss');
          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="${djh}">待激活</div>`
                  : deviceState === 'ONLINE'
                  ? `<div style="display:flex;align-items:center"><img style="width:15px;height:15px" src="${online}">在线</div>`
                  : `<div style="display:flex;align-items:center"><img style="width:15px;height:15px" src="${lx1}">离线</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;">${activeStatus ? '在' : '离'}线时间：${lastUpdateTs}</div>
            <div style="display:flex;justify-content:end; margin-top:10px">
              <button onclick="openDeviceInfoDrawer()" style="margin-right:10px;color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
              <button onclick="openHistoryModal()" 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' ? djx : deviceState === 'ONLINE' ? zx : lx;
          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());
        }
      };

      // 设备信息
      const openDeviceInfoDrawer = async () => {
        const { id, tbDeviceId } = globalRecord;
        openDrawer(true, {
          id,
          tbDeviceId,
        });
      };
      const openHistoryModal = async () => {
        openModal(true);
        // 收集参数
        const dataArray: any[] = [];
        const startTs = Date.now() - 86400000; //最近一天
        const endTs = Date.now();
        // 发送请求
        if (!keys.length) {
          isNull.value = false;
          return;
        } else {
          isNull.value = true;
        }
        const res = await getDeviceHistoryInfo({
          entityId,
          keys: keys.join(),
          startTs,
          endTs,
          interval: 7200000, //间隔两小时
          agg: 'AVG',
        });
        // 判断对象是否为空
        if (!Object.keys(res).length) {
          isNull.value = false;
          return;
        } else {
          isNull.value = true;
        }
        // 处理数据
        for (const key in res) {
          for (const item1 of res[key]) {
            let { ts, value } = item1;
            const time = moment(ts).format('YYYY-MM-DD HH:mm:ss');
            value = Number(value).toFixed(2);
            dataArray.push([time, value, key]);
          }
        }
        const series: any = keys.map((item) => {
          return {
            name: item,
            type: 'line',
            stack: 'Total',
            data: dataArray.filter((item1) => item1[2] === item),
          };
        });
        console.log(dataArray);
        // 设置数据;
        setOptions({
          tooltip: {
            trigger: 'axis',
          },
          legend: {
            data: keys,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 50,
            },
            {
              start: 0,
              end: 20,
            },
          ],
          xAxis: {
            type: 'time',
            boundaryGap: false,
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
          },
          series,
        });
        setFieldsValue({
          endTs: 86400000,
          interval: 7200000,
          agg: 'AVG',
        });
      };
      const cancelHistoryModal = () => {
        resetFields();
        updateSchema({
          field: 'interval',
          componentProps: {
            placeholder: '请选择分组间隔',
            options: [
              {
                label: '5分钟',
                value: 300000,
              },
              {
                label: '10分钟',
                value: 600000,
              },
              {
                label: '15分钟',
                value: 900000,
              },
              {
                label: '30分钟',
                value: 1800000,
              },
              {
                label: '1小时',
                value: 3600000,
              },
              {
                label: '2小时',
                value: 7200000,
              },
            ],
          },
        });
        setOptions({});
      };
      onMounted(() => {
        initMap();
        (window as any).openDeviceInfoDrawer = openDeviceInfoDrawer;
        (window as any).openHistoryModal = openHistoryModal;
      });
      return {
        wrapRef,
        registerTable,
        deviceRowClick,
        DeviceState,
        registerModal,
        registerForm,
        chartRef,
        isNull,
        cancelHistoryModal,
        registerDetailDrawer,
      };
    },
  });
</script>
<style scoped>
  .wrapper {
    position: relative;
  }
  .right-wrap {
    padding-top: 10px;
    width: 22%;
    height: 95%;
    position: absolute;
    right: 5%;
    top: 3%;
    background-color: #fff;
  }
</style>