<style scoped>
  .assessmentType_td {
    border: none;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }
</style>
<template>
  <div class="page-body">
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat separator="none" :data="dataList"
        :columns="columns" row-key="index" class="sticky-header-column-table">
        <template v-slot:top>
          <div class="col-2 q-table__title">考评项配置列表</div>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增" @click="AddMsg(null)" />
          </div>
        </template>
        <template v-slot:header="props">
          <q-tr :props="props">
            <template v-for="col in props.cols" :props="props">
              <q-th :key="col.name">
                {{ col.label }}
              </q-th>
            </template>
          </q-tr>
        </template>
        <template v-slot:body="props">
          <template :props="props" v-for="(col,cIndex) in props.row.SubtypeList">
            <template v-if="cIndex==0">
              <q-tr :key="cIndex+(props.rowIndex*10000)">
                <q-td key="TypeName" :props="props" :rowspan="props.row.SubtypeList.length" class="assessmentType_td">
                  {{ props.row.TypeName }}
                </q-td>
                <q-td class="assessmentType_td">
                  {{ props.row.SubtypeList[cIndex].SubTypeName}}
                </q-td>
                <template v-for="(subItem,subIndex) in props.row.SubtypeList[cIndex].OptionList">
                  <q-td :key="subIndex+200000" class="assessmentType_td">
                    <div style="width:150px;white-space:normal; "> {{subItem.LevelDesc}} <q-badge color="green"
                        v-if="subItem.LevelScore>0">
                        {{subItem.LevelScore}}分
                      </q-badge>
                    </div>
                  </q-td>
                </template>
                <q-td key="Id" :props="props" :rowspan="props.row.SubtypeList.length" class="assessmentType_td"
                  style="border-right: 1px solid rgba(0, 0, 0, 0.12);">
                  <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" label="编辑"
                    @click="AddMsg(props.row)" />
                  <q-btn flat size="xs" icon="delete" color="negative" class="q-mr-xs" label="删除"
                    @click="delConsult(props.row.Id)" />
                </q-td>
              </q-tr>
            </template>
            <template v-else>
              <q-tr :key="cIndex+(props.rowIndex*1000000)">
                <q-td class="assessmentType_td">
                  {{ props.row.SubtypeList[cIndex].SubTypeName}}
                </q-td>
                <template v-for="(subItem,subIndex) in props.row.SubtypeList[cIndex].OptionList">
                  <q-td :key="subIndex+400000" class="assessmentType_td">
                    <div style="width:150px;white-space:normal; "> {{subItem.LevelDesc}} <q-badge color="green"
                        v-if="subItem.LevelScore>0">
                        {{subItem.LevelScore}}分
                      </q-badge>
                    </div>
                  </q-td>
                </template>
              </q-tr>
            </template>
          </template>
        </template>
        <template v-slot:bottom></template>
      </q-table>
    </div>
    <assess-form v-if="isShowAssess" :save-obj="objOption" @close="getClose()" @success="getRefresh"></assess-form>
  </div>
</template>
<script>
  import {
    queryAssessmentTypeList,
    RemoveAssessmentType
  } from '../../api/teacher/index';
  import assessForm from '../../components/teacher/assess-form'
  export default {
    meta: {
      title: "教师考评配置"
    },
    components: {
      assessForm
    },
    data() {
      return {
        loading: false,
        msg: {
          rowsPerPage: 1000,
        },
        columns: [],
        dataList: [],
        objOption: null,
        isShowAssess: false
      }
    },
    created() {

    },
    mounted() {
      this.getAssessmentTypeList()
    },
    methods: {
      getAssessmentTypeList() {
        this.loading = true;
        this.columns = [];
        queryAssessmentTypeList(this.msg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data.result;
            this.columns = res.Data.header;
          }
        })
      },
      //新增修改
      AddMsg(obj) {
        if (obj) {
          this.objOption = obj
        } else {
          this.objOption = null
        }
        this.isShowAssess = true;
      },
      getClose() {
        this.isShowAssess = false;
      },
      getRefresh() {
        this.getAssessmentTypeList();
      },
      //删除数据
      delConsult(Id) {
        let that = this;
        this.$q.dialog({
          title: "提示",
          message: '是否删除该配置？',
          cancel: {
            label: "取消",
            flat: true
          },
          ok: {
            label: "确认",
            flat: true,
            focus: true
          }
        }).onOk(() => {
          let msg = {
            Id: Id
          }
          RemoveAssessmentType(msg).then(res => {
            if (res.Code == 1) {
              that.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '数据删除成功！',
                position: 'top'
              })
              that.getAssessmentTypeList();
            }
          })
        });
      }
    }
  }
</script>
<style lang="sass">
  @import url('~assets/css/table.sass')
</style>