<template>
  <div>
    <div class="container normal-panel normal-margin">
      <slot name="add"></slot>
    </div>
    <div class="container normal-panel">
      <!-- 表格搜索 -->
      <div class="flex-align-center search-panel" style="margin-bottom:16px">
        <div class="flex-align-center">
          <p style="flex:1 0 auto;font-size:14px">一级分类:&nbsp;</p>
          <el-select style="width:120px;margin-right:16px" size="small"
            v-model="params.content.where.sat_courseware_classid_1" @change="listData(params.content.pageNumber = 1)"
            clearable>
            <el-option v-for="item in options1" :key="item.index" :value="item.sat_courseware_classid"
              :label="item.classname" @click.native="handelSelectClick(item)"></el-option>
          </el-select>
          <p style="flex:1 0 auto;font-size:14px">二级分类:&nbsp;</p>
          <el-select style="width:120px;margin-right:16px" size="small"
            v-model="params.content.where.sat_courseware_classid_2" @change="listData(params.content.pageNumber = 1)"
            clearable>
            <el-option v-for="item in options2" :key="item.index" :value="item.sat_courseware_classid"
              :label="item.classname"></el-option>
          </el-select>
        </div>
        <div class="flex-align-center">
          <p style="width:40px">搜索:&nbsp;</p>
          <el-input style="width:200px" size="small" placeholder="标题,分类"
            @clear="(params.content.where.condition = '', listData(params.content.pageNumber = 1))"
            @keyup.native.enter="listData(params.content.pageNumber = 1)" v-model="params.content.where.condition"
            prefix-icon="el-icon-search" clearable></el-input>
        </div>
      </div>
      <!-- 表格 -->
      <tableLayout :layout="tablecols" :data="list" :custom="true" :height="tableHieght">
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname === 'status'">
            <span :style="scope.column.data.status === '新建' ? '' : 'color:#52C41A'">{{ scope.column.data.status
            }}</span>
          </div>
          <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
        </template>
        <template v-slot:opreation="scope">
          <slot name="detail" :data="scope"></slot>
          <slot name="edit" :data="scope"></slot>
          <slot name="release" :data="scope"></slot>
          <slot name="data_statistics" :data="scope"></slot>
          <!-- <el-button size="mini" type="text" @click="onEdit(scope)">数据统计</el-button> -->
          <slot name="del" :data="scope"></slot>
        </template>
      </tableLayout>
      <div style="margin-top:16px;text-align:right">
        <el-pagination background small @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-size="params.content.pageSize" layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      params: {
        "classname": "webmanage.saletool.courseware.courseware",
        "method": "select",
        "content": {
          "pageNumber": 1,
          "pageSize": 10,
          "where": {
            "condition": "",
            "sat_courseware_classid_1": '',
            "sat_courseware_classid_2": ''
          }
        }
      },
      options1: [],
      options2: [],
      tablecols: [],
      list: [],
      total: 0,
      currentPage: 0
    }
  },
  methods: {
    async listData() {
      const res = await this.$api.requested(this.params)
      //删除初始化的数据
      let data = res.data,
        deleteList = [];
      data.forEach(v => {
        if (v.status == '新建' && v.sat_courseware_classid == '9999' + JSON.parse(sessionStorage.getItem('active_account')).userid) deleteList.push(v.sat_coursewareid)
      });
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      //处理删除
      if (deleteList.length != 0) this.handleDeleye(deleteList);
    },
    handleDeleye(list) {
      this.$api.requested({
        "classname": "webmanage.saletool.courseware.courseware",
        "method": "delete",
        "content": {
          "sat_coursewareid": list
        }
      }).then(res => {
        if (res.msg != '成功') return;
        this.listData();
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.listData()
    },
    // 分类查询
    async coursewareclass() {
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.courseware.coursewareclass",
        "method": "select",
        "content": {
          "parentid": 0
        }
      })
      this.options1 = res.data
    },
    handelSelectClick(val) {
      this.options2 = val.children
      this.params.content.where.sat_courseware_classid_2 = ''
    }
  },
  mounted() {
    this.listData()
    this.coursewareclass()
  },
  created() {
    //获取表结构
    this.tablecols = this.tool.tabelCol(this.$route.name)['coursewaretTable'].tablecols
  }
}

</script>
<style>
</style>
<style scoped>
.search-panel p {
  width: 80px;
  font-size: 14px;
}
</style>