<template>
  <div class="home-page">
    <div class="task-body">
      <div @click="goBack" class="back">
        <i class="el-icon-back back-icon"></i>
        <div class="back-text">返回</div>
      </div>
      <div class="list-body">
        <el-tabs v-model="activeName" @tab-click="tabChange">
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="已提交" name="1"></el-tab-pane>
          <el-tab-pane label="已受理" name="2"></el-tab-pane>
          <el-tab-pane label="处理中" name="3"></el-tab-pane>
          <el-tab-pane label="已处理" name="4"></el-tab-pane>
          <el-tab-pane label="已关闭" name="5"></el-tab-pane>
          <div class="notice-contain">
            <div
              class="notice-body"
              v-for="(item, index) in noticeList"
              :key="index"
              :title="item.title"
              @click="noticeChange(item)"
            >
              <div class="box-con">
                <span :style="{background:statusChange(item.handlingStatus)}">{{dictionaryEscape('gd-gdzt',JSON.stringify(item.handlingStatus))}}</span>
              </div>
              <div class="notice-time">
                <div class="notice-month">{{ item.month }}</div>
                <div class="notice-year">{{ item.year }}</div>
              </div>
              <div class="notice-flex">
                <div class="notice-title">{{ item.title }}</div>
                <!--                  <div class="notice-content">{{ item.content }}</div>-->
                <div class="notice-type">
                  <div>工单类型：{{ dictionaryEscape('gd-gdlx',item.type) }}</div>
                  <div style="margin-left: 40px">所属模块：{{ dictionaryEscape('gd-ssmk',item.module) }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-tabs>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="text-align: center;"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { dictionaryEscape } from '@/utils/dictionary'
import {listOfTickets} from '@/api/workOrder'

export default {
  data() {
    return {
      activeName: '',
      noticeList: [],
      currentPage: 1,
      pageSize:10,
      total:0,
      params:{
        "pageBean": {
          "page": '1',
          "pageSize": '10',
          "showTotal": true
        },
        "params": {},
        "querys": [
          {
            "group": "main",
            "operation": "EQUAL",
            "property": "handlingStatus",
            "relation": "AND",
            "value": ''
          }
        ],
        "sorter": [
          {
            "direction": "DESC",
            "property": "createTime",
          }
        ]
      }
    }
  },
  mounted() {
    this.getDataChange()
  },
  methods: {
    dictionaryEscape,
    statusChange(status){
      switch (status) {
        case 1:
          return '#409EFF';
        case 2:
          return '#E6A23C';
        case 3:
          return '#FFABAB';
        case 4:
          return '#67C23A';
        case 5:
          return '#909399';
        default:
          return '#409EFF';
      }
    },
    // 获取列表数据
    async getDataChange(){
      const {page,pageSize,rows,total} = await listOfTickets(this.params)
      this.total = total
      this.currentPage = page
      this.pageSize = pageSize
      this.noticeList = rows.map((item)=>{
        return {
          month: item.createTime.substring(5, 10),
          year: item.createTime.substring(0, 4),
          ...item
        };
      })
    },
    // 卡片切换事件
    tabChange(tab){
      this.params.querys[0].value = tab.name
      this.currentPage = 1
      this.params.pageBean.page = 1
      this.params.pageBean.pageSize = 10
      this.getDataChange()
    },
    // 返回
    goBack(){
      this.$router.push({path:'/platLayout/homePage'});
    },
    noticeChange(data){
      this.$router.push({path:'/platLayout/workDetailPage',query: { id: data.id }});
    },
    handleSizeChange(pageSize){
      this.pageSize = pageSize;
      this.params.pageBean.pageSize = pageSize
      this.getDataChange()
    },
    handleCurrentChange(page){
      this.currentPage = page;
      this.params.pageBean.page = page
      this.getDataChange()
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-tabs__content{
  height: calc(100vh - 260px);
  overflow-y: auto;
}
::v-deep .el-pagination .btn-prev{
  background: transparent;
}
::v-deep .el-pagination .btn-next{
  background: transparent;
}
::v-deep .el-pager li.active{
  color: #43a1ff;
}
::v-deep .el-pager li{
  color: #f0f0f0;
  background: transparent;
}
::v-deep .el-pagination__total{
  color: #f0f0f0;
}
::v-deep .el-tabs__item{
  font-size: 18px;
}
.notice-contain {
  height: calc(100% - 40px);
}
.notice-body {
  position:relative;
  cursor: pointer;
  display: flex;
  line-height: 26px;
  padding: 12px 0 24px 0;
  align-items: center;
  border-bottom: 1px solid;
  border-image: linear-gradient(270deg, #ffffff, #d0dded) 1;
  overflow: hidden;
  .box-con{
    width:100px;
    height:100px;
    position: absolute;
    top:-50px;
    right:-50px;
    transform: rotate(45deg);
    span{
      position: absolute;
      bottom:0;
      display: block;
      font-size:16px;
      color:#fff;
      width:100px;
      text-align: center;
    }
  }
  .notice-time {
    display: flex;
    flex-direction: column;
    width: 68px;
    margin-right: 16px;
  }
  .notice-flex {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .notice-month {
    color: #999999;
    font-size: 20px;
    font-weight: 700;
    margin-top: 2px;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
  }
  .notice-year {
    color: #999999;
    font-size: 14px;
    font-weight: 700;
  }
  .notice-title {
    color: #f0f0f0;
    font-size: 16px;
    display: -webkit-box; /* 使用 flexbox */
    -webkit-box-orient: vertical; /* 垂直排列子元素 */
    -webkit-line-clamp: 1; /* 限制显示的行数为 2 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis;
  }
  .notice-content {
    color: #a1a9b2;
    font-size: 16px;
    display: -webkit-box; /* 使用 flexbox */
    -webkit-box-orient: vertical; /* 垂直排列子元素 */
    -webkit-line-clamp: 1; /* 限制显示的行数为 2 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis;
  }
  .notice-type{
    display: flex;
    align-items: center;
    div{
      font-size: 16px;
      color: #a1a9b2;
    }
  }
}
.notice-body:last-child {
  border: none;
}
.notice-body:hover {
  border-radius: 10px;
}
.notice-body:hover .notice-title {
  color: #409EFF;
}
.notice-body:hover .notice-month {
  color: #409EFF;
}
.notice-body:hover .notice-year {
  color: #409EFF;
}
.home-page{
  width: 100%;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  .back{
    cursor: pointer;
    margin: 16px 0 0 16px;
    .back-icon{
      font-size: 16px;
      color: #f0f0f0;
    }
    .back-text{
      color: #f0f0f0;
      font-size: 16px;
      margin-left: 4px;
      display: inline;
    }
  }
  .task-body{
    width: 1200px;
    background: #114066;
    border-radius: 10px;
  }
  .list-body{
    padding: 20px;
    box-sizing: border-box;
  }
}
</style>
