<template>
  <div class="dashboard-container">
    <transition name="fade">
      <div class="left">
        <el-form :inline="true"
                 :model="sectionForm"
                 class="sectionForm">
          <el-form-item>
            <el-select v-model="sectionForm.section"
                       placeholder="请选择分部"
                       @change="chioseSection">
              <el-option v-for="(item,index) in brancheList"
                         :key="index"
                         :value="item.branchId"
                         :label="item.branchName"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <h2 v-if="MajorList.length > 0">所属乐团</h2>
        <ul>
          <!-- MajorList -->
          <li v-for="(item,index) in MajorList"
              :key="index"
              @click="chioseMajor(item.name,item.id,item.status)">{{ item.name }}</li>
        </ul>
      </div>
    </transition>
    <div class="right">
      <!-- 顶部收索框 -->
      <el-form :inline="true"
               class="topWrap"
               :model="topForm">
        <el-form-item label="学生姓名">
          <el-input v-model="topForm.team"
                    placeholder="请输入学生名称" />
        </el-form-item>
        <el-form-item label="学生专业">
          <el-select v-model="topForm.major"
                     placeholder="请输入学生专业">
            <el-option v-for="(item,index) in chioseList"
                       :key="index"
                       :value="item.subId"
                       :label="item.subName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生状态">
          <el-select v-model="topForm.status"
                     placeholder="请选择学生状态"
                     clearable>
            <!-- // 1报名中，2缴费中，3报名截止，4已开团 -->
            <el-option :value="0"
                       label="报名中"></el-option>
            <el-option :value="1"
                       label="报名完成"></el-option>
            <el-option :value="2"
                       label="报名失败"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="学生">
          <el-input v-model="topForm.student"
                    placeholder="请输入学生姓名" />
        </el-form-item>-->
        <el-button type="primary"
                   icon="el-icon-search"
                   plain
                   @click="getstudentList">搜索</el-button>
        <el-button type="success"
                   icon="el-icon-refresh"
                   plain
                   @click="resetStudentList">重置</el-button>
        <el-button icon="el-icon-refresh"
                   plain
                   @click="showFade('','','')">批量调剂</el-button>
      </el-form>
      <!-- 提示语 -->
      <p class="subMsg"
         v-if="!majorId">请先选择分部和乐团后,再查看学生列表或者搜索学生~</p>
      <!-- 列表 -->
      <div class="tableWrap"
           v-if="majorId">
        <el-table :data="tableData"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55">
          </el-table-column>
          <el-table-column prop="city"
                           align="center"
                           label="所属分部"></el-table-column>
          <el-table-column prop="name"
                           align="center"
                           label="学生姓名"></el-table-column>
          <el-table-column prop="sex"
                           align="center"
                           label="性别"
                           :formatter="filterSex"></el-table-column>
          <el-table-column prop="birthday"
                           align="center"
                           label="出生日期"
                           :formatter="filterDate"></el-table-column>
          <el-table-column prop="class"
                           align="center"
                           label="班级"
                           :formatter="filterClass"></el-table-column>
          <el-table-column prop="school"
                           align="center"
                           label="单位/学校"></el-table-column>
          <el-table-column prop="patriarchPhone"
                           align="center"
                           label="联系方式"></el-table-column>
          <el-table-column prop="subName"
                           align="center"
                           label="录取专业"></el-table-column>
          <el-table-column prop="patriarchName"
                           align="center"
                           label="家长姓名"></el-table-column>
          <el-table-column prop="patriarchUnit"
                           align="center"
                           label="家长工作单位"></el-table-column>
          <!-- <el-table-column prop="musical" align="center" label="乐器准备方式"></el-table-column> -->
          <!-- status -->
          <el-table-column prop="status"
                           align="center"
                           label="状态"
                           :formatter="filterStatus"></el-table-column>
          <el-table-column prop="amount"
                           align="center"
                           label="实际缴费金额"></el-table-column>
          <el-table-column align="center"
                           label="操作">
            <template slot-scope="scope">
              <div>
                <!-- 学生id crouseId subId -->
                <el-button type="primary"
                           plain
                           :disabled='!disabled'
                           @click="showFade(scope.row.id,scope.row.courseId,scope.row.subId)">调剂</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 调剂弹出层 -->
        <el-dialog title="提示"
                   :visible.sync="dialogVisible"
                   width="30%">
          <span>请选择调剂乐团</span>
          <el-select v-model="reviseMajor"
                     placeholder="请选择调剂课程"
                     @change="reviseMajors">
            <el-option v-for="(item,index) in chioseList"
                       :key="index"
                       :value="item.subId+'-'+item.id"
                       :label="item.subName"></el-option>
          </el-select>
          <span slot="footer"
                class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"
                       @click="submitRe">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 分页器 -->
        <div class="paginationWrap">
          <el-pagination background
                         class="pagination"
                         layout="prev, pager, next"
                         :total="total"
                         :current-page.sync="currentPage"
                         :page-size.sync="limit"
                         @current-change="handleCurrentChange"></el-pagination>
        </div>
        <!-- 报名按钮 -->
        <!--   -->
        <el-button type="danger"
                   v-if="majorStatus == 1"
                   class="joinBtn"
                   @click="getMoney">开启缴费</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import { loading } from "element-ui";
import { scrollTo } from '@/utils/scroll-to'
import {
  getAllMajor,
  getMusicTeams,
  getBranches,
  getStudentList,
  updateUser,
  updateClass
} from "@/api/table";
import { setTimeout } from "timers";
export default {
  name: "Dashboard",
  data () {
    return {
      topForm: {
        team: "",
        status: "",
        student: "",
        major: ''

      },
      sectionForm: {
        section: ""
      },
      MajorList: [], // 所有乐团集合
      tableData: [
        // {
        //   city: "武汉",
        //   name: "黑哈哈哈",
        //   sex: "男",
        //   nation: "汉",
        //   date: "2011-03-27",
        //   class: "205",
        //   school: "武汉市鲁巷实验小学",
        //   phone: "13016440991",
        //   major: "萨克斯管",
        //   parents: "魏英",
        //   work: "华中区家乐福总部",
        //   musical: "团购",
        //   money: "1000"
        // }
      ],
      isMusic: true,
      dialogVisible: false,
      reviseMajor: "", // 选择的团名
      actionTearm: "", // 选中的乐团名字
      majorStatus: "", // 所选乐团的状态
      majorId: "", // 所选乐团的ID
      chioseList: [], // 所有调剂科目的集合
      sessionId: "",
      brancheList: [], // 所有分部集合
      limit: 20,
      total: 0,
      page: 1,
      studentId: "", // 学生id
      courseId: "", // 当前选中的课程
      subId: "", // 当前选中的项目
      disabled: true // 判断单个调剂按钮能否点击
    };
  },
  methods: {
    showFade (id, courseId, subId) {
      if (id && courseId) {
        this.studentId = id;
        this.courseId = courseId;
      }
      this.subId = subId;
      this.dialogVisible = true;

    },
    // 获取分类选项卡
    getMajors () {
      // classid  乐团id
      getAllMajor(qs.stringify({ clazzId: this.majorId }))
        .then(res => {
          if (res.code == 200) {
            this.chioseList = res.data;
          }
        })
        .catch(res => { });
    },
    // 获取所有乐团列表
    getMusicTeam (id, row) {
      getMusicTeams(qs.stringify({ branchId: id, row, page: this.page })).then(
        res => {
          if (res.code == 200) {
            this.MajorList = res.data.rows;
          }
        }
      );
    },
    // 获取所有分部
    getBranches () {
      getBranches().then(res => {
        if (res.code == 200) {
          this.brancheList = res.data;
        }
      });
    },
    // 点击选择分部
    chioseSection (id) {
      // 查询分部列表
      // console.log(id);
      this.sessionId = id;
      this.getMusicTeam(id, 50);
    },
    // 点击分部下的乐团
    chioseMajor (name, id, status) {
      this.actionTearm = name;
      this.majorStatus = status;
      this.majorId = id;
      // 发请求 获取学生列表数据
      this.getstudentList();
      // 获取分类选项卡
      this.getMajors();
    },
    // 获取学生列表(查询也用这个接口)
    getstudentList () {
      if (!this.majorId) {
        this.$message.error("请先选择分部与乐团在搜索学生");
        return;
      }
      getStudentList(
        qs.stringify({
          musicTeamId: this.majorId,
          name: this.topForm.team,
          status: this.topForm.status,
          subId: this.topForm.major,
          page: this.page,
          rows: this.limit
        })
      ).then(res => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
        this.pageSize = res.data.limit;
      });
    },
    // 重置搜索
    resetStudentList () {
      this.topForm.team = "";
      this.topForm.status = "";
      this.topForm.major = "";
      this.page = 1;
      this.getstudentList();
    },
    // 性别分类过滤器
    filterSex (val) {
      let arr = ["男", "女"];
      return arr[val.sex];
    },
    // 时间格式化过滤器
    filterDate (val) {
      let str = "";
      val.birthday ? (str = val.birthday.split("T")[0]) : (str = "");
      return str;
    },
    // 格式化班级
    filterClass (val) {
      return val.grade + val.gclass;
    },
    // 格式化状态
    filterStatus (val) {
      let arr = ["报名中", "报名完成", "报名失败"];
      return arr[val.status];
    },
    // 修改科目触发事件
    reviseMajors (val) {
      // 这里切割字符串 拿到想要的数据
      if (val) {
        this.subId = val.split('-')[0];
        this.crouseId = val.split('-')[1];
      }
      console.log(this.crouseId)
    },
    // 确认修改
    submitRe () {
      // console.log(this.crouseId);
      updateUser(
        qs.stringify({
          courseId: this.crouseId,
          subId: this.subId,
          userId: this.studentId
        })
      ).then(res => {
        if (res.code == 200) {
          this.dialogVisible = false;
          this.$message.success(res.msg);
          this.reviseMajor = "";
          // 刷新列表
          this.getstudentList();
        }
      });
    },
    // 点击开始缴费 1报名中，2缴费中，3报名截止，4已开团
    getMoney () {
      updateClass(qs.stringify({ id: this.majorId, status: 2 })).then(res => {
        if (res.code == 200) {
          this.$message.success("乐团报名成功请尽快缴费");
          setTimeout(() => {
            // window.location.reload();
            this.majorStatus = 2;
            this.getstudentList();
          }, 1000);
        }
      });
    },
    handleCurrentChange (val) {
      this.page = val;
      // this.limit = pageSize;
      this.getstudentList();
      // if (this.autoScroll) {
      scrollTo(0, 800);
      // }
    },
    handleSelectionChange (val) {
      let str = '';
      if (val.length >= 2) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
      if (val.length > 0) {
        val.forEach(item => {
          str += item.id + ','
        })
      }
      str = str.substring(0, str.length - 1);
      this.studentId = str;

    }
  },
  computed: {
    currentPage: {
      get () {
        return this.page
      },
      set (val) {
        this.$emit('update:page', val)
      }
    },
  },
  mounted () {
    // 获取所有分部
    this.getBranches();
    //  获取所有学生列表
    // this.getstudentList();
  }
};
</script>

<style scoped>
.dashboard-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.dashboard-container .left {
  width: 300px;
  min-height: 100vh;
  background-color: #14928a;
  padding-top: 15px;
}
.dashboard-container .left h2 {
  margin-top: 15px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
  margin: 0;
  padding: 0;
  color: #fff;
}
.dashboard-container .right {
  padding: 15px 0;
  width: calc(100% - 300px);
}
.topWrap {
  margin-left: 40px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.left ul {
  margin: 0;
  padding: 0;
}
.left li {
  display: block;
  text-align: center;
  list-style: none;
  color: #fff;
  font-size: 14px;
  line-height: 70px;
  cursor: pointer;
}
.paginationWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.pagination {
  margin-top: 20px;
}
.joinBtn {
  position: fixed;
  right: 30px;
  top: 700px;
  z-index: 100;
}
.sectionForm {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.subMsg {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: #ccc;
  margin-top: 100px;
}
</style>
