<template>
  <div>
    <head-title subTitle="了解更多安检知识" title="今日待办"></head-title>

    <div class="list">
      <div v-for="item in list" :key="item.id" :class="item.status" class="list-item">
        <div class="list-item-title">
          <text class="text-grey1">{{ item.title }}</text>
          <text :class="item.status" class="btn">{{ status[item.status] }}</text>
        </div>
        <div class="list-item-content">
          <span class="mr-32">{{ item.content }}</span>
          <span>{{ item.time }}</span>
        </div>
      </div>
    </div>

    <div class="more-list">查看全部</div>
  </div>
</template>
<script>

import HeadTitle from "@/components/HeadTitle.vue";

export default {
  components: {
    HeadTitle
  },
  data() {
    return {
      list: [
        {
          id: 1,
          title: "安检门性能测试",
          time: "10:00-10:30",
          content: "国际出发A区",
          status: 'pending'
        },
        {
          id: 2,
          title: "行李传送带检查",
          time: "10:00-10:30",
          content: "国际出发B区",
          status: 'timeout'
        },
        {
          id: 3,
          title: "安检门性能测试",
          time: "10:00-10:30",
          content: "国际出发A区",
          status: 'done'
        }
      ],
      status: {
        pending: '处理中',
        timeout: '已超时',
        done: '已处理'
      }
    };
  },
  methods: {}
};
</script>

<style lang="scss" scoped>

.list {
  .list-item {
    margin-top: 28rpx;
    padding: 32rpx 34rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
    background: #FFFFFF;
    line-height: 32rpx;
    box-shadow: 0 8rpx 20rpx 0 rgba(0, 0, 0, 0.08);
    border-radius: 0 24rpx 24rpx 0;
    border: 2rpx solid #F0F8FF;

    .list-item-title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24rpx;

      .btn {
        background: rgba(247, 124, 8, 0.04);
        border-radius: 8rpx;
        border: 2rpx dashed #F77C08;
        padding: 8rpx 16rpx;
        font-weight: 400;
        font-size: 24rpx;
        line-height: 28rpx;
        text-transform: none;
      }

      .pending {
        border-color: #F77C08;
        color: #F77C08;
      }

      .timeout {
        border-color: #ED0909;
        color: #ED0909;
      }

      .done {
        border-color: #048C36;
        color: #048C36;
      }
    }

    .list-item-content {
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
      line-height: 28rpx;

      .mr-32 {
        margin-right: 32rpx;
      }
    }
  }
}
</style>