<template>
  <Dialog :width="1110" :height="110" :dialogVisable="visible" :title="'河段名称('+(lybh||'')+')'">
    <div class="geology-detail">
      <div class="header-content">
        <div class="btn-group">
          <div class="btn frist" :class="{ active: pageShow.currentInfo==pageShow.contentInfo}" @click="changeActive(pageShow.contentInfo)">基本信息</div>
          <div class="btn" :class="{ active:pageShow.currentInfo==pageShow.fileInfo }" @click="changeActive(pageShow.fileInfo)">附件</div>
        </div>
      </div>
      <div class="content">
        <div v-show="pageShow.currentInfo==pageShow.contentInfo" class='drainageBasinInfoDiv'>
          <template v-for="(item,index) in pageConfig" :key='"pageConfig_"+index'>
            <div class='pageConfigItem'>
              <template v-for="(item2,index2) in item" :key='"pageConfig_"+index+"_"+index2'>
                  <div class='pageConfigTitle' :style="'width:200px'" :title="item2.title" v-if='item2.title'>{{item2.title}}</div>
                  <div class='pageConfigValue' :style="'width:calc((100% - '+(200*item.length)+'px)/'+item.length+')'" :title="item2.field" v-if='item2.field'>{{pageInfo[item2.field]||'&#12288'}}</div>
              </template>
            </div>
          </template>
        </div>
        <div v-show="pageShow.currentInfo==pageShow.fileInfo" class='drainageBasinInfoDiv2'>
            <Appendix :showType=AppendixInfo.showType :projectType=AppendixInfo.projectType :projectId=AppendixInfo.projectId />
        </div>
      </div>
    </div>
  </Dialog>
</template>

<script>
import { getRiverInfoById } from '/@/api/map/getData.ts';
import { ref,watch,reactive ,getCurrentInstance,onMounted} from 'vue';
import Dialog from '/@/components/Dialog/index.vue';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import {fieldConfig} from './fieldConfig.ts';
import Appendix from '/@/views/map/dialog/Appendix/index.vue';
export default {
  name:"drainageBasinInfo",
  components: { getRiverInfoById,Dialog,Appendix },
  props:{
    id:null,
    pageAction:null,
  },
  setup(props,ctx){
    const pageShow=reactive({
      contentInfo:"contentInfo",
      fileInfo:"fileInfo",
      currentInfo:"contentInfo"
    })
    const visible=ref(false);
    const AppendixInfo=reactive({
      showType:"1,2,3",
      projectType:"3",
      projectId:props.id
    });
    let lybh=ref('');
    let pageInfo=reactive({});
    const pageConfig=reactive(fieldConfig)
    const message = ref(props.id);
    watch(() => props.pageAction, (newVal) => {
      if(props.id){
        getInfoById();
        pageShow.currentInfo=pageShow.contentInfo;
      }
    });
    renderConfig(pageConfig);
    onMounted(e=>{
      getInfoById();
    })

    function getInfoById(){
      getRiverInfoById({id:props.id}).then(res=>{
        if(res.code==1){
          renderData(res.result);
          lybh.value=pageInfo['lybh'];
          visible.value=!visible.value;
        }
      })
    }

    /***
     * 处理数据构造
    */
    function renderConfig(pageConfig){
      for(let i=0;i<pageConfig.length;i++){
        if(!(pageConfig[i] instanceof Array)){
          pageConfig[i]=[pageConfig[i]];
        }
      };
    }

    /***
     * 处理数据
    */
    function renderData(data){
      for(let item in data){
        pageInfo[item]=TFMapUitl.setEmptyValue(data[item]);
      }
    }

    /***
     * 切换数据
    */
    function changeActive(data){
      pageShow.currentInfo=data;
    }

    return{
      pageInfo,
      pageConfig,
      visible,
      lybh,
      pageShow,
      changeActive,
      AppendixInfo
    }
  }
}
</script>

<style lang="less" scoped>
.drainageBasinInfoDiv{
  color: black;
}
.drainageBasinInfoDiv,.drainageBasinInfoDiv2{
    position: absolute;
    background: #042F4C;
    width: calc(100% - 20px);
    height: calc(100% - 110px);
    overflow-y: auto;
    .pageConfigItem{
      display: flex;
      flex-direction: row;
      width: 100%;
      font-size: 14px;
      border-bottom: 1px solid rgba(21,186,255,0.3);
      border-left: 1px solid rgba(21,186,255,0.3);
      border-top: none;
      background: rgba(26, 166, 255, 0.08);
      align-items: center;
      &:first-child{
        border-top: 1px solid rgba(21,186,255,0.3);
      }
      .pageConfigTitle{
        color: #8BCDFF;
        text-align: center;
        padding: 9px;
      }
      .pageConfigValue{
        color: #E5F7FF;
        border-right: 1px solid rgba(21,186,255,0.3);
        background: #042F4C;
        border-left: 1px solid rgba(21, 186, 255, 0.3);
        padding-left: 5px;
        padding: 9px;
      }
    }
}
.geology-detail {
    position: absolute;
    height: 100%;
    width: 100%;
    color: #c9d1d9;
    padding: 0;
    .header-content {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      // margin: 10px 0;
      .btn-group {
        height: 44px;
        width: 206px;
        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% / 2);
          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;
          background-image: url(/src/assets/images/dialog/tab.png);
          background-size: 103% 100%;
          background-origin: border-box;
          background-repeat: no-repeat;
        }
        .btn.frist.active{
          margin-left: -4px;
        }
      }
    }
    :deep(.vben-collapse-container) {
      background-color: transparent;
    }
    .content {
      height: calc(100% - 98px);
      width: calc(100% - 12px);
      overflow: scroll;
    }
  }
</style>