<template>
  <div class="simulation">
    <el-card ref="UniversitiesColleges" style="margin: 20px 0">
      <div
        :style="{ 'background-image': backimg }"
        style="
          padding: 30px;
          margin: 10px 0;
          background-color: white;
          background-repeat: no-repeat;
          background-position: bottom right;
        "
      >
        <p style="color: #a6a6a6; font-size: 24px; font-weight: bold">
          BATCH CONTROL LINE
        </p>
        <p style="color: #414141; font-size: 24px; font-weight: bold">
          批次控制线
        </p>
        <hr
          class="layui-bg-orange"
          style="width: 40px; height: 4px; margin-top: 10px"
        />
      </div>
    </el-card>
    <el-card>
      <div>
        <el-row class="radioInput">
          <div>
            <span class="radiaTitle">地域:</span>
          </div>
          <el-radio-group v-model="form.location" @change="locationChange">
            <el-radio-button label="">所有</el-radio-button>
            <el-radio-button
              v-for="item in locations"
              :key="item"
              :label="item"
              style="margin-bottom: 10px"
            ></el-radio-button>
          </el-radio-group>
        </el-row>
        <el-row class="radioInput">
          <div>
            <span class="radiaTitle">录取年份:</span>
          </div>
          <el-radio-group v-model="form.year" @change="yearChange">
            <el-radio-button label="">所有</el-radio-button>
            <el-radio-button
              v-for="item in years"
              :key="item"
              :label="item"
              style="margin-bottom: 10px"
            ></el-radio-button>
          </el-radio-group>
        </el-row>
      </div>
      <div class="content">
        <mx-table :rows="batchData" :propDefines="propDefines"> </mx-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageForm.pageNum"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pageForm.pageSize"
          layout=" prev,pager,next,jumper,total,sizes"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { locations, years, pckzxList } from "@/api/webApi/career-other";
export default {
  data() {
    return {
      backimg:
        "url(" + require("@/assets/images/career/icon_colleges.png") + ")",
      locations: [],
      years: [],
      form: { location: "", year: "" },
      batchData: [],
      pageForm: { pageNum: 1, pageSize: 10 },
      propDefines: {
        location: {
          label: "地域",
        },
        year: {
          label: "年份",
        },
        typeName: {
          label: "批次",
        },
        score1: {
          label: "文科",
        },
        score2: {
          label: "理科",
        },
      },
      total: 0,
    };
  },
  created() {
    this.getLocations();
    this.getYears();
    this.getBatchList();
  },
  methods: {
    handleSizeChange(val) {
      this.pageForm.pageSize = val;
      this.getBatchList();
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val;
      this.getBatchList();
    },
    locationChange(e) {
      this.getYears();
      this.pageForm.pageNum = 1;
      this.getBatchList();
    },
    yearChange(e) {
      this.pageForm.pageNum = 1;
      this.getBatchList();
    },
    getLocations() {
      locations().then((res) => {
        this.locations = res.rows;
        console.log(res);
      });
    },
    getYears() {
      years({ location: this.form.location }).then((res) => {
        this.years = res.rows;
        console.log(res);
      });
    },
    getBatchList() {
      pckzxList({ ...this.pageForm, ...this.form }).then((res) => {
        this.batchData = res.rows;
        this.total = res.total;
        console.log(res);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.layui-bg-orange {
  background-color: #47c6a2;
  margin-left: 0;
}
</style>
<style lang="scss">
.radioInput {
  .el-radio {
    .el-radio__input {
      display: none;
    }
  }
}
.radioInput {
  display: flex;
  .el-radio-button .el-radio-button__inner {
    border-radius: 4px !important;
    border: none;
    padding: 5px 10px !important;
    font-weight: 400;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    box-shadow: none;
  }
  .radiaTitle {
    display: inline-block;
    width: 130px;
    font-size: 14px;
    text-align: right;
    margin-top: 2px;
  }
}
.radioInput02 {
  display: flex;
  align-items: center;
  .radiaTitle {
    display: inline-block;
    width: 130px;
    font-size: 14px;
    text-align: right;
    margin-top: 2px;
  }
  .el-input--medium .el-input__inner {
    border-radius: 50px;
  }
}
</style>
