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

    <van-panel>
      <template #header>
        <div class="title">{{ dataInfo.createTime | getMonthDay }}提交的课酬申诉</div>
        <!-- PENDING,Done,AGREED,DENIED,WITHDRAWN -->
        <div class="status" :class="[dataInfo.statusEnum == 'AGREED' ? 'agree' : '']" v-if="dataInfo.statusEnum == 'AGREED'">已同意</div>
        <div class="status" :class="[dataInfo.statusEnum == 'DENIED' ? 'error' : '']" v-if="dataInfo.statusEnum == 'DENIED'">已拒绝</div>
        <div class="status" v-if="dataInfo.statusEnum == 'WITHDRAWN'">已撤销</div>
        <div class="status" v-if="dataInfo.statusEnum == 'Done'">已完成</div>
      </template>
      <div class="appealContent van-hairline--top">
        <h2>申诉内容：</h2>
        <div class="desc">
          <!-- {{ dataInfo.reason }} -->
          <van-field v-model="dataInfo.reason" autosize disabled type="textarea" />
        </div>
      </div>
    </van-panel>
    <div class="appealContent">
      <h2>处理意见：</h2>
      <div class="desc">
        <!-- {{ dataInfo.handingSuggestion }} -->
        <van-field v-model="dataInfo.handingSuggestion" autosize disabled type="textarea" />  
      </div>
    </div>
  </div>
</template>
<script>
import MHeader from "@/components/MHeader"
import { browser }  from '@/common/common'
import { teacherSalaryComplaintGet } from '@/api/audition'
export default {
  name: "teacherList",
  components: { MHeader },
  data() {
    return {
      headerStatus: true,
      dataInfo: {
        reason: null,
        handingSuggestion: null
      }
    };
  },
  mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }
    document.title = '处理结果'
    if(params.history) {
      this.headerStatus = true
    } else {
      if(browser().android || browser().iPhone) {
        this.headerStatus = false
      }
    }

    this.__init()
  },
  methods: {
    __init() {
      let query = this.$route.query
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      teacherSalaryComplaintGet({ id: query.id }).then(res => {
        let result = res.data
        this.$toast.clear()
        if(result.code == 200) {
          this.dataInfo = result.data
        } else {
          this.$toast(result.msg)
        }
      })
    }
  },
  filters: {
    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 + '日'
    }
  }
};
</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-panel {
  margin-bottom: .15rem;
  .title {
    font-size: .18rem;
    color: #1A1A1A;
    padding: .2rem .1rem .05rem;
  }
  .status {
    padding: 0 .1rem .15rem;
    color: #1A1A1A;
    font-size: .16rem;
    &.error {
      color: #EC4848;
    }
    &.agree {
      color: #2EC7A5;
    }
  }
}
.appealContent {
  padding: 0 .1rem;
  padding-bottom: .15rem;
  background: #fff;
  h2 {
    font-size: .16rem;
    color: #666666;
    padding: .15rem 0 0;
  }
  .desc {
    // padding: 0 .2rem;
    text-indent: .3rem;
    color: #1A1A1A;
  }
}
</style>