<template>
  <div class="full-height">
    <div class="row items-center">
      <q-avatar
        size="40px"
        font-size="20px"
        color="primary"
        class="q-mr-md"
        text-color="white"
        rounded
        :icon="`iconfont ${node.icon}`"
      />
      <div class="pingfang text-subtitle1">{{ node.name }}</div>
      <q-icon name="iconfont icon-bangzhu" class="q-ml-md">
        <q-tooltip anchor="bottom middle" :offset="[10, 10]">
          已创建了订单，但是还未领取合同的学员订单。
        </q-tooltip>
      </q-icon>
    </div>
    <div class="q-my-md row items-center">
      <q-input
        standout
        v-model="msg.KeyWords"
        dense
        type="text"
        style="width:250px;"
        label="关键字（订单号/名称/微信/手机号）"
        class="q-mr-md"
      />
      <q-btn
        color="primary"
        class="q-px-md"
        label="查询"
        unelevated
        dense
        @click="searchKeyHandler"
      />
      <div class="col text-right text-grey-6 f12">
        TIPS：语培电子合同是财务系统重要的对账凭证，请及时领取电子合同，领取后进入“市场-合同”进行管理
      </div>
    </div>
    <div style="height:calc(100% - 158px)">
      <q-table
        :loading="loading"
        :data="stus"
        :columns="cols"
        :pagination="pageMsg"
        no-data-label="暂无相关数据"
        flat
        separator="none"
        class="sticky-right-column-table sticky-column-table my-sticky-header-table"
        style="height:100%;"
        hide-bottom
      >
        <template v-slot:body-cell-OrderId="props">
          <q-td :props="props">
            <div
              class="text-primary cursor-pointer"
              @click="goOrderdetails(props.row)"
            >
              {{ props.value }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-GuestName="props">
          <q-td :props="props">
            <div
              class="text-primary cursor-pointer"
              @click="showStuDetailInfo(props.row)"
            >
              {{ props.value }}
            </div>
          </q-td>
        </template>
        <template v-slot:body-cell-RenewState="props">
          <q-td :props="props">
            <div
              :class="{ 'text-negative': props.value == '2' }"
              @click="showStuDetailInfo(props.row)"
            >
              {{ props.value == 2 ? "续费订单" : "首次报名" }}
            </div>
          </q-td>
        </template>

        <template v-slot:body-cell-options="props">
          <q-td :props="props">
            <q-btn
              color="primary"
              flat
              dense
              label="领取合同"
              class="f12"
              @click="takeContractTwo(props.row)"
            />
          </q-td>
        </template>
      </q-table>
    </div>
    <div class="row" style="justify-content: flex-end;padding: 5px 20px">
      <q-pagination
        v-model="msg.PageIndex"
        :max="pageCount"
        @input="changePage"
        class="full-width justify-end"
        color="primary"
        :input="true"
      >
      </q-pagination>
    </div>
    <MyOrderForm
      v-if="isShowmyorderForm"
      :save-obj="myorderObjOption"
      @close="closeMOSaveForm"
    ></MyOrderForm>
    <studentRightForm
      :isJudgeTrans="0"
      v-if="isShowStuRight"
      :BelongType="1"
      :checkType="0"
      :save-obj="stuObj"
      @close="closeStuForm"
    ></studentRightForm>
    <eduinfo-form
      v-if="isShowEduForm"
      :seting-obj="eduObj"
      @close="closeEdudia"
      @success="refreshPage"
    >
    </eduinfo-form>
  </div>
</template>

<script>
import { getMyOrderNotReceiveContract } from "../../api/stuMan/index";
import EduinfoForm from "../sale/eduinfo-form.vue";
import MyOrderForm from "../sale/myOrder-form.vue";
import studentRightForm from "../school/student/studentRight-form";

export default {
  components: { MyOrderForm, studentRightForm, EduinfoForm },
  props: ["node"],
  data() {
    return {
      stus: [],
      loading: false,
      isJudgeTrans: 1,
      pageCount: 0,
      msg: {
        PageIndex: 1,
        pageSize: 20,
        KeyWords: ""
      },
      cols: [
        {
          name: "OrderId",
          label: "订单编号",
          field: "OrderId",
          align: "left"
        },
        {
          name: "ClassName",
          label: "班级名称",
          field: "ClassName",
          align: "left"
        },
        {
          name: "CourseName",
          label: "课程名称",
          field: "CourseName",
          align: "left"
        },
        {
          name: "GuestName",
          label: "学员名称",
          field: "GuestName",
          align: "left"
        },
        {
          name: "StuGuestStateName",
          label: "学员状态",
          field: "StuGuestStateName",
          align: "left"
        },
        {
          name: "OrderStateName",
          label: "订单状态",
          field: "OrderStateName",
          align: "left"
        },
        {
          name: "TotalHours",
          label: "总课时",
          field: "TotalHours",
          align: "left"
        },
        {
          name: "CompleteHours",
          label: "完成课时",
          field: "CompleteHours",
          align: "left"
        },
        {
          name: "RenewState",
          label: "订单类型",
          field: "RenewState",
          align: "left"
        },
        {
          name: "options",
          label: "操作",
          align: "left"
        }
      ],
      myorderObjOption: null,
      isShowmyorderForm: false,
      stuObj: null,
      isShowStuRight: false,
      pageMsg: {
        rowsPerPage: 20
      },
      eduObj: null,
      isShowEduForm: false
    };
  },
  mounted() {
    this.getStudent();
  },
  methods: {
    getStudent() {
      if (this.loading) return;
      this.loading = true;
      getMyOrderNotReceiveContract(this.msg)
        .then(r => {
          this.stus = r.Data.PageData;
          this.pageCount = r.Data.PageCount;
          setTimeout(() => {
            this.loading = false;
          }, 1000);
        })
        .catch(e => {
          this.loading = false;
        });
    },

    changePage() {
      this.getStudent();
    },
    searchKeyHandler() {
      this.msg.PageIndex = 1;
      this.getStudent();
    },
    //显示订单详情
    goOrderdetails(item) {
      item.tab = "";
      this.myorderObjOption = item;
      this.isShowmyorderForm = true;
    },
    //关闭订单详情
    closeMOSaveForm() {
      this.isShowmyorderForm = false;
    },
    showStuDetailInfo(item) {
      this.stuObj = { StuId: item.StuId };
      this.isShowStuRight = true;
    },
    closeStuForm() {
      this.isShowStuRight = false;
    },
    takeContractTwo(item) {
      let obj = {
        OrderId: item.OrderId,
        GuestId: item.GuestId,
        ContractId: 0
      };
      this.eduObj = obj;
      this.isShowPop = false;
      this.isShowEduForm = true;
    },
    closeEdudia() {
      this.isShowEduForm = false;
    },
    refreshPage() {
      this.getStudent();
      this.$root.$emit("updateTodoList");
    }
  }
};
</script>

<style></style>
