<template>
  <div
    id="basicRight1"
    class="basicRight1"
    :class="[sysTheme ? 'dark_basicRight1' : '']"
  >
    <div class="RightTitle">服务区域</div>
    <div class="RightContent">
      <img
        src="./../../../../assets/Imgs/lingshi/jietu4.png"
        style="width: 100%; height: 100%"
        alt=""
      />
    </div>
  </div>
  <div
    id="basicRight2"
    class="basicRight2"
    :class="[sysTheme ? 'dark_basicRight2' : '']"
  >
    <div class="RightTitle2">泵机信息</div>
    <div class="RightContent2">
      <div class="TableHeader">
        <span class="TableHeaderList1">泵机</span>
        <span class="TableHeaderList2">型号</span>
        <span class="TableHeaderList3">额定抽排量</span>
        <span class="TableHeaderList4">类型</span>
        <span class="TableHeaderList5">额定功率(KW)</span>
        <span class="TableHeaderList6">操作</span>
      </div>
      <div class="TableContent">
        <div class="TableContentList" v-for="(item, index) in BengData">
          <span class="TableContentListSpan1">{{ item.pump }}</span>
          <span class="TableContentListSpan2">{{ item.model }}</span>
          <span class="TableContentListSpan3">{{ item.pumpingCapacity }}</span>
          <span class="TableContentListSpan4">{{ item.type }}</span>
          <span class="TableContentListSpan5">{{ item.RatedPower }}</span>
          <span class="TableContentListSpan6"> 资料修改 </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted, computed } from "vue";
import { useStore } from "vuex";
export default {
  name: "basicRight",
  setup() {
    let store = useStore();
    const state = reactive({
      BengData: [
        {
          pump: "1",
          model: "WQ2000-8-75",
          pumpingCapacity: "0.5556",
          type: "雨水泵",
          RatedPower: "75",
        },
        {
          pump: "2",
          model: "WQ2000-8-75",
          pumpingCapacity: "0.5556",
          type: "雨水泵",
          RatedPower: "75",
        },
        {
          pump: "3",
          model: "WQ2000-8-75",
          pumpingCapacity: "0.5556",
          type: "雨水泵",
          RatedPower: "75",
        },
        {
          pump: "4",
          model: "WQ2000-8-75",
          pumpingCapacity: "0.5556",
          type: "雨水泵",
          RatedPower: "75",
        },
        {
          pump: "5",
          model: "WQ2000-8-75",
          pumpingCapacity: "0.5556",
          type: "雨水泵",
          RatedPower: "75",
        },
        {
          pump: "5",
          model: "WQ2000-8-75",
          pumpingCapacity: "0.5556",
          type: "雨水泵",
          RatedPower: "75",
        },
        {
          pump: "5",
          model: "WQ2000-8-75",
          pumpingCapacity: "0.5556",
          type: "雨水泵",
          RatedPower: "75",
        },
        {
          pump: "5",
          model: "WQ2000-8-75",
          pumpingCapacity: "0.5556",
          type: "雨水泵",
          RatedPower: "75",
        },
      ],
      sysTheme: "",
    });
    onMounted(() => {});
    state.sysTheme = computed(() => {
      return store.getters.sysTheme;
    });
    return { ...toRefs(state) };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#basicRight1 {
  background-size: 100% 100%;
  width: 524px;
  height: 428px;
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 15px 25px 62px 20px;

  .RightTitle {
    width: 100%;
    height: 28px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    // color: #404c5a;
    line-height: 28px;
    margin-bottom: 14px;
  }

  .RightContent {
    background: cadetblue;
    width: 100%;
    height: calc(100% - 42px);
  }
}
.basicRight1 {
  background: url("./../../../../assets/Imgs/BasicRight_back.png") no-repeat;
}
.dark_basicRight1 {
  background: url("./../../../../assets/Imgs/BasicRight_back_dark.png")
    no-repeat;
}
#basicRight2 {
  background-size: 100% 100%;
  width: 523px;
  height: 357px;
  position: absolute;
  right: 10px;
  top: 480px;
  padding: 15px 25px 22px 20px;

  .RightTitle2 {
    width: 100%;
    height: 28px;
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    // color: #404c5a;
    line-height: 28px;
    margin-bottom: 14px;
  }

  .RightContent2 {
    width: 100%;
    height: calc(100% - 42px);

    .TableHeader {
      width: 100%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
      border-bottom: 1px solid #47678c;

      .TableHeaderList1 {
        float: left;
        text-align: center;
        height: 43px;
        line-height: 43px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 600;
        // color: #333333;
        width: 40px;
      }
      .TableHeaderList2 {
        float: left;
        text-align: center;
        height: 43px;
        line-height: 43px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 600;
        // color: #333333;
        width: 100px;
      }
      .TableHeaderList3 {
        float: left;
        text-align: center;
        height: 43px;
        line-height: 43px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 600;
        // color: #333333;
        width: 86px;
      }
      .TableHeaderList4 {
        float: left;
        text-align: center;
        height: 43px;
        line-height: 43px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 600;
        // color: #333333;
        width: 75px;
      }
      .TableHeaderList5 {
        float: left;
        text-align: center;
        height: 43px;
        line-height: 43px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 600;
        // color: #333333;
        width: 110px;
      }
      .TableHeaderList6 {
        float: left;
        text-align: center;
        height: 43px;
        line-height: 43px;
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 600;
        // color: #333333;
        width: 60px;
      }
    }

    .TableContent {
      width: 100%;
      height: calc(100% - 44px);
      box-sizing: border-box;
      overflow: auto;

      .TableContentList {
        width: 100%;
        height: 34px;
        margin-bottom: 5px;
        cursor: pointer;

        .TableContentListSpan1 {
          float: left;
          width: 40px;
          text-align: center;
          height: 34px;
          line-height: 34px;
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          // color: #333333;
        }
        .TableContentListSpan2 {
          float: left;
          width: 100px;
          text-align: center;
          height: 34px;
          line-height: 34px;
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          // color: #333333;
        }
        .TableContentListSpan3 {
          float: left;
          width: 86px;
          text-align: center;
          height: 34px;
          line-height: 34px;
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          // color: #333333;
        }
        .TableContentListSpan4 {
          float: left;
          width: 75px;
          text-align: center;
          height: 34px;
          line-height: 34px;
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          // color: #333333;
        }
        .TableContentListSpan5 {
          float: left;
          width: 110px;
          text-align: center;
          height: 34px;
          line-height: 34px;
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          // color: #333333;
        }
        .TableContentListSpan6 {
          float: left;
          width: 60px;
          text-align: center;
          height: 34px;
          line-height: 34px;
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          // color: #333333;
        }
      }

      .TableContentList:hover {
        background: #d2e6fd;

        .TableContentListSpan1 {
          color: #1f78f7;
        }
        .TableContentListSpan2 {
          color: #1f78f7;
        }
        .TableContentListSpan3 {
          color: #1f78f7;
        }
        .TableContentListSpan4 {
          color: #1f78f7;
        }
        .TableContentListSpan5 {
          color: #1f78f7;
        }
        .TableContentListSpan6 {
          color: #63ba52;
        }
      }
    }

    ::-webkit-scrollbar {
      width: 1px !important;
    }
  }
}
.basicRight2 {
  background: url("./../../../../assets/Imgs/BasicRight_back2.png") no-repeat;
}
.dark_basicRight2 {
  background: url("./../../../../assets/Imgs/BasicRight_back2_dark.png")
    no-repeat;
}
</style>