<template>
  <div class="wrap" :style="`backgroundColor: ${show ? '#FAFAFA' : '#F4F5F7'};`">
    <div class="navBar">
      <van-nav-bar
          title="工单对账"
          left-arrow
          left-arrow-color="#FFFFFF"
          :border="false"
          :fixed="true"
          :safe-area-inset-top="true"
          @click-left="goBack"
      >
        <template slot="right">
          <div class="rightWrap"  @click="showDatetime = !showDatetime">
            <span class="dateTitle">{{ time ? time?.slice(0,7) : ymTime  }}</span>
            <img src="@/assets/line.png" class="img1"/>
            <img src="@/assets/arrow_bottom.png" class="img2"/>
          </div>
        </template>
      </van-nav-bar>
    </div>
    <van-datetime-picker
        class="dataTime"
        v-if="showDatetime"
        v-model="currentDate"
        type="year-month"
        @confirm="onConfirm"
        @cancel="showDatetime = false"
    />
    <div class="tab_wrap">
      <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
           @click="changeTab(index)">
        {{ item.name }}
      </div>
    </div>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh"  v-show="!show" >
     <div >
        <div  class="content_wrap" v-for="(item,index) in orderList" :key="index">
          <div class="codeTxt common">
            <div class="leftStatus ">
              <span style="margin-right: 20px" class="orderCode">{{item.orderCode}}</span>
              <span class="carCode">{{ item.plateNumber }}</span>
            </div>
            <div class="rightBtn">
              <span class="serviceStatus">{{ item.taskStatus?.label }}</span>
            </div>
          </div>
          <div class="line"></div>
          <div class="supplier">
            <span class="halfTxt">服务商:</span>
            <span class="allTxt">{{ item.supplierName }}</span>
          </div>
          <div class="status common">
            <div class="leftStatus" >
              <span class="halfTxt">审核状态:</span>
              <span class="allTxt">{{ item.accountStatus?.label }}</span>
            </div>
            <div class="rightBtn">
              <button class="btn"  v-if="queryType == 1 && permissonList.includes('supplierRecordOperation')"  @click="handleAccounting(item)">记账</button>
              <button class="btn" v-if="queryType == 3 && permissonList.includes('supplierRecordOperation')"  @click="handleAccounting(item)">{{item.accountStatus.code == 3 ? '重新记账'  : '记账'}}</button>
              <button class="btn"  v-if="queryType == 5 && permissonList.includes('supplierRecordOperation')"  @click="handleAccounting(item)">重新记账</button>
              <button class="btn"  v-if="queryType == 7" @click="goPageDetail(item)">查看详情</button>
            </div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
    <div class="bgEmptyImg" v-show="show">
      <img  src="@/assets/empty.png" />
    </div>
  </div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
import {accountRecordList,userOperationPermissions} from "@/api/mine"
import {timeFormat} from "@/utils/common"
export default {
  name: "workOrderReconciliation",
  mixins: [myMixins],
  data() {
    return {
      tabArr: [{name: '待记账', status: 1}, {name: '待审核', status: 3}, {name: '审核失败', status: 5}, {name: '审核完成', status: 7}],
      activeIndex: 0,
      orderList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      queryType:1,//默认显示待记账
      queryTime:'',//默认查询时间为当年当月
      showDatetime: false,//时间选择器
      currentDate: new Date(),
      ymTime: '',//默认显示时间为当年当月
      isLoading:"",
      permissonList:[],
      time:'',//当页面已经跳转到其他页面时就用原本的时间，如果没有就用当前时间
    }
  },
  async mounted() {
    console.log("params",this.$route.params?.queryTime)
    this.activeIndex=this.$route.params?.activeIndex || 0
    this.queryType=this.$route.params?.queryType || this.queryType
    this.time = this.$route.params?.queryTime
    await this.initIndex()
    await this.initSelectTime();
    await this.getPermissions();
    await this.getList();
  },
  computed:{
    show() {
      return (this.orderList.length < 0 || this.orderList.length == 0); // 判断数组长度是否大于 0
    },
  },
  methods: {
    onRefresh() {
      this.getList()
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
    async changeTab(index) {
      this.activeIndex = index
      this.initIndex()
      this.total = 0;
      this.pageNum = 1
      this.orderList = [];
      await this.getList()
    },
    async getList(){
      let res = await accountRecordList({
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        queryType:this.queryType,
        queryTime:this.time || this.queryTime,//当页面已经跳转到其他页面时就用原本的时间，如果没有就用当前时间
      })
      if(res.code === 200){
        this.orderList = res.data;
      }
    },
    async getPermissions(){
      let res = await userOperationPermissions();
      this.permissonList = res.data
      // console.log("1122",this.permissonList)
      // console.log('工单对账',this.permissonList.includes('supplierRecordOperation'))
    },
    handleAccounting(item){
      console.log("item")
      this.$router.push({
        name: 'accountingView',  // 目标路由的名称
        params: {
          id: item.id,                  // 参数对象的属性
          postfix:item.postfix,
          index:this.activeIndex,
          queryTime:this.queryTime
        }
      });
    },
    initIndex(){
      if(this.activeIndex === 0){
        this.queryType = 1
      }else if(this.activeIndex === 1){
        this.queryType = 3
      }else if(this.activeIndex === 2){
        this.queryType = 5
      }else if(this.activeIndex === 3){
        this.queryType = 7
      }
    },
    goPageDetail(item){
      this.$router.push({
        name: 'aduitCompleteDetail',  // 目标路由的名称
        params: {
          id: item.id,                  // 参数对象的属性
          postfix:item.postfix,
          index:this.activeIndex,
          queryTime: this.time || this.queryTime
        }
      });
    },
    async onConfirm(value) {
      this.time = '';
      this.showDatetime = false
      const date = new Date(value);
      const year = date.getFullYear(); // 获取年份，结果为 2023
      const month = (date.getMonth() + 1).toString().padStart(2, '0');  // 获取月份，需要注意月份从 0 开始，所以要加 1，结果为 9
      this.ymTime = year + '-' + month
      this.queryTime=timeFormat(value);
      this.orderList = [];
      await this.getList();
    },
    initSelectTime() {//初始化查询时间
      if(this.time){
        const date = new Date(this.time);
        const year = date.getFullYear(); // 获取年份，结果为 2023
        const month = (date.getMonth() + 1).toString().padStart(2, '0');  // 获取月份，需要注意月份从 0 开始，所以要加 1，结果为 9
        this.ymTime = year + '-' + month
        return
      }
      const year = this.currentDate.getFullYear(); // 获取年份，结果为 2023
      const month = (this.currentDate.getMonth() + 1).toString().padStart(2, '0');  // 获取月份，需要注意月份从 0 开始，所以要加 1，结果为 9
      this.ymTime = year + '-' + month;
      this.queryTime=timeFormat(new Date());

    },
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/common.scss";
@import "@/styles/mixin.scss";

.wrap {
  @include wh(100%, 100%);
  @include sizingPadding(0,12px);
  overflow-y: auto;
}

.dataTime {
  position: absolute;
  z-index: 11;
  top: 46px;
  right: 0;
  width: 200px;
}

.navBar {
  margin-bottom: 46px;

  .rightWrap {
    @include flexColAround;
    align-items: center;
    @include wh(106px, 26px);
    background: linear-gradient(180deg, #A3B8E9 0%, #6C81CD 100%);
    border-radius: 4px;
    border: 1px solid;
    border-image: linear-gradient(270deg, rgba(103, 122, 193, 1), rgba(160, 178, 226, 1), rgba(160, 178, 226, 1), rgba(103, 122, 193, 1)) 1 1;

    .img1 {
      @include wh(1px, 18px)
    }
    .img2 {
      @include wh(7px, 5px)
    }

    .dateTitle {
      @include fontWeightSize(bolder, 12px);
      @include colorOpa(#FFFFFF,0.9);
    }
  }
}

.tab_wrap {
  @include fontWeightSize(bolder, 15px);
  @include flexColAround;
  @include colorOpa(#737373,0.7);
  padding: 10px 0 15px 0;
  div {
    padding-top: 8px;
  }
  .active {
    color: #3678FF;
    position: relative;
  }
  .active:after {
    content: '';
    display: block;
    @include wh(18px,3px);
    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
    border-radius: 2px;
    position: absolute;
    margin-top: 3px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.content_wrap {
  @include wh(100%, 96px);
  background: #FFFFFF;
  box-shadow: 0px 1px 4px 0px rgba(39, 52, 125, 0.05);
  border: 1px solid #E6E6E6;
  backdrop-filter: blur(5.602678571428572px);
  @include flexBetween;
  @include sizingPadRadius(10px,0,6px);
  margin-bottom: 10px;
  .common {
    @include flexColBet();
    margin-left: 18px;
    margin-right: 14px;
  }
  .line {
    @include wh(100%, 1px);
    background: #E9E9EA;
    opacity: 0.6;
  }
  .supplier {
    margin-left: 18px;
    margin-right: 14px;
  }
  .btn {
    text-align: center;
    border-radius: 3px;
    border: none;
    @include bgFontColor(#FFFFFF, #354D93);
    @include all-height(20px);
  }
  .halfTxt {
    display: inline-block;
    width: 55px;
    @include fontWeightSize(400, 12px);
    opacity: .5;
  }
  .allTxt {
    @include fontWeightSize(400, 12px)
  }
  .orderCode {
    @include fontWeightSize(bold, 13px)
  }

  .carCode {
    @include fontWeightSize(bold, 12px)
  }

  .serviceStatus {
    @include fontWeightSize(bolder, 13x);
    color: #09B820;
  }
}
.bgEmptyImg{
  @include flexTwoCenter;
  height: 85% ;
  background-color: #FAFAFA;
  img{
    width: 100%;
  }
}
</style>