<template>
  <div class="wrap">
    <m-header v-if="headerStatus" />
    <!-- <m-empty class="empty" v-else key="data" /> -->
    <van-field
      v-model="reason"
      rows="15"
      :disabled="haveComplaints == 1"
      type="textarea"
      placeholder="请提交课程日期，时间，课程名称及情况说明"
    />
    <div class="button-group">
      <van-button type="primary" v-if="haveComplaints == 1" round size="large" @click="onCancel">撤销</van-button>
      <van-button type="primary" v-else round size="large" @click="onSubmit">提交</van-button>
    </div>
  </div>
</template>
<script>
import MHeader from "@/components/MHeader"
import { browser }  from '@/common/common'
import { teacherSalaryComplaintAdd, findByMonth, repealComplaints } from '@/api/audition'
export default {
  name: "teacherList",
  components: { MHeader },
  data() {
    let query = this.$route.query
    return {
      headerStatus: true,
      reason: null,
      haveComplaints: query.haveComplaints,
      appealDateStr: query.appealDateStr,
      isClick: true,
    };
  },
  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
      }
    }
    

    if(this.haveComplaints == 1) {
      this.getList()
    }
  },
  methods: {
    getList() {
      findByMonth({ salarySettlementMonth: this.appealDateStr }).then(res => {
        let result = res.data
        if(result.code == 200) {
          this.reason = result.data.reason
          this.appealId = result.data.id
        } else {
          this.$toast(result.msg)
        }
      })
    },
    onSubmit() {
      if(!this.reason.trim()) {
        this.$toast('请输入申诉内容')
        return
      }
      let params = {
        reason: this.reason,
        salarySettlementMonth: this.appealDateStr
      }
      if(!this.isClick) {
        return
      }
      this.isClick = false
      teacherSalaryComplaintAdd(params).then(res => {
        let result = res.data
        this.isClick = true
        if(result.code == 200) {
          this.$toast('申诉提交成功')
          this.$router.push('/remuneration')
        } else {
          this.$toast(result.msg)
        }
      })
    },
    onCancel() {
      this.$dialog.confirm({
        title: '撤销申诉',
        message: '您是否确认撤销本次申诉？',
      })
      .then(() => {
        // on confirm
        repealComplaints({ salarySettlementMonth: this.appealDateStr }).then(res => {
          let result = res.data
          if(result.code == 200) {
            this.$toast('撤销申诉成功')
            if(this.$route.query.record) {
              this.$router.push('/appealRecord')
            } else {
              this.$router.push('/remuneration')
            }
            
          } else {
            this.$toast(result.msg)
          }
        })
      })
      .catch(() => {
        // on cancel
      })
      
    }
  }
};
</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: .14rem;
  padding-top: .18rem;
}
.button-group {
  margin: 0.3rem 0.26rem 0.2rem;
  .van-button--primary {
    background: @mColor;
    border: 1px solid @mColor;
    font-size: 0.18rem;
  }
}
</style>