<template>
  <div class="simulation">
    <el-card class="mt20 mb20">
      <div
        :style="{ 'background-image': backimg }"
        class="back"
      >
        <p class="f24 bold" style="color: #a6a6a6">
          BATCH CONTROL LINE
        </p>
        <p class="f24" style="color: #414141;">
          一分一段
        </p>
        <hr
          class="layui-bg-orange f24 bold mt10"
          style="width: 40px; height: 4px"
        />
      </div>
    </el-card>
    <el-card>
      <mx-search-group class="mb10" justify="end" :span="6" v-model="score" placeholder="请输入分数" @search="getList"
      ></mx-search-group>
      <mx-condition ref="condition" :query-params="queryParams" @query="handleQuery"
                    @invalid="handleInvalidQuery"
      ></mx-condition>
      <div class="content">
        <div class="table-wrap" v-loading="loading">
          <mx-table :rows="batchData" :propDefines="propDefines"></mx-table>
        </div>

        <pagination :total="pageForm.total" :autoScroll="false" @pagination="onChangePage" :page.sync="pageForm.pageNum"
                    :limit.sync="pageForm.pageSize"
        ></pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { yfydList } from '@/api/webApi/career-other'
import MxCondition from '@/components/MxCondition/mx-condition'
import MxSearchGroup from '@/components/MxSearch/mx-search-group'
import Pagination from '@/components/Pagination'

export default {
  components: {
    MxCondition,
    Pagination,
    MxSearchGroup
  },
  data() {
    return {
      loading: false,
      queryParams: {
        yfydLocation: '',
        yfydYear: '',
        yfydMode: ''
      },
      pageForm: { pageNum: 1, pageSize: 10, total: 0 },
      backimg:
        'url(' + require('@/assets/images/career/icon_colleges.png') + ')',
      batchData: [],
      score: '',
      propDefines: {
        location: {
          label: '地域'
        },
        year: {
          label: '年份'
        },
        mode: {
          label: '科类'
        },
        score: {
          label: '分数'
        },
        num: {
          label: '人数'
        },
        numTotal: {
          label: '累计人数'
        }
      }
    }
  },
  created() {
  },
  methods: {
    getList() {
      if (this.score == '') return
      this.getYfydList()
    },
    handleInvalidQuery() {

    },
    onChangePage(page) {
      this.pageForm.pageSize = page.limit
      this.pageForm.pageNum = page.page
      this.getYfydList()
    },
    handleQuery() {
      this.pageForm.pageNum = 1
      this.getYfydList()
    },
    getYfydList() {
      this.loading = true
      yfydList({
        year: this.queryParams.yfydYear,
        location: this.queryParams.yfydLocation,
        mode: this.queryParams.yfydMode,
        score: this.score,
        ...this.pageForm
      }).then((res) => {
        this.batchData = res.rows
        this.pageForm.total = res.total
        console.log(res)
      }).finally(_ => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.layui-bg-orange {
  background-color: #47c6a2;
  margin-left: 0;
}

.back {
  padding: 30px;
  margin: 10px 0;
  background-color: white;
  background-repeat: no-repeat;
  background-position: bottom right;
}
</style>
