<template>
  <div>
    <el-form class="node-form" :model="formData" :rules="rules" ref="itemForm" label-width="120px">
      <el-form-item label="类型" prop="item_type">
        <el-select v-model="formData.item_type" placeholder="请选择">
          <el-option label="标准检查项" value="0"></el-option>
          <el-option label="自定义检查项" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="formData.item_type == 1" label="检查内容" prop="item_content">
        <el-input placeholder="请输入" v-model="formData.item_content"></el-input>
      </el-form-item>
      <el-form-item v-else label="检查项" required>
        <div class="filter">
          <el-input placeholder="搜索名称" class="input-filter" v-model="filterText"></el-input>
          <!-- <el-button style="margin-left: 10px;" type="primary" size="small" @click="handleConfirm">查找</el-button> -->
        </div>
        <el-tree
          v-loading="loading"
          element-loading-text="数据加载中..."
          class="custom-tree"
          ref="tree"
          node-key="id"
          :props="treeProps"
          :data="treeData"
          :filter-node-method="filterNode"
          show-checkbox
          @check-change="handleCheckChange">
        </el-tree>
      </el-form-item>
    </el-form>
    <div class="tools">
      <div class="sec">
       </div>
      <div class="sec">
        <el-button type="warning" size="small" @click="handleCancel">取消</el-button>
        <el-button type="primary" size="small" @click="handleConfirm">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import { getHandbookList } from '@/api/book'
import { getHandbookTree } from '@/api/book'
import { isEmpty } from '@/utils/tool'

export default {
  data () {
    return {
      loading: false,
      formData: {
        item_type: '0',
        item_content: null
      },
      rules: {
        item_type: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        item_content: [
          { required: true, message: '请输入检查内容', trigger: 'blur' }
        ]
      },
      treeProps: {
        label: 'enforce_content',
      },
      treeData: [],
      filterText: null,
      chooseTree: []
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted () {
    this.loadBooks()
  },
  methods: {
    disableTreeNode(list) {
      if (list) {
        const vm = this;
        list.map(item => {
          item.disabled = true;
          vm.disableTreeNode(item.children);
        });
      }
    },
    loadBooks () {
      this.loading = true
      getHandbookTree().then(res => {
        if (res) {
          for (let i = 0; i < res.length; i++) {
            const item = res[i];
            if (item.enforce_class.includes("消防许可及验收备案")) {
              item.disabled = true;
              this.disableTreeNode(item.children);
              break;
            }
          }
          this.treeData = res;
        }
        this.loading = false;
      });
      // getHandbookList({
      //   sort: 'sort asc',
      //   page: 1,
      //   size: 1000000,
      //   query: 'enforce_type==0'
      // }).then(res => {
      //   this.loading = false
      //   if (res && res.data) {
      //     this.handleBookDatas(res.data)
      //   }
      // })
    },
    // handleBookDatas (data) {
    //   const cls = new Set()
    //   data.map(item => {
    //     cls.add(item.enforce_class)
    //   })
    //   const list = [...cls]
    //   const res = []
    //   list.map(item => {
    //     const childs = data.filter(obj => item === obj.enforce_class)
    //     res.push({
    //       id: item,
    //       enforce_item: item,
    //       children: childs
    //     })
    //   })
    //   this.treeData = res
    // },
    filterNode (value, data) {
      if (!value) return true

      if (data.children) {
        return data.enforce_item.indexOf(value) !== -1
      }
      if (data.enforce_item) {
        return data.enforce_item.indexOf(value) !== -1
      }
      return true
    },
    handleCheckChange () {
      this.chooseTree = this.$refs.tree.getCheckedNodes(true)
    },
    handleCancel () {
      this.$emit('cancel')
    },
    resetFormData () {
      this.formData = {
        item_type: '0',
        item_content: null
      }
      this.chooseTree = []
      if (this.$refs.tree) {
        this.$refs.tree.setCheckedKeys([])
      }
    },
    handleConfirm () {
      if (this.formData.item_type === '1') {
        if (isEmpty(this.formData.item_content)) {
          this.$message.warning('请输入检查内容')
          return
        }

        this.$refs.itemForm.validate((valid) => {
          if (valid) {
            const obj = Object.assign({}, this.formData)
            obj.item_id = obj.id
            obj.enforce_class = '其他',
              obj.enforce_item = obj.item_content,
              obj.enforce_method = ''
            delete obj.id
            const list = [obj]
            this.$emit('addData', list)
            this.resetFormData()
          }
        })
      } else {
        if (this.chooseTree.length === 0) {
          this.$message.warning('请至少选择1个检查项')
        } else {
          // const obj = Object.assign({}, this.formData)
          // const list = []
          // this.chooseTree.map(item => {
          //   const data = {
          //     item_id: item.id,
          //     enforce_class: item.enforce_class,
          //     enforce_item: item.enforce_item,
          //     enforce_method: item.enforce_method
          //   }
          //   list.push(data)
          // })
          this.$emit('addData', this.chooseTree)
          // this.$emit('addData', list)
          this.resetFormData()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .node-form {
    padding: 20px 30px;

    .filter {
      display: flex;
      align-items: center;
    }

    .custom-tree {
      margin-top: 10px;
      margin-right: 10%;
      height: 300px;
      overflow: auto;
    }
  }

  .tools {
    border-top: 1px solid #F5F5F5;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;

    .sec {
      font-size: 15px;
      color: #565756;
      font-weight: bold;
      margin: 0 14px;

      .num {
        color: #409EFF;
        margin: 0 4px;
      }
    }
  }
</style>