<template>
  <div class="longYW">
    <div class="partTitleHM">人工采样</div>
    <div class="ConstrucClass">
      <div class="HeadContent">
        <div class="head-center">
          <div
            class="head-item"
            v-for="(item, index) in CurrentIssuesrList"
            :key="item"
            :class="activedname == item.name ? 'activedright' : ''"
            @click="CurrentIssuesrclick(item, index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="box-body">
        <div class="scrollMapHM">
          <div class="scrollTitle flex" v-if="activedname == '土壤'">
            <p>采样地点</p>
            <p>渗透系数(m/d)</p>
            <p>孔隙度(%)</p>
            <p>土壤容重(g/cm³)</p>
            <p>采样时间</p>
          </div>

          <div class="scrollTitle flex" v-if="activedname == '下垫面'">
            <p>下垫面名称</p>
            <p>PH</p>
            <p>SS</p>
            <p>COD</p>
            <p>TN</p>
            <p>TP</p>
            <p>氨氮</p>
            <p>采样时间</p>
          </div>

          <div class="scrollTitle flex" v-if="activedname == '海绵设施'">
            <p>设施名称</p>
            <p>PH</p>
            <p>SS</p>
            <p>COD</p>
            <p>TN</p>
            <p>TP</p>
            <p>氨氮</p>
            <p>采样时间</p>
          </div>

          <Vue3SeamlessScroll :list="tableData" :singleHeight="53" :singleWaitTime="1500" :hover="true" class="scroll">
            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '土壤'">
              <p class="ellipsis">{{ item.start }}</p>
              <p class="ellipsis">{{ item.num }}</p>
              <p class="ellipsis">{{ item.porosity }}</p>
              <p class="ellipsis">{{ item.Soilbulk }}</p>
              <p class="ellipsis">{{ item.time }}</p>
            </div>
            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '下垫面'">
              <p class="ellipsis">{{ item.start }}</p>
              <p class="ellipsis">{{ item.Ph }}</p>
              <p class="ellipsis">{{ item.ss }}</p>
              <p class="ellipsis">{{ item.COD }}</p>
              <p class="ellipsis">{{ item.TN }}</p>

              <p class="ellipsis">{{ item.TP }}</p>
              <p class="ellipsis">{{ item.AN }}</p>
              <p class="ellipsis">{{ item.time }}</p>
            </div>
            <div class="scrollCont flex" v-for="item in tableData" :key="item.id" v-if="activedname == '海绵设施'">
              <p class="ellipsis">{{ item.start }}</p>
              <p class="ellipsis">{{ item.Ph }}</p>
              <p class="ellipsis">{{ item.ss }}</p>
              <p class="ellipsis">{{ item.COD }}</p>
              <p class="ellipsis">{{ item.TN }}</p>

              <p class="ellipsis">{{ item.TP }}</p>
              <p class="ellipsis">{{ item.AN }}</p>
              <p class="ellipsis">{{ item.time }}</p>
            </div>
          </Vue3SeamlessScroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const tableData = ref([
  { start: '惠济河1号', num: '2', porosity: '1.3', Soilbulk: '12', time: '2024-04-10', id: 1 },
  { start: '马家河2号', num: '2.4', porosity: '0.6', Soilbulk: '23', time: '2024-04-10', id: 1 },
]);
const activedname = ref('土壤');
const CurrentIssuesrList = ref([
  { name: '土壤', value: 1 },
  { name: '下垫面', value: 2 },
  { name: '海绵设施', value: 3 },
]);

// 点击事件
function CurrentIssuesrclick(val) {
  activedname.value = val.name;
  if (activedname.value == '土壤') {
    tableData.value = [
      { start: '惠济河1号', num: '0.4', porosity: '30', Soilbulk: '1', time: '2024-04-10', id: 1 },
      { start: '马家河2号', num: '0.14', porosity: '35', Soilbulk: '1.2', time: '2024-04-18', id: 1 },
    ];
  } else if (activedname.value == '下垫面') {
    tableData.value = [
      { start: '惠济河1号', Ph: '7.2', ss: '1.3', COD: '12', TN: '34', TP: '12', AN: '120', time: '2024-06-10', id: 1 },
      { start: '马家河2号', Ph: '6.7', ss: '0.6', COD: '23', TN: '45', TP: '12', AN: '90', time: '2024-06-10', id: 1 },
    ];
  } else {
    tableData.value = [
      { start: '惠济河1号', Ph: '7.2', ss: '1.3', COD: '12', TN: '34', TP: '12', AN: '120', time: '2024-06-10', id: 1 },
      { start: '马家河2号', Ph: '6.7', ss: '0.6', COD: '23', TN: '45', TP: '12', AN: '90', time: '2024-06-10', id: 1 },
    ];
  }
}
</script>

<style lang="scss" scoped>
.longYW {
  margin-top: 10px;
  width: 460px;
  height: 31%;
  background: #004565;
  opacity: 0.8;
  .ConstrucClass {
    height: 90%;
    opacity: 0.8;
    // background: red;
    .HeadContent {
      width: 100%;
      height: 30px;
      // background: #2270ff;
      align-items: center;
      line-height: 25px;
      margin-top: 5px;

      .head-center {
        height: 30px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        overflow: hidden;
        overflow-x: auto;
        color: #ffffff;
        .head-item {
          margin-left: 10px;
          padding: 2px 3px;
          border: 1px solid #0dc9ff;
          background: #013a73;
          height: 30px;
          text-align: center;
          min-width: 100px;
          border: 1px solid #2270ff;
        }
        .activedright {
          border: 1px solid #2cfce9;
          color: #0dc9ff;
          background: #166f84;
        }
      }
    }
    .box-body {
      height: 88%;
      // background: yellowgreen;
      padding: 10px;
      .scrollMapHM {
        height: 100%;
        p {
          width: 18%;
          // background: red;
        }
        .reports {
          color: #3afff8;
        }
        .scroll {
          width: 100%;
          height: calc(100% - 30%);
          overflow: hidden;
          display: inline-block;
        }
      }
    }
  }
}
</style>