<template>
  <div>
    <div style="display:flex;flex:1;flex-direction: column;overflow:hidden;">
      <div class="TimeLineDiv">
        <q-timeline color="primary">
          <q-timeline-entry v-for="(item,index) in contractList" :key="index">
            <template v-slot:title>
              <div class="visit_Cont Log_Content">
                <div>
                  订单编号：
                  <span class="Stu_OrderId" @click="goOrderDetail(item.OrderId)">{{item.OrderId}}</span></div>        
                <div>班级名称：{{item.ClassName}}</div>
                <div>班级编号：{{item.ClassNo}}</div>
                <div>
                  <span class="Stu_HtLeft">总课时</span>：
                  {{item.TotalHours}}</div>
                <div>完成课时：{{item.CompleteHours}}</div>
                <div>学员名称：{{item.GuestName}}</div>
                <div>课程名称：{{item.CourseName}}</div>
                <div>合同编号：<span class="Stu_OrderId" @click="goContractView(item.ContractId)">{{item.ContractNo}}</span></div>
              </div>
            </template>
          </q-timeline-entry>
        </q-timeline>
      </div>
    </div>
    <div style="margin:20px 0;">
      <q-pagination class="full-width justify-end" v-model="customMsg.pageIndex" color="primary" :max="pageCount" input
        @input="changePage" />
    </div>
  </div>
</template>
<script>
  import {
    queryStuContractPage, //学员订单合同分页列表
  } from '../../../api/customerstudent/customerstudent';
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    meta: {
      title: ""
    },
    components: {

    },
    data() {
      return {
        customMsg: {
          pageIndex: 1,
          pageSize: 10,
          StuId: 0,
        },
        pageCount: 0,
        //合同列表
        contractList: [],
      }
    },
    created() {
      if (this.saveObj && this.saveObj.StuId > 0) {
        this.customMsg.StuId = this.saveObj.StuId;
      }
    },
    mounted() {
      this.getStuContractPage();
    },
    methods: {
      getStuContractPage() {
        queryStuContractPage(this.customMsg).then(res => {
          if (res.Code == 1) {
            this.contractList = res.Data.PageData
            this.pageCount = res.Data.PageCount
          }
        });
      },
      changePage(val) {
        this.customMsg.pageIndex = val;
        this.getStuContractPage();
      },
      //跳转订单
      goOrderDetail(OrderId){
        this.OpenNewUrl('/sale/myOrder', {
          OrderId: OrderId
        })
      },
      //跳转合同
      goContractView(ContractId){
        this.OpenNewUrl('/contractView', {
          ContractId: ContractId
        })
      }
    },
  }
</script>