<template>
  <view class>
    <scroll-view scroll-y="true" style="height: 80%">
      <view
        :id="'cu-' + index"
        :key="index"
        :style="{ 'background-color': item.color }"
        class="cu-item flex-col"
        v-for="(item, index) in itemList"
        @touchend="stops($event, index)"
        @touchmove.stop.prevent="move"
        @touchstart="start($event, index)"
      >
        <view class="border-100 bg-blue-500" v-if="item.showTopBorder"></view>
        <!-- 内容区 -->
        <!-- <project-item :index="index" :item="item"></project-item> -->
        <!-- 父项目 -->
        <view class="w-full">
          <view class="flex items-center justify-between p-3">
            <u-icon @click="openMenu(item)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>

            <view @click="openProject(item)" class="flex-1 px-3">
              <view class="flex items-center mb-1">
                <view class="mr-2">{{ item.name }}</view>
                <!-- 状态 TODO:-->
                <view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view>
              </view>

              <view class="flex items-center text-xs text-gray-400">
                <view class="pr-2"> {{ $moment(+item.startTime).format('MM-DD HH:mm') }} </view>至
                <view class="pl-2">{{ $moment(+item.endTime).format('MM-DD HH:mm') }}</view>
              </view>
            </view>

            <!-- 箭头 -->
            <view v-if="item.sonProjectList && item.sonProjectList.length">
              <u-icon
                @click="openSubProject(item.sonProjectList.length, index)"
                class="text-gray-400"
                name="arrow-up"
                size="14px"
                v-if="item.show"
              ></u-icon>
              <u-icon
                @click="openSubProject(item.sonProjectList.length, index)"
                class="text-gray-400"
                name="arrow-down"
                size="14px"
                v-else
              ></u-icon>
            </view>
            <u-icon @click="openProject(item)" class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon>
          </view>
          <!-- 父项目 end -->
          <!-- 子项目 -->

          <view class="ml-8" v-if="item.show">
            <view
              :id="'cu-' + index + '-' + subIndex"
              :key="subIndex"
              :style="{ 'background-color': item.color }"
              @touchend.stop.prevent="stops($event, index + '-' + subIndex, item.sonProjectList.length)"
              @touchmove.stop.prevent="move($event, item.sonProjectList.length)"
              @touchstart.stop.prevent="start($event, index + '-' + subIndex)"
              class="cu-item flex-col"
              v-for="(subItem, subIndex) in item.sonProjectList"
            >
              <!-- <view :key="subItem.id" v-for="subItem in item.sonProjectList"> -->
              <view class="flex items-center justify-between p-3 w-full">
                <u-icon @click="openMenu(subItem)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>

                <view @click="openProject(subItem)" class="flex-1 px-3">
                  <view class="flex items-center">
                    <view class="mr-2">{{ subItem.name }}</view>
                    <!-- 状态 -->
                    <view
                      class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full"
                      :class="
                        subItem.status === 0
                          ? 'text-blue-400 bg-blue-100'
                          : subItem.status === 1
                          ? 'text-green-400 bg-green-100'
                          : subItem.status === 2
                          ? 'text-red-400 bg-red-100'
                          : 'text-gray-400 bg-gray-100'
                      "
                    >
                      {{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }}
                    </view>
                  </view>
                </view>

                <!-- 箭头 -->
                <u-icon @click="openProject(subItem)" class="text-gray-400" name="arrow-right" size="14px"></u-icon>
              </view>
            </view>
          </view>
        </view>
        <!-- 内容区 end -->
        <view class="border-100 bg-blue-500" v-if="item.showBorder"></view>
        <view class="border-80 bg-blue-500" v-if="item.showSubBorder"></view>
      </view>
    </scroll-view>
    <!-- 移动悬浮 begin -->
    <view v-if="showMoveImage">
      <view :style="{ left: moveLeft + 'px', top: moveTop + 'px' }" class="cu-item" style="position: absolute">
        <project-item :item="moveItem"></project-item>
      </view>
    </view>
    <!-- 移动悬浮 end -->

    <!-- 项目操作面板 -->
    <u-action-sheet :list="menuList" :tips="tips" v-model="showMenu"></u-action-sheet>
  </view>
</template>

<script>
import ProjectItem from '../Projects/ProjectItem.vue';
import { mapGetters, mapMutations } from 'vuex';

export default {
  components: { ProjectItem },
  name: 'exchange',
  model: {
    prop: 'showPop',
    event: 'change',
  },

  props: {
    list: {
      // 数据交换列表
      type: Array,
      default() {
        return [];
      },
    },
  },

  data() {
    return {
      itemTop: 0,
      itemLeft: 0,
      itemHeight: 0, // 移动元素的高度
      subItemHeight: 0, // 移动子元素的高度
      itemWidth: 0, // 移动元素的宽度
      showMoveImage: false,
      moveItem: '',
      moveLeft: 0,
      moveTop: 0,
      deltaLeft: 0,
      deltaTop: 0,
      beginleft: 0,
      begintop: 0,
      itemList: [],
      setSubItem: false,

      showMenu: false,
      tips: {
        text: '',
        color: '#909399',
        fontSize: 28,
      },
      menuList: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }],
      // show: false,
      border: 'border border-blue-500 shadow rounded-md',
      showBorder: false,
    };
  },

  computed: mapGetters('user', ['userId']),

  mounted: function () {
    this.$nextTick(function () {
      this.itemList = this.list;
      this.itemList.forEach(item => {
        item.showBorder = false;
        item.showSubBorder = false;
        item.showTopBorder = false;
      });
    });
  },

  watch: {
    list(val) {
      this.itemList = val;
      this.itemList.forEach(item => {
        item.showBorder = false;
        item.showSubBorder = false;
        item.showTopBorder = false;
      });
    },
  },

  methods: {
    ...mapMutations('project', ['setProjectItemShow']),

    /**
     * 打开项目
     * @param {object} project 所点击的项目的信息
     */
    openProject(project) {
      const { name, id, url } = project;
      url && (uni.$t.domain = url);
      this.$u.route('pages/project/project', {
        u: this.userId,
        p: id,
        pname: name,
        url: encodeURIComponent(url),
      });
    },

    /**
     * 弹出项目操作面板
     */
    openMenu(project) {
      this.showMenu = true;
      this.tips.text = project.name;
    },

    // 展开子项目
    openSubProject(length, index) {
      this.setProjectItemShow({ index, show: this.itemList[index].show ? false : true });
      if (length && index) {
        this.$emit('changeHeight', length, index);
      }
    },

    // 获取项目列表距离顶部的距离
    getDate() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select(`#cu-0`)
        .boundingClientRect(data => {
          console.log('data: ', data);
          this.begintop = data.top;
          this.beginleft = data.left;
        })
        .exec();
    },

    isNumber(val) {
      return val === +val;
    },

    start(e, index) {
      setTimeout(() => {
        this.getDate();
      }, 300);

      if (this.isNumber(index)) {
        this.setSubItem = false;
        const query = uni.createSelectorQuery().in(this);
        query
          .select(`#cu-${index}`)
          .boundingClientRect(data => {
            this.moveTop = data.top;
            this.moveLeft = data.left;
            this.moveItem = this.itemList[index];
            this.itemWidth = data.width;
            this.itemHeight = data.height;
          })
          .exec();
      } else {
        let arr = index.split('-');
        // this.moveItem = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
        this.setSubItem = true;
        const query = uni.createSelectorQuery().in(this);
        query
          .select(`#cu-${arr[0] - 0}`)
          .boundingClientRect(data => {
            this.itemHeight = data.height;
          })
          .exec();

        query
          .select(`#cu-${index}`)
          .boundingClientRect(data => {
            this.moveTop = data.top;
            this.moveLeft = data.left;
            this.moveItem = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
            this.itemWidth = data.width;
            this.subItemHeight = data.height;
          })
          .exec();
      }
    },

    move(e, length) {
      this.showMoveImage = true; //悬浮开始
      const touch = e.touches[0];
      if (this.deltaLeft == 0) {
        // 获得本身的移动
        this.deltaLeft = touch.pageX - this.moveLeft;
        this.deltaTop = touch.pageY - this.moveTop;
      }
      this.moveLeft = touch.pageX - this.deltaLeft;
      this.moveTop = touch.pageY - this.deltaTop;

      let lastIndex = (lastIndex = this.findOverIndex(touch.pageY, length));
      // 显示下划线
      for (let i = 0; i < this.itemList.length; i++) {
        if (this.moveLeft > 35) {
          this.itemList[i].showBorder = false;
          this.itemList[i].showTopBorder = false;
          if (i === lastIndex) {
            this.itemList[i].showSubBorder = true;
          } else {
            this.itemList[i].showSubBorder = false;
          }
        } else {
          if (lastIndex === -1) {
            this.itemList[0].showTopBorder = true;
            this.itemList[i].showSubBorder = false;
            this.itemList[i].showBorder = false;
          } else {
            this.itemList[i].showSubBorder = false;
            this.itemList[i].showTopBorder = false;
            if (i === lastIndex) {
              this.itemList[i].showBorder = true;
            } else {
              this.itemList[i].showBorder = false;
            }
          }
        }
      }
    },

    stops(e, index, length) {
      console.log('结束', index);
      const touch = e.mp.changedTouches[0];
      console.log('touch.pageY: ', touch.pageY);
      let lastIndex = (lastIndex = this.findOverIndex(touch.pageY, length));

      // 交换两个值
      for (let i = 0; i < this.itemList.length; i++) {
        // 插入顶部
        if (this.itemList[i].showTopBorder) {
          if (this.isNumber(index)) {
            let Value = this.itemList[index];
            this.itemList.unshift(Value);
            this.itemList.splice(index + 1, 1);
          } else {
            let arr = index.split('-');
            let Value = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
            this.itemList.unshift(Value);
            this.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
            const options = {
              id: Value.id,
              parentId: 0,
            };
            this.$emit('change', options);
          }
          // 清空
          this.clearSet(i);
          this.$emit('change', this.itemList);
          return;
        }
        // 插入一级项目
        if (this.itemList[i].showBorder) {
          if (this.isNumber(index)) {
            let Value = this.itemList[index];
            this.itemList.splice(i + 1, 0, Value);
            if (i < index) {
              this.itemList.splice(index + 1, 1);
            } else {
              this.itemList.splice(index, 1);
            }
          } else {
            let arr = index.split('-');
            let Value = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
            this.itemList.splice(i + 1, 0, Value);
            this.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
            const options = {
              id: Value.id,
              parentId: 0,
            };
            this.$emit('change', options);
          }
          // 清空
          this.clearSet(i);
          this.$emit('change', this.itemList);
          return;
        }
        // 插入二级项目
        if (this.itemList[i].showSubBorder) {
          if (this.isNumber(index)) {
            let Value = this.itemList[index];
            console.log('lastIndex: ', lastIndex);
            if (this.itemList[lastIndex - 1].sonProjectList && this.itemList[lastIndex - 1].sonProjectList.length) {
              this.itemList[lastIndex - 1].sonProjectList.push(Value);
            } else {
              this.itemList[lastIndex].sonProjectList = [Value];
            }
            this.itemList.splice(index, 1);
            // 清空
            this.clearSet(i);
            const options = {
              id: Value.id,
              parentId: this.itemList[lastIndex - 1].id,
            };
            this.$emit('change', options);
          } else {
            let arr = index.split('-');
            let Value = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
            if (this.itemList[lastIndex].sonProjectList && this.itemList[lastIndex].sonProjectList.length) {
              this.itemList[lastIndex].sonProjectList.push(Value);
            } else {
              this.itemList[lastIndex].sonProjectList = [Value];
            }
            this.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
            // 清空
            this.clearSet(i);
            const options = {
              id: Value.id,
              parentId: this.itemList[lastIndex].id,
            };
            this.$emit('change', options);

            const options1 = {
              id: Value.id,
              parentId: 0,
            };
            this.$emit('change', options1);
          }
          return;
        }
      }
    },

    // 还原初始数据
    clearSet(i) {
      this.itemList[i].showBorder = false;
      this.itemList[i].showSubBorder = false;
      this.itemList[i].showTopBorder = false;
      this.deltaLeft == 0;
      this.showMoveImage = false;
      this.setSubItem = false;
    },

    // 找到停下的元素的下标
    findOverIndex(posY) {
      // 如果有子项目展开着
      let leng = this.itemList.length * this.itemHeight; // 最后一个元素距离顶部的距离
      if (posY < this.begintop) {
        return -1;
      }
      for (var i = 0; i < this.itemList.length; i++) {
        let begin = this.itemHeight * i + this.begintop;
        let end = this.itemHeight * i + this.begintop + this.itemHeight;
        if (begin <= posY && end >= posY) {
          return i;
        }
      }
      if (posY > leng) {
        // 交换最后一个
        return this.itemList.length - 1;
      } else if (posY < this.begintop) {
        return 0;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cu-item {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.border-100 {
  width: 92%;
  height: 4rpx;
}
.border-80 {
  width: 84%;
  height: 2px;
  margin-left: 30px;
}
</style>
