<!-- 作者：cgd  邮箱：349008059@qq.com  时间：2022年02月24日 14:51:14  -->
<template>
  <a-row :gutter="24">
    <a-col :span="12" :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" :style="{ height: '100%' }">
        <div class="flex-center" style="justify-content: flex-start;" slot="title">
          <h4 style="margin: 0;">学习时长{{ countData.sumClassHour }}小时</h4>
        </div>
      </a-card>
    </a-col>
    <a-col :span="12" :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" :style="{ height: '100%' }">
        <div class="flex-center" style="justify-content: flex-start;" slot="title">
          <h4 style="margin: 0;">
            培训计划{{ countData.yearClassHour }}学时/{{ countData.planClassHour }}学时
          </h4>
        </div>
      </a-card>
    </a-col>
    <!-- 课程进度 start -->
    <a-col :span="24" :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" title="课程进度" :style="{ height: '100%' }">
        <a-list class="demo-loadmore-list" item-layout="horizontal" :data-source="courseList">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-popconfirm
              v-if="item.status === 1"
              slot="actions"
              :title="`确定要添加${item.name}课程吗?`"
              ok-text="添加"
              cancel-text="取消"
              @confirm="handlerAddCourse(item)"
            >
              <a style="width: 100px;display: inline-block;">添加课程</a>
            </a-popconfirm>
            <a v-if="item.status === 2" slot="actions" @click="handlerContinue(item)" style="width: 100px;display: inline-block;">
              继续学习
            </a>
            <a v-if="item.status === 3" slot="actions" style="width: 100px;display: inline-block;">已完成学习</a>
            <a-list-item-meta :title="item.name"></a-list-item-meta>
            <div style="width: 200px;">
              <a-progress :percent="item.schedule" />
            </div>
          </a-list-item>
        </a-list>
      </a-card>
    </a-col>
    <!-- 课程进度 end -->
    <!-- 培训计划 start -->
    <a-col :span="24" :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" title="培训计划" :style="{ height: '100%' }">
        <a-list class="demo-loadmore-list" item-layout="horizontal" :data-source="pxjhList">
          <a-list-item slot="renderItem" slot-scope="item">
            <div slot="actions">
              <a-tag v-if="item.state === 1" color="blue">进行中</a-tag>
              <a-tag v-if="item.state === 2" color="red">已过期</a-tag>
            </div>
            <!-- <a v-if="item.status === 2" slot="actions" @click="handlerContinue(item)">
              继续学习
            </a>
            <a v-if="item.status === 3" slot="actions">已完成学习</a> -->
            <a-list-item-meta>
              <template slot="title">
                <a-button @click="handlerCourseDetail(item)" type="link" style="padding: 0;">{{ item.name }}</a-button>
              </template>
            </a-list-item-meta>
            <div style="width: 200px;">
              {{ item.startDate | dateFormat }}
            </div>
            <div style="width: 200px;">{{ item.year }}</div>
            <div style="width: 200px;">{{ item.orgName }}</div>
          </a-list-item>
        </a-list>
      </a-card>
    </a-col>
    <!-- 培训计划 end -->
    <!-- 系统推荐课程 start -->
    <a-col :span="24" :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" title="系统推荐课程" :style="{ height: '100%' }">
        <a-row v-if="sysList && sysList.length > 0" :gutter="16">
          <a-col :span="6" :md="4" :sm="6" v-for="(item, index) in sysList" :key="index">
            <a-card
              @click="handlerContinue(item)"
              hoverable
              style="width: 100%; margin-bottom: 15px;"
            >
              <img slot="cover" alt="example" :src="item.coverImage" />
              <div>
                <h4>{{ item.projectName }}</h4>
                <div class="flex-center justify-between">
                  <div>课时: {{ item.totalCourseHours }}小时</div>
                  <div>{{ item.trainType === 1 ? '必修课' : '选修课' }}</div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <a-empty v-else :image="$emptyImg"></a-empty>
      </a-card>
    </a-col>
    <!-- 系统推荐课程 end -->
    <!-- 集中培训 start -->
    <a-col :span="24" :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" title="集中培训" :style="{ height: '100%' }">
        <a-list class="demo-loadmore-list" item-layout="horizontal" :data-source="jzpxList">
          <a-list-item slot="renderItem" slot-scope="item">
            <a @click="handlerCenterDetail(item)" slot="actions" href="javascript:void(0);">
              培训详情
            </a>
            <a-popconfirm
              v-if="item.signStatus === 1 && item.status === 2"
              slot="actions"
              :title="`确定要报名参加${item.trainName}吗?`"
              ok-text="添加"
              cancel-text="取消"
              @confirm="handlerJoin(item)"
            >
              <a>报名参加</a>
            </a-popconfirm>
            <a v-if="item.signStatus === 2" slot="actions" href="javascript:void(0);">已报名</a>
            <a v-if="item.signStatus === 3" slot="actions" href="javascript:void(0);">已签到</a>
            <a-list-item-meta :title="item.trainName"></a-list-item-meta>
            <div style="width: 200px;">
              {{ item.trainSdate }}
            </div>
          </a-list-item>
        </a-list>
      </a-card>
    </a-col>
    <!-- 集中培训 end -->
    <!-- 公告 start -->
    <a-col :span="24" :style="{ marginBottom: '24px' }">
      <a-card :bordered="false" title="公告" :style="{ height: '100%' }">
        <a-list class="demo-loadmore-list" item-layout="horizontal" :data-source="noticeList">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-list-item-meta>
              <a-button
                @click="
                  $router.push({
                    path: '/notice/detail',
                    query: {
                      id: item.id,
                      type: 2,
                    },
                  })
                "
                type="link"
                slot="title"
                style="padding-left: 0;"
              >
                {{ item.title }}
              </a-button>
            </a-list-item-meta>
            <div style="width: 200px;">
              {{ item.publishTime }}
            </div>
          </a-list-item>
        </a-list>
      </a-card>
    </a-col>
    <!-- 公告 end -->
    <CentralizedTrainingDetail ref="centralizedTrainingDetail"></CentralizedTrainingDetail>
    <CourseListByPlanDialogVue ref="planDialog" :planId="planId"></CourseListByPlanDialogVue>
  </a-row>
</template>

<script>
import moment from 'moment'
import {
  reqMyCourseList,
  reqAddMyCourse,
  reqCourseCenterList,
  reqRecommendList,
  reqCenterJoin,
  reqMyTrainPlanList
} from '@/api/mycourse/index'
import { noticePage } from '@/api/notice/notice'
import { getMyexamCount } from '@/api/myexamCount/index.js'
import CentralizedTrainingDetail from '@/views/mycourse/mycourseList/CentralizedTrainingDetail.vue'
import CourseListByPlanDialogVue from '../mycourse/mycourseList/CourseListByPlanDialog.vue'

export default {
  props: {},
  components: { CentralizedTrainingDetail, CourseListByPlanDialogVue },
  data () {
    return {
      planId: '', // 培训计划选中的id
      courseList: [],
      pxjhList: [],
      sysList: [],
      jzpxList: [],
      noticeList: [],
      countData: {}
    }
  },
  filters: {
    dateFormat: function (value) {
      if (!value) return '-'
      return moment(value).format('YYYY-MM-DD')
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    // 打开培训计划明细弹出框
    handlerCourseDetail (data) {
      this.planId = data.id
      this.$refs.planDialog.open()
    },
    initData () {
      this.getCourseList()
      this.getPxjhList()
      this.getJzpxList()
      this.getSysList()
      this.getNoticeList()
      this.getCountData()
    },
    getCountData () {
      getMyexamCount().then(res => {
        this.countData = res.data
      })
    },
    // 课程列表
    getCourseList () {
      const { person } = this.$store.state.user
      reqMyCourseList({ personId: person.id, pageSize: 2, pageNum: 1 }).then(res => {
        this.courseList = res.rows
      })
    },
    // 培训计划
    getPxjhList () {
      const { person } = this.$store.state.user
      reqMyTrainPlanList({ personId: person.id, type: 3, pageSize: 2, pageNum: 1 }).then(res => {
        this.pxjhList = res.rows
      })
    },
    // 集中培训
    getJzpxList () {
      const { person } = this.$store.state.user
      reqCourseCenterList({ personId: person.id, pageSize: 5, pageNum: 1 }).then(res => {
        this.jzpxList = res.rows
      })
    },
    // 系统推荐
    getSysList () {
      const { person } = this.$store.state.user
      reqRecommendList({ personId: person.id, pageSize: 2, pageNum: 1 }).then(res => {
        this.sysList = res.rows
      })
    },
    // 公告
    getNoticeList () {
      noticePage({ noticeRange: 2, pageSize: 5, pageNum: 1 }).then(res => {
        this.noticeList = res.rows
      })
    },
    // 添加课程
    handlerAddCourse (row) {
      const { person } = this.$store.state.user
      reqAddMyCourse({ personId: person.id, projectId: row.id }).then(res => {
        if (res.code === 200) {
          this.$message.success('添加课程成功!')
          this.getCourseList()
          this.getPxjhList()
        }
      })
    },
    // 继续学习
    handlerContinue (row) {
      this.$router.push({
        path: '/mycourse/courseLearn',
        query: { courseId: row.id }
      })
    },
    // 报名
    handlerJoin (row) {
      reqCenterJoin(row).then(() => {
        this.$message.success('报名成功!')
        this.getJzpxList()
      })
    },
    // 集中培训详情
    handlerCenterDetail (row) {
      this.$refs.centralizedTrainingDetail.getDetail(row)
      this.$refs.centralizedTrainingDetail.visible = true
    }
  }
}
</script>
<style lang="scss" scoped></style>
