<template>
  <div>
    <el-dialog
      title="药品类别"
      width="500px"
      :close-on-click-modal="false"
      :append-to-body="true"
      v-dialogDrag
      class="userDialog"
      :visible.sync="visible"
    >
      <el-container style="height: 500px">
        <el-container>
          <el-main>
            <el-row :gutter="10" class="content">
              <el-col :span="12">
                <el-input
                  placeholder="输入关键字进行过滤"
                  size="small"
                  v-model="filterText">
                </el-input>

                <el-tree
                  class="filter-tree"
                  :data="threedata"
                  :props="defaultProps"
                  node-key="id"
                  highlight-current
                  check-on-click-node
                  @node-click="clickTree"
                  :filter-node-method="filterNode"
                  ref="tree">
                  <span slot-scope="{ node, data}">
                    <span>{{data.code +' '+ node.label }}</span>
                  </span>
                </el-tree>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
      <span slot="footer">
        <el-button
          size="small"
          @click="visible = false"
          icon="el-icon-circle-close"
          >关闭</el-button
        >
        <el-button
          size="small"
          type="primary"
          icon="el-icon-circle-check"
          @click="doSubmit()"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDrug } from '@/api/requisition/basic'
export default {
  data() {
    return {
      loading: false,
      visible: false,
      filterText: '',
      threedata: [],
      defaultProps: {
        children: 'childrens',
        label: 'name'
      },
      // 判断是否为最末级节点
      // isLast: false,
      // 选中的节点
      choosePoint: {},
      // 多选数组
      chooseArr: []
    };
  },
  props: {},
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
  },
  methods: {
    init() {
      this.visible = true;
      this.filterText = ''
      this.$nextTick(() => {
        this.refreshList()
      });
    },
    // 获取数据列表
    refreshList(data) {
      this.loading = true;
      getDrug({}).then(res => {
        console.log('res',res)
        if(res.code === 200) {
          this.threedata = res.data.tableBody
        }
        this.loading = false;
      });
    },
    clickTree(data) {
      console.log('树形节点信息：',data)
      console.log('选择的数组：', this.$refs.tree.getCheckedNodes())
      this.choosePoint = data
      this.chooseArr = this.$refs.tree.getCheckedNodes()
    },
    filterNode(value, data) {
      // console.log('value', value)
      // console.log('data', data)
        if (!value) return true;
        return data.name.indexOf(value) !== -1 || data.code.indexOf(value) !== -1
    },
    doSubmit() {
      console.log('子组件选择的数据',this.choosePoint)
      this.$emit("doSubmit", this.choosePoint);
      // console.log('子组件选择的数据',this.chooseArr)
      // this.$emit("doSubmit", this.chooseArr);
      this.visible = false;
    },
  },
};
</script>
<style lang="scss">
.userDialog {
  .el-dialog__body {
    padding: 10px 0px 0px 10px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
  .el-main {
    padding: 20px 20px 5px 20px;
    .el-pagination {
      margin-top: 5px;
    }
  }
}
</style>