<template>
  <view class="my-work">
    <MContentTitle title="我的工作" />
    <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="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-28rpx" />
      </view>
    </view>
  </view>
</template>

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

  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,
    },
  ])
  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',
    },
  ])
</script>

<style lang="scss" scoped>
  .my-work {
    @apply rounded-16rpx p-32rpx bg-bg-card mt-24rpx;
    .statistic {
      @apply my-32rpx flex justify-between;
      .statistic-item {
        @apply rounded-16rpx bg-bg-2 p-24rpx;
        .value {
          @apply text-32rpx;
        }
        .desc-container {
          @apply flex items-center;
          .icon {
            @apply wh-28rpx;
          }
          .text {
            @apply text-color-place text-24rpx ml-10rpx;
          }
        }
      }
    }
    .work-list {
      @apply gap-40rpx grid;
      .work-item {
        @apply flex items-center justify-between;
        .icon {
          @apply wh-28rpx;
        }
      }
    }
  }
</style>
