<template>
  <view class="px-2 bg-white wrap">
    <view class="home-box u-skeleton">
      <scroll-view :enable-flex="true" :scroll-left="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"
            v-for="(item, index) in roles"
          >
            <view class="tab-children u-skeleton-fillet u-font-14">
              {{ item.name }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 骨架屏 -->
    <u-skeleton :animation="true" :loading="loading" bg-color="#fff"></u-skeleton>
  </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';

export default {
  name: 'Roles',
  data() {
    return {
      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,
    };
  },

  computed: {
    ...mapState('role', ['visibleRoles', 'roleId']),
    ...mapState('task', ['tasks']),
  },

  watch: {
    visibleRoles(val) {
      if (val && val.length) {
        this.roles = [...this.visibleRoles];
        this.loading = false;
      }
    },
  },

  mounted() {
    if (!this.visibleRoles || !this.visibleRoles.length) {
      this.loading = true;
    } else {
      this.roles = [...this.visibleRoles];
    }

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

  methods: {
    ...mapActions('task', ['handleRegularTask']),
    ...mapMutations('role', ['setRoleId']),
    ...mapMutations('task', ['setPermanents', 'clearEndFlag']),

    scroll(e) {
      this.scrollLeft = e.detail.scrollLeft;
    },

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

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

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

    // 切换角色
    // 查任务这里不用管 project监听了roleId的变化
    // 时间基准点不用管 project监听了roleId 里处理了
    changeRole(id, index) {
      try {
        // 清除多余的script
        this.clearPluginScript();
        this.$nextTick(() => {
          this.setRoleId(id);
          // 改变index 即手动点击切换 我在此时将当前元素赋值给左边距 实现自动滚动
          this.setCurrentRole(index);
        });
      } catch (error) {
        console.error('role.vue changeRole error: ', error);
      }
    },

    // 清除插件script
    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);
      }
    },
  },
};
</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: 60rpx;
    display: flex;
    align-items: center;
    // height: 84rpx;

    .tab-item {
      // width: 20%;
      // height: 84rpx;
      // padding: 20rpx 24rpx;
      padding: 0 24rpx;
      position: relative;
      // display: inline-block;
      // text-align: center;
      font-size: 30rpx;
      height: 60rpx;
      line-height: 60rpx;
      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;
    }
  }
}

// // 删除 底部滚动条
/* #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>
