<template>
  <!-- 综合分析左侧列表 -->
  <div class="equipLeft">
    <div class="equipTotal">
      <div class="title"><img src="@/assets/icons/monitor/jcsb_icon.png" alt="监测设备" />监测设备</div>
      <div class="total">
        <p>水文</p>
        <p><img src="@/assets/icons/monitor/online_icon.png" alt="在线" />442</p>
        <p><img src="@/assets/icons/monitor/outline_icon.png" alt="离线" />12</p>
        <p><img src="@/assets/icons/monitor/error_icon.png" alt="故障" />2</p>
      </div>
      <div class="total">
        <p>水质</p>
        <p><img src="@/assets/icons/monitor/online_icon.png" alt="在线" />442</p>
        <p><img src="@/assets/icons/monitor/outline_icon.png" alt="离线" />12</p>
        <p><img src="@/assets/icons/monitor/error_icon.png" alt="故障" />2</p>
      </div>
    </div>
    <div class="search">
      <el-select v-model="stationCode" filterable placeholder="选择监测站点" @change="searchData">
        <el-option v-for="item in stationList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <!-- 站点列表 -->
    <div class="station">
      <div class="part" v-for="(item, index) in 20" :key="index">
        <div class="title">
          <span>野芷湖水位监测点{{ item }}</span>
          <img src="@/assets/icons/monitor/video_btn.png" title="站点视频" @click="checkVideo(item)" />
        </div>
        <div class="cont">
          <p>
            <span class="status">站点状态</span>
            <span class="success">离线</span>
            <img src="@/assets/icons/monitor/yw_btn.png" title="运维派单" @click="checkOrder(item)" />
          </p>
          <p>
            <span class="status">数据状态</span>
            <span class="fail">异常</span>
            <img src="@/assets/icons/monitor/sj_btn.png" title="故障及离线设备分析" @click="checkFault(item)" />
            <img src="@/assets/icons/monitor/sj_btn.png" title="数据异常分析" @click="checkError(item)" />
          </p>
          <p>
            <span style="margin-right: 15px">最后通讯</span>
            <span style="font-weight: bold">2023-04-09 13:23:40</span>
          </p>
        </div>
      </div>
      <!-- 查看更多 -->
      <div class="checkMore">
        <p>滚动查看更多</p>
        <el-icon><DArrowRight /></el-icon>
      </div>
    </div>
  </div>
</template>
<script setup name="equipLeft">
import {} from '@/api/dataAnalysis/syntherticData';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['getDialogData']);
const props = defineProps({
  positionKey: String,
});
// 变量声明
const stationCode = ref('');
const stationList = ref([
  { value: '1', label: '站点1' },
  { value: '2', label: '站点2' },
]);

// 方法定义
// 按名称搜索
function searchData() {
  console.log(stationCode.value);
}
// 故障及离线设备分析
function checkFault(row) {
  console.log('给父组件传值--', row);
  emit('getDialogData', {
    name: '故障及离线设备分析',
    type: 'dialogFault',
    obj: row,
  });
}
// 数据异常分析
function checkError(row) {
  console.log('给父组件传值--', row);
  emit('getDialogData', {
    name: '数据异常分析',
    type: 'dialogSjyc',
    obj: row,
  });
}
// 站点视频
function checkVideo(row) {
  console.log('给父组件传值--', row);
  emit('getDialogData', {
    name: '视频监控点',
    type: 'dialogVideo',
    obj: row,
  });
}
// 运维派单
function checkOrder(row) {
  console.log('给父组件传值--', row);
  emit('getDialogData', {
    name: '运维派单',
    type: 'dialogOrder',
    obj: row,
  });
}
// 初始化
onMounted(() => {
  console.log('positionKey', props.positionKey);
});
watch(
  () => props.positionKey,
  value => console.log('positionKey', value)
);
// 页面销毁
onBeforeUnmount(() => {});
</script>
<style lang="scss" scoped>
.equipLeft {
  padding: 10px;
  position: relative;
  .equipTotal {
    height: 140px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
    border-radius: 6px;
    padding: 10px;
    .title {
      display: flex;
      align-items: center;
      img {
        margin-right: 10px;
      }
    }
    .total {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 16px;
      height: 50px;
      img {
        position: relative;
        top: 4px;
        margin-right: 4px;
      }
    }
  }
  .search {
    margin: 10px auto;
    .el-select {
      width: 100%;
    }
  }
  .station {
    height: calc(100vh - 410px);
    overflow: auto;

    .part {
      height: 154px;
      background: #ffffff;
      box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 10px;
      img {
        float: right;
        cursor: pointer;
      }
      .title {
        font-weight: bold;
        color: #3782ff;
        font-size: 16px;
      }
      .cont {
        p {
          font-weight: 500;
          color: #666666;
          font-size: 14px;
          height: 20px;
          .status {
            margin-right: 30%;
          }
          .success {
            color: #24de8d;
            font-weight: bold;
          }
          .fail {
            color: #f85050;
            font-weight: bold;
          }
          .outline {
            color: #999999;
            font-weight: bold;
          }
        }
      }
    }
    .checkMore {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #666;
      background-image: linear-gradient(rgba(238, 241, 251, 0.1), rgba(238, 241, 251, 0));
      z-index: 99;
      box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
      border-radius: 6px;
      p {
        height: 10px;
        margin-top: -10px;
      }
      .el-icon {
        transform: rotate(90deg);
      }
    }
  }
}
</style>