<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" label-width="120px">
      <el-form-item label="学院" prop="deptId">
        <el-select @change="changeDept" v-model="queryParams.deptId" placeholder="请选择学院" filterable clearable>
          <el-option v-for="(v, i) in deptList" :key="i" :label="v.label" :value="v.value"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业" prop="majorId">
        <el-select @change="changeMajor" v-model="queryParams.majorId" placeholder="请先选择学院再选择专业" filterable clearable>
          <el-option v-for="(v, i) in majorList" :key="i" :label="v.majorName" :value="v.majorId"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="班级" prop="classId">
        <el-select v-model="queryParams.classId" placeholder="请先选择专业再选择班级" filterable clearable>
          <el-option v-for="(v, i) in classList" :key="i" :label="v.className" :value="v.classId"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生姓名" prop="stuName">
        <el-input v-model="queryParams.stuName" placeholder="请输入学生姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="学号" prop="stuNo">
        <el-input v-model="queryParams.stuNo" placeholder="请输入学号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" icon="el-icon-edit" size="mini" @click="manyAudit">一键审核通过</el-button>
    <span style="color: red;">*审核时请注意申请的学年</span>
    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="#" align="center" prop="id" />
      <el-table-column label="学号" align="center" prop="stuNo" />
      <el-table-column label="提交人" align="center" prop="stuName" />
      <el-table-column label="班级" align="center" prop="className" />
      <el-table-column label="学年" align="center" prop="stuYearName" />

      <el-table-column label="辅导员姓名" align="center" prop="fdyName" />

      <el-table-column label="提交时间" align="center" prop="applyTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.applyTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学生人数" align="center" prop="classCount" />

      <el-table-column label="申请状态" align="center" width="120px">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.audius_detail_type" :value="scope.row.applyStatus" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="auditVClick(scope.row)"
            v-if="scope.row.applyStatus == '3'">审核</el-button>
          <el-button v-else size="mini" type="text" icon="el-icon-view" @click="lookVClick(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog title="审核" :visible.sync="auditV">
      <el-steps :active="getStep(auditForm)">
        <el-step title="学生提交申请" description=""></el-step>

        <el-step title="辅导员审核" :status="isEmpty(auditForm.fdyCmt) ? 'wait' : getStepStatus(auditForm.fdyCmt)">
          <template slot="description">
            <div>
              {{ isEmpty(auditForm.fdyNoName) ? '' : auditForm.fdyNoName }}
            </div>
            <div>
              {{ isEmpty(auditForm.fdyCmt) ? '' : auditForm.fdyCmt }}
            </div>
            <div>
              {{ isEmpty(auditForm.fdyTime) ? '' : auditForm.fdyTime }}
            </div>
          </template>
        </el-step>

        <el-step title="学院审核" :status="isEmpty(auditForm.xwCmt) ? 'wait' : getStepStatus(auditForm.xwCmt)">
          <template slot="description">
            <div>
              {{ isEmpty(auditForm.xwNoName) ? '' : auditForm.xwNoName }}
            </div>
            <div>
              {{ isEmpty(auditForm.xwCmt) ? '' : auditForm.xwCmt }}
            </div>
            <div>
              {{ isEmpty(auditForm.xwTime) ? '' : auditForm.xwTime }}
            </div>
          </template>
        </el-step>

        <el-step title="学工审核" :status="isEmpty(auditForm.jwcCmt) ? 'wait' : getStepStatus(auditForm.jwcCmt)">
          <template slot="description">
            <div>
              {{ isEmpty(auditForm.xgNoName) ? '' : auditForm.xgNoName }}
            </div>
            <div>
              {{ isEmpty(auditForm.jwcCmt) ? '' : auditForm.jwcCmt }}
            </div>
            <div>
              {{ isEmpty(auditForm.xgTime) ? '' : auditForm.xgTime }}
            </div>
          </template>
        </el-step>
      </el-steps>
      <hr />
      <el-form label-width="120px" size="mini">
        <el-form-item class="look-form-item" label="学年">
          <el-input readonly v-model="auditForm.stuYearName"></el-input> <span style="color: red;">*审核时请注意申请的学年</span>
        </el-form-item>
        <el-form-item class="look-form-item" label="申请人">
          <el-input readonly v-model="auditForm.stuName"></el-input>
        </el-form-item>
        <el-form-item class="look-form-item" label="班级">
          <el-input readonly v-model="auditForm.className"></el-input>
        </el-form-item>
        <el-form-item class="look-form-item" label="辅导员">
          <el-input readonly v-model="auditForm.fdyName"></el-input>
        </el-form-item>

        <el-form-item class="look-form-item" label="班级人数">
          <el-input readonly v-model="auditForm.classCount"></el-input>
        </el-form-item>

        <el-form-item class="look-form-item" label="身份证号">
          <el-input readonly v-model="auditForm.idCard"></el-input>
        </el-form-item>

        <el-form-item class="look-form-item" label="农行卡号">
          <el-input readonly v-model="auditForm.bankCard"></el-input>
        </el-form-item>

        <el-form-item class="look-form-item" label="开户行">
          <el-input readonly v-model="auditForm.bankAddr"></el-input>
        </el-form-item>

        <el-form-item class="look-form-item" label="所获奖励">
          <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }"
            v-model="auditForm.goodHis"></el-input>
        </el-form-item>

        <el-form-item class="look-form-item" label="主要事迹">
          <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }"
            v-model="auditForm.mainHis"></el-input>
        </el-form-item>

        <el-form-item class="look-form-item" label="佐证材料">
          <Affix @input="handleAffix" v-model="auditForm.testimonyMaterials"></Affix>
        </el-form-item>

        <el-form-item label="您的审核意见">
          <el-row>

            <el-col :span="12">
              <el-select @change="changeAuditStatus" placeholder="请选择审核意见" style="width: 200px;"
                v-model="doForm.applyStatus" size="mini">
                <el-option v-for="(v, i) in status_list" :key="i" :label="v.label" :value="v.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-button @click="doAudit" size="mini">提交审核</el-button>
            </el-col>
          </el-row>

          <el-input placeholder="请输入审核意见" type="textarea" :maxlength="1000" :autosize="{ minRows: 10, maxRows: 10 }"
            class="auditForm-input" v-model="doForm.jwcCmt"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { fullLoading, isEmpty } from '@/api/helpFunc'

import { doAudit, listJwc, manyAudit } from '@/api/stuCQS/good-class/newClassGoodApply'

import { listAllYear as listYear } from '@/api/stuCQS/basedata/year'

import { listClass } from '@/api/stuCQS/basedata/class'
import { listMajors } from '@/api/stuCQS/basedata/majors'
import { getDeptName } from '@/api/system/dept'

export default {
  name: 'good-class-stu',
  dicts: ['audius_detail_type'],
  data() {
    return {
      isEmpty,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        classId: null,
        majorId: null,
        deptId: null,
      },
      total: 0,
      loading: false,
      tableData: [],

      auditV: false,
      doForm: {
        applyStatus: null,
        jwcCmt: "同意申请"
      },
      status_list: [
        {
          label: "通过",
          value: 6
        },
        {
          label: "驳回(学生可以重新提交)",
          value: 10
        },
        {
          label: "拒绝(学生不可以再提交)",
          value: 11
        }
      ],

      auditForm: {},

      year_list: [],

      deptList: [], //学院列表
      majorList: [], //专业列表
      classList: [], //班级列表

      applyIds: [],
    }
  },
  created() {
    this.listDept()
    this.getList()
    this.listYear()
  },
  methods: {
    getStepStatus(data) {
      if ((data.includes('同意') && !data.includes('不同意')) || data.includes('通过') || (data.includes('符合') && !data.includes('不符合'))) {
        return 'success';
      } else {
        return 'error';
      }
    },
    getStep(data) {
      if (!isEmpty(data.jwcCmt)) {
        return 4;
      } else if (!isEmpty(data.xwCmt)) {
        return 3;
      } else if (!isEmpty(data.fdyCmt)) {
        return 2;
      } else {
        return 1;
      }
    },
    async manyAudit() {
      let ids = [...this.applyIds]
      if (isEmpty(ids)) {
        this.$message.info('请勾选需要一键审核通过的项目')
        return
      }

      this.$confirm('您确定要一键审核通过嘛?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let loading = fullLoading(this)
          let res = await manyAudit(ids)
          loading.close()
          if (res.code == 200) {
            this.$message.success(res.msg)
            this.getList()
          }
        })
        .catch(() => { })
    },
    handleSelectionChange(selection) {
      this.applyIds = selection.map((item) => item.id)
    },
    async changeMajor() {
      this.queryParams.classId = null
      this.classList = []
      if (!isEmpty(this.queryParams.majorId)) {
        let sdata = {
          pageNum: 1,
          pageSize: 1000,
          majorId: this.queryParams.majorId,
        }
        let res = await listClass(sdata)
        this.classList = [...res.rows]
      }
    },
    async changeDept() {
      this.queryParams.majorId = null
      this.queryParams.classId = null
      this.majorList = []
      this.classList = []
      if (!isEmpty(this.queryParams.deptId)) {
        let sdata = {
          collegeId: this.queryParams.deptId,
          pageNum: 1,
          pageSize: 1000,
        }
        let res = await listMajors(sdata)
        this.majorList = [...res.rows]
      }
    },
    async listDept() {
      let res = await getDeptName()
      this.deptList = [...res.data]
    },

    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },

    async doAudit() {
      let sdata = { ...this.auditForm }
      sdata.applyStatus = this.doForm.applyStatus;
      sdata.jwcCmt = this.doForm.jwcCmt;
      if (isEmpty(sdata.applyStatus)) {
        this.$message.info('请选择是否通过')
        return
      }
      if (isEmpty(sdata.jwcCmt)) {
        this.$message.info('请输入审核意见')
        return
      }

      let loading = fullLoading(this)
      let res = await doAudit(sdata)
      loading.close()
      if (res.code == 200) {
        this.$message.success(res.msg)
        this.getList()
        this.auditV = false
      }
    },
    changeAuditStatus(v) {
      switch (v) {
        case 6:
          this.doForm.jwcCmt = "经过审核，同意该生申请。";
          break;
        case 10:
          this.doForm.jwcCmt = "填写有误，请重新提交。";
          break;
        case 11:
          this.doForm.jwcCmt = "拒绝申请。";
          break;
        default:
          this.doForm.jwcCmt = "同意申请。";
          break;
      }
    },
    auditVClick(val) {
      this.auditForm = { ...val }
      this.auditForm.applyStatus = '6'
      this.auditForm.jwcCmt = '同意申请。'
      this.auditV = true
    },
    async listYear() {
      let res = await listYear()
      if (res.code == 200) {
        this.year_list = [...res.data]
      }
    },

    async getList() {
      this.loading = true
      let res = await listJwc(this.queryParams)
      this.loading = false
      if (res.code == 200) {
        this.tableData = [...res.rows]
        this.total = res.total
      }
    },
    handleAffix(affixId) {
      this.auditForm.testimonyMaterials = affixId
    },
  },

}
</script>
<style scoped>
.look-form-item {
  margin-bottom: 1px;
}
</style>
