<template>
  <MNavBar fixed title="我的工作" :not-back="true" bg-color="var(--bg-page)" />
  <MContent>
    <view class="work-container">
      <view class="statistic">
        <view v-for="item in statistics" :key="item.type" class="statistic-item">
          <view class="value">{{ item.value }}</view>
          <view class="desc-container">
            <text :class="item.icon" class="icon" />
            <text class="text">{{ item.text }}</text>
          </view>
        </view>
      </view>
      <view class="actions">
        <view v-for="item in workType" :key="item.id" class="action-item" @click="goWorkType(item)">
          <view>
            <text :class="item.icon" class="icon" />
            <text>{{ item.text }}</text>
          </view>
          <text class="i-custom-arrow-right" />
        </view>
      </view>
      <view class="new-work">
        <MContentTitle title="最新工作" />
        <view class="work-list">
          <view v-for="item in workList" :key="item.id" class="work-item">
            <view>
              <view>
                <text :class="icon[item.status]" class="icon" />
                <text class="text-28rpx ml-16rpx font-500">{{ item.title }}</text>
              </view>
              <view class="text-color-place mt-15rpx">
                <text class="text">计划时间：</text>
                <text>
                  {{ item.start }}
                  <text>至</text>
                  {{ item.end }}
                </text>
              </view>
            </view>
            <text class="i-custom-arrow-right wh-24rpx" />
          </view>
        </view>
      </view>
      <view class="new-comment">
        <MContentTitle title="最新进展/评论" />
        <view class="comment-list">
          <view v-for="(item, index) in workList" :key="item.id">
            <view class="gap-20rpx flex justify-start">
              <text class="i-custom-avatar wh-68rpx flex-shrink-0 items-start" />
              <view class="gap-10rpx grid">
                <view class="text-28rpx font-400">
                  {{ item.title }}
                </view>
                <view class="text-color-place mt-15rpx">
                  {{ item.start }}
                  {{ item.end }}
                </view>
                <view class="text-color-place">
                  努力的样子不好看！但是不努力的样子没人看！要想不被别人看不起那么久要让自己看得起自己，加油吧！
                </view>
                <view class="color-primary text-24rpx">@ 三级运营内部矛盾</view>
              </view>
            </view>
            <MDivider v-if="index !== workList.length - 1" />
          </view>
        </view>
      </view>
    </view>
  </MContent>
</template>

<script setup lang="ts">
  defineOptions({ name: 'Work' })

  const icon = {
    '1': 'i-custom-round',
    '2': 'i-custom-runing',
    '3': 'i-custom-stop',
    '4': 'i-custom-complate',
  }
  const statistics = ref([
    {
      type: '1',
      text: '未开始',
      icon: 'i-custom-round',
      value: 185,
    },
    {
      type: '2',
      text: '进行中',
      icon: 'i-custom-runing',
      value: 68,
    },
    {
      type: '3',
      text: '已暂停',
      icon: 'i-custom-stop',
      value: 32,
    },
    {
      type: '4',
      text: '已完成',
      icon: 'i-custom-complate',
      value: 233,
    },
  ])
  const workType = ref([
    {
      id: '1',
      text: '全部',
      icon: 'i-custom-todo?mask',
    },
    {
      id: '2',
      text: '我负责的',
      icon: 'i-custom-my?mask',
    },
    {
      id: '3',
      text: '我发起的',
      icon: 'i-custom-message-box?mask',
    },
    {
      id: '4',
      text: '我协同的',
      icon: 'i-custom-we?mask',
    },
    {
      id: '5',
      text: '抄送我的',
      icon: 'i-custom-bag?mask',
    },
    {
      id: '6',
      text: '我评价的',
      icon: 'i-custom-folder?mask',
    },
  ])
  const workList = ref([
    {
      id: '1',
      title: '三级运营管理内部矛盾仲裁规则',
      desc: '工作描述1',
      status: '2',
      start: '04-07',
      end: '04-30',
    },
    {
      id: '2',
      title: '三级运营管理内部矛盾仲裁规则',
      desc: '工作描述2',
      status: '4',
      start: '04-07',
      end: '04-30',
    },
    {
      id: '2',
      title: '三级运营管理内部矛盾仲裁规则',
      desc: '工作描述2',
      status: '3',
      start: '04-07',
      end: '04-30',
    },
  ])

  const goWorkType = (data) => {
    uni.navigateTo({
      url: `/pages-sub/work-type/index?id=${data.id}&title=${data.text}`,
    })
  }
</script>

<style scoped lang="scss">
  .dark {
    .actions {
      .icon {
        @apply color-white;
      }
    }
  }
  .work-container {
    .statistic {
      @apply flex justify-between;
      .statistic-item {
        @apply rounded-16rpx bg-bg-card p-24rpx;
        .value {
          @apply text-32rpx;
        }
        .desc-container {
          @apply flex items-center;
          .icon {
            @apply wh-24rpx;
          }
          .text {
            @apply text-color-place text-24rpx ml-10rpx;
          }
        }
      }
    }
    .actions {
      @apply gap-16rpx mt-24rpx grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
      .action-item {
        @apply bg-bg-card rounded-16rpx px-32rpx py-28rpx flex items-center justify-between;
        > view {
          @apply flex-center;
        }
        .icon {
          @apply wh-38rpx mr-20rpx;
        }
        .i-custom-arrow-right {
          @apply wh-24rpx;
        }
      }
    }
    .new-work {
      @apply rounded-16rpx p-32rpx bg-bg-card mt-24rpx;
      .work-list {
        @apply gap-40rpx mt-30rpx grid;
        .work-item {
          @apply flex items-center justify-between;
          .icon {
            @apply wh-24rpx;
          }
        }
      }
    }
    .new-comment {
      @apply rounded-16rpx p-32rpx bg-bg-card mt-24rpx;
      .comment-list {
        @apply gap-20rpx mt-42rpx grid;
      }
    }
  }
</style>
