<template>
  <div >
    <div class="content-box">
        <div>
          <el-row class="radioInput">
            <div>
              <span class="radiaTitle">年份：</span>
            </div>
            <el-radio-group v-model="selected.years" @change="yearChange">
              <el-radio-button
                v-for="item in form.years"
                :key="item"
                :label="item"
                style="margin-bottom: 10px"
              ></el-radio-button>
            </el-radio-group>
          </el-row>
          <el-row class="radioInput radioScience">
            <div>
              <span class="radiaTitle">首选科目：</span>
            </div>
            <el-checkbox-group v-model="selected.sciences[0]" @change="onScienceChanged" size="mini" :max="1">
              <el-checkbox-button v-for="item in form.sciences[0]" :key="item" :label="item">
                {{item}}
              </el-checkbox-button>
            </el-checkbox-group>
            <div>
              <span class="radiaTitle">再选科目：</span>
            </div>
            <el-checkbox-group v-model="selected.sciences[1]" @change="onScienceChanged" size="mini" :max="2">
              <el-checkbox-button v-for="item in form.sciences[1]" :key="item" :label="item">
                {{item}}
              </el-checkbox-button>
            </el-checkbox-group>
          </el-row>
          <el-row class="radioInput">
            <div>
              <span class="radiaTitle">院校地区：</span>
            </div>
            <el-radio-group v-model="selected.locations" @change="locationChange">
              <el-radio-button label="">所有</el-radio-button>
              <el-radio-button
                v-for="item in form.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="selected.types" @change="typeChange">
              <el-radio-button label="">所有</el-radio-button>
              <el-radio-button
                v-for="item in form.types"
                :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="selected.features" @change="featureChange">
              <el-radio-button label="">所有</el-radio-button>
              <el-radio-button
                v-for="item in form.features"
                :key="item.code"
                :label="item.code"
                style="margin-bottom: 10px"
              >{{item.label}}</el-radio-button>
            </el-radio-group>
          </el-row>
          <el-row class="radioInput">
            <div>
              <span class="radiaTitle">层次：</span>
            </div>
            <el-radio-group v-model="selected.levels" @change="levelChange">
              <el-radio-button label="">所有</el-radio-button>
              <el-radio-button
                v-for="item in form.levels"
                :key="item"
                :label="item"
                style="margin-bottom: 10px"
              ></el-radio-button>
            </el-radio-group>
          </el-row>
        </div>
        <div class="content">
<!--          <div class="xkcx-input-box">-->
<!--            <div class="search_header">-->
<!--              <input-->
<!--                placeholder="请输入内容"-->
<!--                v-model="keyword"-->
<!--                @keyup.enter="httpGetXkcxList()"-->
<!--              />-->
<!--              <img-->
<!--                src="@/assets/images/icon_search2.png"-->
<!--                alt=""-->
<!--                @click="httpGetXkcxList()"-->
<!--              />-->
<!--            </div>-->
<!--          </div>-->
          <mx-search-group class="mb10" justify="end" :span="12" v-model="keyword" placeholder="请输入内容" @search="httpGetXkcxList"
          ></mx-search-group>
          <div class="concerned-college-container" v-loading="loading">
            <mx-table :rows="dataList" :propDefines="propDefines">
              <template #collect="{ row }">
                <img
                  class="college-icon"
                  v-if="row.collect"
                  @click="httpCollectRemove(row)"
                  src="@/assets/images/subject/icon_shoucang_pre.png"
                />
                <img
                  class="college-icon"
                  v-else
                  @click="httpCollectAdd(row)"
                  src="@/assets/images/subject/icon_shoucang_n.png"
                />
              </template>
              <template #select="{ row }">
                <div @click="saveCourseCollect(row)">
                  <i class="el-icon el-icon-success"  style="color: #42b983" v-if="row.isSelectCourse"></i>
                  <i class="el-icon el-icon-success"  v-else></i>
                </div>

              </template>
            </mx-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="pageNum"
              :limit.sync="pageSize"
              :page-size="20"
              @pagination="onChangePage"
            />
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  import { selectUniversity } from '@/api/webApi/career-course'
  import {collectAdd, collectRemove, xkcxlist, xkcxYears,saveSelectCourse} from "@/api/webApi/webQue";
  import MxSearchGroup from "@/components/MxSearch/mx-search-group";

  export default {
    props: {
      course0:{
        type: String,
        default: ''
      },
      course1:{
        type: String,
        default: ''
      },
      year: {
        type: Number,
        default: ''
      }
    },
    components : {
      MxSearchGroup
    },
    data() {
      return {
        // 初始条件
        form: {
          years: [],
          sciences: [["物理", "历史"],["化学", "生物", "政治", "地理"]],
          locations: ["湖南", "湖北"],
          types: ["综合", "工科", "农业", "林业"],
          features:[ "双一流", "985", "211"],
          levels:["本科","专科"]
        },
        // 选中条件
        selected: { years:'', sciences:[[],[]], locations:"", types:"", features:"", levels:"" },
        pageNum: 1,
        pageSize: 20,
        total: 0,
        loading: false,
        keyword: "",
        // 查询结果
        dataList: [],
        isShowTabl: true,
        propDefines: {
          universityName: {
            label: "院校名称",
          },
          marjorName: {
            label: "专业（类）名称",
          },
          marjorBelongs: {
            label: "专业备注",
            align: "left",
          },
          level: {
            label: "专业层次",
          },
          courseRemark0: {
            label: "首选科目范围",
            align: "left",
          },
          courseRemark1: {
            label: "再选科目范围",
            align: "left",
          },
          year: {
            label: "年份",
            align: "left",
          },
          collect: {
            label: "收藏",
            align: "left",
            slot: "collect",
            width: "100px",
          },
          subjectCollect: {
            label: "选科收藏",
            align: "left",
            slot: "select",
            width: "100px",
          },
        },
      };
    },
    created() {
      this.selected.sciences[0] = this.course0 ? [this.course0] : []
      this.selected.sciences[1] = this.course1? this.course1.split(',') :[]
      this.selected.years = this.year
      if(this.course0 && this.course1) this.httpGetXkcxList()
      this.getYears();
      this.getUniversity();

    },
    methods: {
      // 取有效年份清单
      getYears() {
        xkcxYears().then((res) => {
          this.form.years = res.data || [];
          this.selected.years = this.selected.years ||  this.form.years[0]
        });
      },
      // 取其他条件清单
      getUniversity() {
        selectUniversity().then(res => {
          this.form.features = res.data.features;
          this.form.locations = res.data.locations;
          this.form.levels = res.data.levels;
          this.form.types = res.data.types;
        })
      },

      yearChange(value) {
        this.httpGetXkcxList();
      },
      onScienceChanged(value) {
        this.httpGetXkcxList();
      },
      locationChange(value) {
        this.httpGetXkcxList();
      },
      typeChange(value) {
        this.httpGetXkcxList();
      },
      featureChange(value) {
        this.httpGetXkcxList();
      },
      levelChange(value) {
        this.httpGetXkcxList();
      },
      // 查询结果
      httpGetXkcxList() {
        if (this.selected.sciences[0].length<1 || this.selected.sciences[1].length<2) return;

        //console.log(this.selected);return;
        this.loading = true
        xkcxlist({
          level:this.selected.levels.toString(),
          keyword: this.keyword,
          course0: this.selected.sciences[0].toString(),
          course1: this.selected.sciences[1].toString(),
          locations: this.selected.locations.toString(),
          ts: this.selected.features.toString(),
          types: this.selected.types.toString(),
          year: this.selected.years.toString(),
          pageNum: this.pageNum,
          marjors: [],
          pageSize: this.pageSize,
        })
          .then((res) => {
            this.dataList = res.rows;
            this.total = res.total;
            this.isShowTable = true;
          })
          .catch((err) => {
            console.log("请求出错！");
            this.cleanSchoolSelect();
          }).finally(() => {
            this.loading = false
        })
      },

      onChangePage(page) {
        this.pageSize = page.limit;
        this.pageNum = page.page;
        this.httpGetXkcxList();
      },
      // 收藏
      httpCollectAdd(row) {
        row.collect = true;
        collectAdd({
          refId: row.id,
        });
      },
      // 选科收藏 取消和收藏
      saveCourseCollect(row) {
        saveSelectCourse({
          refId:row.id,
          isSelectCourse: !row.isSelectCourse
        }).then(res =>{
          if(res.code== 200){
            row.isSelectCourse = !row.isSelectCourse
            this.$message.success(res.msg)
          }
        })
      },
      // 取消收藏
      httpCollectRemove(row) {
        row.collect = false;
        collectRemove({
          refId: row.id,
        });
      },
    },
  };
</script>

<style scoped>
.el-icon-success{
  cursor: pointer;
}

.college-icon {
  cursor: pointer;
}


  .search_header {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-right: 20px;
  }

  .search_header img {
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: 6px;
  }

  .search_header input {
    background: #f7f7ff;
    border-radius: 20px;
    border: 1px solid #c6cbf5;
    outline: none;
    width: 340px;
    height: 32px;
    padding-left: 24px;
  }

  .popup-item-title span {
    font-size: 14px;
    font-weight: 500;
  }

</style>

<style lang="scss" scoped>
.layui-bg-orange {
  background-color: var(--themeColor);
  margin-left: 0;
}
</style>

<style lang="scss">
.el-checkbox-button {
  margin-bottom: 10px;
  .el-checkbox-button__inner {
    font-size: 14px;
  }
}

.radioInput {
  .el-radio {
    .el-radio__input {
      display: none;
    }
  }
}
.radioInput.radioScience {
  .el-radio-button {
    border: 1px solid #47C6A2;
    border-radius: 3px;
    margin-right: 10px;
  }
}
.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>
