<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" v-if="stationInfo.coverPhotosFileList.length > 0">
      <ImagePreview :src="item.url" :width="100" :height="100" v-for="item in stationInfo.coverPhotosFileList" :key="item.id" />
    </div>
  </div>
</template>
<script setup>
import { getStationDetailExtend } from '@/api/dataAnalysis/syntherticData';

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;
  });
};

onMounted(() => {
  getDetailData();
});
</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%;
      color: #c6c6c6;
      &: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: #d8ddef;
          max-width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .xcImage {
    .el-image {
      width: 150px;
      margin-right: 10px;
    }
  }
  .title {
    font-weight: bold;
    color: #d8ddef;
    margin: 10px 0px;
  }
  #baseEchart {
    width: 98%;
    height: 300px;
  }
}
</style>