<template>
  <div v-if="show" style="width:100%;height:100%;background: #F1F5F9;;display: flex;align-items: center;justify-content: center">
    <img src="@/assets/empty.png" style="width:65%;">
  </div>
  <div class="wrap" v-else>
    <ul id="dataList" class="dataList" >
      <li class="item" v-for="(item,i) in todolist" :key="i">
        <div class="left">
          <div class="repairName">
            <span class="name">{{ item.toDoType.label }}</span>
            <span class="carCode">{{item.plateNumber ? item.plateNumber : "无"}}</span></div>
          <div class="addressName">{{ item.address }}</div>
          <div class="time">{{item.toDoTime}} &nbsp;&nbsp;{{item.userName}}</div>
        </div>
        <div class="right">
          <button class="nopass" @click="noPass(item)">不通过</button>
          <button class="pass" @click="passThrough(item)">通过</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {getToDoList,toDoAudit} from "@/api/order"
export default {
  name: "toDoList",
  data(){
    return{
      todolist:[],
      show:false
    }
  },
   mounted() {
    this.getList()
  },
  methods:{
    async getList(){
      let result=await getToDoList();
      if(result.code === 200){
          this.todolist=result.data;
          if(this.todolist.length === 0){
            this.show=true
          }else {
            this.show=false
          }
        console.log("this.todolist",this.todolist.length)
      }
    },
     async noPass(item){
      let result=await  toDoAudit({
        toDoId:item.toDoId,
        toDoType:item.toDoType.code
      })
      console.log("不通过",item,result)
    },
    async passThrough(item){
      let result=await  toDoAudit({
        toDoId:item.toDoId,
        toDoType:item.toDoType.code
      })
      console.log("通过",item,result)
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap {
  @include wh(100%,100%);
  box-sizing: border-box;
  padding: 13px 13px 0 13px;
  background-color: #F4F5F7;
}

.dataList {
  padding: 0;
}

.item {
  list-style: none;
  @include flexColBet;
  margin-bottom: 10px;
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
  border-radius: 6px;
  padding: 10px 13px;
  box-sizing: border-box;
}

.repairName {
  font-weight: bold;
}

.name {
  font-size: 14px;
  margin-right: 22px;
}

.carCode {
  font-size: 12px;
}

.addressName {
  margin-top: 8px;
  margin-bottom: 5px;
}

.addressName,
.time {
  font-size: 12px;
}

button {
  padding: 2px 8px;
  @include fontWeightSize(bold,12px);
  border-radius: 3px;
}

.nopass {
  background: white;
  border: 1px solid #DDDDDD !important;
  margin-right: 15px;
}

.pass {
  border: 1px solid #2A5094 !important;
  @include bgFontColor(white,#2A5094);
}


</style>