<template>
  <view id="page">
    <view class="Width100 Box BorderBox">
      <view class="Content BorderBox Width100">
        <top-title :is-show-left="false" :title="'治理'" :rightWidth='120' class="custom_bg">
          <template slot="right">
            <image :src="$.imgSrc + '/mine/search.png'" @click="$.open('/pages/mine/setting')" mode="aspectFit" class="InlineBlock imgIcon"></image>
            <image :src="$.imgSrc + '/mine/plus.png'" mode="aspectFit" @click="$.open('/pages/mine/notice')" class="InlineBlock imgIcon"></image>
          </template>
        </top-title>
      </view>
      <view class="tab">
        <view class="tab-item" :class="tab === 1 ? 'active' : ''" @click='tab = 1'>
          <text>待办</text>
          <text class="number">200</text>
        </view>
        <view class="tab-item" :class="tab === 2 ? 'active' : ''" @click='tab = 2'>
          <text>正在办理</text>
          <text class="number">480</text>
        </view>
        <view class="tab-item" :class="tab === 3 ? 'active' : ''" @click='tab = 3'>
          <text>已完成</text>
          <text class="number">182</text>
        </view>
      </view>
      <view class="Content MarginAuto BorderBox">
        <no-data v-if="isEmpty" />
        <view v-else class="List Width100 BorderBox">
          <view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF"
                v-for="item in list" :key='item.id' @click='handleClick(item)'>
            <image class="imgleft" :src="item.imgurl" mode="widthFix"></image>
            <view class="right">
              <view class="title">{{ item.title }}</view>
              <view class="type">
                <text>排查</text>
                <text>超期2天</text>
              </view>
            </view>
            <view class="trapezoidal">
              超期
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NoData from "../../components/no-data.vue";
import TopTitle from "../../components/top-title";
export default {
  // 组件
  components: {
    NoData,TopTitle
  },
  data() {
    return {
      // 公用的js
      bgUrl1: '', // 登录信息背景图
      list: [
        {
          id: 1,
          title: 'G228火炬路与S503岙东路路',
          roadCode: 123,
          roadName: 'G228火炬路与S503岙东路',
          imgurl: '/static/logo.png',
          createTime: '2024-10-05',
          deptName: '支队级',
          sessionId: 12121212
        },
        {
          id: 2,
          title: 'G228火炬路与S503岙东路路',
          roadCode: 123,
          roadName: 'G228火炬路与S503岙东路',
          imgurl: '/static/logo.png',
          createTime: '2024-10-05',
          deptName: '支队级',
          sessionId: 12121212
        },
        {
          id: 3,
          title: 'G228火炬路与S503岙东路路',
          roadCode: 123,
          roadName: 'G228火炬路与S503岙东路',
          imgurl: '/static/logo.png',
          createTime: '2024-10-05',
          deptName: '支队级',
          sessionId: 12121212
        },
        {
          id: 4,
          title: 'G228火炬路与S503岙东路路',
          roadCode: 123,
          roadName: 'G228火炬路与S503岙东路',
          imgurl: '/static/logo.png',
          createTime: '2024-10-05',
          deptName: '支队级',
          sessionId: 12121212
        },
        {
          id: 5,
          title: 'G228火炬路与S503岙东路路',
          roadCode: 123,
          roadName: 'G228火炬路与S503岙东路',
          imgurl: '/static/logo.png',
          createTime: '2024-10-05',
          deptName: '支队级',
          sessionId: 12121212
        },
      ],
      isEmpty: false,
      isMore: true,
      page: 1,
      tab: 1
    }
  },
  // 页面加载
  onLoad(e) {
    this.getList()
  },
  // 计算属性
  computed: {},
  // 方法
  methods: {
    getList() {
      let datas = {
        limit: 10,
        page: 1,
      }
      // this.$request.globalRequest('/xxxxxxxx', datas, 'GET').then(res => {
      // 	if (res.code == 0) {
      // 		if (res.data.total === 0) {
      // 			this.isEmpty = true;
      // 			return false
      // 		}
      // 		this.list.push(...res.data.list)
      // 		if (this.list.length >= res.data.total) {
      // 			this.isMore = false
      // 		}
      // 	} else {
      // 		this.$.toast(res.msg)
      // 	}
      // })
    },
    handleClick(row) {
      console.log(row)
    },
    // 跳转页面
    skipPage(even) {
      // this.$.open(even)
    },
  },
  onReady() {},
  // 页面卸载
  onUnload() {

  },
  // 触发下拉刷新
  onPullDownRefresh() {
    // 延迟关闭刷新动画
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1500);
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
    if (this.isMore) {
      this.page++
      this.getList()
    }
  },
}
</script>

<style>
</style>
<style lang="scss" scoped>
page {
  background: #F6F8FA;
}
.imgIcon {
  width: 40rpx;
  height: 100%;
}
.imgIcon:nth-of-type(2) {
  margin-left: 40rpx;
}
.img {
  width: 40rpx;
  height: 40rpx;
  margin-left: 30rpx;
}
.trapezoidal {
  position: relative;
  display: inline-block;
  min-width: 2em;
  text-align: center;
  padding: 3rpx 20rpx 3rpx 18rpx;
}

.trapezoidal::before,
.trapezoidal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  border-radius: 0rpx 0 0 0;
  background: #FF1111;
  z-index: -1;
  transform-origin: bottom;
  transform: skew(18deg);
  border: 0rpx solid #333;
  box-sizing: border-box;
}

.trapezoidal::after {
  left: auto;
  right: 0;
  transform: skew(-0deg);
  border-radius: 0 0rpx 0 0;
  background-color: #FF1111;
  border-left: 0 none;
}

.tab {
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 16px;
  height: 44px;
  background: #ffffff;
  box-shadow: 3px 0px 10px #ccc;
  color: #666666;
  position: relative;
  .tab-item {
    position: relative;
    height: 41px;
    line-height: 41px;
    padding: 0 30rpx 0 30rpx;
    border-bottom: 3px solid #fff;
    display: flex;
    align-items: center;
    &.active {
      color: rgb(60, 109, 195);
      border-color: rgb(60, 109, 195);
    }
    .number {
      font-weight: bold;
      font-size: 18px;
      margin-left: 10rpx;
    }
  }
}

.Box {
  padding-top:var(--status-bar-height);
  .Content {
    width: calc(100% - 48rpx);
    padding-bottom: 88rpx;
  }

  .Unit {
    padding: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    box-shadow: 1px 1px 3px #ccc;
    .trapezoidal {
      position: absolute;
      top: -4px;
      right: 0;
      color: #ffffff;
      font-size: 14px;
      font-weight: normal;
      z-index: 1;
    }
    image {
      width: 140rpx;
    }
    .right {
      flex: 1;
      padding-left: 30rpx;
      .title {
        font-size: 16px;
      }
      .type {
        font-size: 14px;
        color: #666;
        font-weight: normal;
        text {
          margin-right: 20rpx;
        }
      }
    }
  }
}
</style>
