<template>
  <div class="fill-batch">
    <div class="top-title">（四）选择院校专业</div>
    <div class="content-box">
      <div class="content-title">
        {{ currentUser.provinceName }}{{ year }}年{{ batchInfo.name }}学校志愿智能模拟
      </div>
      <div class="content-msg">
        您的预估高考成绩： {{ subject }}
        <span>{{ firstSubject }}</span>
        <span v-if="lastSubject.length">,{{ lastSubject.toString() }}</span>
        总分：{{ score }}
      </div>
      <mx-table :rows="dataList" :propDefines="propDefines">
        <template #school="{ row }">
          <div class="template-box">
            <div>{{ row.school }}</div>
            <el-button size="small" type="primary" @click="openUniversityPopup(row)">选择院校</el-button>
          </div>
        </template>
        <template #major="{ row }">
          <div class="template-box">
            <div>
              <div v-for="(item, index) in row.marjors" :key="index">
                {{ item.name }}
              </div>
            </div>
            <el-button size="small" type="primary" @click="openMajorPopup(row)">选择专业</el-button>
          </div>
        </template>
        <template #select="{ row }">
          <el-switch v-model="row.obeyOrNot" active-text="服从" inactive-text="不服从">
          </el-switch>
        </template>
      </mx-table>
    </div>
    <div>
      <el-dialog v-if="isShowUniversityPopup" :visible.sync="isShowUniversityPopup" width="95%" title="选择院校">
        <div class="university-popup">
          <div class="top-select-box">
            <div class="radio_contianer" style="padding: 0 20px">
              <div>
                <span>院校地区</span>
                <el-radio-group size="mini" v-model="form.location" @change="httpzytbUniversity">
                  <el-radio-button label=""> 全部 </el-radio-button>
                  <el-radio-button :label="item" v-for="(item, index) in filters.locations" :key="index">{{ item }}</el-radio-button>
                </el-radio-group>
              </div>
              <div>
                <span>院校类型</span>
                <el-radio-group size="mini" v-model="form.type" @change="httpzytbUniversity">
                  <el-radio-button label=""> 全部 </el-radio-button>
                  <el-radio-button :label="item" v-for="(item, index) in filters.types" :key="index">{{ item }}</el-radio-button>
                </el-radio-group>
              </div>
              <div v-if="false">
                <span>专业类别</span>
                <el-radio-group size="mini" v-model="form.marjor" @change="httpzytbUniversity">
                  <el-radio-button label=""> 全部 </el-radio-button>
                  <el-radio-button :label="item.value" v-for="(item, index) in filters.marjors" :key="index">{{ item.label }}</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="select-item">
              <div class="select-label">院校特性:</div>
              <div class="select-content">
                <el-checkbox v-model="ylxx" @change="httpzytbUniversity">一流大学建设高校</el-checkbox>
                <el-checkbox v-model="ylxk" @change="httpzytbUniversity">一流学科建设高校</el-checkbox>
                <el-checkbox v-model="yjsy" @change="httpzytbUniversity">研究生院</el-checkbox>
                <el-checkbox v-model="dlxy" @change="httpzytbUniversity">独立学院</el-checkbox>
                <el-checkbox v-model="mbgx" @change="httpzytbUniversity">民办高校</el-checkbox>
              </div>
            </div>
            <div class="select-item">
              <div class="select-label">推荐类型:</div>
              <div class="select-content">
                <el-radio-group v-model="pickType" @change="httpzytbUniversity">
                  <el-radio :label="0">冲刺型</el-radio>
                  <el-radio :label="1">稳妥型</el-radio>
                  <el-radio :label="2">保守型</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
          <mx-table :rows="UniversityDataList" :propDefines="UniversityPropDefines">
            <template #logo="{ row }">
              <img class="university-logo" :src="row.logo" />
            </template>
            <template #column-check-style="{value}">
              <mx-check-status :checked="value>1" yes-only />
            </template>
            <template #select="{ row }">
              <el-button type="primary" @click="selectUniversity(row)">选择院校</el-button>
            </template>
          </mx-table>
          <pagination v-show="UniversityTotal > 0" :total="UniversityTotal" :page.sync="pageNum" :limit.sync="pageSize" :page-size="20" @pagination="onChangePage" />
        </div>
      </el-dialog>
      <el-dialog v-if="isShowMajorPopup" :visible.sync="isShowMajorPopup" width="85%" title="选择专业" append-to-body>
        <div class="major-popup">
          <div class="mx-flex-row mb10" style="justify-content:flex-end; align-items:center;">
            <el-button type="primary" @click="selectMarjor()">确认选择</el-button>
          </div>
          <mx-table ref="majorTable" :rows="marjorDataList" :propDefines="propPopupDefines">
          </mx-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { zytbMarjor, zytbUniversity, zytbFilter } from "@/api/webApi/webQue";
import { mapGetters } from 'vuex';
export default {
  name: "FillMajor",
  data: () => {
    return {
      pageNum: 1,
      pageSize: 10,
      ylxx: false,
      ylxk: false,
      yjsy: false,
      dlxy: false,
      mbgx: false,
      pickType: 0,
      form: {
        location: "",
        type: "",
        marjor: "",
      },
      propPopupDefines: {
        universityName: {
          label: "院校名称",
        },
        marjorName: {
          label: "专业（类）名称",
        },
        marjorDirection: {
          label: "方向",
          align: "left",
        },
        location: {
          label: "招生地",
        },
        score: { label: "录取分数" },
        seat: { label: "位次" },
        selection: {
          label: "选择",
          type: "selection"
        }
      },
      UniversityDataList: [],
      marjorDataList: [],
      isShowMajorPopup: false,
      isShowUniversityPopup: false,
      UniversityPropDefines: {
        logo: {
          label: "图片",
          slot: "logo",
          width: "120px",
        },
        year: { label: "年份" },
        name: { label: "院校名称" },
        score: { label: "分数" },
        seat: { label: "位次" },
        universityLocation: { label: "所在地" },
        managerType: { label: "主管部门" },
        universityType: { label: "院校类型", },
        level: { label: "学历层次", },
        ylxx: {
          label: "一流大学建设高校",
          slot: "column-check-style",
        },
        ylxk: {
          label: "一流学科建设高校",
          slot: "column-check-style",
        },
        yjsy: {
          label: "研究生院",
          slot: "column-check-style",
        },
        collect: {
          label: "选择",
          align: "left",
          slot: "select",
          width: "120px",
        },
      },
      propDefines: {
        name: {
          label: "",
          width: "100px",
        },
        school: {
          label: "学校",
          slot: "school",
        },
        marjors: {
          label: "专业",
          slot: "major",
        },
        obeyOrNot: {
          label: "是否服从",
          slot: "select",
        }
      },
      dataList: [
        {
          name: "一志愿",
          school: "",
          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
          marjors: [],
          obeyOrNot: false,
          index: 0,
        },
        {
          name: "二志愿",
          school: "",
          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
          marjors: [],
          obeyOrNot: false,
          index: 1,
        },
        {
          name: "三志愿",
          school: "",
          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
          marjors: [],
          obeyOrNot: false,
          index: 2,
        },
        {
          name: "四志愿",
          school: "",
          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
          marjors: [],
          obeyOrNot: false,
          index: 3,
        },
        {
          name: "五志愿",
          school: "",
          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
          marjors: [],
          obeyOrNot: false,
          index: 4,
        },
        {
          name: "六志愿",
          school: "",
          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
          marjors: [],
          obeyOrNot: false,
          index: 5,
        },
        {
          name: "七志愿",
          school: "",
          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
          marjors: [],
          obeyOrNot: false,
          index: 6,
        },
        {
          name: "八志愿",
          school: "",
          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
          marjors: [],
          obeyOrNot: false,
          index: 7,
        },
        {
          name: "九志愿",
          school: "",
          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
          marjors: [],
          obeyOrNot: false,
          index: 8,
        },
        {
          name: "十志愿",
          school: "",
          schoolInfo: { code: 0, name: "", submitId: 0, universityId: 0 },
          marjors: [],
          obeyOrNot: false,
          index: 9,
        },
      ],
      universityId: 0,
      selectIndex: 0,
      UniversityTotal: 0,
      filters: [],
    };
  },
  props: {
    batch: {
      type: String | Number,
      default: ''
    },
    batchInfo: {
      type: Object,
      default: () => ({})
    },
    subject: {
      type: String,
      default: "",
    },
    year: {
      type: String,
      default: "",
    },
    score: {
      type: Number,
      default: 0,
    },
    firstSubject: {
      type: String,
      default: "",
    },
    lastSubject: {
      type: Array,
      default: [],
    },
    isNewCollegeEntranceExam: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters(['currentUser'])
  },
  created() {
    this.$nextTick(_ => zytbFilter(this.batch).then((res) => {
      this.filters = res.data;
    }))
  },
  methods: {
    selectMarjor() {
      const table = this.$refs.majorTable.getRuntimeTable();
      if (!table.selection.length) {
        this.msgError("请选择专业！")
        return
      }
      var selectedList = table.selection.map(r => ({
        id: r.id,
        name: r.marjorName
      }))
      this.dataList[this.selectIndex]["marjors"] = selectedList
      this.isShowMajorPopup = false;
      this.isShowUniversityPopup = false
    },
    selectUniversity(item) {
      this.dataList[this.selectIndex]["school"] = item.name;
      this.dataList[this.selectIndex]["schoolInfo"]["code"] = item.code;
      this.dataList[this.selectIndex]["schoolInfo"]["name"] = item.name;
      this.dataList[this.selectIndex]["schoolInfo"]["submitId"] = item.submitId;
      this.dataList[this.selectIndex]["schoolInfo"]["universityId"] = item.universityId;
      this.dataList[this.selectIndex]["marjors"] = [] // reset
      this.openMajorPopup(this.dataList[this.selectIndex])
    },
    openUniversityPopup(item) {
      this.selectIndex = item.index;
      this.isShowUniversityPopup = true;
      this.httpzytbUniversity();
    },
    openMajorPopup(item) {
      this.selectIndex = item.index;
      if (
        this.dataList[this.selectIndex]["schoolInfo"] &&
        this.dataList[this.selectIndex]["schoolInfo"]["universityId"]
      ) {
        this.universityId = this.dataList[this.selectIndex]["schoolInfo"]["universityId"];
        this.httpzytbMarjor();
        this.isShowMajorPopup = true;
      } else {
        this.$message.error("请先选择院校！");
      }
    },
    onChangePage(res) {
      this.pageNum = res.page;
      this.pageSize = res.limit;
      if (this.isShowUniversityPopup) {
        this.httpzytbUniversity();
      }
      if (this.isShowMajorPopup) {
        this.httpzytbMarjor();
      }
    },
    httpzytbUniversity() {
      zytbUniversity({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        batch: this.batch,
        ylxx: this.ylxx,
        ylxk: this.ylxk,
        yjsy: this.yjsy,
        dlxy: this.dlxy,
        mbgx: this.mbgx,
        pickType: this.pickType,
        score: this.score,
        mode: this.subject || [this.firstSubject, ...this.lastSubject].toString(),
        //year: this.year,
        ...this.form
      }).then((res) => {
        this.UniversityTotal = res.total;
        this.UniversityDataList = res.rows;
      });
    },
    httpzytbMarjor() {
      zytbMarjor({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        universityId: this.universityId,
        batch: this.batch,
        pickType: this.pickType,
        score: this.score,
        mode: this.subject || [this.firstSubject, ...this.lastSubject].toString(),
        //year: this.year,
      }).then((res) => {
        this.marjorDataList = res.rows;
      });
    },
  },
};
</script>

<style scoped>
.top-title {
  color: #6cd1b5;
  text-align: center;
  font-size: 30px;
  height: 80px;
  padding: 26px;
  border-bottom: 1px solid rgba(183, 183, 183, 0.5);
}
.content-box {
  padding: 30px 0;
  height: 500px;
  overflow-y: auto;
}
.content-title {
  padding-bottom: 30px;
  text-align: center;
}
.content-msg {
  border-bottom: 1px solid #eee;
  padding: 10px;
  background-color: #eee;
  margin-top: 5px;
}
.select-item {
  padding: 20px 0;
  display: flex;
  border-bottom: 1px dashed #e3e3e3;
}
.select-content {
  margin-left: 10px;
}
.university-logo {
  width: 100px;
  height: 100px;
}
.template-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.radio_contianer > div > span {
  margin-right: 16px;
  flex-shrink: 0;
}
.radio_contianer > div {
  display: flex;
}
.fill-batch >>> .el-radio-button__inner {
  border-left: 1px solid #dcdfe6;
}

.fill-batch >>> .radio_contianer .el-radio-button .el-radio-button__inner {
  border-radius: 16px;
  margin-bottom: 5px;
  margin-right: 8px;
}
.fill-batch >>> .radio_contianer .is-active .el-radio-button__inner{
  border-left: none;
}
.fill-batch >>> .split_page .el-pager > li {
  border-radius: 50%;
}
</style>


