<template>
  <div class="inputs ht-component">
    <el-dialog
      :title="dialogTitile"
      :visible.sync="dialogVisible"
      class="dialog-selector__wrapper"
      top="6vh"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :append-to-body="appendToBody"
      :destroy-on-close="destroyOnClose"
    >
      <el-container>
        <el-aside width="210px" class="left-aside">
          <el-card class="box-card org-find-card" shadow="never">
            <div slot="header" class="clearfix">
              <span>按组织查找</span>
            </div>
            <ht-select
              size="small"
              @change="changeDemension"
              v-model="currentDemension"
              :options="demensions"
              :props="{ key: 'id', value: 'demName' }"
              :remote-method="loadDemensions"
            />
            <ht-tree
              lazy
              :load="loadOrgTree"
              :data="orgs"
              :default-expand-all="false"
              :highlight-current="true"
              :props="{ children: 'children', label: 'name', isLeaf: 'leaf' }"
              :node-key="nodeKey"
              :default-expanded-keys="defaultExpandedKeys"
              ref="tree"
              class="org-tree"
              @node-click="handleNodeClick"
              accordion
            ></ht-tree>
          </el-card>
        </el-aside>
        <el-container>
          <el-main>
            <selector
              ref="selector"
              @load="load"
              :data="data"
              :pagination="pagination"
              :table-columns="tableColumns"
              :select-label="selectLabel"
              :quick-search-props="quickSearchProps"
              :single="single"
              :search-placeholder="searchPlaceholder"
              v-model="selectors"
            />
          </el-main>
        </el-container>
      </el-container>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="handleDialogSure"
          >确 定</el-button
        >
        <el-button size="small" @click="handleDialogCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import utils from '@/utils.js'
import Selector from '@/components/common/Selector.vue'
import { setTimeout } from 'timers'

export default {
  name: 'ht-org-post-dialog',
  props: {
    dialogTitile: {
      type: String,
      default: '对话框'
    },
    demensions: {
      type: Array,
      default: () => {
        return []
      }
    },
    orgs: {
      type: Array,
      default: () => {
        return []
      }
    },
    loadOrgTree: {
      type: Function
    },
    value: String,
    single: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableColumns: {
      type: Array,
      default: () => {
        return []
      }
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          page: 1,
          pageSize: 50,
          total: 0
        }
      }
    },
    selectLabel: {
      type: String,
      default: 'name'
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    defaultDemension: {
      type: [String, Number],
      default: ''
    },
    quickSearchProps: {
      type: String,
      required: true
    },
    nodeKey: {
      type: String,
      default: 'id'
    },
    defaultExpandedKeys: {
      type: Array,
      default() {
        return []
      }
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    },
    searchPlaceholder: {
      type: String,
      default: '名称、编码'
    }
  },
  components: {
    Selector
  },
  data() {
    return {
      inputName: null,
      selectors: [],
      dialogVisible: false,
      currentDemension: null
    }
  },
  watch: {
    defaultDemension: function(newVal, oldVal) {
      if (newVal && newVal != oldVal) {
        this.currentDemension = newVal
        this.changeDemension()
      }
    }
  },
  methods: {
    // 同步value到当前所选数据中
    showDialog(selectors) {
      this.dialogVisible = true
      this.loadDemensions()
      if (!selectors) {
        selectors = []
      }
      setTimeout(() => {
        this.$refs.selector.onShow(selectors)
      })
    },
    handleClose(done) {
      this.$refs.selector.onHide()
      done && done()
    },
    handleDialogSure() {
      this.dialogVisible = false
      this.$refs.selector.onHide(true)
      this.$emit('onConfirm', this.selectors)
    },
    handleDialogCancel() {
      this.dialogVisible = false
      this.$refs.selector.onHide()
    },
    handleRemove(item) {
      this.selectors.remove(item)
    },
    load(param, cb) {
      this.$emit('load', param, cb)
    },
    changeDemension() {
      this.$emit('changeDemension', this.currentDemension)
    },
    handleNodeClick(data) {
      this.$emit('loadListData', data)
    },
    loadDemensions() {
      this.$emit('loadDemensions')
    }
  }
}
</script>
<style lang="scss" scoped>
.inputs {
  display: block;
}

.el-select__tags {
  background: #fff;
  margin-left: 1px;
}

.el-select__tags_readonly {
  position: relative;
  top: 50%;
}

.el-input__inner[aria-invalid="true"] {
  border-color: #f56c6c;
}
div.org-find-card >>> .el-card__body {
  padding: 10px;
  max-height: 520px;
  overflow: auto;
}
</style>
