<template>
  <lrlayout style="background: #f1f2f5" :left="240">
    <template #left>
      <lrPanel title="列表关联字段" style="padding: 8px 0 0 0">
        <a-radio class="block-radio" :options="colslist" v-model="config.left.colField" />
      </lrPanel>
    </template>
    <lrPanel title="设置" style="padding: 8px 0 0 4px">
      <el-form style="padding: 16px; maxwidth: 400px" size="mini" ref="form" label-width="80px">
        <el-form-item label="树形标题">
          <el-input v-model="config.left.title" />
        </el-form-item>
        <div style="text-align: center; margin-bottom: 16px">
          <a-radio-group v-model="config.left.dataType" size="mini" @change="handleDataTypeChange">
            <a-radio-button label="1">静态数据</a-radio-button>
            <a-radio-button label="2">数据字典</a-radio-button>
            <a-radio-button label="3">数据源</a-radio-button>
          </a-radio-group>
        </div>
        <!--静态数据-->
        <div v-if="config.left.dataType == 1">
          <a-tree
            ref="tree"
            :data="config.left.options"
            default-expand-all
            draggable
            node-key="value"
            :expand-on-click-node="false"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span>
                  <a-button
                    type="text"
                    size="mini"
                    icon="el-icon-plus"
                    @click="handleNodeAdd(data)"
                  />
                  <a-button
                    class="danger"
                    type="text"
                    size="mini"
                    icon="el-icon-delete"
                    @click="handleNodeRemove(node, data)"
                  />
                </span>
              </span>
            </template>
          </a-tree>
          <div style="margin-left: 22px">
            <a-button
              size="mini"
              type="text"
              icon="el-icon-circle-plus-outline"
              @click="handleParentNodeAdd"
              >添加父级</a-button
            >
          </div>
        </div>
        <!--数据字典-->
        <div v-else-if="config.left.dataType == 2">
          <l-tree-select
            v-model="config.left.dataCode"
            :options="lr_dataItemClassifysTree"
            placeholder="请选择数据字典"
            size="mini"
          />
        </div>
        <!--远端数据-->
        <div v-else>
          <el-form-item label="数据源">
            <l-select
              v-model="config.left.dataCode"
              placeholder="请选择数据源"
              size="mini"
              :options="lr_dataSource"
              labelKey="f_Name"
              valueKey="f_Code"
              @change="handleDataSourceChange"
            />
          </el-form-item>
          <el-form-item label="关联字段">
            <l-select
              v-model="config.left.dataValueKey"
              placeholder="请选择选项关联字段"
              size="mini"
              :options="myColNameList"
            />
          </el-form-item>
          <el-form-item label="显示字段">
            <l-select
              v-model="config.left.dataLabelKey"
              placeholder="请选择选项显示字段"
              size="mini"
              :options="myColNameList"
            />
          </el-form-item>
          <el-form-item label="id字段">
            <l-select
              v-model="config.left.dataIdKey"
              placeholder="请选择选项id字段"
              size="mini"
              :options="myColNameList"
            />
          </el-form-item>
          <el-form-item label="pid字段">
            <l-select
              v-model="config.left.dataPIdKey"
              placeholder="请选择选项父级id字段"
              size="mini"
              :options="myColNameList"
            />
          </el-form-item>
        </div>
      </el-form>
    </lrPanel>

    <l-dialog
      :title="dialogTitle"
      v-model:visible="dialogVisible"
      :height="200"
      @close="closeDialog"
      @ok="handleDialogAdd"
    >
      <div class="l-from-body">
        <el-form
          :model="dialogForm"
          size="mini"
          :rules="dialogRules"
          ref="dialogForm"
          label-width="80px"
        >
          <el-form-item label="选项名" prop="label">
            <el-input v-model="dialogForm.label" />
          </el-form-item>
          <el-form-item label="选项值" prop="value">
            <el-input v-model="dialogForm.value" />
          </el-form-item>
        </el-form>
      </div>
    </l-dialog>
  </lrlayout>
</template>
<script lang="ts" setup>
  import { inject, defineProps } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import lrlayout from '@/components/lrLayout';
  import { BasicTree } from '@/components/Tree';
  import lrPanel from '@/components/lrPanel';

  import { columns } from './config.data';

  // 定义props,树目录
  const props = defineProps({
    colslist: {
      type: Object,
      default: () => ({}), // 设置默认值为一个空对象
    },
  });

  // config
  const config = inject('formConfig');

  let dialogTitle = '添加选项';
  let dialogVisible = false;
  const dialogForm = ref({
    label: '',
    value: '',
  });
  let dialogRules = {
    label: { required: true, message: '请输入选项名', trigger: 'null' },
    value: { required: true, message: '请输入选项值', trigger: 'null' },
  };
  let pData = undefined;

  function myColNameList() {
    if (config.left.dataCode) {
      const colNameList = config.left.dataCode;
      return colNameList.map((t) => {
        return { value: t, label: t };
      });
    } else {
      return [];
    }
  }
  // created() {
  // lr_loadDataItemClassifys();
  // lr_loadDataSourceList();
  // if (config.left.dataType == 3) {
  //   lr_loadDataSourceColNames(config.left.dataCode);
  // }
  // },
  // methods: {
  function handleDataTypeChange() {
    config.left.dataIdKey = '';
    config.left.dataPIdKey = '';

    config.left.dataCode = '';
    config.left.dataValueKey = '';
    config.left.dataLabelKey = '';
  }

  function handleParentNodeAdd() {
    pData = undefined;
    dialogTitle = '添加父级选项';
    dialogVisible = true;
  }
  function handleNodeAdd(data) {
    pData = data;
    dialogTitle = `添加【${data.label}】的子选项`;
    dialogVisible = true;
  }
  function handleNodeRemove(node, data) {
    const parent = node.parent;
    const children = parent.data.children || parent.data;
    const index = children.findIndex((d) => d.id === data.id);
    children.splice(index, 1);
  }

  // function handleDialogAdd() {
  //   dialogForm.validate((valid) => {
  //     if (valid) {
  //       const { label, value } = dialogForm;
  //       const node = $refs.tree.getNode(value);
  //       if (node) $message.error('选项值重复');
  //       else {
  //         const pData = pData;
  //         const newNode = {
  //           label,
  //           value: dialogInputType == 'number' ? Number(value) : value,
  //         };
  //         if (pData) {
  //           if (!pData.children) $set(pData, 'children', []);
  //           pData.children.push(newNode);
  //         } else {
  //           $set(config.left.options, config.left.options.length, newNode);
  //         }
  //         dialogVisible = false;
  //       }
  //     }
  //   });
  // }
  function closeDialog() {
    dialogForm.clearValidate();
    dialogForm.value = {};
  }

  function handleDataSourceChange(val) {
    config.left.dataValueKey = '';
    config.left.dataLabelKey = '';
    config.left.dataIdKey = '';
    config.left.dataPIdKey = '';

    if (!$validatenull(val)) {
      // lr_loadDataSourceColNames(val);
    }
  }
</script>
<style lang="scss">
  .block-radio {
    padding: 8px;
    box-sizing: border-box;
    .el-radio {
      display: block;
      margin-bottom: 8px;
    }
  }
</style>

<style lang="scss" scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
