<template>
  <div id="paikouxiangqing">
    <div class="dialog-detail-box">
      <div class="dialog-form-detail flex flex-r flex-wrap">

         <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">污水来源</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.sewageSource">
            <span class="ellipsis">{{ dialogFormDetail.sewageSource }}</span>
          </div>
        </div>
        <div class="flex flex-r">
          <div class="detail-label flex flex-align-center">溯源情况</div>
          <div class="detail-value flex flex-align-center" :title="dialogFormDetail.traceabilitySituation">
            <span class="ellipsis">{{ dialogFormDetail.traceabilitySituation }}</span>
          </div>
        </div>

        <el-divider />
        <div class="bottombox">
          <div class="boxitem">
            <div class="boxtitle">采样监测</div>
            <div class="boxcontentPK">
              <div class="leftment">
                <div
                  class="items"
                  @click="itemclick(item)"
                  :class="itemactived == item.id ? 'actived' : ''"
                  v-for="item in menuList"
                  :key="item.id"
                >
                  
                  <span :title="item.monitorTime">{{ item.monitorTime }}</span>
                  <span class="PKshuizhi">
                    {{ getpaikouInfo(item.waterQualityLevel,water_quality_target) }}
                  </span>
                </div>
              </div>
              <div class="rightbox">
                <div class="item" >
                  <div class="itemname">pH</div>
                  <div class="itemvalue">{{ leftboxList.ph }}</div>
                </div>
                <div class="item" >
                  <div class="itemname">氨氮(mg/L)</div>
                  <div class="itemvalue">{{ leftboxList.nh3n }}</div>
                </div>
                <div class="item" >
                  <div class="itemname">化学需氧量(mg/L)</div>
                  <div class="itemvalue">{{ leftboxList.oxygen }}</div>
                </div>
                <div class="item" >
                  <div class="itemname">总磷(mg/L)</div>
                  <div class="itemvalue">{{ leftboxList.p }}</div>
                </div>
                <div class="item" >
                  <div class="itemname">总氮(mg/L)</div>
                  <div class="itemvalue">{{ leftboxList.n }}</div>
                </div>
                <div class="item" >
                  <div class="itemname">水温（℃）</div>
                  <div class="itemvalue">{{ leftboxList.temperature }}</div>
                </div>
                <div class="item" >
                  <div class="itemname">BOD</div>
                  <div class="itemvalue">{{ leftboxList.bod }}</div>
                </div>
                <div class="item" >
                  <div class="itemname">挥发酚</div>
                  <div class="itemvalue">{{ leftboxList.volatilePhenol }}</div>
                </div>
                <div class="item" >
                  <div class="itemname">流量(m³/天)</div>
                  <div class="itemvalue">{{ leftboxList.q }}</div>
                </div>
                 <div class="item" >
                  <div class="itemname">检测方式</div>
                  <div class="itemvalue">{{ getpaikouInfo(leftboxList.detection.rujianghe) }}</div>
                </div>
                <div class="item" >
                  <div class="itemname">备注</div>
                  <div class="itemvalue">{{ leftboxList.remark }}</div>
                </div>
                
                
              </div>
            </div>
          </div>
          <div class="boxitem">
            <div class="boxtitle">整治情况</div>
            <div class="twocontent">
              <div class="item item2">
                <div class="itemnametwo">整治时间</div>
                <div class="itemvaluetwo">{{ rightboxlist.regulateTime }}</div>
              </div>
              <div class="item item2">
                <div class="itemnametwo">整治类型</div>
                <div class="itemvaluetwo">{{ rightboxlist.regulateType }}</div>
              </div>
              <div class="item item2">
                <div class="itemnametwo">整治进展</div>
                <div class="itemvaluetwo">{{ getpaikouInfo(rightboxlist.regulateState,zhengzhijinzhan) }}</div>
              </div>
              <div class="item item2">
                <div class="itemnametwo">整治标准及措施</div>
                <div class="itemvaluetwo">{{ rightboxlist.regulateMeasure }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="paikouxiangqing">

const { proxy } = getCurrentInstance();
import { getChineseFun } from '@/utils/ruoyi';
const rujianghe = proxy.fixDict['rujianghe'];
const zhengzhijinzhan = proxy.fixDict['zhengzhijinzhan'];
const { lake_level, project_scale, isNumberState, ownership, pump_station_type, usage_status, gate_type ,water_quality_target} = proxy.useDict(
  'lake_level',
  'project_scale',
  'isNumberState',
  'ownership',
  'pump_station_type',
  'usage_status',
  'gate_type',
  'water_quality_target'
);

const props = defineProps({
  // 数据id
  dataID: {
    type: String,
  },
  dataCode: {
    type: String,
  },
  // 默认打开tabs的key
  RefreshName: {
    type: String,
  },
  tabsType: {
    type: String,
  },
  typeName: {
    type: String,
  },
});

import { listwaterRegionInfo,getBaseDetail,outletMonitorList,outletRegulateList } from '@/api/MonitorAssetsOnMap';


const alllist = ref([]);
function getListlast() {
  listwaterRegionInfo().then(response => {
    alllist.value = response.data;
  });
}

const setnamobj = ref([]);
const dialogFormDetail = ref([]);

const menuList = ref();

const leftboxList = ref({});

const rightboxlist = ref({});

const itemactived = ref('1');

function switchPropsName() {
  switch (props.typeName) {
    case 'hupo':
      setnamobj.value = [
        { name: '湖泊名称', value: '' },
        { name: '湖泊类型', value: '' },
        { name: '所属水系', value: '' },
        { name: '境内面积km²', value: '' },
        { name: '总面积km²', value: '' },
        { name: '湖泊库容(万m³)', value: '' },
        { name: '总库容(万m³)', value: '' },
        { name: '岸线长度km', value: '' },
        { name: '水质目标', value: '' },
        { name: '常水位(m)', value: '' },
        { name: '生态水位(m)', value: '' },
        { name: '控制水位(m)', value: '' },
        { name: '管理部门', value: '', type: '' },
        { name: '描述', value: '', type: 'textarea' },
        { name: '图片', value: '1,2', type: 'img' },
      ];

      break;
    case 'bengzhan':
      setnamobj.value = [
        { name: '泵站名称', value: '' },
        { name: '泵站类型', value: '' },
        { name: '泵机个数', value: '' },
        { name: '设计流量(m/s)', value: '' },
        { name: '装机功率', value: '' },
        { name: '权属', value: '' },
        { name: '泵站状态', value: '' },
        { name: '建成日期', value: '' },
        { name: '使用年限', value: '' },
        { name: '维护日期', value: '' },
        { name: '运维单位', value: '' },
        { name: '管理负责人', value: '' },
        { name: '负责人联系方式', value: '' },
        { name: '泵站图片', value: '1,2', type: 'img' },
      ];
      break;

    case 'shuiku':
      setnamobj.value = [
        { name: '水库名称', value: '' },
        { name: '水库编号', value: '' },
        { name: '所属水系', value: '' },
        { name: '水库类型', value: '' },
        { name: '所在(村/街道)', value: '' },
        { name: '集水面积(km2)', value: '' },
        { name: '总库容(万m³)', value: '' },
        { name: '调洪库容(万)', value: '' },
        { name: '水质目标', value: '' },
        { name: '常水位(m)', value: '' },
        { name: '生态水位(m)', value: '' },
        { name: '控制水位(m)', value: '' },
        { name: '管理部门', value: '', type: '' },
        { name: '描述', value: '', type: 'textarea' },
        { name: '图片', value: '1,2', type: 'img' },
      ];

      break;
  }
}

function itemclick(item) {
  itemactived.value = item.id;
  leftboxList.value=item
}

// 获取排口详情
function getDetailBycodeAndDataid() {
  let params = {
    dataId: props.dataID,
    dataCode: props.dataCode,
  };
  getBaseDetail(params).then(res => {
    console.log('排口详情', res);
    dialogFormDetail.value = res.data;
  });
}
// 获取排口监测数据
function getMonitorPK() {
  let params = {
    id: props.dataID,
  };
  outletMonitorList(params).then(res => {
    console.log('排口监测列表详情', res);
    menuList.value = res.data;
    if(res.data?.length>0){
      itemactived.value=res.data[0].id
  leftboxList.value=res.data[0]

    }
  });
}
function getRenovatePK() {
  let params = {
    outletId: props.dataID,
  };
  outletRegulateList(params).then(res => {
    console.log('排口整治列表详情', res);
    if(res.data?.length>0){
  rightboxlist.value=res.data[0]

    }
  });
}
// 排口相关name
const getpaikouInfo = (id,data) => {
  return getChineseFun(data, 'value', id, 'label');
};
onMounted(() => {
  getDetailBycodeAndDataid()
  getMonitorPK()
  getRenovatePK()
  // getListlast();

  // switchPropsName();
  console.log('props', props);
});
</script>

<style lang="scss" scoped>
#paikouxiangqing {
  width: 100%;
  height: 100%;
  color: #ccefff;

  .dialog-detail-box {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 10px;
    flex-wrap: wrap;
    overflow: hidden;
    overflow-y: auto;
    font-weight: bold;

    .detail-label {
      font-size: 12px;
      text-align: left;
      width: 140px;
      background: transparent;
      color: #ccefff;
      border: none;
    }

    .dialog-form-detail {
      border: none;
    }

    .dialog-form-detail .flex-r {
      border: none;
    }
  }
}

.width100 {
  width: 100% !important;
}
.img,
.textarea {
  width: 100% !important;
}

.bottombox {
  display: flex;
  width: 100%;

  .boxitem {
    width: 50%;

    .boxtitle {
      text-align: center;
      width: 100%;
      font-size: 18px;
      padding-bottom: 10px;
      color: #2faeff;
    }

    .twocontent {
      height: 180px;
      overflow: hidden;
      overflow-y: auto;
    }

    .boxcontentPK {
      height: 280px;
      display: flex;
      // overflow: hidden;
      // overflow-y: auto;

      .leftment {
        height: 100%;
        width: 180px;
        overflow: hidden;
        overflow: auto;
        background: #304b7d;
        padding: 5px;
        box-sizing: border-box;

        .items {
          cursor: pointer;
          width: 100%;
          // text-align: center;
          position: relative;
          margin: 12px 0 ;
        box-sizing: border-box;

          .PKshuizhi {
            display: inline-block;
            position: absolute;
            right: -5px;
            top: -8px;
            padding: 5px 10px;
            background: red;
            color: #fff;
            border-radius: 10px;
            box-sizing: border-box;
          }
          &.actived {
            color: #2faeff;
          }
        }
      }

      .rightbox {
        // width: calc(100% - 180px);
        flex: 1;
        height: 100%;
        overflow: auto;
        .item {
          margin-bottom: 5px;
        }
      }
    }
  }

  .item {
    display: flex;
    justify-content: center;
    color: #ccefff;

    .itemname {
      width: 100px;
      text-align: left;
    }

    .itemvalue {
      width: 100px;
    }

    .itemnametwo {
      width: 140px;
      text-align: left;
    }

    .itemvaluetwo {
      width: calc(100% - 140px);
    }
  }

  .item2 {
    min-height: 40px;
  }
}
</style>