<template>
  <!-- 基本信息查看更多 -->
  <div class="stationBase">
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td rowspan="3" class="Lable1">基础信息</td>
        <td>
          <p>
            <span class="Lable2">站点名称</span><span class="value Lable3">{{ stationInfo.stName }}</span>
          </p>
        </td>
        <td>
          <p>
            <span class="Lable2">站点编号</span><span class="value Lable3">{{ stationInfo.stCode }}</span>
          </p>
        </td>
        <td>
          <p>
            <span class="Lable2">安装地址</span><span class="value Lable3" :title="stationInfo.address">{{ stationInfo.address }}</span>
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p>
            <span class="Lable2">安装类型</span>
            <span class="value Lable3">
              {{
                stationInfo.monitorTargetType == 'river'
                  ? '河道'
                  : stationInfo.monitorTargetType == 'lake'
                  ? '湖泊'
                  : stationInfo.monitorTargetType == 'pipeline'
                  ? '管网'
                  : stationInfo.monitorTargetType == 'channel'
                  ? '港渠'
                  : stationInfo.monitorTargetType == 'typical_land'
                  ? '典型地块'
                  : '--'
              }}
            </span>
          </p>
        </td>
        <td>
          <p>
            <span class="Lable2">关联对象</span><span class="value Lable3">{{ stationInfo.belongName || '--' }}</span>
          </p>
        </td>
        <td>
          <p>
            <span class="Lable2">安装时间</span><span class="value Lable3">{{ stationInfo.installDate }}</span>
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p>
            <span class="Lable2">经纬度</span><span class="value Lable3" :title="stationInfo.lonLat">{{ stationInfo.lonLat }}</span>
          </p>
        </td>
        <td>
          <p>
            <span class="Lable2">坐标系</span>
            <span class="value Lable3">
              {{
                stationInfo.elevationSystem == 'yellow_sea'
                  ? '黄海'
                  : stationInfo.elevationSystem == '85'
                  ? '85国标'
                  : stationInfo.elevationSystem == 'wusong'
                  ? '吴淞'
                  : '--'
              }}
            </span>
          </p>
        </td>
        <td>
          <p>
            <span class="Lable2">所属水系</span><span class="value Lable3">{{ stationInfo.drainageSystem }}</span>
          </p>
        </td>
      </tr>
      <tr>
        <td rowspan="2" class="Lable1">监测配置</td>
        <td>
          <p>
            <span class="Lable2">监测高程</span>
            <span class="value Lable3">
              {{
                stationInfo.elevationSystem == 'yellow_sea'
                  ? '黄海'
                  : stationInfo.elevationSystem == '85'
                  ? '85国标'
                  : stationInfo.elevationSystem == 'wusong'
                  ? '吴淞'
                  : '--'
              }}
            </span>
          </p>
        </td>
        <td>
          <p>
            <span class="Lable2">安装高度</span><span class="value Lable3">{{ stationInfo.installHeight }}</span>
          </p>
        </td>
        <td>
          <p>
            <span class="Lable2">监测指标</span>
            <span class="value Lable3" :title="extendInfo.monitorPropertyNames">{{ extendInfo.monitorPropertyNames }}</span>
          </p>
        </td>
      </tr>
      <tr>
        <td>
          <p>
            <span class="Lable2">预警公式</span><span class="value Lable3">{{ extendInfo.earlyWarnFormulaName || '--' }}</span>
          </p>
        </td>
        <td>
          <p>
            <span class="Lable2">告警公式</span><span class="value Lable3">{{ extendInfo.warnFormulaName || '--' }}</span>
          </p>
        </td>
        <td>
          <p>
            <span class="Lable2">数据完整率</span><span class="value Lable3">{{ stationInfo.requireDataCompleteRate || '--' }}</span>
          </p>
        </td>
      </tr>
      <tr>
        <td rowspan="2" class="Lable1">运维相关</td>
        <td>
          <p>
            <span class="Lable2">截止时间</span><span class="value Lable3">{{ stationInfo.contractDate }}</span>
          </p>
        </td>
        <td>
          <p>
            <span class="Lable2">责任人</span><span class="value Lable3">{{ stationInfo.chargeUser }}</span>
          </p>
        </td>
        <td>
          <p><span class="Lable2">运维单位</span><span class="value Lable3">武汉新烽光电</span></p>
        </td>
      </tr>
      <tr>
        <td>
          <p><span class="Lable2">年故障数</span><span class="value Lable3">--</span></p>
        </td>
        <td>
          <p><span class="Lable2">年运维数</span><span class="value Lable3">--</span></p>
        </td>
        <td>
          <p><span class="Lable2">联系人</span><span class="value Lable3">朱方仁 18907171008</span></p>
        </td>
      </tr>
    </table>
    <div class="BottomBox">
      <div class="BottomBox1">
        <div class="title">现场照片</div>
        <div class="xcImage">
          <el-image
            style="width: 30%"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :src="testImg"
            fit="cover"
            :preview-src-list="[testImg]"
          ></el-image>
          <el-image
            style="width: 30%"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :src="testImg"
            fit="cover"
            :preview-src-list="[testImg]"
          ></el-image>
          <el-image
            style="width: 30%"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :src="testImg"
            fit="cover"
            :preview-src-list="[testImg]"
          ></el-image>
        </div>
      </div>
      <div class="BottomBox2">
        <div class="title">运维事件</div>
        <div id="baseEchart"></div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getStationDetailExtend, getStationDetail } from '@/api/sponeScreen/syntherticData';
import testImg from '@/assets/images/nowTest.jpg';

const props = defineProps({
  stationCode: String,
  dataID: String,
});
const { proxy } = getCurrentInstance();
const myChart = shallowRef(null);
const extendInfo = ref({});
const stationInfo = ref({});
// 获取详情数据 扩展
const getDetailData = () => {
  getStationDetailExtend(props.stationCode).then(res => {
    extendInfo.value = res.data;
  });
};
// 获取数据
const getList = () => {
  getStationDetail(props.dataID).then(res => {
    stationInfo.value = res.data;
  });
};
//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
function intChart() {
  if (!!myChart.value) {
    myChart.value.dispose();
  }
  myChart.value = proxy.echarts.init(document.getElementById('baseEchart'), 'dark');
  // 绘制图表
  myChart.value.setOption({
    grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '15%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
    },
    legend: {
      data: ['巡查次数', '维修次数'],
      top: 0,
    },
    xAxis: {
      type: 'category',
      data: ['2023-04-10', '2023-05-10', '2023-06-10'],
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      axisLabel: {
        color: '#545E75', //字体颜色
        fontSize: 16, //字体大小
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true, // 显示网格线
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    series: [
      {
        name: '巡查次数',
        type: 'bar',
        barWidth: 20,
        data: [9, 7, 9],
      },
      {
        name: '维修次数',
        type: 'bar',
        barWidth: 20,
        data: [3, 6, 8],
      },
    ],
  });
}
onMounted(() => {
  getDetailData();
  getList();
  setTimeout(() => {
    intChart();
  });
  window.addEventListener('resize', resizeTheChart);
});
</script>
<style lang="scss" scoped>
.stationBase {
  width: 100%;
  padding-bottom: 20px;
  height: 599px;
  overflow-y: auto;
  table {
    width: 98%;
    td {
      text-align: center;
      width: 30%;
      p {
        display: flex;
        justify-content: space-around;
        padding: 0;
        margin: 0;
        height: 40px;
        line-height: 40px;
        width: 100%;
      }
    }
    .Lable1 {
      background: #002d6b;
      border: 1px solid #114f89;
      color: #a4bfd9;
    }
    .Lable2 {
      background: #032350;
      border: 1px solid #114f89;
      color: #a4bfd9;
      width: 120px;
    }
    .Lable3 {
      background: #021534;
      border: 1px solid #114f89;
      color: #3cbdff;
      flex: 1;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 270px;
    }
  }
  .xcImage {
    .el-image {
      width: 150px;
      margin-right: 10px;
    }
  }

  .BottomBox {
    width: 100%;
    height: 290px;
    padding: 10px;
    box-sizing: border-box;
    .title {
      font-weight: bold;
      color: rgb(255, 255, 255);
      margin-bottom: 10px;
      position: relative;
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
      padding-left: 40px;
      &::after {
        content: '';
        position: absolute;
        width: 2px;
        height: 12px;
        background: #908536;
        border-radius: 1px 1px 1px 1px;
        left: 20px;
        top: 8px;
      }
    }
    .BottomBox1 {
      height: 290px;
      width: 50%;
      float: left;
    }
    .BottomBox2 {
      height: 290px;
      width: 50%;
      float: left;

      #baseEchart {
        width: 98%;
        height: 250px;
      }
    }
  }
}
</style>