<style scoped>
  @import "../../../pages/financial/css/cssReset.css";

  .baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
  }

  .singeRowTable tr th {
    border: 1px solid #d2d2d2;
  }

  .studentTracking td:first-child {
    background-color: #E6E6E6;
    position: sticky;
    left: 0px;
  }

  .studentTracking th:first-child {
    position: sticky;
    left: 0px;
  }

  .stulistNumber {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 22px;
    border: 1px solid #2961FE;
    border-radius: 50%;
    cursor: pointer;
    color: #2961FE;
  }

  .OCourseTable {
    width: 400px;
    text-align: center;
  }

  .OCourseTable tr td {
    height: 40px;
  }

  .OCourseTable tr th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }

  .stufollowlistNumber {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 22px;
    border: 1px solid #2961FE;
    border-radius: 50%;
    cursor: pointer;
    color: #2961FE;
  }

</style>
<template>
  <div class="stufollowlist">
    <div style="width: 100%;overflow-x: auto;">
      <table class="po_content singeRowTable" ref="table" style="border:1px solid #E6E6E6;" cellspacing="0"
        cellpadding="0" v-loading="loading">
        <tr>
          <th width="80" rowspan="2">课程级别</th>
          <th style="min-width:250px;" rowspan="2">内容</th>
          <th width="100" rowspan="2">上课时间</th>
          <th colspan="4">作业情况</th>
          <th rowspan="2" width="100">操作</th>
        </tr>
        <tr>
          <th width="100">单词背诵</th>
          <th width="100">练习题</th>
          <th width="100">朗读/背诵</th>
          <th style="min-width:250px;">其他</th>
        </tr>
        <template v-if='dataObj&& dataObj.length>0'>
          <tr v-for="(item,index ) in dataObj" :key="index">
            <td>
              <span v-if="item.StudyType==1">{{item.CourseRateName}}</span>
              <span v-else>考试</span>
            </td>
            <td>
              {{ item.ChapterName }}
            </td>
            <td>
              <q-input v-if="Edit.index==index&&item.StudyType==2" placeholder="请输入" v-model="item.ClassDate"
                :dense="true" />
              <span v-else> {{ item.ClassDate }}</span>
            </td>
            <td>
              <q-input v-if="Edit.index==index" placeholder="请输入单词分数" maxlength="180" v-model="item.Words"
                :dense="true" />
              <span v-else> {{ item.Words }}</span>
            </td>
            <td>
              <q-input v-if="Edit.index==index" placeholder="请输入练习题分数" maxlength="180" v-model="item.Practice"
                :dense="true" />
              <span v-else> {{ item.Practice }}</span>
            </td>
            <td>
              <q-input v-if="Edit.index==index" placeholder="请输入朗读/背诵分数" maxlength="180" v-model="item.ReadingAloud"
                :dense="true" />
              <span v-else> {{ item.ReadingAloud }}</span>
            </td>
            <td>
              <q-input v-if="Edit.index==index" placeholder="请输入其他内容" maxlength="180" v-model="item.Other"
                :dense="true" />
              <span v-else> {{ item.Other }}</span>
            </td>
            <td>
              <div class="text-blue cursor-pointer">
                <i v-if="Edit.index!=index" class="el-icon-edit" @click="SetStudentStudy(item,index)"
                  style="margin-right:15px;">
                  <q-tooltip :offset="[10, 10]">
                    {{item.StudyID>0?"点击修改":"点击新增"}}
                  </q-tooltip>
                </i>
                <i class="el-icon-check" v-if="Edit.index==index" @click="SaveStudentStudy(item)"
                  style="margin-right:15px;">
                  <q-tooltip :offset="[10, 10]">
                    点击保存
                  </q-tooltip>
                </i>
                <i class="el-icon-delete" v-if="item.StudyID>0" @click="deleteStudy(item)">
                  <q-tooltip :offset="[10, 10]">
                    点击删除
                  </q-tooltip>
                </i>
              </div>
            </td>
          </tr>
        </template>
      </table>
    </div>
    <div v-if='dataObj&& dataObj.length>0'>
    </div>
    <div v-else
      style="width: 100%;border:1px solid #E6E6E6;display: flex;align-items: center;justify-content: center;height: 60px;">
      暂无数据
    </div>
  </div>
</template>
<script>
  import {
    SetStuStudyInfo,
    RemoveStuStudyInfo,
  } from '../../../api/studyabroad/index'
  import UeEditor from "../../editor/UeEditor";
  export default {
    props: {
      //数据
      dataObj: {
        type: Array,
        default: null
      },
      //数据
      BaseInfo: {
        type: Object,
        default: null
      },
      loading: {
        type: Boolean,
        default: false,
      },
      //表头数组
      titlelist: {
        type: Array,
        default: null
      },
      //表头长度
      CourseRateName: {
        type: String,
        default: '',
      },
      AuthObj: {
        type: Object,
        default: null
      }
    },
    components: {
      UeEditor,
    },
    data() {
      return {
        isShowStuFU: false,
        isShowStuRight: false,
        stuloading: false,
        stuOption: {},
        BelongType: 0,
        ShowAuthObj: {
          //是否显示同行、状态等信息
          isShowSaleInfo: true,
        },
        SaveMsg: {
          CourseId: 0,
          StuId: 0,
          GuestId: 0,
          ClassScrollType: 0,
          OrderId: 0,
          StudyID: 0,
          Words: "",
          Practice: "",
          ReadingAloud: "",
          Other: "",
          ChapterId: 0,
          StudyType: 0,
          Remarks: '',
          StudyValue: '',
        },
        nowOther: {
          Name: "",
          Score: "",
        },
        Edit: {
          index: -1,
        },
      };
    },
    mounted() {
      if (this.AuthObj) {
        this.ShowAuthObj.isShowSaleInfo = this.AuthObj.isShowSaleInfo;
      }

    },
    methods: {
      //刷新表格
      refreshTable() {
        this.$emit("success");
      },
      deleteStudy(item) {
        let that = this
        this.$q.dialog({
          title: '删除确认',
          message: '删除且无法恢复，你确定要删除吗',
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true,
            color: "negative"
          }
        }).onOk(() => {
          RemoveStuStudyInfo({
            StudyID: item.StudyID
          }).then(res => {
            if (res.Code === 1) {
              that.$message.success("操作成功")
              that.clearSaveMsg();
              that.refreshTable();
            }
          })
        })
      },
      SetStudentStudy(obj, index) {
        this.Edit.index = index;
      },
      //保存信息
      SaveStudentStudy(obj) {
        this.SaveMsg.CourseId = this.BaseInfo.CourseId,
          this.SaveMsg.StuId = this.BaseInfo.StuId,
          this.SaveMsg.GuestId = this.BaseInfo.GuestId,
          this.SaveMsg.OrderId = this.BaseInfo.OrderId,
          this.SaveMsg.StudyID = obj.StudyID,
          this.SaveMsg.Practice = obj.Practice,
          this.SaveMsg.ReadingAloud = obj.ReadingAloud,
          this.SaveMsg.Words = obj.Words,
          this.SaveMsg.Other = obj.Other;
        if (obj.StudyType == 2) {
          this.SaveMsg.StudyValue = obj.ClassDate;
        } else {
          this.SaveMsg.StudyValue = '';
        }

        this.SaveMsg.ChapterId = obj.ChapterId,
          this.SaveMsg.StudyType = obj.StudyType,
          SetStuStudyInfo(this.SaveMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '数据保存成功！',
                position: 'top'
              })
            }
            this.clearSaveMsg();
            this.refreshTable();
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      SetStudentStudyOther(index) {
        this.dataObj[index].Other.push(JSON.parse(JSON.stringify(this.nowOther)))
      },
      DelStudentStudyOther(obj, index, indexOther) {
        if (obj.Other && obj.Other.length > 0) {
          obj.Other.splice(indexOther, 1);
        }
        this.dataObj[index] = obj
      },
      clearSaveMsg() {
        this.SaveMsg.CourseId = 0,
          this.SaveMsg.StuId = 0,
          this.SaveMsg.GuestId = 0,
          this.SaveMsg.ClassScrollType = 0,
          this.SaveMsg.OrderId = 0,
          this.SaveMsg.StudyID = 0,
          this.SaveMsg.Words = "",
          this.SaveMsg.Practice = "",
          this.SaveMsg.ReadingAloud = "",
          this.SaveMsg.Other = "",
          this.SaveMsg.ChapterId = 0,
          this.SaveMsg.StudyType = 0,
          this.SaveMsg.Remarks = '',
          this.SaveMsg.StudyValue = '',
          this.Edit.index = -1;
      },

      //关闭弹窗
      closeStuForm() {
        this.isShowStuRight = false;
        this.isShowStuFU = false;
      },
    }
  };

</script>
