<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
const props = defineProps({
  bottomshow: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['update:bottomshow'])
const handleClose = () => {
  emit('update:bottomshow', false)
}
const mockTasks = [
  // 已逾期
  {
    id: 1,
    name: '量缸试水1',
    status: '可授权',
    time: '逾期23天',
    type: '已逾期',
  },
  {
    id: 2,
    name: '发动机检测',
    status: '被授权',
    time: '逾期15天',
    type: '已逾期',
  },
  {
    id: 3,
    name: '变速箱维护',
    status: '已授权',
    time: '逾期7天',
    type: '已逾期',
  },
  {
    id: 4,
    name: '轮胎更换',
    status: '可授权',
    time: '逾期3天',
    type: '已逾期',
  },

  // 今日
  {
    id: 5,
    name: '刹车系统检查',
    status: '可授权',
    type: '今日',
  },
  {
    id: 6,
    name: '机油更换',
    status: '已授权',
    type: '今日',
  },
  {
    id: 7,
    name: '空调清洗',
    status: '被授权',
    type: '今日',
  },
  {
    id: 8,
    name: '电池检测',
    status: '可授权',
    type: '今日',
  },

  // 明日
  {
    id: 9,
    name: '悬挂系统检查',
    status: '可授权',
    type: '明日',
  },
  {
    id: 10,
    name: '燃油系统清洗',
    status: '被授权',
    type: '明日',
  },
  {
    id: 11,
    name: '灯光系统检查',
    status: '已授权',
    type: '明日',
  },
  {
    id: 12,
    name: '四轮定位',
    status: '已授权',
    type: '明日',
  },
  {
    id: 13,
    name: '空调系统维护',
    status: '可授权',
    type: '明日',
  },
]
const statuscolor = {
  可授权: '#215ACD',
  被授权: '#EB5E12',
  已授权: '#339169',
}
</script>
<template>
  <view>
    <wd-popup
      v-model="props.bottomshow"
      custom-style="border-radius: 32rpx 32rpx 0 0; "
      @close="handleClose"
      position="bottom"
    >
      <view class="popup-content">
        <scroll-view 
          class="scroll-content" 
          scroll-y 
          style="height: 1000rpx;"
          :show-scrollbar="true"
          scroll-with-animation
        >
          <view
            v-for="task in mockTasks"
            :key="task.id"
            class="list_dev"
            :style="{backgroundColor: task.type === '已逾期' ? '#FFE6E0' : '#D6EFE6'}"
          >
            <view class="list_dev_left" :style="{backgroundColor: task.type === '已逾期' ? '#D34B27' : '#339169'}"/>
            <view class="list_dev_right">
              <text style="color: #31373d">{{ task.name }}</text>
              <view class="list_dev_right_text">
                <view
                  class="list_dev_right_top"
                  :style="{ background: statuscolor[task.status] }"
                  >{{ task.status }}</view
                >
                <view class="list_dev_right_bottom" style="color: #d85e3e">{{
                  task.time
                }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </wd-popup>
  </view>
</template>
<style lang="scss" scoped>
.popup-content {
  height: 1000rpx;
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  box-sizing: border-box;
  .scroll-content {
    height: 100%;
    overflow-y: auto;
  }
  .list_dev {
    width: 100%;
    height: 120rpx;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 30rpx;
    .list_dev_left {
      width: 10px;
      height: 100%;
      border-radius: 10px 0 0 10px;
    }
    .list_dev_right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;
      height: 100%;
      font-size: 28rpx;
      font-weight: 400;
      .list_dev_right_text {
        width: 50%;
        position: relative;
        height: 100%;
        .list_dev_right_top {
          border-radius: 0 10px 0 10px;
          position: absolute;
          top: 0;
          right: 0px;
          width: 88rpx;
          height: 40rpx;
          // background-color: #215acd;
          color: white;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 20px;
          padding-left: 8px;
        }
        .list_dev_right_bottom {
          position: absolute;
          bottom: 6px;
          right: 8px;
          font-size: 28rpx;
          font-weight: 400;
          color: #31373d;
        }
      }
    }
  }
}
</style>
