<template>
  <el-dialog
    title="选择设备"
    :visible.sync="equipmentdialog"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="60%"
  >
    <div>
      <el-row>
		<el-col :span="24" class="topsearch">
			<el-form >
			  <el-row>
          <el-col :span="6">
            <el-input
              v-model="searchKey"
              placeholder="输入设备编码或名称"
              size="small"
            ></el-input>
          </el-col>
          <el-col :span="6" style="margin-left:10px">
             <el-button type="primary" size="small" @click="searchByKeyWords">搜索</el-button>
             <el-button size="small" @click="reset">重置</el-button>
          </el-col>
			  </el-row>
			</el-form>
		</el-col>
        <el-col :span="6" class="tree_col">
          <!-- <vTreeList
            @handleNodeClick="handleNodeClick"
            ref="commonTree"
            :defaultExpandAll="false"
            :defaultExpandedKeys="defaultExpandedKeys"
            :type="[1,2,5,6]"
          /> -->
        </el-col>
        <el-col :span="18" class="table_col">
          <el-table
            :data="tableData"
            height="450"
            highlight-current-row
            @current-change="handleCurrentChange"
          >
            <!-- <el-table-column v-if="currentTreeData.parentName=='生产设备'" :label="currentTreeData.parentName+'编码'" prop="equCode" width="200"></el-table-column> -->
            <el-table-column :label="currentTreeData.parentName+'编码'" prop="code" width="200"></el-table-column>
            <el-table-column :label="currentTreeData.parentName+'名称'" prop="name"></el-table-column>
            <el-table-column label="设备分类" prop="classificationUrl"></el-table-column>
            <!-- <el-table-column v-if="currentTreeData.parentName=='生产设备'" label="规格型号" prop="specifications"></el-table-column> -->
            <el-table-column label="规格型号" prop="specification">
               <template slot-scope="{ row }">
                  {{row.specification}}<span v-if="row.specification||row.modelType">|</span>{{row.modelType}}
               </template>
            </el-table-column>
            <!-- <el-table-column label="固定资产编码" prop="code"></el-table-column>
            <el-table-column
              label="规则型号"
              prop="specifications"
            ></el-table-column>
            <el-table-column label="权属部门" prop="ownDept"></el-table-column>
            <el-table-column label="权属人" prop="owner"></el-table-column> -->
          </el-table>
          <div class="pagination">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
              :page-sizes="[5, 10, 20, 50, 100]"
              :page-size="pagination.size"
              :current-page.sync="pagination.page"
              @current-change="handleCurrent"
              @size-change="handleSize"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="btns">
      <el-button type="primary" size="small" @click="selected">选择</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import vTreeList from '@/components/treeList'
// import { getAssetsList,getList , getBoatList , getTurnoverCarList , getMouldList } from '@/api/ledgerAssets/booksList'

export default {
  data () {
    return {
      equipmentdialog: false,
      defaultExpandedKeys: [],
      tableData: [],
      currentTreeData: {},
      params: {},
      selectedRow: {},
      pagination: {
        page: 1,
        size: 10,
        total: 0
      },
	    searchKey:null,
      ids:[],
      treeData:[],
      requestApi: null,
    }
  },
  // components: { vTreeList },
  watch: {
    equipmentdialog (val) {
      if (val) {
        this.$nextTick(() => {
          const treeList = this.$refs.commonTree.treeList
          this.defaultExpandedKeys = [treeList[0].id]
          this.handleNodeClick(treeList[0])
        })
      }
    }
  },
  methods: {
    handleClose () {
      this.equipmentdialog = false
    },

    handleCurrent (page) {
      this.pagination.page = page
      this._getList(this.params)
    },
    handleSize (size) {
      this.pagination.page = 1
      this.pagination.size = size
      this._getList(this.params)
    },

    // 树点击事件
    handleNodeClick (data, node) {
      // 只点击叶子节点请求表格数据
      if (data.id === this.currentTreeData.id) return
      if(data.children){
         this.ids = []
         this.treeData = []
         this._getTreeDataId(data)
      }else{
        this.ids = [data.id]
      }
      // if (this.currentTreeData.id === data.id || data.children) return
      // this.params = { classificationIdList: [data.id] }
      this.currentTreeData = data
      this.params = { classificationId: parseInt(this.currentTreeData.id)  }
      this._getList(this.params)
    },

    // 封装递归获取树id
    _getTreeDataId (tree) {
      let data = tree
      data.children.map(item => {
        if (item.children) {
          let tempChildren = []
          tempChildren = Array.from(item.children)
          this.treeData.push(data, ...tempChildren)
        }
        if (!item.children) {
          this.treeData.push(data, item)
        }
      })
      for (let i = 0; i < this.treeData.length; i++) {
        if (this.treeData[i].id) {
          this.ids.push(this.treeData[i].id)
        }
      }
      this.ids = [...new Set(this.ids)]
    },


    // 封装 - 获取设备列表数据
     async _getList (params) {
         const pageParams = {
           page: this.pagination.page,
           size: this.pagination.size
         }
         let res = await getAssetsList(pageParams, params)
         // console.log(res)
         this.tableLoading = false
         if (res.success) {
             this.tableData = res.data.records
             this.pagination.total = res.data.total
         } else {
           this.$message.error(res.code)
         }
        // switch (this.currentTreeData.parentName) {
        //   case '生产设备':
        //     this.requestApi = getList
        //     break;
        //   case '舟皿':
        //     this.requestApi = getBoatList
        //     break;
        //   case '周转车':
        //     this.requestApi = getTurnoverCarList
        //     break;
        //   case '模具':
        //     this.requestApi = getMouldList
        //     break;
        // }
        // this.handleList(params, this.requestApi)
    },

    async handleList (params, requestApi) {
      try {
        const pageParams = {
          page: this.pagination.page,
          size: this.pagination.size
        }
        let res = await requestApi(pageParams, params)
        // console.log(res)
        this.tableLoading = false
        if (res.success) {
            this.tableData = res.data.records
            this.pagination.total = res.data.total
        } else {
          this.$message.error(res.code)
        }
      } catch (error) {
        this.tableLoading = false
      }
    },

    // 表格选中行
    handleCurrentChange (row) {
      if(row){
        this.selectedRow = row
        this.selectedRow.equiTypeId = this.currentTreeData.id
        this.selectedRow.equiTypeName = this.currentTreeData.name
      }
    },

    // 选择的设备行
    selected () {
      this.selectedRow.parentName = this.currentTreeData.parentName
      this.$emit('submit', this.selectedRow)
      this.handleClose()
    },
    // 弹窗 - 按关键字搜索
    searchByKeyWords () {
      // console.log(this.searchMsg)
      if(!this.currentTreeData){
        this.$message.warning('请先选择设备！')
        return
      }
      this.pagination.page = 1
      this.params = { searchKey: this.searchKey , classificationId: parseInt(this.currentTreeData.id)  }
      this._getList(this.params)
    },
    // 重置
    reset(){
       this.pagination.page = 1
       this.searchKey = ''
       this.params = { searchKey:this.searchKey , classificationId: parseInt(this.currentTreeData.id) }
       this._getList(this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree_col {
  border: 1px solid #eee;
  padding: 10px 0;
  box-sizing: border-box;
  height: 500px;
  overflow: auto;
}
.table_col {
  padding-left: 10px;
  ::v-deep .el-table th.el-table__cell {
    background: #f2f2f2;
  }
}
.pagination {
  text-align: right;
  padding: 10px 0;
}
.btns {
  text-align: center;
  padding: 10px 0;
}
.topsearch{
	margin-bottom:15px;
}
</style>
