<template>
  <view class="py-3 mt-4 bg-white u-font-15">
    <view v-for="(project, index) in projects" :key="index">
      <!-- 有子项目 -->
      <view class="flex items-center justify-between p-3">
        <view class="text-blue-400 border border-blue-200 rounded-full order bg-blue-50">
          {{ index + 1 }}
        </view>

        <view class="flex-1 px-3">
          <view class="flex items-center mb-1">
            <view class="mr-2">{{ project.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(+project.startTime).format('MM-DD HH:mm') }}</view>
            至
            <view class="pl-2"> {{ $moment(+project.endTime).format('MM-DD HH:mm') }}</view>
          </view>
        </view>

        <!-- 箭头 -->
        <u-icon name="arrow-right" class="text-gray-400" size="14px" @click="openProject(project)"></u-icon>
      </view>
    </view>
  </view>
</template>

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

export default {
  data() {
    return {};
  },

  computed: {
    ...mapState('project', ['projects']),
    ...mapGetters('user', ['userId']),
  },

  methods: {
    /**
     * 打开项目
     * @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),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
}
</style>
