<template>
  <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 flex-shrink-0">进行中</view>
        </view>

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

      <view class="workbench-btn" v-if="index === 0" @click="toWorkbench">
        <u-button>工作台</u-button>
      </view>

      <!-- 箭头 -->
      <view v-if="item.sonProjectList && item.sonProjectList.length">
        <u-icon @click="emit('openSubProject', item.sonProjectList.length, index)" class="text-gray-400" name="arrow-up" size="14px" v-if="item.show"></u-icon>
        <u-icon @click="emit('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>

    <!-- 子项目 -->
    <view class="ml-8" v-if="item.show">
      <view :id="'cu-' + index + '-' + subIndex" :key="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">
          <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="
                  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'
                "
                class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full flex-shrink-0"
              >
                {{ 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>
</template>

<script setup>
import { reactive, computed } from 'vue';
import dayjs from 'dayjs';
import { useStore } from 'vuex';
import config from '@/common/js/config.js';

defineProps({
  item: {
    type: Object,
    default: () => {},
  },
  index: {
    type: Number,
    default: 0,
  },
  // menuList: {
  //   type: Array,
  //   default: () => [],
  // },
});
const emit = defineEmits(['setData', 'openSubProject']);

const store = useStore();
const userId = computed(() => store.getters['user/userId']);

const data = reactive({
  showMenu: false,
  tips: {
    text: '',
    color: '#909399',
    fontSize: 28,
  },
  // show: false,
  // border: 'border border-blue-500 shadow rounded-md',
  // showBorder: false,
  projectId: 0,
});

// 跳转工作台
function toWorkbench() {
  uni.navigateTo({
    url: '/pages/workbench/workbench'
  });
}

// 打开项目详情
function openProject(project) {
  const { name, id, url } = project;
  uni.navigateTo({ url: `/pages/project/project?u=${userId.value}&p=${id}&pname=${name}&url=${encodeURIComponent(url)}` });
}

/**
 * 弹出项目操作面板
 */
function openMenu(project) {
  data.showMenu = true;
  data.projectId = project.id;
  data.tips.text = project.name;

  emit('setData', data.showMenu, data.projectId, data.tips);
}
</script>

<style lang="scss" scoped>
.border-100 {
  height: 4rpx;
  margin: 0 20rpx;
}

.border-80 {
  height: 4rpx;
  margin: 0 20rpx 0 90rpx;
}

.workbench-btn {
  position: relative;
  right: 10px;
  width: 80px;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #2B85E4;

  button {
    font-size: 12px;
    background-color: #1890FF;
    color: #FFFFFF;
    width: 100%;
    height: 100%;

    &:after {
      border: none;
    }
  }
}
</style>
