<template>
  <div class="inputs">
    <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="名称、编码"
              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
    }
  },
  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>
