<template>
  <div>
    <a-modal draggable="true" class="tf_model" v-model:visible="visible" width="1452px" title="监测过程曲线" @ok="handleOk" :maskClosable="false">
      <ul class="modle_qx">
        <li>
          <div id="chart4" style="width: 100%; height: 100%"></div>
        </li>
      </ul>
    </a-modal>
  </div>
</template>
<script>
import { defineComponent, getCurrentInstance, ref, watch } from 'vue';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
import draggable from 'draggable';
export default defineComponent({
  name: 'Curve',
  components: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const echarts = proxy.$echarts;
    const createChart = (id, data) => {
      console.log('data.series:', data.series);
      const chart = echarts.init(document.getElementById(id));
      chart.setOption({
        backgroundColor: 'rgba(8, 39, 55, 1)',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        legend: {
          data: [data.series[0].name, data.series[1].name],
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontStyle: 'normal',
            fontWeight: 'bold',
          },
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            name: '位移mm',
            type: 'time',
            boundaryGap: false,
            show: true,
            axisLine: {
              //坐标轴轴线设置
              show: true, //是否显示坐标轴轴线
              symbol: ['none', 'arrow'], //坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])
              symbolSize: [8, 8], //箭头大小        ([宽度,高度])
              symbolOffset: [0, 7], //箭头偏移
              lineStyle: {
                //坐标轴的线
                color: 'green', //线的颜色
                width: 3, //线的粗细程度    (用数字表示)
                type: 'solid', //线的类型        (可选solid  dotted  dashed)
                opacity: 1, //线的透明度        (用0~1的小数表示)
              },
            },
          },
        ],
        yAxis: [
          {
            name: '深度mm',
            type: 'value',
            show: true,
            axisLine: {
              //坐标轴轴线设置
              show: true, //是否显示坐标轴轴线
              symbol: ['none', 'arrow'], //坐标轴箭头        (可选'none'   'arrow'   ['none','arrow'])
              symbolSize: [8, 8], //箭头大小        ([宽度,高度])
              symbolOffset: [0, 7], //箭头偏移
              lineStyle: {
                //坐标轴的线
                color: 'green', //线的颜色
                width: 3, //线的粗细程度    (用数字表示)
                type: 'solid', //线的类型        (可选solid  dotted  dashed)
                opacity: 1, //线的透明度        (用0~1的小数表示)
              },
            },
          },
        ],
        series: [
          {
            name: data.series[0].name,
            symbol: 'none',
            type: 'line',
            stack: 'Total',
            // areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            smooth: true,
            data: data.series[0].data,
          },
          {
            name: data.series[1].name,
            symbol: 'none',
            type: 'line',
            stack: 'Total',
            // areaStyle: {},
            emphasis: {
              focus: 'series',
            },
            smooth: true,
            data: data.series[1].data,
          },
        ],
      });
      return chart;
    };

    const visible = ref(false);
    window.openModel = function (e) {
      console.log('打开弹窗？');
      console.log('chart:', e);
      getMonitorChart(e);
      if (map.popup) {
        map.popup.remove();
      }
    };
    const monitorDevicesStore = useMonitorDevicesStore();
    function getMonitorChart(code) {
      monitorDevicesStore
        .LiGongMonitorChart({
          sensorInnerCode: code,
          sTime: '2023-04-15 00:00:00',
          eTime: '2023-04-19 00:00:00',
        })
        .then((res) => {
          console.log('曲线：', res);
          if (res) {
            document.getElementById('popupClear').click();
            visible.value = true;
            setTimeout(() => createChart('chart4', res.result), 0);
          }
        });
    }
    watch(
      () => visible,
      (value) => {
        if (value) {
          setTimeout(() => {
            const modalWrapper = document.querySelector('.dialogClass');
            // drag(modalWrapper);
            const draggableInstance = new draggable(modalWrapper, {});
          }, 2000);
        }
      }
    );

    return {
      visible,
    };
  },

  mounted() {
    //   window.openModel = (e) => {
    //     this.$options.setup().getMonitorChart(e);
    //   };
  },
});
</script>
<style lang="less" scoped>
.tf_model {
  height: 664px;
}
.modle_qx li:last-child {
  width: 100%;
  height: 664px;
  overflow: hidden;
}
</style>
