<template>
  <n-form
    inline
    :label-width="70"
    label-placement="left"
    size="medium"
    ref="queryFormRef"
    class="form"
  >
    <n-form-item label="开始时间：" path="datetime">
      <n-date-picker
        v-model:value="queryForm.timeStart"
        type="datetime"
        clearable
      />
    </n-form-item>
    <n-form-item label="结束时间：" path="">
      <n-date-picker
        v-model:value="queryForm.timeEnd"
        type="datetime"
        clearable
      />
    </n-form-item>
    <n-form-item>
      <n-radio-group v-model:value="queryForm.selectedValue3" size="small">
        <n-radio-button
          v-for="time in tongdaoList"
          :key="time.value"
          :value="time.value"
        >
          {{ time.label }}
        </n-radio-button>
      </n-radio-group>
    </n-form-item>
  </n-form>
  <div class="weixiuList">
    <div class="weixiuItem" v-for="(item, i) in weixiuList" :key="i">
      <div class="title">
        <span>{{ item.title }}</span>
      </div>
      <div class="content">
        <div class="left">
          {{ currentIndex }}
          <div class="imgBox">
            <img :src="item.imgList[item.currentIndex]" alt="" />
          </div>
          <div class="outer">
            <a
              href="javascript:;"
              @click="gotoPrev(i)"
              v-if="item.currentIndex > 0"
              >&lt;&lt;</a
            >
            <div class="inner" ref="innerRef">
              <ul
                class="btnList"
                :style="{
                  left: item.calleft + 'px',
                }"
                :id="`ul${i}`"
                ref="ulRef"
              >
                <li
                  v-for="(v, j) in item.bengList"
                  :key="j"
                  @click="changeBeng(i, j)"
                  :class="{ active: item.currentIndex == j }"
                >
                  {{ v.label }}
                </li>
              </ul>
            </div>

            <a
              href="javascript:;"
              @click="gotoNext(i)"
              v-if="item.currentIndex != item.bengList.length - 1"
            >
              &gt;&gt;</a
            >
          </div>
        </div>
        <ul class="right">
          <li v-for="(remark, i) in item.bengdetailsList" :key="i">
            <div class="single">
              <div class="icon">
                <n-icon size="28" color="#fff">
                  <img src="../../../assets/Imgs/number.png" alt="" />
                </n-icon>
              </div>
              <div class="text">
                <div class="name">设备编号</div>
                <div class="num">{{ remark.number }}</div>
              </div>
            </div>
            <div class="single">
              <div class="icon">
                <img src="../../../assets/Imgs/frequency.png" alt="" />
              </div>
              <div class="text">
                <div class="name">维修次数</div>
                <div class="num">{{ remark.frequency }}</div>
              </div>
            </div>
            <div class="single">
              <div class="icon">
                <n-icon size="28" color="#fff">
                  <img src="../../../assets/Imgs/fault.png" alt="" />
                </n-icon>
              </div>
              <div class="text">
                <div class="name">故障占比</div>
                <div class="num">{{ remark.fault }}</div>
              </div>
            </div>
            <div class="single">
              <div class="icon">
                <n-icon size="28" color="#fff">
                  <img src="../../../assets/Imgs/repair.png" alt="" />
                </n-icon>
              </div>
              <div class="text">
                <div class="name">维修时长</div>
                <div class="num">{{ remark.repair }}</div>
              </div>
            </div>
            <div class="single">
              <div class="icon">
                <n-icon size="28" color="#fff">
                  <img src="../../../assets/Imgs/cost.png" alt="" />
                </n-icon>
              </div>
              <div class="text">
                <div class="name">维修费用</div>
                <div class="num">{{ remark.cost }}</div>
              </div>
            </div>
            <div class="single">
              <div class="icon">
                <n-icon size="28" color="#fff">
                  <img src="../../../assets/Imgs/utilization.png" alt="" />
                </n-icon>
              </div>
              <div class="text">
                <div class="name">设备使用率</div>
                <div class="num">{{ remark.utilization }}</div>
              </div>
            </div>
            <div class="single">
              <div class="icon">
                <n-icon size="28" color="#fff">
                  <img src="../../../assets/Imgs/belong.png" alt="" />
                </n-icon>
              </div>
              <div class="text">
                <div class="name">所属泵站</div>
                <div class="num">{{ remark.belong }}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs, onMounted } from "vue";
import { AccessibilitySharp, LogoPlaystation } from "@vicons/ionicons5";
import {getImageUrlForPublic} from '/src/utils/util.js'
export default {
  name: "analysis",
  components: {
    AccessibilitySharp,
    LogoPlaystation,
  },
  setup() {
    const state = reactive({
      queryForm: {
        timeStart: [],
        timeEnd: [],
        selectedValue3: 0,
      },
      tongdaoList: [
        { label: "西渠闸门", value: "0" },
        { label: "解放大道澳门路闸", value: "1" },
        { label: "中山大道前进四路闸", value: "2" },
        { label: "王家墩污水泵站", value: "3" },
        { label: "后湖二期泵站", value: "4" },
        { label: "铁路桥泵站", value: "5" },
        { label: "机场河补水泵站", value: "6" },
        { label: "常青公园地下调蓄池", value: "7" },
        { label: "黄孝河CSO调蓄", value: "8" },
        { label: "机场河CSO调蓄", value: "9" },
      ],
      weixiuList: [
        {
          title: "泵体维修",
          currentIndex: 0,
          calleft: 0,
          width: 9999,
          imgList: [
            getImageUrlForPublic('weixiufenxi1'),
            getImageUrlForPublic('weixiufenxi2'),
            getImageUrlForPublic('weixiufenxi3'),
            getImageUrlForPublic('weixiufenxi4'),
            getImageUrlForPublic('weixiufenxi6'),
          ],
          bengList: [
            { label: "1#泵", value: 0 },
            { label: "2#泵", value: 1 },
            { label: "3#泵", value: 2 },
            { label: "4#泵", value: 3 },
            { label: "5#泵", value: 4 },
            { label: "6#泵", value: 5 },
            { label: "7#泵", value: 6 },
          ],
          bengdetailsList: [
            {
              number: "RJ-BJ-01",
              frequency: 20,
              fault: "10%",
              repair: 80,
              cost: 175000,
              utilization: "40%",
              belong: "文荟街地下..",
            },
          ],
        },
        {
          title: "电机维修",
          currentIndex: 0,
          calleft: 0,
          width: 9999,
          imgList: [
            getImageUrlForPublic('weixiufenxi1'),
            getImageUrlForPublic('weixiufenxi2'),
            getImageUrlForPublic('weixiufenxi3'),
            getImageUrlForPublic('weixiufenxi4'),
            getImageUrlForPublic('weixiufenxi6'),
          ],
          bengList: [
            { label: "1#电机", value: 0 },
            { label: "2#电机", value: 1 },
            { label: "3#电机", value: 2 },
            { label: "4#电机", value: 3 },
            { label: "5#电机", value: 4 },
          ],
          bengdetailsList: [
            {
              title: "电机维修",
              imgUrl: "",
              number: "RJ-BJ-01",
              frequency: 20,
              fault: "10%",
              repair: 80,
              cost: 175000,
              utilization: "40%",
              belong: "文荟街地下..",
            },
          ],
        },
        {
          title: "线路维修",
          currentIndex: 0,
          calleft: 0,
          width: 9999,
          imgList: [
              getImageUrlForPublic('weixiufenxi1'),
            getImageUrlForPublic('weixiufenxi2'),
            getImageUrlForPublic('weixiufenxi3'),
            getImageUrlForPublic('weixiufenxi4'),
            getImageUrlForPublic('weixiufenxi6'),
          ],
          bengList: [{ label: "荣军医院线路维护", value: 0 }],
          bengdetailsList: [
            {
              number: "RJ-BJ-01",
              frequency: 20,
              fault: "10%",
              repair: 80,
              cost: 175000,
              utilization: "40%",
              belong: "文荟街地下..",
            },
          ],
        },
        {
          title: "管线维护",
          currentIndex: 0,
          width: 9999,
          calleft: 0,
          imgList: [
             getImageUrlForPublic('weixiufenxi1'),
            getImageUrlForPublic('weixiufenxi2'),
            getImageUrlForPublic('weixiufenxi3'),
            getImageUrlForPublic('weixiufenxi4'),
            getImageUrlForPublic('weixiufenxi6'),
          ],
          bengList: [
            { label: "1#管线", value: 0 },
            { label: "2#管线", value: 1 },
            { label: "3#管线", value: 2 },
            { label: "4#管线", value: 3 },
            { label: "5#管线", value: 4 },
            { label: "6#管线", value: 5 },
            { label: "7#管线", value: 6 },
          ],
          bengdetailsList: [
            {
              number: "RJ-BJ-01",
              frequency: 20,
              fault: "10%",
              repair: 80,
              cost: 175000,
              utilization: "40%",
              belong: "文荟街地下..",
            },
          ],
        },
        {
          title: "摄像头维护",
          currentIndex: 0,
          width: 9999,
          calleft: 0,
          imgList: [
             getImageUrlForPublic('weixiufenxi1'),
            getImageUrlForPublic('weixiufenxi2'),
            getImageUrlForPublic('weixiufenxi3'),
            getImageUrlForPublic('weixiufenxi4'),
            getImageUrlForPublic('weixiufenxi6'),
          ],
          bengList: [
            { label: "1#视频点", value: 0 },
            { label: "2#视频点", value: 1 },
            { label: "3#视频点", value: 2 },
            { label: "4#视频点", value: 3 },
            { label: "5#视频点", value: 4 },
            { label: "6#视频点", value: 5 },
            { label: "6#视频点", value: 5 },
            { label: "6#视频点", value: 5 },
            { label: "6#视频点", value: 5 },
            { label: "6#视频点", value: 5 },
            { label: "6#视频点", value: 5 },
            { label: "6#视频点", value: 5 },
            { label: "6#视频点", value: 5 },
            { label: "6#视频点", value: 5 },
            { label: "6#视频点", value: 5 },
            { label: "6#视频点", value: 5 },
            { label: "6#视频点", value: 5 },
          ],
          bengdetailsList: [
            {
              number: "RJ-BJ-01",
              frequency: 20,
              fault: "10%",
              repair: 80,
              cost: 175000,
              utilization: "40%",
              belong: "文荟街地下..",
            },
          ],
        },
        {
          title: "自动化系统",
          currentIndex: 0,
          width: 9999,
          calleft: 0,
          imgList: [
             getImageUrlForPublic('weixiufenxi1'),
            getImageUrlForPublic('weixiufenxi2'),
            getImageUrlForPublic('weixiufenxi3'),
            getImageUrlForPublic('weixiufenxi4'),
            getImageUrlForPublic('weixiufenxi6'),
          ],
          bengList: [
            { label: "荣军医院中控系统", value: 0 },
            { label: "荣军医院中控系统", value: 0 },
            { label: "荣军医院中控系统", value: 0 },
          ],
          bengdetailsList: [
            {
              number: "RJ-BJ-01",
              frequency: 20,
              fault: "10%",
              repair: 80,
              cost: 175000,
              utilization: "40%",
              belong: "文荟街地下..",
            },
          ],
        },
      ],
    });
    const innerRef = ref(null);
    const changeBeng = (i, j) => {
      state.weixiuList[i].currentIndex = j;
      // let width = document.querySelector(`#ul${i} li`).clientWidth;
      // // let ulWidth = width * state.weixiuList[i].bengList.length;
      // state.weixiuList[i].calleft -= width;
    };
    const gotoPrev = (i) => {
      // if (state.weixiuList[i].currentIndex <= 0) {
      //   state.weixiuList[i].currentIndex =
      //     state.weixiuList[i].bengList.length - 1;
      // } else {
      //   state.weixiuList[i].currentIndex -= 1;
      let width = document.querySelector(`#ul${i} li`).clientWidth;
      let ulWidth = width * state.weixiuList[i].bengList.length;
      let inner = innerRef.value.clientWidth;
      console.log(inner, ulWidth, state.weixiuList[i].calleft, "ccccccccccccc");
      if (ulWidth - inner > state.weixiuList[i].calleft) {
        state.weixiuList[i].calleft += inner - width;
      }
    };
    const gotoNext = (i) => {
      // if (
      //   state.weixiuList[i].currentIndex >=
      //   state.weixiuList[i].bengList.length - 1
      // ) {
      //   state.weixiuList[i].currentIndex = 0;
      // } else {
      // state.weixiuList[i].currentIndex += 1;
      let width = document.querySelector(`#ul${i} li`).clientWidth;
      let ulWidth = width * state.weixiuList[i].bengList.length;
      let inner = innerRef.value.clientWidth;
      console.log(inner, ulWidth, state.weixiuList[i].calleft, "ccccccccccccc");
      if (ulWidth - inner > -state.weixiuList[i].calleft) {
        state.weixiuList[i].calleft -= inner - width;
      }
      // }
    };
    onMounted(() => {});
    return {
      ...toRefs(state),
      innerRef,
      changeBeng,
      gotoPrev,
      gotoNext,
    };
  },
};
</script>

<style lang='less' scoped>
.form {
  height: 40px;
}
.weixiuList {
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 50px);
  overflow: auto;
  .weixiuItem {
    margin: 5px 10px;
    padding: 9px 10px;
    width: calc((100% - 60px) / 3);
    background: var(--bg-menu);
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0px 0px 5px 5px #79bac594;
    .title {
      margin: 10px 0;
      height: 30px;
      background: url("../../../assets/Imgs/weixiufenxi_title.png") no-repeat;
      span {
        padding-left: 40px;
        line-height: 14px;
        color: var(--color-title);
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: bold;
      }
    }
    .content {
      position: relative;
      display: flex;
      flex-direction: row;
      .left {
        width: 65%;
        img {
          width: 100%;
          height: 280px;
        }
        .outer {
          width: 100%;
          display: flex;
          a {
            padding: 3px 10px;
            background: var(--color-btn-bg-anal);
            color: var(--color-text);
            &:hover {
              background: var(--color-btn-bg-anal-active);
              color: #fff;
            }
          }
          .inner {
            width: 100%;
            overflow: hidden;
            position: relative;
            .btnList {
              width: 9999px;
              position: relative;
              top: 0;
              li {
                float: left;
                padding: 3px 10px;
                background: var(--color-btn-bg-anal);
                cursor: pointer;
                &.active {
                  background: var(--color-btn-bg-anal-active);
                  color: #fff;
                }
              }
            }
          }
        }
      }
      .right {
        position: absolute;
        top: -30px;
        right: 0;
        width: calc(35% - 20px);
        li {
          .single {
            display: flex;
            align-items: center;
            background: var(--color-rgba1);
            margin-bottom: 5px;
            border-radius: 3px;

            .icon {
              margin: 0 10px;
              display: flex;
              width: 38px;
              height: 38px;
              background: #4cb8e9;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
            }
            .text {
              display: flex;
              flex-direction: column;
              .name {
                font-size: 12px;
                color: var(--color-Invert);
              }
              .num {
                color: #4cb8e9;
                font-size: 16px;
                font-family: DIN;
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
  }
}
</style>