<template>
  <!-- 往来单位 人员配置 表单组件 -->
  <div class="app-container">
    <el-col :span="4" :xs="24" style="margin-right: 15px">
      <div class="head-container">
        <el-input
          v-model="typeName"
          placeholder="请输入部门名称"
          clearable
          maxlength="50"
          size="small"
          prefix-icon="el-icon-search"
          style="margin-bottom: 20px"
        />
      </div>
      <div class="head-container">
        <el-tree
          style="height: 700px; overflow: scroll"
          :data="treeOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }" style="font-size: 14px">
            <i v-if="node.level <= 3" class="el-icon-folder" style="color: #fabd16" />
            <i v-else-if="node.level > 3" class="el-icon-document" style="color: #C0C0C0" />
            {{ data.label }}
          </span>
        </el-tree>
      </div>
    </el-col>
    <!-- 表格 -->
    <TableModel
      :formLabel="formLabel"
      :columnsList="columnsList"
      :request-api="queryContactUnitsListApi"
      ref="tableRef"
      style="display: flex; flex-direction: column"
    >
      <template slot="btn" slot-scope="{ queryParams }">
        <el-button type="primary"
        >绑定</el-button>
<!--        <el-button @click="handleExportData(queryParams, 'base/agreement/export', '物资清单')"
        >导出</el-button>-->
      </template>
      <template slot="handle" slot-scope="{ data }">
        <el-button
          type="info"
          size="mini"
          v-if="data.level === '4'"
        >查看</el-button
        >
        <el-button
          type="primary"
          size="mini"
          @click="handleEditData(data)"
        >编辑</el-button
        >
<!--        <el-button
          type="danger"
          size="mini"
          @click="handleDeleteMaType(data.id, delSingleMa)"
        >删除</el-button
        >-->
      </template>
      <!--      <template slot="url" slot-scope="{ data }">
              <img :src="data.url" style="width: 50px; height: 50px">
            </template>-->
    </TableModel>
  </div>
</template>

<script>
import { formLabel, columnsList, dialogConfig } from '../config'
import { commonMixin } from '../../mixins/common'
import {
  queryMaTypeTreeListApi,
  queryMaListApi,
  delSingleMa
} from '@/api/material/type'
import {
  deleteContactUnitsApi,
  queryContactUnitsListApi,
  queryCompanyTreeApi
} from '@/api/base/customer'
export default {
  name: 'PersonConfig',
  mixins: [commonMixin], // 混入公共方法和数据
  props: {

  },
  created() {
    this.getTreeData()
  },
  watch: {
    // 根据名称筛选部门树
    typeName(val) {
      this.$refs.tree.filter(val)
    },
  },
  mounted() {

  },
  data() {
    return {
      formLabel,
      columnsList,
      dialogConfig,
      // 类型名称
      typeName: undefined,
      // 树选项
      treeOptions: undefined,
      // 根级
      /* rootOpt: [
        {
          companyId: null,
          id: 0,
          label: '人员列表',
          level: 0,
          parentId: null,
          children: []
        }
      ], */
      // 默认属性
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  methods: {
    queryContactUnitsListApi,
    // 获取树形数据
    getTreeData() {
      queryCompanyTreeApi().then(res => {
        /* this.rootOpt[0].children = []
        res.data.forEach(item => {
          this.rootOpt[0].children.push(item)
        })
        this.treeOptions = this.rootOpt */
        this.treeOptions = res.data
      }).catch(err => {})
    },
    // 筛选节点 - 左侧树
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件 - 左侧树
    handleNodeClick(data) {
      console.log(data)
      /* queryMaListApi({
        typeId: data.id
      }).then(res => {
        this.transInfo = res.data.rows
        console.log(this.transInfo)
      }) */
      this.transLevel = data.level
      this.transData = data
      this.$refs.tableRef.queryTableList({
        id: data.id
      })
    },
  },
}
</script>

<style scoped>
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
</style>
