<template>
  <!-- 综合分析右侧列表 -->
  <div class="equipRight">
    <!-- 基本信息 -->
    <div class="basePart">
      <p>
        <span>站点名称</span><span class="value">{{ baseInfo.name }}</span>
      </p>
      <p>
        <span>编号</span><span class="value">{{ baseInfo.name }}</span>
      </p>
      <p>
        <span>地址</span><span class="value">{{ baseInfo.name }}</span>
      </p>
      <p>
        <span>类型</span><span class="value">{{ baseInfo.name }}</span>
      </p>
      <p>
        <span>安装时间</span><span class="value">{{ baseInfo.name }}</span>
      </p>
      <p>
        <span>建设方式</span><span class="value">{{ baseInfo.name }}</span>
      </p>
      <p>
        <span>定位</span><span class="value">{{ baseInfo.name }}</span>
      </p>
      <p>
        <span>高程</span><span class="value">{{ baseInfo.name }}</span>
      </p>
      <p>
        <span>关联对象</span><span class="value">{{ baseInfo.name }}</span>
      </p>
      <p><span class="check" @click="checkMore(baseInfo)">查看更多</span><span class="value">&nbsp;</span></p>
      <el-table v-loading="tableLoading" :data="tableData" border>
        <el-table-column prop="typeName" label="站点编号"></el-table-column>
        <el-table-column prop="typeName" label="观测时间"></el-table-column>
        <el-table-column prop="typeName" label="水位"></el-table-column>
        <el-table-column prop="typeName" label="安装高度"></el-table-column>
        <el-table-column prop="typeName" label="维护状态"></el-table-column>
        <el-table-column prop="typeName" label="传输状态"></el-table-column>
        <el-table-column prop="typeName" label="报警状态"></el-table-column>
        <el-table-column prop="typeName" label="对比分析">
          <template #default="scope">
            <img src="@/assets/icons/monitor/dbfx_btn.png" alt="对比分析" class="dbfxImg" @click="checkAnalysis(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 统计分析 -->
    <div class="contAnaly">
      <!-- 日期搜索 -->
      <div class="search">
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
        <el-button type="primary" @click="searchData">查询</el-button>
      </div>
      <!-- tab内容切换 -->
      <div class="tabsBtn">
        <el-button
          :type="tabIndex == item.key ? 'primary' : ''"
          v-for="item in tabsArr"
          :key="item.key"
          @click="changeTab(item.key)"
        >
          {{ item.name }}
        </el-button>
        <div class="tabsCont">
          <!-- 数据统计 -->
          <DataStats v-if="tabIndex == 1"></DataStats>
          <!-- 报表分析 -->
          <ReportAnaly v-if="tabIndex == 2"></ReportAnaly>
          <!-- 趋势分析 -->
          <TrendAnaly v-if="tabIndex == 3"></TrendAnaly>
          <!-- 报警分析 -->
          <AlarmAnaly v-if="tabIndex == 4"></AlarmAnaly>
          <!-- 运维分析 -->
          <OperationAnaly v-if="tabIndex == 5"></OperationAnaly>
          <!-- 数据分析 -->
          <DataAnaly v-if="tabIndex == 6"></DataAnaly>
        </div>
      </div>
    </div>
    <!-- 查看更多弹窗 -->
    <el-dialog v-model="dialogShow" title="站点基本信息" width="800px" append-to-body class="equipmentDialog">
      <StationBase v-if="dialogShow"></StationBase>
    </el-dialog>
  </div>
</template>
<script setup name="equipRight">
import {} from '@/api/dataAnalysis/syntherticData';
import DataStats from './dataStats.vue'; //数据统计
import ReportAnaly from './reportAnaly.vue'; //报表分析
import TrendAnaly from './trendAnaly.vue'; //趋势分析
import AlarmAnaly from './alarmAnaly.vue'; //报警分析
import OperationAnaly from './operationAnaly.vue'; //运维分析
import DataAnaly from './dataAnaly.vue'; //数据分析
import StationBase from './stationBase.vue'; //基本信息查看更多

const props = defineProps({
  positionKey: String,
});
const { proxy } = getCurrentInstance();
const emit = defineEmits(['getDialogData']);
// 变量声明
const baseInfo = ref({
  name: '野芷湖水位监测点',
});
const tabsArr = ref([
  { name: '数据统计', key: '1' },
  { name: '报表分析', key: '2' },
  { name: '趋势统计', key: '3' },
  { name: '报警分析', key: '4' },
  { name: '运维分析', key: '5' },
  { name: '数据分析', key: '6' },
]);
const tabIndex = ref('1'); //默认选中
const tableLoading = ref(false);
const tableData = ref([{ typeName: '22222' }]);
const dialogShow = ref(false);
const dateRange = ref([proxy.moment().subtract(30, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')]);

// 方法定义
// 搜索数据
function searchData() {
  console.log(dateRange.value);
}
// 对比分析,给父组件传值
function checkAnalysis(row) {
  console.log('给父组件传值--', row);
  emit('getDialogData', {
    name: '站点对比分析',
    type: 'dialogDbfx',
    obj: row,
  });
}
// 查看更多
function checkMore(obj) {
  dialogShow.value = true;
  console.log(obj);
}
// tab切换
function changeTab(key) {
  tabIndex.value = key;
}

// 初始化
onMounted(() => {
  console.log('positionKey', props.positionKey);
  changeTab('1'); //默认加载数据统计
});
watch(
  () => props.positionKey,
  value => console.log('positionKey', value)
);
// 页面销毁
onBeforeUnmount(() => {});
</script>
<style lang="scss">
.equipmentDialog {
  .el-dialog__header {
    background: #0f69ff;
    padding-bottom: 20px;
    margin-right: 0px;
  }
  .el-dialog__title {
    color: #fff !important;
  }
  .el-dialog__close {
    color: #fff !important;
  }
}
.equipRight {
  width: 100%;
  .basePart {
    display: flex;
    flex-wrap: wrap;
    height: 180px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
    p {
      width: 20%;
      display: flex;
      justify-content: space-between;
      color: #666;
      margin-bottom: 2px;
      padding: 0 30px;
      .value {
        font-weight: bold;
        color: #333333;
      }
      .check {
        color: #3782ff;
        cursor: pointer;
      }
    }
    .el-table {
      margin: 10px;
      .dbfxImg {
        cursor: pointer;
      }
    }
  }
  .contAnaly {
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
    border-radius: 6px;
    padding: 20px;
    margin-top: 10px;
    .search {
      .el-button {
        margin-left: 15px;
        margin-top: -6px;
      }
    }
    .tabsBtn {
      margin-top: 20px;
      .el-button {
        border-radius: 15px;
        margin-right: 15px;
      }
      .tabsCont {
        border: 1px solid blue;
        margin-top: 10px;
        height: calc(100vh - 520px);
      }
    }
  }
}
</style>