<template>
<div style="overflow-x:hidden">
  <el-row :gutter="16">
    <el-col :span="12">
      <div class="container normal-panel">
        <tableLayout :layout="tablecols" :data="list" :custom="true" height="calc(100vh - 212px)" @rowClick="rowClick">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'classname'">
              <p>{{scope.column.data.classname}}</p>
              <el-input
                class="input-new-tag"
                v-if="scope.column.data.sat_courseware_classid === activeid"
                v-model="inputValue"
                ref="saveTagInput"
                size="mini"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
            </div>
            <div v-else-if="scope.column.columnname === 'isenable'">
              <slot name="start" :data="scope"></slot>
            </div>
            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
          </template>
          <template v-slot:opreation="scope">
            <slot name="edit" :data="scope"></slot>
            <slot name="addChild" :data="scope"></slot>
            <slot name="del" :data="scope"></slot>
          </template>
        </tableLayout>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="container normal-panel">
        <tableLayout :layout="tablecolsChild" :data="childClass" :custom="true" height="calc(100vh - 212px)">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'isenable'">
              <el-switch
                v-model="scope.column.data.isenable"
                active-color="#6F9BFC"
                inactive-color="#999"
                @change="switchChnage(scope.column.data)">
              </el-switch>
            </div>
            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
          </template>
          <template v-slot:opreation="scope">
            <slot name="childedit" :data="scope"></slot>
            <slot name="childdel" :data="scope"></slot>
          </template>
        </tableLayout>
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
export default {
  data () {
    return {
      inputVisible: false,
      list:[],
      childClass:[],
      act_index:null,
      inputValue: '',
      activeid:0
    }
  },
  methods:{
    async coursewareclass () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.courseware.coursewareclass",
        "method": "select",
        "content": {
          "parentid": 0
        }
      })
      this.list = res.data
      // 查看当前选中分类
      this.act_index?this.act_index:this.act_index = 0
      this.rowClick(res.data[this.act_index])
    },
    showInput(val) {
      this.activeid = val.sat_courseware_classid
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.activeid = null
      this.inputValue = '';
    },
    async updateClass () {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.courseware.coursewareclass",
        "method": "insertOrUpdate",
        "content": this.form
      })
    },
    rowClick (val) {
      this.act_index = val.index
      this.childClass  = val.children
    }
  },
  mounted () {
    this.coursewareclass()
  },
  created () {
    //获取表结构
    this.tablecols = this.tool.tabelCol(this.$route.name)['tableSCclass'].tablecols
    this.tablecolsChild = this.tool.tabelCol(this.$route.name)['tableSCChildclass'].tablecols
  }
}

</script>
<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.input-new-tag .el-input__inner{
  height: 24px !important;
}
</style>