<template>
  <view class="px-2 bg-white wrap">
    <view class="home-box u-skeleton">
      <scroll-view :enable-flex="true" :scroll-left="data.scrollLeft" :throttle="false" scroll-with-animation scroll-x @scroll="scroll">
        <view class="tab-box">
          <!-- 角色项
            default-tab-choice 是 我的角色 && 当前展示
            default-tab-item 是 我的角色 && 当前不展示
            tab-choice 不是我的 && 当前展示
          -->
          <view
            :class="{
              'default-tab-choice': item.mine == 1 && roleId === item.id,
              'default-tab-item': item.mine == 1 && roleId !== item.id,
              'tab-choice': item.mine == 0 && roleId === item.id,
            }"
            :key="index"
            @click="changeRole(item.id, index)"
            class="tab-item relative"
            v-for="(item, index) in data.roles"
          >
            <view class="tab-children relative u-skeleton-fillet u-font-14">
              {{ item.name }}
            </view>
            <view class="remind-box absolute bg-red-500 text-white text-xs" v-if="item.remindNum">{{ item.remindNum > 99 ? '99+' : item.remindNum }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 骨架屏 -->
    <u-skeleton :animation="true" :loading="data.loading" bg-color="#fff"></u-skeleton>
  </view>
</template>

<script setup>
import { reactive, computed, watchEffect, onMounted, nextTick } from 'vue';
import { useStore } from 'vuex';
import useGetTasks from '@/hooks/project/useGetTasks';

const data = reactive({
  tabIndex: 0, // 当前访问的 index 默认为0
  tabList: [], // tab dom节点集合
  scrollLeft: 0, // scrollview需要滚动的距离
  loading: false, // 是否显示骨架屏组件
  roles: [{ id: 1, name: '项目经理', mine: 0, pm: 1, sequence: 1 }, { id: 2, name: '运维', mine: 0, pm: 0, sequence: 2 }],
  roleLeft: 0,
  clickNum: 0,
  firstClickTime: 0,
  secClickTime: 0
});

const store = useStore();
const getTasksHook = useGetTasks();
const visibleRoles = computed(() => store.state.role.visibleRoles);
const roleId = computed(() => store.state.role.roleId);
const tasks = computed(() => store.state.task.tasks);
const remindData = computed(() => store.state.socket.remindData); // 小红点
const currLocationTaskId = computed(() => store.state.socket.currLocationTaskId); // 前需要定位到的任务id

watchEffect(() => {
  if (remindData.value && visibleRoles.value) {
    visibleRoles.value.forEach(role => {
      role.remindNum = 0;
      remindData.value.forEach(remind => {
        const remind_data = JSON.parse(remind.data);
        if (remind_data.data.roleId === role.id) {
          role.remindNum++;
        }
      })
    })
  }

  if (visibleRoles.value && visibleRoles.value.length) {
    data.roles = visibleRoles.value;
    data.loading = false;
  }
});

onMounted(() => {
  if (!visibleRoles.value || !visibleRoles.value.length) {
    data.loading = true;
  } else {
    data.roles = visibleRoles.value;
  }

  nextTick(() => {
    const query = uni.createSelectorQuery().in(this);
    query
      .selectAll('.tab-children')
      .boundingClientRect(res => {
        if (res.length) {
          data.roleLeft = res[0].left;
        }
      })
      .exec();
  });
});

function scroll(e) {
  data.scrollLeft = e.detail.scrollLeft;
}

// 设置滚动位置
function setCurrentRole(index) {
  const query = uni.createSelectorQuery().in(this);
  console.log('ppppppp', query);
  query
    .selectAll('.tab-children')
    .boundingClientRect(res => {
      console.log('oooooooooo', res);
      res.forEach(item => {
        data.tabList.push({ width: item.width });
      });
    })
    .exec();

  const system = uni.getSystemInfoSync(); // 获取系统信息
  // 屏幕宽度
  const screenWidth = system.windowWidth;
  // 当前滚动的位置
  let left = 0;
  for (let i = 0; i < index; i++) {
    left += data.tabList[i].width + (data.roleLeft - 8) * 2;
  }

  left += (data.tabList[index].width + (data.roleLeft - 8) * 2) / 2;
  if (left > screenWidth) {
    data.scrollLeft = left - screenWidth + screenWidth / 2;
  } else if (left > screenWidth / 2) {
    data.scrollLeft = left - screenWidth / 2;
  } else if (left < screenWidth / 2) {
    data.scrollLeft = 0;
  }
}

// 清除插件script
function clearPluginScript() {
  try {
    const scripts = document.querySelectorAll('script[data-type=plugin]');
    for (let i = 0; i < scripts.length; i++) {
      document.body.removeChild(scripts[i]);
    }
  } catch (error) {
    console.error('clearPluginScript error: ', error);
  }
}

// 切换角色
// 查任务这里不用管 project监听了roleId的变化
// 时间基准点不用管 project监听了roleId 里处理了
function changeRole(id, index) {
  try {
    data.clickNum = data.clickNum === 0 ? 1 : data.clickNum + 1;

    if (data.clickNum === 1) {
      data.firstClickTime = new Date().getTime();

      // 清除多余的script
      // clearPluginScript();
      nextTick(() => {
        store.commit('role/setRoleId', id);
        store.commit('role/setRoleIndex', index);
        // 改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
        setCurrentRole(index);
      });

      setTimeout(() => {
        data.clickNum = data.firstClickTime = data.secClickTime = 0;
      }, 500)
    } else if (data.clickNum === 2) {
      data.secClickTime = new Date().getTime();

      if (data.secClickTime - data.firstClickTime < 500) {
        let arr = [];
        remindData.value.forEach(item => {
          const remind_data = JSON.parse(item.data);
          if (remind_data.data.taskType === 1) {
            arr.push(item);
          }
        });

        if (arr.length > 0) {
          let nextLocationTaskId = '';

          for (let i = 0; i < arr.length; i++) {
            const first_option = JSON.parse(arr[0].data);
            const curr_option = JSON.parse(arr[i].data);

            if (!currLocationTaskId.value) {
              nextLocationTaskId = first_option.data.taskId;
              break;
            }

            if (curr_option.data.taskId === currLocationTaskId.value) {
              if (i === arr.length - 1) {
                nextLocationTaskId = first_option.data.taskId;
              } else {
                const next_option = JSON.parse(arr[i+1].data);
                nextLocationTaskId = next_option.data.taskId;
              }
            }
          }

          store.commit('socket/setCurrLocationTaskId', nextLocationTaskId);
          store.commit('task/clearTasks'); // 清空定期任务
          store.commit('task/clearRealTasks'); // 清空真实任务数据
          store.commit('task/setUpNextPage', 1);
          store.commit('task/setDownNextPage', 1);
          // store.commit('task/setTimeLineType', timeLineType.value === 1 ? 2 : 1);
          let params = { pageNum: 1, taskId: nextLocationTaskId };
          getTasksHook.getTasks(params);
        }
      }

      data.clickNum = data.firstClickTime = data.secClickTime = 0;
    }
  } catch (error) {
    console.error('role.vue changeRole error: ', error);
  }
}
</script>

<style lang="scss" scoped>
.home-box {
  // 对此盒子进行 sticky 粘性定位
  position: sticky;
  top: 0;
  background: #fff; // 设置背景 否则会透明

  /* #ifdef H5 */
  //粘性定位 在h5下 加 原生头部高度 44px
  top: 88rpx;
  /* #endif */

  .tab-box {
    position: relative;
    white-space: nowrap;
    // height: 84rpx;

    .tab-item {
      // width: 20%;
      // height: 84rpx;
      padding: 20rpx 24rpx;
      position: relative;
      display: inline-block;
      text-align: center;
      font-size: 30rpx;
      transition-property: background-color, width;
    }

    .default-tab-item {
      color: $roleChoiceColor;
    }

    .default-tab-choice {
      //当前选中 基于此类名给与底部选中框
      position: relative;
      color: $roleChoiceColor;
      font-weight: 600;
    }

    .default-tab-choice:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: -20rpx;
      width: 100%;
      height: 6rpx;
      border-radius: 2rpx;
      background: $roleChoiceColor;
    }

    .tab-choice {
      //当前选中 基于此类名给与底部选中框
      position: relative;
      color: $uni-color-primary;
      font-weight: 600;
    }

    .tab-choice:before {
      content: '';
      position: absolute;
      left: 0;
      bottom: -20rpx;
      width: 100%;
      height: 6rpx;
      border-radius: 2rpx;
      background: $uni-color-primary;
    }
  }
}

.remind-box {
  top: 0;
  right: -5px;
  padding: 0 3px;
  min-width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  border-radius: 8px;
  font-weight: 100;
  transform: scale(0.8);
}

// // 删除 底部滚动条
/* #ifndef APP-NVUE */
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}

/* #endif */
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view ::v-deep ::-webkit-scrollbar {
  display: none;
}

/* #endif */

.skeleton {
  height: 44rpx;
}
</style>
