<template>
  <el-container>
    <el-header style="width: 100%">
      <el-row :gutter="20">
        <el-col :span="18">
          <el-col :span="3">
            <el-input
              v-model="queryParam.name"
              placeholder="编码类型"
              clearable
            />
          </el-col>

        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button type="primary" @click="search">搜索</el-button>
        </el-col>
      </el-row>
      <el-row>
        <div style="float:right;">
          <el-button type="success" @click="toolbarButtonClickEvent('myInsert')">新增</el-button>
          <el-button type="danger" @click="toolbarButtonClickEvent('myDelete')">删除</el-button>
          <el-button type="success" @click="toolbarButtonClickEvent('mySave')">保存</el-button>
        </div>
      </el-row>

    </el-header>
    <el-container style="margin-top: 10px">
      <el-aside width="225px">
        <el-tree
          v-loading="isTreeLoading"
          :default-expanded-keys="['@@@']"
          :expand-on-click-node="false"
          node-key="dictCode"
          :data="treeData"
          :props="defaultProps"
          highlight-current
          @node-click="treeNodeClick"
        />
      </el-aside>
      <el-main>
        <div class="mytable">
          <vxe-grid
            id="id"
            ref="xGrid"
            border
            resizable
            keep-source
            :height="height"
            :auto-resize="true"
            :columns="tableColumn"
            :row-class-name="tableStyle"
            :data="tableData"
            :custom-config="{storage: true}"
            :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
          />
        </div>

        <!--        :toolbar-config="tableToolbar"  @toolbar-button-click="toolbarButtonClickEvent"-->
        <!--        <tb-filter ref="tbFilter" :list="_tableData" :filter="columnFilter" @execFilter="execFilter"></tb-filter>-->
      </el-main>
    </el-container>

  </el-container>

</template>

<script>

  import { getTreeList, add, del, getList, update } from '@/api/sy/xtgl'
  // import TbFilter from '@/components/TableColumnFilter'

  export default {
    name: 'Bmgl',
    // components: { TbFilter },
    data() {
      return {

        columnFilter: {},
        treeId: '',
        queryParam: {
          name: ''
        },
        treeData: [],
        isTreeLoading: true,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData: [],
        // defaultHeight: { height: '' },
        height: '500px',
        // tableToolbar: {
        //   buttons: [
        //     { code: 'myInsert', name: '新增' },
        //     { code: 'mySave', name: '保存', status: 'success' },
        //     { code: 'myDelete', name: '删除', status: 'success' },
        //   ],
        // },
        tableColumn: [
          { type: 'checkbox', width: 50 },
          { type: 'seq', width: 60, title: '序号' },
          { field: 'itemValue', title: '名称', editRender: { name: 'input' }},
          { field: 'itemCode', title: '数据值', editRender: { name: 'input' }},
          // { field: 'remark', title: '备注', editRender: { name: 'input' }},
          { field: 'dictCode', title: '字典编码' }
        ]
      }
    },
    computed: {
      _tableData: function() {
        const resultList = this.tableData
        if (this.$refs.tbFilter) {
          return this.$refs.tbFilter.doFilter(this.columnFilter, resultList)
        }

        return resultList
      }
    },
    created() {
      window.addEventListener('resize', this.getHeight)

      this.getHeight()
      this.search()
    },
    methods: {

      execFilter(property, vals) {
        this.$set(this.columnFilter, property, vals)
      },
      tableStyle() {
        return 'tableStyles'
      },

      search() {
        getTreeList(this.queryParam).then(response => {
          this.treeData = response.data
          this.isTreeLoading = false
        })
      },
      loadData() {
        getList({ name: this.treeId }).then(response => {
          this.tableData = response.data
        })
      },
      getHeight() {
        //  this.defaultHeight.height = window.innerHeight - 140 + 'px'
        this.height = window.innerHeight - 190
      },
      treeNodeClick(data) {
        console.log(data)
        this.treeId = data.id
        this.loadData()
      },
      async toolbarButtonClickEvent(code) {
        const {insertRecords, removeRecords, updateRecords} = this.$refs.xGrid.getRecordset()
        switch (code) {
          case 'myInsert':
            if (this.treeId === '' || this.treeId === '@@@') {
              return
            }
            this.$refs.xGrid.insertAt({
              dictCode: this.treeId
            }, -1)
            break
          case 'myDelete':
            this.$refs.xGrid.removeCheckboxRow()

            break
          case 'mySave':

            if (insertRecords.length !== 0) {
              await add(insertRecords).then(response => {
                this.tableData = response.data
                this.loadData()
              })
            }
            if (removeRecords.length !== 0) {
              // const delArr = []
              // removeRecords.forEach(function (value, index) {
              //   delArr[index] = value.id
              // })
              console.log(removeRecords)

              await del(removeRecords).then(response => {
                this.tableData = response.data
                this.loadData()
              })
            }
            if (updateRecords.length !== 0) {
              await update(updateRecords).then(response => {
                // this.tableData=response.data
                console.log(response)
                if (response.success) {
                  this.$message({message: '保存成功！', type: 'success'})
                }
                this.loadData()
              })
            }
            //修改后需要刷新本地缓存数据
            this.$store.dispatch('dict/getMapList')
            this.$message(`新增 ${insertRecords.length} 条，删除 ${removeRecords.length} 条，更新 ${updateRecords.length} 条`)
            break
        }
      }

    }
  }
</script>

<style scoped>
  .el-header{margin:0;padding: 5px;height:auto;}
  .el-container{padding: 0;margin:0;}
  .el-main{padding: 0;}
  .el-col{padding: 0;}
  .el-aside{background: #fff;padding: 0}
  .el-container{padding: 0}
  .el-row {margin-bottom: 5px;}
  .el-row:last-child {margin-bottom: 0; }

  .tableStyles{
    background: #0a76a4;
  }

</style>
