
<template>
  <div>
    <basicLayout 
      ref="basicLayout" 
      tableName="coursewaretTable" 
      idName="sat_coursewareid" 
      :apiId="{query:20221102143402,del:20221102143802}" 
      :options="options"
      :detailPath="{path:'/archives_scdetails'}"
      @listData="listData"
    >
      <div slot="titleRight" style="display:flex;margin-left:10px">
        <el-button v-if="tool.checkAuth($route.name,'insert')" type="primary" size="small" @click="addBtn">新 建</el-button>
        <el-button v-if="tool.checkAuth($route.name,'setClass')" type="primary" size="small" @click="$store.dispatch('DrawerShowChange',true),$router.push('/archives_scclass')">设 置 分 类</el-button>
      </div>
      <div slot="custom">
        <div class="label_center">
          <span class="search_label">状态: </span>
            <el-select
            class="inline-16"
            size="small"
            v-model="status"
            placeholder="请选择数据状态"
            @change="handleSelectChange"
          >
            <el-option
              v-for="item in statusList"
              :label="item.value"
              :value="item.remarks"
              :key="item.index"
            ></el-option>
          </el-select>
        </div>
      </div>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname == 'status'">
          <span v-if="scope.data.column.data[[scope.data.column.columnname]] == '发布'" style="color:rgb(82, 196, 26)">{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
          <span v-else>{{scope.data.column.data[[scope.data.column.columnname]]}}</span>
        </div>
        <div v-else>
          {{scope.data.column.data[[scope.data.column.columnname]]}}
        </div>
      </template>
      <template v-slot:tbOpreation="scope">
        <!-- <el-button type="text" size="mini" class="inline-16" @click="$router.push({path:'/archives_scedit',query:{id:scope.data.data.sat_coursewareid}})">编 辑</el-button> -->
        <!-- <el-button type="text" v-if="tool.checkAuth($route.name,'update') && scope.data.data.status == '新建'" size="mini" @click="EditBtn(scope.data.data)">编 辑</el-button> -->
        <el-button type="text" v-if="tool.checkAuth($route.name,'data_analysis')" class="inline-16" size="mini" @click="dataCalc(scope.data.data)">数 据 分 析</el-button>
        <delete-btn
          v-if="tool.checkAuth($route.name,'delete')"
          nameId="20221102143802" 
          nameKey="sat_coursewareids" 
          message="确定删除当前课程吗?" 
          :id="scope.data.data.sat_coursewareid" 
          @deleteSuccess="$refs.basicLayout.listData()"></delete-btn>
      </template>
    </basicLayout>
    <!--抽屉面板-->
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      direction="rtl"
      size="90%"
      append-to-body
      @close="closeDrawer">
      <div class="detail__panel">
        <router-view/>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import onDel from "./list/modules/delete"
import release from "./list/modules/release"

import {mapGetters} from 'vuex'
import { log } from '@antv/g2plot/lib/utils'
export default {
  components:{
    onDel,
    release,
  },
  data () {
    return {
      options:[],
      drawer:false,
      status:'',
      statusList:[]
    }
  },
  computed: {
    ...mapGetters({
      DrawerShow:'DrawerShow'
    })
  },
  watch: {
    $route (val) {
      if (val.path == '/archives_scmag') {
        this.$refs.basicLayout.listData()
      }
    },
    DrawerShow (val) {
      val ? this.drawer = true : this.drawer = false
    }
  },
  async created () {
    let res = await this.$store.dispatch('optiontypeselect','datastatus')
    this.statusList = res.data
    console.log(this.statusList);
    
  },
  methods:{
    handleSelectChange() {
      this.$refs['basicLayout'].param.content.where.status = this.status
       this.$refs['basicLayout'].param.content.pageNumber = 1
      this.$refs['basicLayout'].listData()
    },
    closeDrawer () {
      this.$router.push('/archives_scmag')
      this.$store.dispatch('DrawerShowChange',false)
    },
    EditBtn (data) {
      window.sessionStorage.setItem('newMaterial', JSON.stringify(data))
      this.$store.dispatch('DrawerShowChange',true)
      this.$router.push({path:'/archives_scedit',query:{id:data.sat_coursewareid}})
    },
    dataCalc (data) {
      window.sessionStorage.setItem('newMaterial', JSON.stringify(data))
      this.$store.dispatch('DrawerShowChange',true)
      this.$router.push({path:'/archives_sc_analysis',query:{id:data.sat_coursewareid}})
    },
    async addBtn () {
      window.sessionStorage.removeItem('newMaterial')
      const res = await this.$api.requested({
        "classname": "webmanage.saletool.courseware.courseware",
        "method": "insertOrUpdate",
        "content": {
          "sat_coursewareid": 0,
          "title": "",
          "sat_courseware_classid": '9999' + JSON.parse(sessionStorage.getItem('active_account')).userid,
          "notes": "",
          "canfiledownload": 1,
          "begdate":(new Date()).toLocaleDateString(),
          "enddate":(new Date()).toLocaleDateString(),
          "tag":[]
        }
      })
      this.$store.dispatch('DrawerShowChange',true)
      this.$router.push({path:'/archives_scedit',query:{id:res.data.sat_coursewareid}})
    },
    /* 新建的数据批量删除 */
    listData (data) {
      let deleteList = []
      data.forEach(v => {
        if (v.status == '新建' && v.sat_courseware_classid == '9999' + JSON.parse(sessionStorage.getItem('active_account')).userid) deleteList.push(v.sat_coursewareid)
      })
      //处理删除
      if (deleteList.length != 0) this.handleDeleye(deleteList)
    },
    /* 处理批量删除 */
    handleDeleye(list) {
      this.$api.requested({
        "id": 20221102143802,
        "content": {
          "sat_coursewareids": list
        }
      }).then(res => {
        if (res.msg != '成功') return;
        this.$refs.basicLayout.listData();
      })
    },
  }
}

</script>
<style scoped>
.search_label {
  display: inline-block;
  font-size: 12px;
  color:rgb(163, 163, 163) !important;
  margin-right: 10px;
}
</style>