<template>
  <zj-page-container direction="row">
    <div style="min-width: 220px; height: 100%">
      <zj-page-container>
        <div class="title">
          <el-button
            style="margin-right: 5px"
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="tianjiayiji"
          ></el-button>
          <el-button style="margin-right: 5px" size="mini" icon="el-icon-search" @click="getTreeListData"></el-button>
          <el-input size="mini" v-model="filterText" placeholder="请输入内容"></el-input>
        </div>
        <zj-page-fill>
          <el-tree
            :data="treeList"
            :props="defaultProps"
            default-expand-all
            :highlight-current="true"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
            ref="listTree"
          >
            <div class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button size="mini" type="text" @click="eidbumen(data)">
                  <i class="el-icon-edit"></i>
                </el-button>
                <el-button size="mini" type="text" @click="delbumen(data)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </span>
            </div>
          </el-tree>
        </zj-page-fill>
      </zj-page-container>
    </div>
    <template-page
      ref="pageRef"
      :getList="getList"
      :columnParsing="columnParsing"
      :optionsEvensGroup="optionsEvensGroup"
      :tableAttributes="tableAttributes"
      :tableEvents="tableEvents"
      :operationColumnWidth="160"
      :operation="operation()"
    >
      <el-dialog title="申述大类" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="100px" size="mini">
          <el-form-item label="大类名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queding">确定</el-button>
            <el-button @click="handleClose">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="申述小类" :visible.sync="dialogVisible2" width="500px" :before-close="handleClose2">
        <el-form ref="form" :model="form2" label-width="120px" size="mini">
          <el-form-item label="问题大类">
            <el-input disabled v-model="form2.parentName"></el-input>
          </el-form-item>
          <el-form-item label="小类名称">
            <el-input v-model="form2.name"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="form2.status">
              <el-radio :label="true">启用</el-radio>
              <el-radio :label="false">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queding2">确定</el-button>
            <el-button @click="handleClose2">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </template-page>
  </zj-page-container>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import {
  appraiseApplyCategoryList,
  appraiseApplyCategorySave,
  appraiseApplyCategoryDetail,
  appraiseApplyCategoryImport,
  appraiseApplyCategoryDel
} from '@/api/explainTypeConfig.js'
import operation_mixin from '@/components/template/operation_mixin.js'
import { commonTemplateDownload } from '@/api/common.js'
import import_mixin from '@/components/template/import_mixin.js'
export default {
  components: {
    TemplatePage
  },
  mixins: [operation_mixin, import_mixin],
  data() {
    return {
      // 表格属性
      tableAttributes: {},
      // 表格事件
      tableEvents: {},
      item: null,
      treeList: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      filterText: '',
      dialogVisible: false,
      form: {
        name: '',
        parentId: 0,
        status: true
      },
      dialogVisible2: false,
      form2: {
        name: '',
        parentId: 0,
        parentName: '',
        status: true
      }
    }
  },
  mounted() {
    this.getTreeListData()
  },
  computed: {
    // 事件组合
    optionsEvensGroup() {
      return [
        [
          ...(() => {
            if (this.item) {
              return [
                [
                  this.optionsEvensAuth('add', {
                    click: () => {
                      if (this?.item?.id) {
                        this.form2 = {
                          name: '',
                          parentId: this?.item?.id,
                          parentName: this?.item?.name,
                          status: true
                        }
                        this.dialogVisible2 = true
                      }
                    }
                  })
                ]
              ]
            } else {
              return []
            }
          })(),
          [
            this.optionsEvensAuth('import', ({ moduleName }) => {
              return {
                name: moduleName,
                render: () => {
                  return this.importButton(appraiseApplyCategoryImport, moduleName)
                }
              }
            })
          ],
          [
            this.optionsEvensAuth('download', {
              click: () => {
                commonTemplateDownload({ name: '评价问题类别模板.xlsx' }, `${this.$route.meta.title}`)
                  .then(res => {
                    this.$message({
                      message: '下载成功',
                      type: 'success'
                    })
                  })
                  .catch(err => {
                    this.$message.error('下载失败')
                  })
              }
            })
          ]
        ]
      ]
    }
  },
  watch: {
    filterText(val) {
      this?.$refs?.listTree?.filter?.(val)
    },
    item() {
      this.$refs.pageRef?.refreshList()
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 请求属性数据
    getTreeListData() {
      appraiseApplyCategoryList({
        orderBy: '',
        pageNum: 1,
        pageSize: -1,
        params: [{ param: 'a.parent_id', compare: '=', value: '0' }]
      }).then(res => {
        this.treeList = res.data.records
      })
    },
    // 树形选中
    handleNodeClick(e) {
      this.item = { ...e }
    },
    // 列表请求函数
    getList(pam, cb) {
      try {
        if (this?.item?.id) {
          pam.params.push({ param: 'a.parent_id', compare: '=', value: this?.item?.id })
        } else {
          pam.params.push({ param: 'a.parent_id', compare: '=', value: 'XXXXXXXXXXXXXXXXXXXX' })
        }
        cb && cb(pam)
        return appraiseApplyCategoryList(pam)
      } catch (err) {
      } finally {
      }
    },
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    operation() {
      return this.operationBtn({
        edit: {
          click: ({ row, index, column }) => {
            this.form2 = { ...row }
            this.dialogVisible2 = true
          }
        }
      })
    },
    tianjiayiji() {
      this.form = { name: '', parentId: 0, status: true }
      this.dialogVisible = true
    },
    eidbumen(data) {
      this.form = { ...data }
      this.dialogVisible = true
    },
    delbumen(data) {
      appraiseApplyCategoryDel([data.id]).then(res => {
        this.getTreeListData()
        this.$refs.pageRef?.refreshList()
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      })
    },
    queding() {
      if (!this.form.name) {
        this.$message.warning('大类名称不能为空')
      }
      appraiseApplyCategorySave(this.form).then(res => {
        this.getTreeListData()
        this.handleClose()
        this.$message({
          type: 'success',
          message: '设置成功'
        })
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.form = {
        name: '',
        parentId: 0,
        status: true
      }
    },
    // -----------------------------------------
    queding2() {
      if (!this.form2.name) {
        this.$message.warning('小类名称不能为空')
      }
      appraiseApplyCategorySave({
        ...this.form2
      }).then(res => {
        this.$refs.pageRef?.refreshList()
        this.handleClose2()
        this.$message({
          type: 'success',
          message: '设置成功'
        })
      })
    },
    handleClose2() {
      this.dialogVisible2 = false
      this.form2 = {
        name: '',
        parentId: 0,
        status: true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .zj-page-fill-scroll {
  overflow-x: auto;
}
.title {
  width: 100%;
  padding: 20px 0 10px 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 1px solid #cccccc;
  font-weight: bold;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
