<template>
  <div class="page-body">
    <q-table
      :pagination="tabMsg"
      no-data-label="暂无相关数据"
      flat
      class="sticky-column-table sticky-right-column-table"
      separator="none"
      :data="tableData"
      :columns="columns"
      row-key="OrderGuestId"
      selection="multiple"
      :selected.sync="selected"
    >
      <template v-slot:top>
        <div class="col-2 q-table__title">课程反馈</div>
        <q-space></q-space>
        <q-btn
          color="accent"
          size="sm"
          :label="selected.some((e) => e.FeedBackId > 0) ? '修改' : '新增'"
          @click="showForm"
          :disabled="selected.length === 0"
        />
      </template>
      <!-- <template v-slot:body-cell-Score="props">
        <q-td auto-width :props="props">
          <q-rating
            v-model="props.row.Score"
            size="3.5em"
            icon="img:https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/rate.png"
          />
        </q-td>
      </template> -->
      <!-- <template v-slot:body-cell-optioned="props">
        <q-td>
          <q-btn
            size="xs"
            color="accent"
            :label="props.row.FeedBackId > 0 ? '修改' : '新增'"
            @click="Edit(props.row, props.rowIndex)"
          />
        </q-td>
      </template> -->
      <template v-slot:bottom> </template>
    </q-table>
    <feedback-form
      v-if="isShowForm"
      :save-obj="ObjOption"
      :arr="selected"
      @close="closeSaveForm"
      @success="refreshPage"
    >
    </feedback-form>
  </div>
</template>

<script>
import { getFeedBackDetails } from "../../api/teacher";
import feedbackForm from "../../components/teacher/feedback-form.vue";
export default {
  components: {
    feedbackForm,
  },
  data() {
    return {
      tabMsg: {
        rowsPerPage: 0,
      },
      msg: {
        ID: 0,
      },
      columns: [
        {
          name: "GuestName",
          label: "学生姓名",
          field: "GuestName",
          align: "left",
        },
        {
          name: "Mobile",
          label: "电话",
          field: "Mobile",
          align: "left",
        },
        // {
        //   name: "TeacherName",
        //   label: "老师姓名",
        //   field: "TeacherName",
        //   align: "left",
        // },
        // {
        //   name: "TeacherIcon",
        //   label: "老师头像",
        //   field: "TeacherIcon",
        //   align: "left",
        // },
        {
          name: " CreateTimeStr",
          label: "上课时间",
          field: "CreateTimeStr",
          align: "left",
        },
        {
          name: " Score",
          label: "评分",
          field: "Score",
          align: "left",
        },
        {
          name: "Comment",
          label: "评语",
          field: "Comment",
          align: "left",
        },
        // {
        //   name: "optioned",
        //   label: "操作",
        //   field: "optioned",
        //   align: "left",
        // },
      ],
      tableData: [],
      isShowForm: false,
      ObjOption: {},
      selected: [],
    };
  },
  methods: {
    getData() {
      getFeedBackDetails(this.msg).then((res) => {
        if (res.Code === 1) {
          this.tableData = res.Data;
        }
      });
    },
    //修改
    Edit(obj, index) {
      // if (obj) {
      //   this.ObjOption = obj;
      //   this.ObjOption.index = index;
      // } else {
      //   this.ObjOption = null;
      // }
      this.isShowForm = true;
    },
    //关闭弹窗
    closeSaveForm() {
      this.isShowForm = false;
    },
    //刷新页面
    refreshPage() {
      this.getData();
    },
    showForm() {
      this.isShowForm = true;
    },
  },
  mounted() {
    this.msg.ID = this.$route.query.id;
    this.getData();
  },
};
</script>