<template>
  <div>
      <el-button  size="small" type="primary" clearable :disabled="disabled" @click="showSign">
        危險點評估
      </el-button>
    <!-- 規(guī)則綁定流程節(jié)點-->
    <el-dialog title="危險點評估" :visible.sync="show" v-if="show" width="700px" append-to-body>
      <el-form ref="formEvaluate" :model="formEvaluate"  label-width="80px">
        <el-form-item label="危險點">
          <el-input
            placeholder="輸入關(guān)鍵字進行檢索"
            clearable
            v-model="filterText">
          </el-input>
          <el-tree
            ref="Tree"
            :data="treeData"
            :show-checkbox="true"
            :check-strictly="true"
            node-key="id"
            default-expand-all
            :highlight-current="true"
            :expand-on-click-node="false"
            @node-click="nodeClick"
            :props="defaultProps"
            :check-on-click-node="true"
            @check="handleCheck"
            :filter-node-method="filterNode"
          >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                  <span class="custom-expand-icon" v-if="!data.children || data.children.length === 0">
                    <img src="@/assets/images/fl.png" class="icon" />
                  </span>
                  <span class="custom-expand-icon" v-else>
                    <img src="@/assets/images/home.png" class="icon" />
                  </span>
                  {{ data.treeName }}
                </span>
              </span>
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="saveGz">確 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';
import { deptTreeSelect } from "@/api/system/user";
import { selectPcModelByTableZb } from '@/api/index-analysis/indicator-maintenance'
import { doubleTicketAppraise } from '@/api/flowable/definition'
export default {
  name: 'tsSelectTree',
  components: { Treeselect },
  props: {
    value: {
      default:''
    },
    conf: {
      type: Object
    },
    disabled: {}
  },
  data() {
    return {
      currentValue: undefined,
      filterText: '',
      options: [],
      list: [],
      loading: false,
      show:false,
      cache: [],
      input_val: this.value,
      object:this.conf,
      formEvaluate:{
        formName:null,
        formId:null,
        nodeId:null,
        nodeName:null,
        lcName:null,
        lcId:null,
        tableZbbmId:null,
        tableZbbmIds:[],
      },
      //規(guī)則數(shù)據(jù)
      treeData:[],
      //選中的數(shù)據(jù)json數(shù)組
      jsonData:[],
      evaluateArr:[],
      defaultProps: {
        children: "children",
        label: "label",
        disabled: function (data, node) {//帶子級的節(jié)點不能選中
          if (data.children && data.children.length > 0) {
            return true
          } else {
            return false
          }
        }
      },
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val !== this.currentValue) {
          if (this.multiple) {
            if (Object.prototype.toString.call(val) === '[object String]') {
              try {
                this.currentValue = JSON.parse(val)
              } catch (e) {
                this.currentValue = val.split(',')
              }
            }
            if (Object.prototype.toString.call(val) === '[object Array]') {
              this.currentValue = val
            }
          } else {
            this.currentValue = val || undefined
          }
        }
      },
      immediate: true,
      deep: true
    },
    currentValue() {
      this.$emit('input', this.currentValue)
      this.$emit('change', this.currentValue)
    },
    filterText(val) {
      this.$refs.Tree.filter(val);
    }
  },
  created() {
    this.getDate()
    const object = this.object
    this.getTreeList()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.treeName.indexOf(value) !== -1;
    },
    handleCheck(data,node){
      this.evaluateArr = node.checkedNodes
    },
    // 點擊樹節(jié)點 多選邏輯todo
    nodeClick(data,node, indeterminate) {
      if(node.childNodes.length > 0){
        return
      }
    },
    cancel(){
      this.show = false
    },
    showSign() {
      this.show = true;
    },
    // 節(jié)點單擊事件
    handleNodeClick(data) {
      this.currentValue = data.label;
      sessionStorage.setItem('deptId',data.id)
      this.show = false
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.getDate(query)
        }, 500)
      } else {
        this.options = this.cache
      }
    },
    getDate(query) {
      deptTreeSelect().then((response) => {
        // 獲取樹形的部門數(shù)據(jù)
        this.options = response.data;
        sessionStorage.setItem('deptInfo',this.options && JSON.stringify(this.options))
      });
    },
    getTreeList() {
      const params = {
        tableZb:'WXDPG'
      };
      selectPcModelByTableZb(params).then((response) => {
        this.treeData = response.data;
      });
    },
    saveGz(){
      this.formEvaluate.tableZbbmId = ''
      this.formEvaluate.tableZbbmIds = []
      const arr = this.evaluateArr
      if(this.evaluateArr.length ==0){
        this.$message.warning('請選擇一條危險點')
        return
      }
    },
  }
}
</script>