<!-- 活动解析 -->
<template>
  <div>
    <!-- table 表格 -->
    <el-row :gutter="20" class="main-items">
      <!--数据监控-->
      <el-col :span="20" class="main" :offset="2">
        <el-table
          :data="list"
          :header-cell-class-name="tableheaderClassName"
          :header-cell-style="{
          'background-color': '#F6F7FB',
          'color': '#393939',
          'font-size': '16px'
           }"
          size="medium"
          border
          stripe
        >
          <el-table-column label="注册老师" header-align="center">
            <template slot-scope="scope">
              <div class="scope-list">
                <img :src="BASE_URL+scope.row.imgUrl" alt class="table-img" v-if="scope.row.imgUrl" />
                <img src="../../assets/img/user.jpg" alt v-if="!scope.row.imgUrl" class="table-img" />
                <span class="scope-name">{{scope.row.name}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop label="学校" header-align="center">
            <template slot-scope="scope">
              <div :class="{activetype:scope.row.updateFieldList.indexOf('school')>0}">
                <div>{{scope.row.school}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop label="批改科目" header-align="center">
            <template slot-scope="scope">
              <div :class="{activetype:scope.row.updateFieldList.indexOf('subject')>0}">
                <div>{{scope.row.subject}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop label="批改年级" header-align="center">
            <template slot-scope="scope">
              <div :class="{activetype:scope.row.updateFieldList.indexOf('grade')>0}">
                <div v-for="(v, k) of scope.row.gradeList" :key="k" v-show="v">{{v}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop label="	所属管理员" header-align="center">
            <template slot-scope="scope">
              <div :class="{activetype:scope.row.updateFieldList.indexOf('myManager')>0}">
                <div>{{scope.row.myManager}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop label="老师类型" header-align="center">
            <template slot-scope="scope">
              <div>
                <div
                  :class="{activetype:scope.row.updateFieldList.indexOf('type')>0}"
                  v-if="scope.row.type == 8"
                >批改老师</div>
                <div
                  :class="{activetype:scope.row.updateFieldList.indexOf('type')>0}"
                  v-if="scope.row.type == 13"
                >匹配知识点老师</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop label="身份证" header-align="center" width="200">
            <template slot-scope="scope">
              <img
                :src="BASE_URL+scope.row.idFace"
                alt
                class="identity-card"
                v-if="scope.row.idFace"
              />
              <span class="bank-active" @click="isShow(3,scope.row.idFace)">查看</span>
            </template>
          </el-table-column>
          <el-table-column prop label="银行卡" header-align="center" width="120">
            <template slot-scope="scope">
              <div class="bank-active" @click="isShow(4,scope.row)">{{scope.row.bankName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="regisTime" label="注册时间" header-align="center" width="100">
            <template slot-scope="scope">
              <div class>{{scope.row.regisTime}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label header-align="center" width="250">
            <template slot-scope="scope">
              <el-button type="danger" @click="isShow(2,scope.row.teacherId,scope.row.name)">不通过</el-button>
              <el-button type="success" @click="isShow(1,scope.row.teacherId,scope.row.name)">通过</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页显示 -->
        <div class="page-block" v-if="parseInt(applyTeacherList.pages)">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :page-sizes="[10]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="parseInt(applyTeacherList.pages)"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- 查看身份证 -->
    <div class="showModel" @click="allShowModel(3)" v-if="cardShow"></div>
    <div class="model" v-if="cardShow" style="width: 34%;left: 33%;">
      <div class="model-text">
        <div class="model-text-items">
          <div>
            <img
              src="../../assets/img/del@2x.png"
              alt
              @click="allShowModel(3)"
              class="model-text-items-close"
            />
          </div>
        </div>
        <div class="model-btn">
          <img :src="BASE_URL+imgCard" alt class="model-btn-info-img" />
        </div>
      </div>
    </div>
    <!-- 查看身份证详情-->
    <div class="showModel" @click="allShowModel(4)" v-if="cardInfoShow"></div>
    <div class="model" v-if="cardInfoShow" style="width: 34%;left: 33%;">
      <div class="model-text">
        <div class="model-text-items">
          <div>
            <img
              src="../../assets/img/del@2x.png"
              alt
              @click="allShowModel(4)"
              class="model-text-items-close"
            />
          </div>
        </div>
        <div class="model-info">
          <div class="model-info-items">
            <div class="model-info-items-left">开户银行</div>
            <div class="model-info-items-right">
              <img :src="BASE_URL+cardInfo.bankIcon" alt class="model-info-items-right-img" />
              <span>{{cardInfo.bankName}}</span>
            </div>
          </div>
          <div class="model-info-items">
            <div class="model-info-items-left">开户支行</div>
            <div class="model-info-items-right">
              <span>{{cardInfo.bankBranch}}</span>
            </div>
          </div>
          <div class="model-info-items">
            <div class="model-info-items-left">银行卡号</div>
            <div class="model-info-items-right">
              <span>{{cardInfo.cardNumber}}</span>
            </div>
          </div>
          <div class="model-info-items">
            <div class="model-info-items-left">开户人姓名</div>
            <div class="model-info-items-right">
              <span>{{cardInfo.cardholder}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--是否通过-->
    <div class="showModel" @click="allShowModel(1)" v-if="hiddenModel"></div>
    <div class="model" v-if="hiddenModel">
      <div class="model-text">
        <div class="model-text-items">
          <div>
            <img
              src="../../assets/img/del@2x.png"
              alt
              @click="allShowModel(1)"
              class="model-text-items-close"
            />
          </div>
          <div>是否要通过{{userName}}老师的注册申请？</div>
        </div>
        <div class="model-btn">
          <div class="model-btn-items main-gay" @click="ApplyOperate()">是</div>
          <div class="model-btn-items model-grdeen" @click="allShowModel(1)">否</div>
        </div>
      </div>
    </div>
    <!--是否驳回-->
    <div class="showModel" @click="allShowModel(2)" v-if="isPigai"></div>
    <div class="model" v-if="isPigai">
      <div class="model-text">
        <div class="model-text-items">
          <div>
            <img
              src="../../assets/img/del@2x.png"
              alt
              @click="allShowModel(2)"
              class="model-text-items-close"
            />
          </div>
          <div>审核不通过</div>
          <textarea
            placeholder="请输入审核不通过原因"
            class="textarea"
            style="border: none"
            v-model="filters.textareaDesc"
          ></textarea>
        </div>
        <div class="model-btn">
          <div class="model-btn-items main-gay" @click="ApplyOperate()">确定</div>
          <div class="model-btn-items model-grdeen" @click="allShowModel(2)">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { IMG_BASE_URL, APPOR_BASE_URL } from "@/config";
export default {
  components: {},
  name: "actvResolveLabel",
  props: {},
  data() {
    return {
      BASE_URL: IMG_BASE_URL,
      hiddenModel: false,
      applicantId: "",
      operate: "",
      list: [],
      cardShow: false,
      cardInfoShow: false,
      imgCard: "",
      cardInfo: "",
      isPigai: false,
      options: [
        {
          value: "0",
          label: "一年级"
        },
        {
          value: "1",
          label: "二年级"
        },
        {
          value: "2",
          label: "三年级"
        },
        {
          value: "3",
          label: "四年级"
        },
        {
          value: "4",
          label: "五年级"
        },
        {
          value: "5",
          label: "六年级"
        }
      ],
      grades: [
        {
          value: "0",
          label: "语文"
        },
        {
          value: "1",
          label: "数学"
        },
        {
          value: "2",
          label: "英语"
        }
      ],
      ItemList: [
        {
          text: "数据监控"
        },
        {
          text: "当天"
        },
        {
          text: "当月"
        }
      ],
      filters: {
        textareaDesc: "",
        actvNm: "",
        actvCrtUserId: "",
        actvType: "",
        actvSmallType: "",
        // 排序
        MaxtimeValue: "",
        pageNo: 1,
        pageSize: 10,
        count: 0,
        orderField: "",
        orderAD: ""
      }
    };
  },
  watch: {
    InfoTeacherstatues(val, oldVal) {
      //普通的watch监听
      this.pesiorFun();
    },
    GetTeacherstatues(val, oldVal) {
      //普通的watch监听
      this.SuperApplyTeacherList();
    }
  },
  //
  computed: {
    ...mapGetters([
      "getUser",
      "applyTeacherList",
      "InfoTeacherstatues",
      "GetTeacherstatues"
    ])
  },
  methods: {
    ...mapActions(["setUser"]),

    isShow(str, res, ts) {
      let _this = this;
      console.log(str);
      _this.operate = str;
      _this.applicantId = res;
      _this.userName = ts;
      if (str == 1) {
        _this.hiddenModel = true;
        _this.isPigai = false;
      } else if (str == 2) {
        _this.isPigai = true;
        _this.hiddenModel = false;
      } else if (str == 3) {
        _this.cardShow = true;
        _this.imgCard = res;
      } else if (str == 4) {
        _this.cardInfoShow = true;
        _this.cardInfo = res;
      }
    },
    //关闭弹框
    allShowModel(str) {
      let _this = this;

      if (str == 1) {
        _this.hiddenModel = false;
      } else if (str == 2) {
        _this.isPigai = false;
      } else if (str == 3) {
        _this.cardShow = false;
      } else if (str == 4) {
        _this.cardInfoShow = false;
      }
    },
    // 表格表头设置
    tableheaderClassName({ row, rowIndex }) {
      return "table-head-th";
    },
    //查看申请老师列表
    async SuperApplyTeacherList() {
      this.$store.dispatch("SuperApplyTeacherList", {
        maxCreateTime: this.formatDate(),
        pageNo: this.filters.pageNo,
        pageSize: this.filters.pageSize
      });
    },
    async pesiorFun() {
      console.log(this.applyTeacherList);
      this.applyTeacherList.list = (res => {
        const d = [];
        for (let i in res) {
          var arr = [];
          arr = res[i].period.split(",");
          var updateFieldarr = [];
          updateFieldarr = res[i].updateField.split(",");
          d.push({
            gradeList: res[i].grade.split(","),
            periodList: arr,
            updateFieldList: updateFieldarr,
            imgUrl: res[i].imgUrl,
            name: res[i].name,
            school: res[i].school,
            teacherId: res[i].teacherId,
            subject: res[i].subject,
            type: res[i].type,
            myManager: res[i].myManager,
            idFace: res[i].idFace,
            bankName: res[i].bankName,
            bankIcon: res[i].bankIcon,
            cardholder: res[i].cardholder,
            cardNumber: res[i].cardNumber,
            bankBranch: res[i].bankBranch,
            regisTime: res[i].regisTime
          });
        }
        return d;
      })(this.applyTeacherList.list);
      this.list = this.applyTeacherList.list || [];
      console.log(this.list);
    },
    //申请审批操作
    async ApplyOperate() {
      var _that = this;
      this.$store.dispatch("ApplyOperate", {
        applicantId: this.applicantId,
        operate: this.operate,
        reason: this.filters.textareaDesc
      });
      this.allShowModel(this.operate);
      this.$store.dispatch("GetRemindCountInfo", {});
      // setTimeout(function () {
      //   // _that.SuperApplyTeacherList()
      //   window.location.reload();
      // }, 1000);
    },
    //时间封装
    formatDate: function() {
      let date = new Date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
    // 数组去重
    uniq(array) {
      var temp = []; //一个新的临时数组
      for (var i = 0; i < array.length; i++) {
        if (temp.indexOf(array[i]) == -1) {
          temp.push(array[i]);
        }
      }
      return temp;
    },
    //年级封装
    gradeBag: function(res) {
      var arr = [];
      if (this.applyTeacherList.list[res].grade) {
        arr = this.applyTeacherList.list[res].grade.split(",");
      } else {
        arr = [];
      }
      var arrList = [];
      for (var i in arr) {
        if (arr[i] == "一年级" || arr[i] == "二年级") {
          arrList.push("1-2年级");
        } else if (arr[i] == "三年级" || arr[i] == "四年级") {
          arrList.push("3-4年级");
        } else if (arr[i] == "五年级" || arr[i] == "六年级") {
          arrList.push("5-6年级");
        }
      }
      return this.uniq(arrList);
    },
    // 分页
    pageChange(val) {
      this.filters.pageNo = val;
      this.SuperApplyTeacherList();
    },
    changeDateSlot(dateSlot) {
      if (dateSlot) {
        this.filters.startDate = dateSlot[0];
        this.filters.endDate = dateSlot[1];
      } else {
        this.filters.startDate = null;
        this.filters.endDate = null;
      }
    },
    actvTypeChange(typeList) {
      switch (typeList.length) {
        case 1:
          this.filters.actvType = typeList[0];
          this.filters.actvSmallType = null;
          break;
        case 2:
          this.filters.actvType = null;
          this.filters.actvSmallType = typeList[1];
          break;
        default:
          this.filters.actvType = null;
          this.filters.actvSmallType = null;
          break;
      }
    },
    handleSizeChange(val) {
      console.log(val);
      this.filters.pageSize = val;
      this.SuperApplyTeacherList();
    },
    // 排序
    sortChange(sort) {
      this.filters.orderField = sort.prop;
      this.filters.orderAD = sort.order != null ? sort.order : "";
      this.itemListReshow();
    },
    clearSearch() {
      this.filters.actvNm = null;
      this.filters.actvCrtUserId = null;
      this.filters.actvType = null;
      this.filters.actvSmallType = null;
      this.filtersActvType = [];
      this.createDateSlot = null;
    }
  },
  mounted() {
    sessionStorage.setItem("tabIndex", 1);
    this.SuperApplyTeacherList();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  background-color: #fff;
  margin-top: 16px;
  padding: 0 !important;
  border: 1px solid #e1e1e1;
  min-height: 980px;
}

el-table {
  color: #999999;
  font-size: 18px;
}
.scope-name {
  margin-left: 13px;
}
.main-items {
  color: #393939;
  text-align: center;
  line-height: 80px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #52cc60 !important;
  color: #fff;
}
.table-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}
.showModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
.model {
  z-index: 1001;
  width: 40%;
  height: auto;
  position: fixed;
  top: 30%;
  left: 30%;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}

.model-text {
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}

.model-btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 44px;
}
.model-btn-items {
  width: 154px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  border-radius: 4px;
}
.main-gay {
  background: rgba(246, 247, 251, 1);
  color: #7e7e7e;
}
.model-grdeen {
  background-color: #52cc60;
  color: #fff;
}
.model-text-items-close {
  position: absolute;
  top: 10px;
  right: -5px;
}
.model-text-items {
  position: relative;
  color: #000000;
  font-size: 24px;
  text-align: center;
  padding: 40px 0 50px 0;
  margin: 0 33px;
}
.page-block {
  text-align: center;
  margin-top: 15px;
}
.scope-list {
  margin-left: 18px;
  text-align: left;
}
.el-table .table-head-th {
  background-color: #f6f7fb;
  font-size: 16px !important;
  color: #393939;
}
.el-input__inner,
.el-checkbox__inner,
.el-textarea__inner,
.el-button {
  font-size: 0.3125rem;
  text-align: center;
  line-height: 0 !important;
  padding: 12px 20px !important;
}
.textarea {
  background: #f6f7fb !important;
  font-size: 20px;
  color: #999999;
  margin-top: 33px;
  border: none !important;
  width: 100%;
  min-height: 200px;
  padding: 15px;
}
.TeacherApporTime {
  text-align: center;
  display: inline-block;
  height: 30px;
  width: 60px;
  color: #706f6f;
  background: #b6b6b6;
  border-color: #929492;
  border-radius: 20px;
  font-size: 14px;
  line-height: 30px;
  cursor: pointer;
  margin: 0 5px;
}
.TeacherApporTime:hover {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
}
.buttonAppoval {
  display: inline-block;
}
.activetype {
  color: #52cc60;
}
.bank-active {
  color: #52cc60;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}
.identity-card {
  width: 52px;
  height: 51px;
  border-radius: 4px;
  margin-right: 17px;
}
.model-btn-info-img {
  width: 451px;
  height: 298px;
}
.model-info {
  margin-bottom: 50px;
  padding: 0 58px;
}
.model-info-items {
  height: 70px;
  background: rgba(246, 247, 251, 1);
  border-radius: 6px;
  line-height: 70px;
  margin-bottom: 20px;
  color: #393939;
  font-size: 24px;
}
.model-info-items-left {
  display: inline-block;
  width: 25%;
  text-align: right;
}
.model-info-items-right {
  display: inline-block;
  width: 70%;
  padding-left: 60px;
  line-height: 30px;
}
.model-info-items-right-img {
  width: 35px;
  height: 35px;
}
/*.all_pagination{*/
/*text-align: center !important;*/
/*}*/
</style>
