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

const props = defineProps({
  stationInfo: Object,
});
const { proxy } = getCurrentInstance();
const myChart = shallowRef(null);
const extendInfo = ref({});
// 获取详情数据 扩展
const getDetailData = id => {
  getStationDetailExtend(props.stationInfo.stCode).then(res => {
    extendInfo.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'));
  // 绘制图表
  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();
  setTimeout(() => {
    intChart();
  });
  window.addEventListener('resize', resizeTheChart);
});
</script>
<style lang="scss">
.stationBase {
  width: 100%;
  padding-bottom: 50px;
  max-height: 80vh;
  overflow-y: auto;
  table {
    width: 98%;
    tr {
      td:nth-of-type(1) {
        border-left: 1px solid #d8ddef;
      }
    }
    tr:last-child {
      td {
        border-bottom: 1px solid #d8ddef;
      }
    }
    td {
      border-top: 1px solid #d8ddef;
      border-right: 1px solid #d8ddef;
      text-align: center;
      width: 30%;
      &:nth-of-type(1) {
        width: 100px;
      }
      p {
        display: flex;
        justify-content: space-around;
        margin: 8px 0px;
        span:nth-of-type(1) {
          display: inline-block;
          width: 75px;
        }
        .value {
          flex: 1;
          display: inline-block;
          font-weight: bold;
          color: #000;
          max-width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .xcImage {
    .el-image {
      width: 150px;
      margin-right: 10px;
    }
  }
  .title {
    font-weight: bold;
    color: #000;
    margin: 10px 0px;
  }
  #baseEchart {
    width: 98%;
    height: 300px;
  }
}
</style>