<template>
  <div class="random">
    <el-row>
      <el-col :span="6" class="random-tree">
        <div class="option">
          <div class="header">
            <div class="title" :style="{ fontSize: '16px' }">
              <span>|</span>
              <span>机构层级展示</span>
            </div>
          </div>
          <slot></slot>
        </div>
        <div style="padding: 0 15px;">
          <el-input v-model="filterText" placeholder="输入关键字进行过滤" style="margin-bottom: 5px;"></el-input>
          <el-tree
            :data="orgOptions"
            :props="orgProps"
            @node-click="clickOrg"
            :filter-node-method="filterNode"
            ref="tree"
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="17" style="padding-left: 10px;">
        <random-rule-setting-option
          ref="option"
          :enforce_org="enforce_org"
          @query="handleQuery"
          @export="handleExport"
        ></random-rule-setting-option>
        <random-rule-setting-table ref="table"></random-rule-setting-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import RandomRuleSettingOption from './component/RandomRuleSettingOption.vue'
import RandomRuleSettingTable from './component/RandomRuleSettingTable.vue'

import { orgMixin } from '@/mixin/org';

export default {
  components: {
    RandomRuleSettingOption,
    RandomRuleSettingTable
  },
  mixins: [orgMixin],
  data() {
    return {
      filterText: '',
      enforce_org: {},
    }
  },
  mounted() {
    this.loadOrgTree()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    resetForm() {
      if (this.$refs.table) {
        this.$refs.table.resetForm()
      }
    },
    handleQuery(data) {
      if (this.$refs.table) {
        this.$refs.table.resetForm(data)
      }
    },
    handleExport(data) {
      if (this.$refs.table) {
        this.$refs.table.export(data)
      }
    },
    clickOrg(obj, node, el) {
      if (node.isLeaf) {
        let enforce_org_id = node.data.orgId
        this.enforce_org.enforce_org_id = enforce_org_id
        if (this.$refs.table) {
          this.$refs.table.resetForm("enforce_org_id=='" + enforce_org_id + "'")
        }
        if (this.$refs.option) {
          this.$refs.option.clearYear()
        }
      }
    },
    filterNode(value, data) {
      if (!value) {
        return true
      }
      // console.log('data', data, 'value', value)
      return data.enforce_org_name.indexOf(value) !== -1
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.option {
  padding: 16px 16px 0;
  background-color: #ffffff;
  border-radius: 10px;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .title {
    color: #000000;
    margin-bottom: 15px;
    & > span:first-child {
      color: $blueColor;
      font-weight: bolder;
      margin-right: 8px;
    }
  }
}

.random {
  &-tree {
    background-color: #fff;
    max-height: 785px;
    overflow: auto;
  }
}
</style>
