<template>
  <div class="main">
    <div class="tab">
      <div>
        <div class="triangle" :class="{ triangleactive: active == 0 }"></div>

        <a :class="{ active: active == 0, active2: active != 0 }" @click="changeTab(0)">
          <!-- <img src="/src/assets/images/青色三角.png" v-show="active == 0" alt="" /> -->
          <span> 总量</span>
        </a>
      </div>
      <div>
        <div class="triangle" :class="{ triangleactive: active == 1 }"></div>

        <a :class="{ active: active == 1, active2: active != 1 }" @click="changeTab(1)">
          <!-- <img v-show="active == 1" src="/src/assets/images/青色三角.png" alt="" /> -->
          <span> 今日</span>
        </a>
      </div>
      <div>
        <div class="triangle" :class="{ triangleactive: active == 2 }"></div>

        <a :class="{ active: active == 2, active2: active != 2 }" @click="changeTab(2)">
          <!-- <img v-show="active == 2" src="/src/assets/images/青色三角.png" alt="" /> -->
          <span> 近七日</span>
        </a>
      </div>
    </div>
    <div class="result">
      <div class="leftimg"></div>
      <div class="mid">
        <!-- <div class="resultimg">
          <img src="/src/assets/starContainer.png" style="width: 40px; height: 40px" alt="" />
        </div> -->
        <div class="cg"> <span>成果数据</span></div>
        <div class="tiao">
          <i>条</i>
        </div>
        <div class="rit">
          <div style="display: flex">
            <div class="items" v-for="(item, index) in ResultObj" :key="index">
              <div>
                <!-- <div class="label">
                  {{ item.label }}
                </div> -->
                <div class="itemss">
                  <i> {{ item.num }}</i>
                </div>
              </div>

              <div class="douhao" v-if="douhao(item.label)"><span>,</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="rightimg"></div>
    </div>
    <div class="origin">
      <div class="leftimg"></div>
      <div class="mid">
        <!-- <div class="originimg">
          <img src="/src/assets/starContainer.png" style="width: 40px; height: 40px" alt="" />
        </div> -->
        <div class="cg"><span>原始数据</span></div>
        <div class="tiao">
          <i>条</i>
        </div>
        <div class="rit">
          <div style="display: flex">
            <div class="items" v-for="(item, index) in originObj" :key="index">
              <div>
                <!-- <div class="label">
                  {{ item.label }}
                </div> -->
                <div class="itemss">
                  <i> {{ item.num }}</i>
                </div>
              </div>

              <div class="douhao" v-if="douhao(item.label)"><span>,</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="rightimg"></div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, ref, watch, onMounted, getCurrentInstance, onUnmounted } from 'vue';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
// import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
export default defineComponent({
  name: 'DataCount',
  setup() {
    let oldReslt = ref(0);
    let oldOrigin = ref(0);
    let isFirst = ref(true);
    let Index = ref(0);
    let active = ref(0);
    let shili = ref(0);
    let Result = reactive({});
    let ResultObj = ref(0);
    let TotalResult = reactive({});
    let origin = reactive({});
    let originObj = ref(0);
    let originResult = reactive({});
    const monitorDevicesStore = useMonitorDevicesStore();
    onMounted(() => {
      // console.log(monitorDevicesStore, 'monitorDevicesStore');
      shili.value = processNumber(12345678);
      // console.log(obj, 'obj---');
      init();
      setInterval((e) => {
        // console.log('定时刷新');
        init();
      }, 30000);
    });
    function init() {
      monitorDevicesStore.originCount().then((res) => {
        // console.log(res, '原始数据----------------------');
        originResult = res.result;
        // changeTab(Index.value);
        // TotalResult = res.result;
        changeTab(Index.value);
        // monitorDevicesStore.ligongResultCount().then((res2) => {
        //   // console.log(res, '成果数据----------------------');
        
         
        // });
      });
    }
    function changeTab(index) {
      Index.value = index;
      active.value = index; // 将点击的序号赋值给active变量
      // console.log(active.value, 'active.value');
      switch (index) {
        case 0:
          Result = originResult.allMonitorData; //总量
          origin = originResult.allData;
          break;
        case 1:
          Result = originResult.last1DayMonitorData; //今日
          origin = originResult.last1DayData;
          break;
        case 2:
          Result = originResult.last7DayMonitorData; //7日
          origin = originResult.last7DayData;
          break;
      }
      // console.log(Result.count, 'Result');
      let Rcounts = 0;
      let Ocounts = 0;
      // if (Result.count!=0) {
      if (isFirst.value) {
        // console.log('真的？');

        isFirst.value = false;

        ResultObj.value = processNumber(Result);
        originObj.value = processNumber(origin);
        oldReslt.value = ResultObj.value;
        oldOrigin.value = originObj.value;
      } else {
        // console.log('假的？');
        oldReslt.value = ResultObj.value;
        oldOrigin.value = originObj.value;

        // const intervalId = setInterval(() => {
        //   if (oldReslt.value < Result.count) {
        //     oldReslt.value = oldReslt.value + 1000;
        //     ResultObj.value = processNumber(Rcounts);
        //   } else {
        //     ResultObj.value = processNumber(Result.count);
        //     clearInterval(intervalId);
        //   }
        // }, 10);
        const intervalId = setInterval(() => {
          if (oldReslt.value < Result) {
            oldReslt.value = oldReslt.value + 1000;
            ResultObj.value = processNumber(oldReslt.value);
          } else if (oldReslt.value > Result) {
            oldReslt.value = oldReslt.value - 1000;
            ResultObj.value = processNumber(oldReslt.value);
          } else {
            ResultObj.value = processNumber(Result);
            clearInterval(intervalId);
          }

          // 添加条件判断，当差值小于等于1000时，直接设置ResultObj.value为Result.count的值，并停止setInterval循环
          if (Math.abs(oldReslt.value - Result) <= 1000) {
            ResultObj.value = processNumber(Result);
            clearInterval(intervalId);
          }
        }, 10);
        // const intervalId2 = setInterval(() => {
        //   if (oldOrigin.value < origin) {
        //     oldOrigin.value = oldOrigin.value + 1000;
        //     originObj.value = processNumber(Ocounts);
        //   } else {
        //     originObj.value = processNumber(origin);
        //     clearInterval(intervalId);
        //   }
        // }, 10);
        const intervalId2 = setInterval(() => {
          if (oldOrigin.value < origin) {
            oldOrigin.value = oldOrigin.value + 1000;
            originObj.value = processNumber(oldOrigin.value);
          } else if (oldOrigin.value > origin) {
            oldOrigin.value = oldOrigin.value - 1000;
            originObj.value = processNumber(oldOrigin.value);
          } else {
            originObj.value = processNumber(origin);
            clearInterval(intervalId2);
          }

          // 添加条件判断，当差值小于等于1000时，直接设置originObj.value为origin的值，并停止setInterval循环
          if (Math.abs(oldOrigin.value - origin) <= 1000) {
            originObj.value = processNumber(origin);
            clearInterval(intervalId2);
          }
        }, 10);
      }
    }
    function processNumber(num) {
      const digits = String(num).split('').reverse();
      const result = [];

      // 添加6个初始元素
      // for (let i = 0; i < 8; i++) {
      //   result.push({ label: getLabel(i), num: '' });
      // }

      for (let i = 0; i < digits.length; i++) {
        const label = getLabel(i);
        const digit = parseInt(digits[i]);

        // 替换初始元素
        result[i] = { label, num: digit };
      }

      return result.reverse();
    }

    function getLabel(index) {
      switch (index) {
        case 0:
          return '个';
        case 1:
          return '十';
        case 2:
          return '百';
        case 3:
          return '千';
        case 4:
          return '万';
        case 5:
          return '十万';
        case 6:
          return '百万';
        case 7:
          return '千万';
        default:
          return '';
      }
    }
    function douhao(val) {
      // console.log(val,'val');
      if (val == '千') {
        // console.log('千');
        return true;
      } else if (val == '百万') {
        // console.log('百万');
        return true;
      } else if (val == '亿') {
        return true;
      } else {
        return false;
      }
    }
    return {
      oldReslt,
      oldOrigin,
      isFirst,
      init,
      origin,
      originObj,
      originResult,
      douhao,
      shili,
      processNumber,
      getLabel,
      TotalResult,
      Result,
      ResultObj,
      active,
      changeTab,
      Index,
    };
  },
});
</script>

<style lang="less" scoped>
.main {
  // position: fixed;
  // top: 100px;
  // right: 27%;
  z-index: 9;
  // width: 945px;
  height: 102px;
  // background-color: aqua;
  display: flex;
  flex-direction: column;
  position: relative;
  margin-top: 18px;
  .tab {
    display: flex;
    position: absolute;
    top: -56px;
    right: -9px;
    /* width: 80px; */
    padding: 13px 14px 13px 0;
    // position: relative;
    img {
      position: absolute;
    }
    a {
      span {
        // margin-left: 30px;
        line-height: 28px;
      }
      display: flex;
      // flex-direction: column;
      align-content: stretch;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      font-family: HarmonyOS Sans SC;
      font-weight: 400;
      color: #ffffff;
      align-items: flex-start;
      padding-left: 0px;
      white-space: nowrap;
    }
    /deep/ a.active {
      display: flex;
      justify-content: center;
      align-items: center;

      font-family: HarmonyOS Sans SC;
      font-size: 16px;
      font-weight: 400;
      color: #fff;
      white-space: nowrap;
      line-height: 20px;
      width: 60px;
      // color: #fff;
      // background-color: rgba(65, 172, 255, 0.5); /* 设置背景颜色 */
      background-image: url('/src/assets/images/Xone.png'); /* 设置背景图片 */
      background-repeat: no-repeat;
      // background-position: 0px center;
      background-size: 100% 100%;
      // padding-left: 0px;
      z-index: 999; /* 设置背景颜色的层级为1 */
      position: relative; /* 设置相对定位，以便控制层级 */
      text-align: center;
    }
    /deep/ a.active2 {
      display: flex;
      justify-content: center;
      align-items: center;

      font-family: HarmonyOS Sans SC;
      font-size: 16px;
      font-weight: 400;
      color: #1e98ff;
      white-space: nowrap;
      line-height: 20px;
      width: 60px;
      // color: #fff;
      // background-color: rgba(65, 172, 255, 0.5); /* 设置背景颜色 */
      background-image: url('/src/assets/images/Xtwo.png'); /* 设置背景图片 */
      background-repeat: no-repeat;
      // background-position: 0px center;
      background-size: 100% 100%;
      // padding-left: 0px;
      z-index: 999; /* 设置背景颜色的层级为1 */
      position: relative; /* 设置相对定位，以便控制层级 */
    }

    // /deep/ a.active::before {
    //   content: '';
    //   // background-image: linear-gradient(to left, rgba(67, 255, 249, 0.5), rgba(0, 139, 253, 0.5)); /* 设置背景颜色 */
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   width: 122%;
    //   height: 100%;
    //   z-index: -99; /* 设置背景图片的层级为0 */
    // }
  }
  .result {
    // width: 300px;
    height: 50%;
    display: flex;
    background-image: url(/src/assets/images/chengguo.png);
    background-size: 100% 100%;
    width: 100%;
    margin-bottom: 9px;
    .leftimg {
      height: 100px;
      width: 34px;
      // background-image: url(/src/assets/count/left.png);
    }
    .rightimg {
      height: 100px;
      width: 34px;
      // background-image: url(/src/assets/count/right.png);
    }
    .mid {
      width: 100%;
      // width: 80%;
      padding: 0 0 0 20px;

      position: relative;
      display: flex;
      margin-left: -20px;
      justify-content: space-between;
      .resultimg {
        top: 7px;
        left: 7px;
        position: absolute;
      }
      .tiao {
        top: 14px;
        right: -15px;
        position: absolute;
        font-size: 18px;
        font-family: Tensentype LingHeiJ;
        color: #ffffff;
      }
      .cg {
        background-image: url(/src/assets/retriangle.png);
        background-size: 100% 100px;
        display: flex;
        align-items: center;
        padding-left: 35px;
        width: 99px;
        span {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #08e5ff;
          background-image: -webkit-linear-gradient(top, #43fff9, #008bfd);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .rit {
        margin: 6px 0 0 10px;

        .items {
          display: flex;
          .label {
            display: flex;
            justify-content: center;
            align-items: center;
            // margin: 5px 2px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #08e5ff;
          }
          .itemss {
            display: flex;
            margin: 5px 2px;
            width: 16px;
            height: 30px;
            // background-image: url(/src/assets/count/retriangle.png);
            justify-content: center;
            align-items: center;

            font-size: 24px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #ffffff;
          }
          .douhao {
            width: 7px;
            padding-top: 15px;
            padding-left: 2px;
            padding-right: 2px;
            color: #08e5ff;
            font-size: 16px;
          }
        }
      }
    }
  }
  .origin {
    // width: 300px;
    height: 50%;
    display: flex;
    background-image: url(/src/assets/images/originData.png);
    background-size: 100% 100%;
    // margin-left: 8px;
    width: 100%;
    margin-bottom: 20px;
    .leftimg {
      height: 100px;
      width: 34px;
      // background-image: url(/src/assets/count/left.png);
    }
    .rightimg {
      height: 100px;
      width: 34px;
      // background-image: url(/src/assets/count/right.png);
    }
    .mid {
      width: 100%;
      padding: 0 0 0 20px;

      position: relative;
      display: flex;
      margin-left: -20px;
      justify-content: space-between;
      .originimg {
        top: 7px;
        left: 7px;
        position: absolute;
      }
      .tiao {
        top: 14px;
        right: -15px;
        position: absolute;
        font-size: 18px;
        font-family: Tensentype LingHeiJ;
        color: #ffffff;
      }
      .cg {
        background-image: url(/src/assets/retriangle103.png);
        background-size: 100% 100px;
        display: flex;
        align-items: center;
        padding-left: 35px;
        width: 99px;
        span {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #08e5ff;
          background-image: -webkit-linear-gradient(top, #43fff9, #008bfd);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .rit {
        margin: 6px 0 0 10px;

        .items {
          display: flex;
          .label {
            display: flex;
            justify-content: center;
            align-items: center;
            // margin: 5px 2px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #08e5ff;
          }
          .itemss {
            display: flex;
            margin: 5px 2px;
            width: 16px;
            height: 30px;
            // background-image: url(/src/assets/count/retriangle.png);
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-family: PangMenZhengDao;
            font-weight: 400;
            color: #ffffff;
          }
          .douhao {
            width: 7px;
            padding-top: 15px;
            padding-left: 2px;
            padding-right: 2px;
            color: #08e5ff;
            font-size: 16px;
          }
        }
      }
    }
  }
}

i {
  font-family: 'AgencyFB';
  // font-size: 24px;
  text-shadow: 0 0 7px #4ef9e1;
  color: #fff;
  // line-height: 142px;
  text-align: center;
  font-style: normal;
  // margin-left: 26px;
}

.triangle {
  // display: inline-block;
  // width: 0;
  // height: 0;
  // border-left: 9px solid transparent;
  // border-right: 9px solid transparent;
  // border-bottom: 15.6px solid #fff;
  // transform: rotate(90deg);
  position: absolute;
  margin: 5px 2px 0px -19px;
  // left: 0px;
  // top: 5px;
  img {
    position: absolute;
  }
}
.triangleactive {
  // background: rgba(126, 205, 255, 0.1) url('/src/assets/images/青色三角.png') no-repeat;
  background-position: 0px center;
  display: inline-block;
  // width: 0;
  // height: 0;
  // border-left: 9px solid transparent;
  // border-right: 9px solid transparent;
  // border-bottom: 15.6px solid #08e5ff;
  // transform: rotate(90deg);
}
</style>