<template>
  <div class="app-container">
    <el-button icon="el-icon-edit" size="mini" type="success" plain @click="applyVClick">点我申请</el-button>

    <el-table v-loading="loading" :data="tableData">
      <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-view" @click="lookVClick(scope.row)">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="cancelVClick(scope.row)"
            v-if="scope.row.applyStatus == '1'">取消申请</el-button>
          <el-button v-if="scope.row.applyStatus == '10'" type="text" size="mini" icon="el-icon-refresh"
            @click="refreshVClick(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="applyV" width="700px" append-to-body>
      <el-form label-width="120px" size="mini">
        <el-form-item label="学年">
          <el-select v-model="applyForm.stuYearId" class="addForm-input">
            <el-option v-for="(v, i) in year_list" :key="i" :label="v.stuYearName" :value="v.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-input readonly v-model="applyForm.className"></el-input>
        </el-form-item>

        <el-form-item label="辅导员">
          <el-input readonly v-model="applyForm.fdyName"></el-input>
        </el-form-item>

        <el-form-item label="班级人数">
          <el-input type="number" v-model="applyForm.classCount"></el-input>
        </el-form-item>

        <el-form-item label="身份证号">
          <el-input v-model="applyForm.idCard"></el-input>
        </el-form-item>

        <el-form-item label="农行卡号">
          <el-input v-model="applyForm.bankCard"></el-input>
        </el-form-item>

        <el-form-item label="开户行">
          <el-input v-model="applyForm.bankAddr"></el-input>
        </el-form-item>

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

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

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

        <el-form-item label=" ">
          <el-button @click="doApply">申请</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="查看" :visible.sync="lookV" width="70rem">
      <el-steps :active="getStep(lookForm)">
        <el-step title="学生提交申请" description=""></el-step>

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

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

        <el-step title="学工审核" :status="isEmpty(lookForm.jwcCmt) ? 'wait' : getStepStatus(lookForm.jwcCmt)">
          <template slot="description">
            <div>
              {{ isEmpty(lookForm.xgNoName) ? '' : lookForm.xgNoName }}
            </div>
            <div>
              {{ isEmpty(lookForm.jwcCmt) ? '' : lookForm.jwcCmt }}
            </div>
            <div>
              {{ isEmpty(lookForm.xgTime) ? '' : lookForm.xgTime }}
            </div>
          </template>
        </el-step>
      </el-steps>
      <hr />
      <el-form label-width="120px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item class="look-form-item" label="申请人">
              <el-input readonly v-model="lookForm.stuName"></el-input>
            </el-form-item>
            <el-form-item class="look-form-item" label="班级">
              <el-input readonly v-model="lookForm.className"></el-input>
            </el-form-item>
            <el-form-item class="look-form-item" label="辅导员">
              <el-input readonly v-model="lookForm.fdyName"></el-input>
            </el-form-item>

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

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

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

            <el-form-item class="look-form-item" label="开户行">
              <el-input readonly v-model="lookForm.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="lookForm.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="lookForm.mainHis"></el-input>
            </el-form-item>

            <el-form-item class="look-form-item" label="佐证材料">
              <Affix @input="handleAffix" v-model="lookForm.testimonyMaterials"></Affix>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="!isEmpty(lookForm.isSendMoney)" class="look-form-item" label="是否转账">
              <el-input readonly v-model="lookForm.isSendMoney"></el-input>
            </el-form-item>

            <el-form-item v-if="!isEmpty(lookForm.sendMoneyTime)" class="look-form-item" label="转账时间">
              <el-input readonly v-model="lookForm.sendMoneyTime"></el-input>
            </el-form-item>

            <el-form-item v-if="!isEmpty(lookForm.remark)" class="look-form-item" label="备注">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }"
                v-model="lookForm.remark"></el-input>
            </el-form-item>

            <el-form-item v-if="!isEmpty(lookForm.fdyCmt)" class="look-form-item" label="辅导员意见">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }"
                v-model="lookForm.fdyCmt"></el-input>
            </el-form-item>
            <el-form-item v-if="!isEmpty(lookForm.xwCmt)" class="look-form-item" label="学院意见">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }"
                v-model="lookForm.xwCmt"></el-input>
            </el-form-item>
            <el-form-item v-if="!isEmpty(lookForm.jwcCmt)" class="look-form-item" label="学工意见">
              <el-input readonly type="textarea" :autosize="{ minRows: 2, maxRows: 20 }"
                v-model="lookForm.jwcCmt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog title="重新提交" :visible.sync="refreshV" width="70rem">
      <el-form label-width="120px" size="mini">
        <el-row>
          <el-col :span="24">
            <el-form-item label="学年">
              <el-select v-model="refreshForm.stuYearId" class="addForm-input">
                <el-option v-for="(v, i) in year_list" :key="i" :label="v.stuYearName" :value="v.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="班级">
              <el-input readonly v-model="refreshForm.className"></el-input>
            </el-form-item>

            <el-form-item label="辅导员">
              <el-input readonly v-model="refreshForm.fdyName"></el-input>
            </el-form-item>

            <el-form-item label="班级人数">
              <el-input type="number" v-model="refreshForm.classCount"></el-input>
            </el-form-item>

            <el-form-item label="身份证号">
              <el-input v-model="refreshForm.idCard"></el-input>
            </el-form-item>

            <el-form-item label="农行卡号">
              <el-input v-model="refreshForm.bankCard"></el-input>
            </el-form-item>

            <el-form-item label="开户行">
              <el-input v-model="refreshForm.bankAddr"></el-input>
            </el-form-item>

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

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

            <el-form-item label="佐证材料">
              <Affix @input="handleAffix" v-model="applyForm.testimonyMaterials"></Affix>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" size="mini" @click="reApply">提交申请</el-button>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { fullLoading, isEmpty } from '@/api/helpFunc'

import { alipayVali } from '@/api/helpFunc/bank'

import { cancelApply, doApply, getOwnClass, listStu, reApply } from '@/api/stuCQS/good-class/newClassGoodApply'

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

import { getOwnInfo } from '@/api/stuCQS/basedata/student'

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

      lookV: false,
      lookForm: {},
      refreshForm: {},
      applyV: false,
      refreshV: false,
      applyForm: {
        className: '',
        classCount: '',
        fdyName: '',
        goodHis: '',
        mainHis: '',
        bankCard: '',
        bankAddr: '',
      },
      year_list: [],
    }
  },
  created() {
    this.getList()
    this.listStuYear()
  },
  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 reApply() {
      let sdata = { ...this.refreshForm };
      if (isEmpty(sdata.stuYearId)) {
        this.$message.info("请选择学年");
        return;
      }
      if (isEmpty(sdata.className)) {
        this.$message.info("请填写班级");
        return;
      }
      if (isEmpty(sdata.fdyName)) {
        this.$message.info("请填写辅导员");
        return;
      }
      if (isEmpty(sdata.classCount)) {
        this.$message.info("请填写班级人数");
        return;
      }
      if (isEmpty(sdata.idCard)) {
        this.$message.info("请填写身份证号");
        return;
      }
      if (isEmpty(sdata.bankCard)) {
        this.$message.info("请填写农行卡号");
        return;
      }
      if (isEmpty(sdata.bankAddr)) {
        this.$message.info("请填写开户行");
        return;
      }
      if (isEmpty(sdata.goodHis)) {
        this.$message.info("请填写获奖记录");
        return;
      }
      if (isEmpty(sdata.mainHis)) {
        this.$message.info("请填写主要事迹");
        return;
      }
      if (sdata.mainHis.length < 100) {
        this.$message.info("主要事迹字数需要100字以上");
        return;
      }

      let card = sdata.bankCard;
      let boolCard = await alipayVali(card);
      if (boolCard.validated == false) {
        this.$message.info("请输入正确的银行卡号");
        return;
      }

      if (boolCard.bank != "ABC") {
        this.$message.info("请输入正确的中国农业银行银行卡号");
        return;
      }

      this.fullLoading = true;
      sdata.applyId = sdata.id;
      let res = await reApply(sdata);
      this.fullLoading = false;
      if (res.code == 200) {
        this.refreshV = false;
        this.resetAddForm();
        this.$message.success(res.msg);
        this.getList();
      }
    },
    refreshVClick(v) {
      this.refreshForm = { ...v };
      this.refreshV = true;
    },
    lookVClick(val) {
      this.lookForm = { ...val }
      this.lookV = true
    },
    cancelVClick(val) {
      if (val != null) {
        let id = val.id
        if (!isEmpty(id)) {
          this.$prompt('清输入取消理由', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^.+$/,
            inputErrorMessage: '不能为空',
          })
            .then(async ({ value }) => {
              let sdata = {
                id: id,
                reason: value,
              }
              let loading = fullLoading(this)
              let res = await cancelApply(sdata)
              loading.close()
              if (res.code == 200) {
                this.$message.success(res.msg)
                this.getList()
              }
            })
            .catch((ex) => {
              this.$message({
                type: 'info',
                message: '取消输入',
              })
              console.log(ex)
            })
        }
      }
    },
    async listStuYear() {
      let res = await listYear()
      if (res.code == 200) {
        this.year_list = [...res.data]
      }
    },
    async doApply() {
      let sdata = { ...this.applyForm }
      if (isEmpty(sdata.stuYearId)) {
        this.$message.info('请选择学年')
        return
      }

      if (isEmpty(sdata.classCount)) {
        this.$message.info('请输入班级人数')
        return
      }

      if (isEmpty(sdata.bankCard)) {
        this.$message.info('请输入农行卡')
        return
      }

      if (isEmpty(sdata.bankAddr)) {
        this.$message.info('请输入开户行')
        return
      }

      if (isEmpty(sdata.goodHis)) {
        this.$message.info('请输入所获奖励')
        return
      }

      if (isEmpty(sdata.mainHis)) {
        this.$message.info('请输入主要事迹')
        return
      }
      if (sdata.mainHis.length < 100) {
        this.$message.info('主要事迹字数需要100字以上')
        return
      }

      let card = sdata.bankCard
      let loading = fullLoading(this)
      let boolCard = await alipayVali(card)
      loading.close()
      if (boolCard.validated == false) {
        this.$message.info('请输入正确的银行卡号')
        return
      }

      if (boolCard.bank != 'ABC') {
        this.$message.info('请输入正确的中国农业银行银行卡号')
        return
      }

      loading = fullLoading(this)
      let res = await doApply(sdata)
      loading.close()
      if (res.code == 200) {
        this.applyV = false
        this.$message.success(res.msg)
        this.getList()
      }
    },
    async getList() {
      this.loading = true
      let res = await listStu(this.queryParams)
      this.loading = false
      if (res.code == 200) {
        this.tableData = [...res.rows]
        this.total = res.total
      }
    },

    async applyVClick() {
      let bool = false
      bool = await this.getOwnInfo()
      if (bool) {
        await this.getOwnClass()
        this.applyV = true
      }
    },
    async getOwnClass() {
      let loading = fullLoading(this)
      let res = await getOwnClass()
      loading.close()
      if (res.code == 200) {
        let data = { ...res.data }
        this.applyForm.className = data.className
        this.applyForm.classCount = data.classCount
        this.applyForm.fdyName = data.fdyName
      }
    },
    async getOwnInfo() {
      let bool = false
      let loading = fullLoading(this)
      let res = await getOwnInfo()
      loading.close()
      if (res.code == 200) {
        let data = { ...res.data }
        if (isEmpty(data.xhk) || isEmpty(data.bankAddr) || isEmpty(data.idCard)) {
          this.$alert('您的信息未完善', '请完善信息', {
            confirmButtonText: '点我前往完善',
            callback: (action) => {
              this.$router.push('/basedata/stuOwnInfo/edit')
            },
          })
          return false
        }
        this.applyForm.idCard = data.idCard
        this.applyForm.bankCard = data.xhk
        this.applyForm.bankAddr = data.bankAddr
        bool = true
      }
      return bool
    },
    handleAffix(affixId) {
      this.applyForm.testimonyMaterials = affixId
    },
  },
}
</script>
<style scoped>
.look-form-item {
  margin-bottom: 1px;
}
</style>
