<!--
 * @Author: zjz
 * @Date: 2023-06-15 14:15:52
 * @LastEditors: zjz
 * @LastEditTime: 2023-06-25 21:16:20
 * @FilePath: \yx-big-screen\src\views\map\dialog\GeologyDetail.vue
 * @Description: 地灾详情
-->
<template>
  <div class="geology-detail">
    <div class="header-content">
      <div class="btn-group">
        <template v-for="menu in btnMenus" :key="menu.id">
          <div class="btn" :class="{ active: activeId === menu.id }" @click="changeActive(menu.id)">{{ menu.name }}</div>
        </template>
      </div>
    </div>
    <div class="content">
      <component :is="activeName" :geologicalInfo="geologicalInfo" @setMonitorNum="setMonitorNum" />
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted, ref, watch, getCurrentInstance } from 'vue';
import moment from 'moment';
import BasicInfo from './basicInfo/index.vue';
import Comprehensive from './Comprehensive/index.vue';
import Evaluate from './Evaluate/index.vue';
import HistoryInfo from './HistoryInfo/index.vue';
import InspectEvaluate from './InspectEvaluate/index.vue';
import MonitorInfo from './MonitorInfo/index.vue';
import Appendix from './GeologyAppendix/index.vue';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';

const props = {
  geologicalInfo: { type: Object, require: true },
};
export default defineComponent({
  name: 'MachineDetail',
  components: { BasicInfo, Comprehensive, Evaluate, HistoryInfo, InspectEvaluate, MonitorInfo, Appendix },
  props,
  setup(props) {
    const data = reactive({
      activeName: 'BasicInfo',
      activeId: '0',
      btnMenus: [
        { id: '0', name: '基本信息', component: 'BasicInfo' },
        { id: '1', name: '综合描述', component: 'Comprehensive' },
        { id: '2', name: '综合评价', component: 'Evaluate' },
        { id: '3', name: '监测信息(0)', component: 'MonitorInfo' },
        { id: '4', name: '历史信息(0)', component: 'HistoryInfo' },
        { id: '5', name: '巡查评估(0)', component: 'InspectEvaluate' },
        { id: '6', name: '附件', component: 'Appendix' },
      ],
      geologicalInfo: props.geologicalInfo,
    });

    /**
     * 监听变化
     */
    watch(
      () => props.geologicalInfo,
      (value) => {
        data.geologicalInfo = value;
      }
    );

    /**
     * 查询项改变
     */
    const changeActive = (id) => {
      const obj = data.btnMenus.find((item) => item.id === id);
      data.activeId = id;
      if (obj) data.activeName = obj.component;
    };
    onMounted(() => {
      data.activeName = data.btnMenus[1].component;

      setMonitorNum();
    });
    data.activeId = '1';

    /**
     * @description 获取监测数据数量
     */
    function setMonitorNum() {
      // data.btnMenus[3].name = `监测信息(${value})`;

      const monitorDevicesStore = useMonitorDevicesStore();
      monitorDevicesStore
        .LiGongMonitorDevicesList({
          pageNo: 1,
          pageSize: 10000,
          monitorPointId: props.geologicalInfo.id,
          // monitorPointId: '13',
        })
        .then((res) => {
          // debugger
          console.log('获取设备列表:', res);

          //父级传参
          data.btnMenus[3].name = `监测信息(${res.result.records.length})`;
          // emit('setMonitorNum',res.result.records.length );
        });
    }

    return {
      ...toRefs(data),
      changeActive,

      setMonitorNum,
    };
  },
});
</script>
<style lang="less" scoped>
.geology-detail {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0;
  .header-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    // margin: 10px 0;
    .btn-group {
      height: 44px;
      width: 870px;
      margin: 10px 0;
      display: flex;
      background: url('/@/assets/images/dialog/tab-all-7.png') no-repeat;
      background-size: 100% 100%;
      .btn {
        width: 176px;
        height: 54px;
        line-height: 46px;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
      }
      .active {
        background-image: url('/@/assets/images/dialog/tab.png');
        background-size: 100% 100%;
        width: 176px;
        margin-left: -4px;
        margin-top: -1px;
      }
    }
  }

  .content {
    height: calc(100% - 98px);
    width: calc(100% - 12px);
    overflow: scroll;
  }
}
</style>
