<template>
  <div class="career-course-tabPage">
    <div class="career-course-head">
      <div class="career-course-title">
        <el-image class="mr5" :src="require('@/assets/images/career/career_course_icon.png')" />
        {{ title }}
      </div>
      <div class="career-course-tabs">
        <el-radio-group v-model="queryParams.type" @change="typeChanged" round>
          <el-radio-button v-for="t in types" :key="t.value" :label="t.value">{{
            t.label
          }}</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <mx-seperator />
    <div class="career-course-body mt10">
      <el-row v-if="total > 0" :gutter="10">
        <el-col class="evaluation-card-wrapper" v-for="c in dataList" :key="c.id" :span="4">
          <el-card>
            <course-card @click.native="detail(c)" :img="c.pictUrl" :title="c.name" :count="c.plays"></course-card>
          </el-card>
        </el-col>
      </el-row>
      <evaluation-empty class="mt10" v-else />
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-size="12" :pageSizes="[12, 24, 48]" @pagination="getList" />
    </div>
  </div>
</template>
<script>
import * as career from "@/api/webApi/career-course";
import courseCard from "./courseCard.vue";
export default {
  components: { courseCard },
  data () {
    return {
      title: "生涯课程",
      types: [],
      queryParams: {
        pageSize: 12,
        pageNum: 1,
        type: 0,
      },
      total: 0,
      dataList: [],
    };
  },
  created () {
    this.getTypes();
  },
  methods: {
    detail (item) {
      const nextParams = {
        id: item.id,
        aliid: item.aliid,
        aliIdType: item.aliIdType,
        name: item.name,
        count: item.plays,
        img: item.pictUrl,
      };
      this.$router.push({
        path: "/career/plan/detail",
        query: nextParams,
      });
    },
    getTypes () {
      career.types().then((res) => {
        if (res.code == 200 || res.code == 0) {
          this.types = res.rows;
          // set default.
          if (this.types.length > 0) {
            this.type = this.types[0].value;
            this.typeChanged();
          }
        }
      });
    },
    typeChanged () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getList () {
      career.list(this.queryParams).then((res) => {
        console.log("career coursse list res", res);
        if (res.code == 200 || res.code == 0) {
          this.total = res.total;
          this.dataList = res.rows;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.career-course {
  display: flex;
  flex-direction: column;
}
.career-course-head {
  display: flex;
  justify-content: space-between;
}
.career-course-title {
  font-size: 16px;
  color: #585858;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.career-course-tabs {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
</style>