<template>
  <div class="basic__layout__panel">
    <div class="radius">
      <div class="layout-header-panel container normal-panel">
        <div class="flex-align-center flex-between">
          <div class="normal-margin flex-align-center">
            <p style="font-size:30px;font-weight:300">{{routerName}}&nbsp;<i @click="addToAsideBar" style="color:#999" class="el-icon-star-off"></i></p>
            <el-divider direction="vertical"></el-divider>
            <div class="flex-align-center">
              <cpAdd v-if="tool.checkAuth($route.name,'insert')" :formPath="formPath" @onAddSuccess="listData(param.content.pageNumber = 1)"></cpAdd>
              <el-button-group v-if="tool.checkAuth($route.name,'delete')" class="inline-16">
                <el-button type="default" :disabled="selection.length === 0" size="small" @click="deleteData">删 除</el-button>
              </el-button-group>
              <el-button class="inline-16" size="small" type="primary" plain>导 入</el-button>
              <excel :tablecols="layout" :param="param" :total="total" :excelTitle="routerName"></excel>
            </div>
            <slot name="titleRight"></slot>
          </div>
          <div class="normal-margin">
            <setColumn :layout="layout" @changeColumn="changeColumn"></setColumn>
            <setFixed :data="tableLayout" @onFixedClick="onFixedClick"></setFixed>
            <i class="el-icon-refresh" @click="listData(param.content.pageNumber = 1,param.content.where.condition = '')"></i>
          </div>
        </div>
        <div class="flex-align-center flex-between">
          <div class="flex-align-center">
            <el-input placeholder="请输入内容" suffix-icon="el-icon-search" v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)" style="width:200px" size="small" class="input-with-select inline-16" clearable>
              <!-- <el-button slot="append" icon="el-icon-search" @click="listData(param.content.pageNumber = 1)">查 询</el-button> -->
            </el-input>
            <slot name="custom"></slot>
          </div>
        </div>
      </div>
      <div class="normal-panel" style="padding:0 16px">
        <tableComponent ref="table" v-if="refreshTable" :layout="tableLayout" :tableName="tableName" :custom="true" :data="list" :fixRightData="fixRightData" :fixLeftData="fixLeftData" @checkboxCallBack="checkboxCallBack">
          <template v-slot:customcol="scope">
            <slot :data="scope" name="tbList"></slot>
          </template>
          <template v-slot:opreation="scope">
            <!-- <cpEdit v-if="tool.checkAuth($route.name,'update')" :data="scope.data" btnType="text" :formPath="formPath" @onAddSuccess="listData(param.content.pageNumber = 1)"></cpEdit> -->
            <drawerTemp v-if="detailPath" :data="scope.data" :detailPath="detailPath" :idName="idName"></drawerTemp>
            <slot :data="scope" name="tbOpreation"></slot>
          </template>
        </tableComponent>
      </div>
      <div class="container normal-panel" style="text-align:right">
        <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="param.content.pageSize"
          :page-sizes="[20, 50, 100, 200]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  props:['tableName','idName','tableData','apiId','formPath','options','autoQuery','detailPath'],
  components:{
    tableComponent: () => import('./modules/table.vue'),
    setColumn: () => import('./modules/setColumn.vue'),
    cpAdd: () => import('./modules/cpAdd'),
    cpEdit: () => import('./modules/cpEdit'),
    setFixed: () => import('./modules/setFixed'),
    drawerTemp:() =>  import('./drawerDetail/index'),
    excel:() =>  import('@/components/export_excel/index.vue'),
  },
  computed:{
    ...mapGetters({
      acitveApp:'acitveApp'
    })
  },
  data () {
    return {
      routerName:'',
      select:'',
      param:{
        content:{
          "isExport":0,
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          }
        }
      },
      layout:[],
      fixRightData:['operation'],
      fixLeftData:[],
      tableLayout:[],
      selection:[],
      list:[],
      total:0,
      currentPage:0,
      refreshTable:true
    }
  },
  methods:{
    async listData () {
      this.param.id = this.apiId.query
      const res = await this.$api.requested(this.param)
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
      console.log(this.list);
      
    },
    selectChange () {
      this.param.content.pageNumber = 1
      this.param.content.where.status = this.select
      this.listData()
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    checkboxCallBack (val) {
      this.selection = val
      this.$emit('checkboxCallBack',val)
    },
    deleteData () {
      this.$confirm('确定删除这些数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let param = {
          "id": this.apiId.del,
          "content":{}
        }
        if (this.idName instanceof Array) { //判断传入的类型是多个还是单个idname
          let obj = {}
          this.idName.forEach(e=>{
            obj[e] = ''
          })
          param.content[`${this.idName[0]}s`] = this.selection.map(e=>{
            Object.keys(obj).map((key,item)=>{
              obj[key] = e[key]
            })
            return obj
          })
        } else {
          param.content[`${this.idName}s`] = this.selection.map(e=>{
            return e[this.idName]
          })
        }
        const res = await this.$api.requested(param)
        this.tool.showMessage(res,()=>{
          this.listData()
        })
      }).catch((err) => {
        
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    onFixedClick (right,left) {
      this.fixRightData = right
      this.fixLeftData = left
      this.$refs['table'].checkFixed()
    },
    // 筛选列
    changeColumn (arr) {
      this.tableLayout = arr
      this.refreshTable= false
      setTimeout(() => {
        this.refreshTable= true
      }, 0);
    },
    // 创建快捷应用
    async addToAsideBar () {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.userauthforweb.userauth",
        "method": "create_usershortcuts",
        "content": {
          "systemappid":this.acitveApp.systemappid
        }
      })
      this.$store.dispatch('setAppMenu')
    },
  },
  mounted () {
    this.autoQuery === false?'':this.listData()
  },
  created () {
    this.routerName = this.$route.meta.title
    this.layout = this.tool.tabelCol(this.$route.name)[this.tableName].tablecols
    this.tableLayout = this.layout
    this.$emit('listCreate',this.param)
  },
}

</script>
<style>
.layout-header-panel .el-input-group__append, .el-input-group__prepend{
  background-color: #fff !important;
  color: #999 !important;
  border: 1px solid #dcdfe6 !important;
  cursor: pointer;
}
</style>
<style scoped>
.radius{
  border-radius:10px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
  transform: translate3d(0,-2px,0);
}
.basic__layout__panel{
  padding: 16px 16px 16px 0;
}
</style>