<template>
  <div
    class="chanChuJiXiao"
    :style="{
      height: curTab == 1 ? '352px' : '382px',
    }"
  >
    <div class="partTitleHM">
      黑臭水体
      <div class="tabs flex">
        <div class="tabItem" v-for="item in tabs" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="ListBoxBody">
      <div class="content">
        <div class="target flex flex-j-left">
          <div class="titles titlesmb">
            <div class="mbs">目标</div>
          </div>
          <div class="valsText">{{ quotaInfo.improveGoals }}</div>
        </div>
        <div class="measures flex flex-j-left">
          <div class="titles titlecs">
            <div class="mbs">措施</div>
          </div>
          <div class="valsText">{{ quotaInfo.reformMethod }}</div>
        </div>
        <el-table ref="table" :data="tableData" style="width: 100%" max-height="120" v-if="curTab == 1">
          <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
          <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
        </el-table>
        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 2">
          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
          <el-table-column label="进水量(万t/d)" prop="reformAchievement" show-overflow-tooltip />
        </el-table>
        <el-table ref="table" :data="tableData" style="width: 100%; height: 120px" max-height="120" v-if="curTab == 3">
          <el-table-column label="污水处理厂" prop="partitionName" show-overflow-tooltip />
          <el-table-column label="进水BOD浓度(mg/L)" prop="reformAchievement" show-overflow-tooltip />
        </el-table>
        <div class="achievements flex flex-j-left flex-align-center">
          <div class="titles titlecg">
            <div class="mbs">成果</div>
          </div>
          <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
            {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
          </div>
        </div>
        <div class="bottom flex-v">
          <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="opens" title="沋西渠" id="dialogContent" :modal-append-to-body="false" :close-on-click-modal="false" width="500px">
    <div class="jcxx">
      <el-tabs v-model="actitabs" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="基础信息">
          <div class="hcmsg">黑臭水体长度：&nbsp {{ hcdatas.blackRiverLength }}</div>
          <div class="hcmsg">黑臭水体面积：&nbsp {{ hcdatas.blackRiverArea }}</div>
          <div class="hcmsg">黑臭段起点：&nbsp {{ hcdatas.blackRiverStart }}</div>
          <div class="hcmsg">黑臭段终点：&nbsp {{ hcdatas.blackRiverEnd }}</div>
          <div>
            治理照片：
            <div class="img_box">
              <img :src="item.url" alt="" class="img" v-for="item in photosList" />
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="监测站数据" name="监测站数据">
          <div class="jcsj" v-if="actitabs == '监测站数据'">
            <el-table ref="table" :data="listTable" style="width: 100%" :max-height="260">
              <el-table-column label="监测月份" prop="month" show-overflow-tooltip />
              <el-table-column label="溶解氧" prop="DOX" show-overflow-tooltip />
              <el-table-column label="COD" prop="COD" />
              <el-table-column label="氨氮" prop="NH3N" />
              <el-table-column label="总磷" prop="TP1" />
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="工程治理介绍" name="工程治理介绍">
          <div class="" v-if="actitabs == '工程治理介绍'">
            <div>
              {{ hcdatas.projectManageIntro }}
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>
<script setup>
// import { blackRiverList,sampleDetaillistTable ,quotaCommomInfoList,hmyztQuotaDataList} from '@/api/sponeScreen/jxkh.js'

const { proxy } = getCurrentInstance();
const opens = ref(false);
const actitabs = ref('基础信息');
const photosList = ref([]);
const hcdatas = ref('');
const listTable = ref('');
const tabs = ref([
  {
    id: 1,
    name: '黑臭水体',
  },
  {
    id: 2,
    name: '生活污水',
  },
  {
    id: 3,
    name: '进水BOD',
  },
]);
const curTab = ref(1);

const quotaInfo = ref({}); //改造措施数据
const tableData = ref([]);
const type = ref('hcst');

const tabClick = item => {
  curTab.value = item.id;

  if (curTab.value == 1) {
    opens.value = true;
    bus.emit('jhkhclick', 'hcst');
    type.value = 'hcst';
  } else if (curTab.value == 2) {
    type.value = 'shwssjl';
    bus.emit('jhkhclick', 'shwssjl');
  } else {
    type.value = 'cqjsbod';
    bus.emit('jhkhclick', 'cqjsbod');
  }
  getjb();
  getkhzn();
};

// 产出绩效公共指标信息
async function getjb() {
  let res = await quotaCommomInfoList({
    quotaCode: type.value,
  });
  if (res && res.code == 200) {
    let data = res.data;
    quotaInfo.value = data && data.length ? data[0] : {};
    quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split('；') : [];
    console.log(quotaInfo.value.remarkData);
  }
}
// 产出绩效公共指标信息
async function getkhzn() {
  let res = await hmyztQuotaDataList({
    quotaType: type.value,
  });
  if (res && res.code == 200) {
    tableData.value = res.data;
  }
}

//黑臭水体数据切换table
const handleClick = ({ props: { name } }, event) => {
  if (name == '监测数据') {
    setTimeout(() => {
      getRiverData();
    }, 500);
  } else if (name == '视频监控') {
    videoInfo.value = '';
  }
};
// 黑臭基础信息+工程治理介绍

async function getHc() {
  let res = await blackRiverList();
  if (res && res.code == 200) {
    hcdatas.value = res.data[0];
  }
}
// 黑臭水体监测站数据
async function gethcrtus() {
  let param = {
    sampleType: 'hcst',
    sampleYear: '2023',
    sampleMonth: '',
  };
  let res = await sampleDetaillistTable(param);
  if (res && res.code == 200) {
    listTable.value = res.data;
  }
}

onMounted(() => {
  // getHc()
  // gethcrtus()
  // getjb()
  // getkhzn()
});
</script>
<style lang="scss" scoped>
.chanChuJiXiao {
  width: 460px;

  .ListBoxBody {
    background: rgba(8, 75, 125, 1);
    padding: 10px;
    margin-top: -3px;
    .content {
      height: 100%;

      .target,
      .measures,
      .achievements {
        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
        border-radius: 3px;
        width: 100%;
        height: 40px;
        padding: 0 10px;

        .titles {
          width: 50px;
          font-size: 16px;
          color: #ffffff;
          position: relative;
          height: 20px;
          margin-top: 15px;

          .mbs {
            position: absolute;
            top: -10px;
            left: 5px;
          }
        }

        .titlesmb {
          background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
        }

        .titlecs {
          background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
        }

        .titlecg {
          background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
        }
      }

      .measures {
        margin-top: 5px;
      }

      .valsText {
        color: #58d6ff;
        margin-left: 10px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .achievements {
        font-family: Source Han Sans CN;
        font-size: 18px;

        margin-top: 10px !important;

        .vals {
          color: #00fe00 !important;
          margin-left: 20px;
        }
        .colors1 {
          color: #00fe00;
        }
        .colors2 {
          color: #ff5e66;
        }
      }

      .bottom {
        width: 100%;
        height: 50px;
        line-height: 25px;
        background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
        color: #58d6ff;
        font-size: 14px;
        padding-left: 10px;
        overflow-y: scroll;
        justify-content: flex-start;
        display: flex;
      }
    }
  }

  .tabs {
    float: right;
    margin: 8px 40px 0px 0px;
    .tabItem {
      width: 78px;
      height: 24px;
      line-height: 24px;
      background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
      background-size: 100% 100%;
      margin-left: 10px;
      font-size: 14px;
      color: #ffffff;
      text-align: center;
      cursor: pointer;

      &:first-of-type {
        margin-left: 0;
      }

      &.active {
        background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
.jcxx {
  width: 450px;
  height: 360px;
  color: #ffffff;
  .hcmsg {
    font-size: 14px;
    line-height: 20px;
  }
  .img_box {
    margin-top: 10px;
    width: 100%;
    height: 160px;
    overflow-y: scroll;
    flex-wrap: wrap;
    .img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>