<template lang="html">
    <div class="sheet_demo">
        <el-container class="container">
            <!-- aside -->
            <el-aside style="width:10%">
                <!--<el-scrollbar style="height: 100%">-->
                    <el-card id="card" shadow="never" :body-style="{ padding: '0px', height: '100%' }" class="aside-card">
                        <div slot="header" class="clearfix">
                            <span>{{leftColumnTitle}}</span>
                        </div>
                        <el-menu :style="{height: height - 55 + 'px'}" class="aside-menu">
                            <el-menu-item @click="handleOpen(item)" :index="index + ''" v-for="(item, index) in leftMenuList" :key="index">
                                <i class="el-icon-document"></i>
                                <span slot="title">{{item.label}}</span>
                            </el-menu-item>
                        </el-menu>
                    </el-card>
                <!--</el-scrollbar>-->

            </el-aside>
            <!-- main -->
            <el-container class="main">
                <el-header class="main-header">
                    <el-row class="main-header-row">
                        <el-col :span="3" class="search-input-area">
                            <el-input size="small" placeholder="搜索" v-model="searchParam.quick_query" @keyup.13="enter($event)">
                                <!--<el-button size="small" slot="append" icon="el-icon-search" type="primary"></el-button>-->
                            </el-input>
                        </el-col>
                        <el-col :span="4" class="search-button-area">
                            <el-button-group>
                                <el-button size="small" icon="el-icon-search" type="primary"></el-button>
                                <el-popover
                                        placement="bottom"
                                        width="280"
                                        trigger="click">
                                    <el-row>
                                        <el-col :span="24">
                                            <el-form size="small" :inline="true" :model="searchParam" label-width="90px" label-position="left">
                                                <el-form-item label="实例1"><el-input size="small" v-model="searchParam.exp1"></el-input></el-form-item>
                                                <el-form-item label="实例2"><el-input size="small" v-model="searchParam.exp2"></el-input></el-form-item>
                                                <el-form-item label="实例3"><el-input size="small" v-model="searchParam.exp3"></el-input></el-form-item>
                                                <el-form-item label="实例4"><el-input size="small" v-model="searchParam.exp4"></el-input></el-form-item>
                                            </el-form>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col style="float: right; width: 140px">
                                            <el-button size="small">重置</el-button>
                                            <el-button size="small" type="primary">搜索</el-button>
                                        </el-col>
                                    </el-row>
                                    <el-button size="small" type="primary" slot="reference">
                                        更多搜索<i class="el-icon-arrow-down el-icon--right"></i>
                                    </el-button>
                                </el-popover>
                            </el-button-group>
                        </el-col>
                        <el-col :span="3" class="operation-area">
                            <el-button-group class="operation-button-group">
                                <el-tooltip content="刷新" placement="top">
                                    <el-button @click="refresh" icon="el-icon-refresh" size="small" type="primary"></el-button>
                                </el-tooltip>
                                <el-tooltip content="新增" placement="top">
                                    <el-button @click="openAddDialog" icon="el-icon-plus" size="small" type="primary"></el-button>
                                </el-tooltip>
                                <el-dialog
                                        title="新增"
                                        :visible.sync="dialogVisible1"
                                        width="60%"
                                        :close-on-click-modal="false"
                                        :before-close="closeDialog"
                                >
                            <span slot="footer" class="dialog-footer">
                                <el-button-group>
                                  <el-button size="small" @click="commitAddData('addData')">提交</el-button>
                                </el-button-group>
                            </span>
                                </el-dialog>
                                <el-tooltip content="编辑" placement="top">
                                    <el-button @click="openEditDialog" icon="el-icon-edit" size="small" type="primary"></el-button>
                                </el-tooltip>
                                <el-dialog
                                        title="编辑"
                                        :visible.sync="dialogVisible2"
                                        width="60%"
                                        :close-on-click-modal="false"
                                        :before-close="closeDialog"
                                >
                            <span slot="footer" class="dialog-footer">
                                <el-button-group>
                                  <el-button size="small" @click="commitEditData('editData')">提交</el-button>
                                </el-button-group>
                            </span>
                                </el-dialog>
                                <el-tooltip content="删除" placement="top">
                                    <el-button @click="deleteSinge(rowId)" icon="el-icon-delete" size="small" type="primary"></el-button>
                                </el-tooltip>
                            </el-button-group>
                        </el-col>
                        <!--<el-col :span="2">-->
                            <!--<el-button size="small" type="primary">更多搜索</el-button>-->
                        <!--</el-col>-->
                    </el-row>
                </el-header>
                <el-main>
                    <el-table
                            v-loading="loading"
                            :highlight-current-row=true
                            @current-change="tabHandleCurrentChange"
                            :data="bill_list"
                            ref="multipleTable"
                            :border=true
                            height="400"
                            :fit=true
                            style="width: 100%"
                            @cell-dblclick="doubleClickRow"
                    >
                        <el-table-column prop="header1" label="表头1"></el-table-column>
                        <el-table-column prop="header2" label="表头2"></el-table-column>
                        <el-table-column prop="header3" label="表头3"></el-table-column>
                        <el-table-column prop="header4" label="表头4"></el-table-column>
                        <el-table-column prop="header5" label="表头5"></el-table-column>
                        <el-table-column prop="header6" label="表头6"></el-table-column>
                        <el-table-column prop="header7" label="表头7"></el-table-column>
                        <el-table-column label="操作" width="50">
                            <template slot-scope="scope">
                                <el-button @click="openEditDialog(scope.row)" icon="el-icon-edit" size="small" type="text"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="pageControl">
                        <el-pagination @size-change="handleSizeChange"
                                       @current-change="handleCurrentChange"
                                       :current-page.sync="page"
                                       :page-sizes="[10, 20, 30, 40]"
                                       :page-size="per_page"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="total">
                        </el-pagination>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
  import utilSingeUc from '@basicClass/util_singe_uc.js'
  export default {
    mixins: [utilSingeUc],
    data() {
      return {
        height: '',
        module_name: '',
        // detailUrl: 'im_arrive_dtl/',
        leftColumnTitle: '左侧栏', // 左侧栏标题
        leftMenuList: [], // 左侧栏data
        bill_list: [], // 表data
        currentItem: {}, // 表选中项
        dialogVisible1: false, // 新增弹窗boolean
        dialogVisible2: false // 编辑弹窗boolean
      }
    },
    methods: {
      // 搜索框监听enter事件
      enter() {
        // this.query_bill_list()
      },
      // 监听左侧栏选中
      handleOpen(item) {
        console.log(item)
      },
      // 监听表内选中
      handleCurrentChange(val) {
        this.currentItem = val
        console.log(this.currentItem)
      },
      // 监听新增弹窗
      openAddDialog() {
        this.dialogVisible1 = true
      },
      // 监听编辑弹窗
      openEditDialog() {
        this.dialogVisible2 = true
      },
      // 监听删除弹窗
      deleteData() {
        if (Object.keys(this.currentItem).length) {
          this.$confirm('确定删除？')
            .then(_ => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
            .catch(_ => {})
        } else {
          this.$message({
            type: 'warning',
            message: '请选择一项进行操作！'
          })
        }
      },
      // 监听关闭弹窗
      closeDialog() {
        this.$confirm('确认退出编辑？')
          .then(_ => {
            this.dialogVisible1 = false
            this.dialogVisible2 = false
          })
          .catch(_ => {})
      }
    },
    mounted() {
      this.height = document.getElementById('card').clientHeight
    },
    activated() {
      // this.query_bill_list()
    },
    created() {
      // this.query_bill_list()
    }
  }
</script>

<style lang="css" scoped>
* {
  box-sizing: border-box;
}
.el-scrollbar__wrap {
  overflow-x: hidden !important;
}
.sheet_demo {
  height: 100%;
}
.container {
  height: 100% !important;
}
/*侧栏区域*/
.aside-card {
  border: 1px solid #dcdfe6;
  height: 100%;
  /*overflow-y: auto;*/
}
/*侧栏菜单*/
.aside-menu {
  overflow-y: auto;
  border: none;
  /*height: 100%;*/
}
/*主区域*/
.main {
  border: 1px solid #dcdfe6;
  margin-left: 10px;
  background-color: #fff;
}
/*主区域头部*/
.main-header {
  border-bottom: 1px solid #ebeef5;
  height: 56px !important;
}
/*头内区域*/
.main-header-row {
  padding-top: 10px;
}
/*搜索框区域*/
.search-input-area {
  min-width: 180px;
}
/*搜索按钮区域*/
.search-button-area {
  min-width: 150px;
  margin-left: 5px;
}
/*操作按钮区域*/
.operation-area {
  float: right;
  min-width: 200px;
}
/*按钮组*/
.operation-button-group {
  float: right;
}
.pageControl {
  float: right;
  margin-top: 15px;
  /*margin-bottom: 0.5%;*/
}
</style>
