<template>
  <div class="fx-column">
    <mx-table v-if="total>0" :prop-defines="propDefines" :rows="dataList">
      <template #actions="{row}">
        <div class="fx-row fx-cen-cen">
          <el-button v-if="enableCancel(row)" type="info" size="mini" icon="el-icon-delete"
                     @click="handleFormCancel(row)">取消
          </el-button>
          <template v-if="enableApprove(row)">
            <el-button type="danger" size="mini" icon="el-icon-error"
                       @click="handleFormReject(row)">拒绝
            </el-button>
            <el-button type="primary" size="mini" icon="el-icon-success"
                       @click="handleFormAccept(row)">通过
            </el-button>
          </template>
        </div>
      </template>
    </mx-table>
    <evaluation-empty v-else :shadow="false"></evaluation-empty>
    <pagination v-show="total>queryParams.pageSize" :total="total"
                :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                :page-size="20" @pagination="getList"/>
  </div>
</template>

<script>
import consts from '@/common/mx-const'
import { commitForm, recallForm } from '@/api/webApi/form'
import formTranslateMixin from '@/components/Cache/modules/mx-form-translate-mixin'
import { mapActions, mapGetters } from 'vuex'

export default {
  mixins: [formTranslateMixin],
  name: 'headteacher-form-list',
  props: {
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      total: 0,
      dataList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  computed: {
    ...mapGetters(['currentUser', 'isFrontMaster']),
    propDefines() {
      return {
        userName: {
          label: '申请人',
          hidden: !this.isFrontMaster
        },
        createTime: {
          label: '申请时间'
        },
        oldValue: {
          label: '原班级'
        },
        newValue: {
          label: '申请班级'
        },
        formTypeName: {
          label: '类型'
        },
        auditorName: {
          label: '审核人'
        },
        auditTime: {
          label: '审核时间'
        },
        formStatusName: {
          label: '状态'
        },
        actions: {
          label: '操作',
          slot: 'actions'
        }
      }
    }
  },
  watch: {
    'options.queryParams': {
      immediate: true,
      handler: function() {
        console.log('watched options', this.options, this.propDefines, this.isFrontMaster)
        if (!this.options.queryApi) return
        this.resetQuery()
      }
    }
  },
  methods: {
    ...mapActions(['GetInfo']),
    resetQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    getList() {
      this.options.queryApi({
        ...this.queryParams,
        ...this.options.queryParams
      }).then(res => {
        this.dataList = res.rows
        if (this.formTranslateReady) this.dataList.forEach(this.translateForm)
        this.total = res.total
        const displayStatus = this.getLatestApplyStatus()
        this.$emit('statusComputed', displayStatus)
      })
    },
    translateFormReady() {
      this.dataList.forEach(this.translateForm)
    },
    getLatestApplyStatus() {
      const latest = this.dataList.length ? this.dataList[0] : null
      if (latest?.formStatus == consts.enum.formStatus.init) {
        return this.formatFormStatus(latest)
      }
      const classId = this.currentUser.headteacherClassId
      return classId ? '正常' : '未申请'
    },
    formatFormStatus(item) {
      return `正在${item.formTypeName}`
    },
    enableFormOperation(item) {
      return item.formStatus == consts.enum.formStatus.init
    },
    enableCancel(item) {
      return this.enableFormOperation(item) && !this.isFrontMaster
    },
    enableApprove(item) {
      return this.enableFormOperation(item) && this.isFrontMaster
    },
    handleFormCancel(item) {
      this.$confirm('确认取消？').then(() => {
        recallForm(item.formId).then(res => {
          this.resetQuery()
          this.GetInfo()
        })
      })
    },
    handleFormReject(item) {
      this.$confirm('确认拒绝?').then(() => {
        commitForm({
          accept: false,
          formId: item.formId
        }).then(res => {
          this.resetQuery()
        })
      })
    },
    handleFormAccept(item) {
      this.$confirm('确认通过?').then(() => {
        commitForm({
          accept: true,
          formId: item.formId
        }).then(res => {
          this.resetQuery()
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
