<template>
  <div style="display: flex">
    <div class="box">
      <el-card>
        <span>单位</span>
        <el-select
          v-model="value"
          placeholder="请选择"
          style="margin-left: 20px"
          @change="secltchang"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.displayName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <div>
          <CustomerOrgTree></CustomerOrgTree>
          <UnitGroupCategory></UnitGroupCategory>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import CustomerOrgTree from "../../components/unitGrouping/unitGroupingTable.vue";
import UnitGroupCategory from "../../components/unitGrouping/unitGroupCategory.vue";
import { mapState } from "vuex";
import { getapi } from "@/api/api";
export default {
  components: {
    CustomerOrgTree,
    UnitGroupCategory,
  },
  data() {
    return {
      options: [],
      value: "",
    };
  },
  computed: {
    ...mapState(["personnelUnit"]),
  },
  created() {
    this.getitemtype();
  },
  methods: {
      
    secltchang(v) {
      this.personnelUnit.id=v
      console.log(this.personnelUnit);
      getapi(`/api/app/customer-org-group/in-customer-org-id/${v}`).then(
        (res) => {
          this.personnelUnit.personnelgrouping = res.data;
        }
      );
      console.log(v);
    },
    //获取单位列表
    getitemtype() {
      getapi("/api/app/customer-org/parent-all").then((res) => {
        this.options = res.data;
      });
    },
  },
};
</script>
<style scoped>
.box {
  width: 100%;
}
</style>