<template>
  <div class="wrap">
    <m-header v-if="headerStatus" />

    <van-list v-if="dataShow" v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
      <van-cell v-for="(item, index) in dataList" :key="index" @click="onGOTO(item)" :class="item.statusEnum == 'WITHDRAWN' ? 'hideArrow' : '' " is-link>
        <template #title>{{ item.createTime | getMonthDay }} {{ item.createTime | getHourMin }} </template>
        <template #default>{{ new Date(item.salarySettlementMonth + '-01').getMonth() + 1 }}月课酬申诉
          <span :class="item.statusEnum">{{ item.statusEnum | statusFilter }}</span>
        </template>
      </van-cell>
    </van-list>
    <m-empty class="empty" msg="暂无数据" v-else key="data" />
  </div>
</template>
<script>
import MHeader from "@/components/MHeader"
import MEmpty from "@/components/MEmpty"
import { getSTD }  from '@/common/common'
import { teacherSalaryComplaintQueryPage } from '@/api/audition'
export default {
  name: "appealReocrd",
  components: { MHeader, MEmpty },
  data() {
    return {
      headerStatus: true,
      loading: false,
      finished: false,
      dataShow: true,
      dataList: [],
      params: {
        page: 1,
        rows: 20
      }
    };
  },
  mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    document.title = '课酬申诉记录'
    // if(browser().android || browser().iPhone) {
    //   this.headerStatus = false
    // }
  },
  methods: {
    onGOTO(item) {
      if(item.statusEnum == 'PENDING') {
        this.$router.push({
          path: 'appealDetail',
          query: {
            record: 1, //
            haveComplaints: 1,
            appealDateStr: item.salarySettlementMonth,
            history: true,
          }
        })
      } else if(item.statusEnum == 'DONE' || item.statusEnum == 'AGREED' || item.statusEnum == 'DENIED') {
        this.$router.push({
          path: 'appealResult', 
          query: {
            id: item.id,
            history: true,
          }
        })
      }
    },
    getList() {
      let params = this.params;
      teacherSalaryComplaintQueryPage().then(res => {
        let result = res.data
        this.loading = false
        if (result.code == 200) {
          params.page = result.data.pageNo
          this.dataList = this.dataList.concat(result.data.rows)
          if (params.page >= result.data.totalPage) {
            this.finished = true;
          }
          this.params.page++;
        } else {
          this.finished = true;
        }
        // 判断是否有数据
        if (this.dataList.length <= 0) {
          this.dataShow = false;
        }
      })
    },
  },
  filters: {
    getHourMin(time) {
      let tempDate = time
      if(!time) {
        return ''
      }
      if(typeof(tempDate) == 'string') {
          tempDate = new Date(time.replace(/-/ig, '/'))
      }
      let hour = tempDate.getHours()
      let minut = tempDate.getMinutes()
      return getSTD(hour) + ':' + getSTD(minut)
    },
    getMonthDay(time) {
      let tempDate = time || new Date()
      if(typeof(tempDate) == 'string') {
          tempDate = new Date(time.replace(/-/ig, '/'))
      }
      let month = tempDate.getMonth() + 1
      let day = tempDate.getDate()
      return month + '月' + day + '日'
    },
    statusFilter(status) {
      let template = {
        PENDING: '处理中',
        DONE: '已完成',
        AGREED: '已同意',
        DENIED: '已拒绝',
        WITHDRAWN: '已撤销'
      }
      return template[status]
    }
  }
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.wrap {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #F3F4F8;
}

/deep/.van-cell {
  font-size: .16rem;
  padding: .15rem .16rem;
  line-height: .24rem;
  &.hideArrow {
    .van-cell__right-icon {
      color: #fff;
    }
  }
  .van-cell__title {
    color: #808080;
  }
  .van-cell__value {
    display: flex;
    justify-content: space-between;
    font-size: .17rem;
    color: #1A1A1A;
    width: 60%;
    flex: 0 auto;
    .AGREED {
      color: #2EC7A5;
    }
    .DENIED {
      color: #EC4848;
    }
    .DONE, .WITHDRAWN {
      color: #808080;
    }
  }
}
</style>