<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="queryMaListApi"
      :show-sel="false"
      ref="tableRef"
      style="display: flex; flex-direction: column"
    >
      <template slot="btn" slot-scope="{ queryParams }">
        <el-button type="primary" @click="handleAddMaData(transLevel)"
        >新增</el-button>
        <el-button @click="handleExportData(queryParams, 'base/maType/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>

    <!-- 新增以及修改时的弹框 -->
    <DialogModel
      :dialogConfig="dialogConfig"
      @closeDialogOuter="closeDialogOuter"
    >
      <template slot="outerContent">
        <!-- 新增以及修改数据的表单组件 -->
        <FormType
          @closeDialog="closeDialog"
          :editParams="editParams"
          :sendData="transData"
          :sendInfo="transInfo"
          :treeMethod="getTreeData"
        />
      </template>
    </DialogModel>
  </div>
</template>

<script>
import { formLabel, columnsList, dialogConfig } from './config'
import { commonMixin } from '../mixins/common'
import FormType from './components/form-type.vue'
import {
  queryMaTypeTreeListApi,
  queryMaListApi,
  delSingleMa
} from '@/api/material/type'
export default {
  name: 'typeManage',
  mixins: [commonMixin], // 混入公共方法和数据
  components: {
    FormType,
  },
  created() {
    this.getTreeData()
  },
  watch: {
    // 根据名称筛选部门树
    typeName(val) {
      this.$refs.tree.filter(val)
    },
  },
  methods: {
    // 获取树形数据
    getTreeData() {
      queryMaTypeTreeListApi().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({
        code: data.code
      })
    },
  },
  data() {
    return {
      formLabel,
      columnsList,
      dialogConfig,
      // 新建时弹框标题
      addDialogTitle: '新增物资类型',
      // 修改时弹框标题
      editDialogTitle: '修改物资类型',

      /** 树形组件数据 */
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        typeName: undefined,
      },
      // 类型名称
      typeName: undefined,
      // // 类型id
      // sendData: {
      //   typeId: undefined,
      // },
      // 树选项
      treeOptions: undefined,
      // 根级
      rootOpt: [
        {
          companyId: null,
          id: 0,
          label: '宏源工业园仓库',
          level: 0,
          parentId: null,
          children: []
        }
      ],
      // 默认属性
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      // 查询右侧数据
      queryMaListApi,
      // 删除单个物资
      delSingleMa,
      // 传递给表单的数据, level, 数据
      transData: null,
      transLevel: null,
      transInfo: null
    }
  },
}
</script>
