<route lang="json">
{
  "layout": "inner",
  "style": {
    "navigationStyle": "custom"
  }
}
</route>

<template>
  <MNavBar fixed :title="title" />
  <MContent>
    <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="new-work">
      <view class="header">
        <MContentTitle title="最新工作" />
      </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-24rpx" />
        </view>
      </view>
    </view>
    <view class="fixed-btn" @click="openMenu">
      <text class="text">{{ title }}</text>
    </view>
    <page-meta :page-style="`overflow: ${visible ? 'hidden' : 'visible'}`" />
    <nut-overlay v-model:visible="visible" :z-index="2000" :close-on-click-overlay="false">
      <view class="actions-wrapper">
        <view class="actions">
          <view
            v-for="item in workType"
            :key="item.id"
            class="action-item"
            @click="onWorkType(item)"
          >
            <view>
              <text :class="item.icon" class="icon" />
              <text>{{ item.text }}</text>
            </view>
            <text class="i-custom-arrow-right" />
          </view>
        </view>
        <text class="icon-close" @click="visible = false" />
      </view>
    </nut-overlay>
  </MContent>
</template>

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

  const { title } = useAttrs() as { id: number | string; title: string }
  const visible = ref(false)
  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 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: '3',
      title: '三级运营管理内部矛盾仲裁规则',
      desc: '工作描述2',
      status: '3',
      start: '04-07',
      end: '04-30',
    },
    {
      id: '4',
      title: '三级运营管理内部矛盾仲裁规则',
      desc: '工作描述2',
      status: '3',
      start: '04-07',
      end: '04-30',
    },
    {
      id: '5',
      title: '三级运营管理内部矛盾仲裁规则',
      desc: '工作描述2',
      status: '3',
      start: '04-07',
      end: '04-30',
    },
    {
      id: '6',
      title: '三级运营管理内部矛盾仲裁规则',
      desc: '工作描述2',
      status: '3',
      start: '04-07',
      end: '04-30',
    },
  ])
  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 openMenu = () => {
    visible.value = true
  }
  const onWorkType = (data) => {
    uni.redirectTo({
      url: `/pages-sub/work-type/index?id=${data.id}&title=${data.text}`,
    })
  }
</script>

<style lang="scss" scoped>
  .dark {
    .actions {
      .icon {
        @apply color-white;
      }
    }
  }

  .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;
        }
      }
    }
  }
  .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-28rpx;
        }
      }
    }
  }
  .fixed-btn {
    @apply bottom-85rpx color-white text-24rpx py-16rpx pl-20rpx pr-10rpx fixed right-0 flex flex-col-reverse items-center;
    background: linear-gradient(180deg, #4999ff 0%, #2c68ff 100%);
    border-radius: 24rpx 0rpx 0rpx 24rpx;
    writing-mode: vertical-rl;
    &::before {
      @apply block;
      content: '';
      width: 0;
      height: 0;
      border-right: 12rpx solid #fff;
      border-top: 12rpx solid transparent;
      border-bottom: 12rpx solid transparent;
    }
  }
  .actions-wrapper {
    @apply wh-full flex flex-col items-center justify-end;
    .actions {
      @apply gap-16rpx bg-bg-card rounded-24rpx p-30rpx grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
      .action-item {
        @apply bg-bg-2 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;
        }
      }
    }
    .icon-close {
      @apply i-custom-close wh-58rpx mb-85rpx mt-32rpx;
    }
  }
</style>
