<template>
  <div class="pop-select" @click="openDialog"></div>
  <my-dialog
    :visible="visible"
    header="成员列表"
    :width="700"
    :closeOnOverlayClick="false"
    @close="visible = false"
  >
    <div class="result-box"></div>
    <div class="list-box">
      <t-tabs v-model="type" theme="normal">
        <t-tab-panel
          v-for="item in tabList"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        >
          <div class="tab-content">
            <div class="left-tree" v-if="type == '1'">
              <t-tree :data="treeData" expand-all hover expandOnClickNode>
              </t-tree>
            </div>
            <div class="flat-list">
              <t-radio-group
                v-model="result"
                allow-uncheck
                name="person"
                :options="personOptions"
              ></t-radio-group>
            </div>
          </div>
        </t-tab-panel>
      </t-tabs>
    </div>
  </my-dialog>
</template>
<script setup name="POPSELECT">
import { ref, watch } from 'vue';
const { config, onChange } = defineProps(['config', 'onChange']);
//   onChange({ prop: config.binding, value: value.value });
const type = ref('1');

const visible = ref(false);
const openDialog = () => {
  visible.value = true;
};
const tabList = ref([
  { value: '1', label: '组织架构' },
  { value: '2', label: '成员' },
  { value: '3', label: '当前用户' },
]);
const treeData = ref([
  {
    value: '1',
    label: '全体成员',
    children: [
      {
        value: '2',
        label: '武汉启明泰和软件服务有限公司',
        children: [
          {
            value: '3',
            label: '销售部',
            children: [
              {
                value: '5',
                label: '直销一部',
              },
              {
                value: '6',
                label: '直销二部',
              },
            ],
          },
          {
            value: '4',
            label: '技术实施部',
          },
        ],
      },
    ],
  },
]);

const personOptions = ref([
  {
    value: '1',
    label: '刘洋',
  },
  {
    value: '2',
    label: '燕琴',
  },
  {
    value: '3',
    label: '罗识',
  },
]);
const result = ref('');

watch(visible, () => {
  type.value = '1';
});
</script>
<style lang="less" scoped>
.list-box {
  margin-top: 10px;
  border: 1px solid #ddd;
  .tab-content {
    height: 350px;
    display: flex;
    .left-tree {
      width: 50%;
      height: 100%;
      padding: 10px 10px 5px;
    }
    .flat-list {
      flex: 1;
    }
    .flat-list {
      height: 100%;
      padding: 10px 10px 5px;
      :deep(.t-radio-group) {
        width: 100%;
        .t-radio {
          margin-right: 0;
          display: block;
          width: 100%;
          margin-bottom: 4px;
          .t-radio__input {
            float: right;
            position: relative;
            top: 3px;
          }
          .t-radio__label {
            float: left;
          }
        }
      }
    }
    .left-tree {
      border-right: 1px solid #ddd;
    }
  }
}
.pop-select {
  width: 100%;
  height: 32px;
  border: 1px dashed #ddd;
  cursor: pointer;
}
.result-box {
  height: 40px;
  border: 1px dashed #ddd;
}
</style>
