<template>
  <Dialog :width="width" :height="110" :dialogVisable="dialogvisable" :title="title">
    <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" :componentData="componentData" />
      </div>
    </div>
  </Dialog>
</template>

<script>
import Dialog from '/@/components/Dialog/index.vue';
import basicInformation from './basicInformation.vue';
import engineeringProposal from './engineeringProposal.vue';
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue';
import Appendix from '/@/views/map/dialog/Appendix/index.vue';
import { getIngenieurInformatikDetails } from '/@/api/map/getData.ts';
import { deepClone } from '/@/utils/fnUtils';

const props = {
  deviceName: { type: String, default: '' },
};
export default defineComponent({
  name: 'MachineDetail',
  components: {
    basicInformation,
    engineeringProposal,
    Appendix,
    Dialog,
  },
  props,
  setup(props) {
    const data = reactive({
      activeName: 'basicInformation',
      activeId: '0',
      btnMenus: [
        { id: '0', name: '基本信息', component: 'basicInformation' },
        { id: '1', name: '工程方案', component: 'engineeringProposal' },
        { id: '6', name: '附件', component: 'Appendix' },
      ],
      deviceName: props.deviceName,
    });
    const componentData = ref({});

    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[0].component;
    });
    const dialogvisable = ref(false);
    const title = ref('工程详情');

    window.openEngineeringModel = function (e) {

      dialogvisable.value = false;
      getIngenieurInformatikDetails({ id: e.id }).then((res) => {
        if (map.popup) {
          map.popup.remove();
        }
        const dataR = res.result;
        const mergedData = Object.assign({}, dataR, e);
        componentData.value = mergedData;
        console.log(componentData.value);
        title.value = `${e.gcmc}(${e.gcbh || '暂无编码'})`;
        data.activeId = '0';
        changeActive(data.activeId);
        dialogvisable.value = true;
      });
    };
    return {
      width: '960px',
      dialogvisable,
      title,
      ...toRefs(data),
      changeActive,
      componentData,
    };
  },
});
</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: 310px;
      line-height: 46px;
      margin: 10px 0;
      display: flex;
      background: url('/@/assets/images/dialog/tab-all.png') no-repeat;
      background-size: 100% 100%;
      .btn {
        width: calc(100% / 3);
        height: 54px;
        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%;
        margin-left: -4px;
      }
    }
  }
  :deep(.vben-collapse-container) {
    background-color: transparent;
  }
  .content {
    height: calc(100% - 98px);
    width: calc(100% - 12px);
    overflow: scroll;
  }
}
</style>
