<template>
  <el-container style="height: 100%;position: absolute;width: 100%;">
    <el-col :span="16" style="height:100%;">
      <div>
<!--        <el-select-->
<!--          v-model="query.system_code"-->
<!--          v-loading="isZxtbmLoading"-->
<!--          clearable-->
<!--          placeholder="子系统"-->
<!--          style="width: 110px"-->
<!--        >-->
<!--          <el-option-->
<!--            v-for="item in zxtbmList"-->
<!--            :key="item.zxtdm"-->
<!--            :label="item.zxtms"-->
<!--            :value="item.zxtdm"-->
<!--          />-->
<!--        </el-select>-->
        <el-input v-model="query.word" placeholder="全文检索" style="width: 200px" clearable />
        <el-button style="margin: 1px" type="primary" icon="el-icon-search" @click="handleQuerySubmit">查询</el-button>
        <div style="float: right;display: none;">
          <el-button style="margin: 1px" type="success" @click="handleAddGnqd">增加</el-button>
          <el-button style="margin: 1px" type="warning" @click="handleUpdateGnqd">修改</el-button>
          <el-button style="margin: 1px" type="danger" @click="handleDeleteGnqd">删除</el-button>
          <el-button style="margin: 1px" type="" @click="exportExcel">Excel</el-button>
        </div>
      </div>
      <el-table
        ref="funcTable"
        v-loading="isFuncTableLoading"
        class="gnlbTable"
        :show-overflow-tooltip="true"
        :data="funcTable.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        height="calc(100% - 30px - 35px)"
        width="100%"
        :border="true"
        highlight-current-row
        element-loading-background="rgba(0, 0, 0, 0.01)"
        element-loading-text="数据正在加载中"
        element-loading-spinner="el-icon-loading"
        @current-change="handleTableCurrentChange"
        @header-click="showFilter"
      >
        <el-table-column sortable label="子系统" property="zxtbm" width="150px">
          <template slot-scope="scope">
            {{ getSystemName(scope.row.zxtbm) }}
          </template>
        </el-table-column>
        <el-table-column sortable label="所属模块" property="ylzd1" width="150px" />
        <el-table-column sortable label="菜单名称" property="ms" width="150px" />
        <el-table-column sortable label="组件路径" property="ckcs" width="200px" />
<!--        <el-table-column sortable label="重定向" property="redirect" width="120px" />-->
<!--        <el-table-column sortable label="图标" property="icon" />-->
<!--        <el-table-column sortable label="菜单状态" property="menu_status" width="100px">-->
<!--          <template slot-scope="scope">-->
<!--            {{ scope.row.menu_status == 1?'使用':'无效' }}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column sortable label="排序1" property="ylzd2" width="100px" />
        <el-table-column sortable label="排序2" property="ylzd3" width="100px" />
      </el-table>

      <el-pagination
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 10000]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="funcTable.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <el-dialog class="GncdDialog" :title="dialogTitle" :visible.sync="dialogVisible" width="400px" center="">
        <el-row>
          <el-row>
            <span style="width: 80px;display:inline-block;">子系统：</span>
            <el-select
              v-model="updateData.zxtbm"
              v-loading="isZxtbmLoading"
              clearable
              placeholder="子系统"
              style="width: 250px;"
            >
              <el-option
                v-for="item in zxtbmList"
                :key="item.zxtdm"
                :label="item.zxtms"
                :value="item.zxtdm"
              />
            </el-select>
          </el-row>
          <el-row>
            <span style="width: 80px;display:inline-block;">所属模块：</span>
            <el-input v-model="updateData.ylzd1" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 80px;display:inline-block;">功能描述：</span>
            <el-input v-model="updateData.ms" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 80px;display:inline-block;">窗口名称：</span>
            <el-input v-model="updateData.ckdm" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 80px;display:inline-block;">功能类别：</span>
            <el-input v-model="updateData.gnlb" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 80px;display:inline-block;">参数：</span>
            <el-input v-model="updateData.ckcs" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 80px;display:inline-block;">排序1：</span>
            <el-input v-model="updateData.ylzd2" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 80px;display:inline-block;">排序2：</span>
            <el-input v-model="updateData.ylzd3" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <span style="width: 80px;display:inline-block;">取消：</span>
            <el-input v-model="updateData.ylzd4" placeholder="" style="width: 250px;" />
          </el-row>
          <el-row>
            <el-button
              v-if="dialogTitle =='添加功能'?true :false"
              style="float: right;"
              type="primary"
              @click="handleAddGnqdComplated"
            >添加
            </el-button>
            <el-button
              v-if="dialogTitle =='修改功能'?true :false"
              style="float: right;"
              type="primary"
              @click="handleUpdateGnqdComplated"
            >修改
            </el-button>
          </el-row>
        </el-row>
      </el-dialog>
    </el-col>
    <el-col :span="8" style="border-left:1px solid rgb(230, 230, 230);height: 100%;" :height="defaultHeight.height">
      <el-tabs v-model="activeYhTabName" style="padding-left: 5px;height: 100%;">
        <el-tab-pane label="用户信息" name="yhxx">
          <el-table
            ref="userTable"
            v-loading="isUserTableLoding"
            :show-overflow-tooltip="true"
            :data="userTableData"
            :height="defaultHeight.height"
            width="100%"
            :border="true"
            highlight-current-row
            element-loading-background="rgba(0, 0, 0, 0.01)"
            element-loading-text="数据正在加载中"
            element-loading-spinner="el-icon-loading"
          >
            <el-table-column label="序号" type="index" />
            <el-table-column sortable label="部门" width="100px">
<!--              <template slot-scope="scope">-->
<!--                {{ getDepartName(scope.row.depart_code) }}-->
<!--              </template>-->
            </el-table-column>
            <el-table-column label="用户账号" property="user_code" />
            <el-table-column label="用户名称" property="user_name" />
            <el-table-column label="所属工作组" property="roles" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-col>
    <tbfilter ref="tbFilter" :list="funcTable" :filter="columnFilter" @execFilter="execFilter" />
  </el-container>
</template>

<script>
import tbfilter from '@/components/TableColumnFilter'
import {
  getSystemList,
  getDepartList,
  getMenuList,
  getUserListByMenu,

  getZxtList,
  getFuncList,
  getUserListByFunc,
  addFunc,
  updateFunc,
  deleteFunc
} from '@/api/sy/yhgl'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  name: 'Gngl',
  components: { tbfilter },
  data() {
    return {
      defaultHeight: { height: '' },
      query: {},
      activeYhTabName: 'yhxx',
      funcTableData: [],
      isFuncTableLoading: true,
      userTableData: [],
      isUserTableLoding: false,
      isZxtbmLoading: true,
      currentPage: 1,
      pageSize: 100,
      zxtbmList: [],
      dm_depart: [],
      selectFunction: {},
      dialogTitle: '',
      dialogVisible: false,
      updateData: {},
      columnFilter: {}
    }
  },
  computed: {
    funcTable: function() {
      const search = this.query
      let resultList = this.funcTableData
      if (search && search.system_code) {
        resultList = this.funcTableData.filter(data => {
          return data.system_code === search.system_code
        })
      }
      if (search && search.word) {
        resultList = resultList.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key]).indexOf(search.word) > -1
          })
        })
      }
      if (this.$refs.tbFilter) {
        return this.$refs.tbFilter.doFilter(this.columnFilter, resultList)
      }
      return resultList
    }
  },
  mounted() {
  },
  created() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
    getSystemList({}).then(response => {
      this.zxtbmList = response.data
      this.isZxtbmLoading = false
      // getDepartList({}).then(response => {
      //   this.dm_depart = response.data
        getMenuList({}).then(response => {
          this.funcTableData = response.data
          this.isFuncTableLoading = false
          this.$refs.funcTable.setCurrentRow(this.funcTableData[0])
        })
      // })
    })
  },
  methods: {
    showFilter(column) {
      this.$refs.tbFilter.showFilter(column)
    },
    execFilter(property, vals) {
      this.currentPage = 1
      this.$set(this.columnFilter, property, vals)
    },
    getHeight() {
      this.defaultHeight.height = window.innerHeight - 140 + 'px'
    },
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleTableCurrentChange(currentRow) {
      if (!currentRow) return
      this.selectFunction = currentRow
      this.isUserTableLoding = true
      getUserListByMenu(currentRow).then(response => {
        this.userTableData = response.data
        this.isUserTableLoding = false
      })
    },
    handleAddGnqd() {
      this.updateData = { 'gnlb': '' }
      this.dialogVisible = true
      this.dialogTitle = '添加功能'
    },
    handleAddGnqdComplated() {
      addFunc(this.updateData).then(response => {
        this.updateData['zxtmc'] = this.getZXTBM(this.updateData['zxtbm'], 0)
        this.updateData = JSON.parse(JSON.stringify(this.updateData))
        this.funcTableData.push(this.updateData)
        this.dialogVisible = false
        this.$message({ message: '添加功能菜单成功！', type: 'success' })
      })
    },
    handleUpdateGnqd() {
      if (!this.selectFunction.zxtbm) {
        this.$message({ message: '请选择要修改的数据！', type: 'error' })
        return
      }
      this.dialogVisible = true
      this.dialogTitle = '修改功能'
      this.updateData = JSON.parse(JSON.stringify(this.selectFunction))
    },
    handleUpdateGnqdComplated() {
      updateFunc([this.selectFunction, this.updateData]).then(response => {
        for (var key in this.updateData) {
          this.selectFunction[key] = this.updateData[key]
        }
        this.dialogVisible = false
        this.$message({ message: '修改功能菜单成功！', type: 'success' })
      })
    },
    handleDeleteGnqd() {
      this.$confirm('此操作将删除该功能菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFunc(this.selectFunction).then(response => {
          this.funcTableData = this.funcTableData.filter(t => !(t.zxtbm === this.selectFunction.zxtbm && t.ckdm === this.selectFunction.ckdm && t.ms === this.selectFunction.ms && t.gnlb === this.selectFunction.gnlb))
          this.$message({ message: '删除功能菜单成功！', type: 'success' })
        })
      })
    },
    getDepartName(depart_code) {
      for (const i in this.dm_depart) {
        if (this.dm_depart[i].depart_code === depart_code) {
          return this.dm_depart[i].depart_name
        }
      }
      return ''
    },
    getSystemName(zxtbm) {
      for (const i in this.zxtbmList) {
        if (this.zxtbmList[i].zxtdm === zxtbm) {
          return this.zxtbmList[i].zxtms
        }
      }
      return ''
    },
    exportExcel() {
      /* generate workbook object from table */
      // 表名
      var wb = XLSX.utils.table_to_book(document.querySelector('.gnlbTable'))
      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'gnlb.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }
  }

}
</script>

<style scoped>
  .GncdDialog .el-row {
    margin-bottom: 5px;
  }
</style>
