<template>
  <div class="form-right">
    <div class="form-right-container" style="padding-top: 12px" v-show="!showBindParams">
      <a-empty class="hint-box" v-if="!formConfig.currentItem['itemId']" description="未选择控件" />
      <a-tabs v-model:activeKey="formConfig.activeKey" class="devops-tabs">
        <a-tab-pane forceRender :key="1" tab="数据">
          <a-form layout="vertical" v-if="formConfig.currentItem['itemId']">
            <a-collapse v-model:activeKey="collapseKey" ghost expandIconPosition="right">
              <a-collapse-panel key="1" header="基本属性">
                <a-form-item label="组件id:">
                  <a-input v-model:value="formConfig.currentItem.itemId" placeholder="请输入组件id" disabled />
                </a-form-item>
                <a-form-item label="组件类型:">
                  <a-input v-model:value="formConfig.currentItem.componentCode" placeholder="请输入组件类型" allowClear disabled />
                </a-form-item>
                <a-form-item>
                  <template #label>
                    <span>组件值类型:</span>
                    <a-tooltip>
                      <template #title>
                        <div>
                          例如：
                          <div v-html="getComponentDemo()"></div>
                        </div>
                      </template>
                      <question-circle-filled style="margin: 0 0 0px 10px"></question-circle-filled>
                    </a-tooltip>
                  </template>
                  <a-input v-model:value="componentTypeName" placeholder="请输入组件值类型" allowClear disabled />
                </a-form-item>
                <a-form-item>
                  <template #label>
                    <span>权限编码:</span>
                    <a-tooltip>
                      <template #title> 权限编码必须是大写字母，否则不生效 </template>
                      <question-circle-filled style="margin: 0 0 0px 10px"></question-circle-filled>
                    </a-tooltip>
                  </template>
                  <a-input v-model:value="formConfig.currentItem.permissionCode" placeholder="请输入权限编码" allowClear />
                </a-form-item>
              </a-collapse-panel>
              <a-collapse-panel key="2" header="绑定属性">
                <a-form-item
                  label="是否绑定属性:"
                  class="form-row"
                  v-if="!commonHideCodeList.includes(formConfig.currentItem.componentCode)"
                >
                  <a-checkbox v-model:checked="formConfig.currentItem.bindFieldFlag" class="form-row-top"></a-checkbox>
                </a-form-item>
                <a-form-item
                  label="绑定属性:"
                  class="form-row"
                  v-if="!['title', 'divide-line', 'pure-text', 'collapse', 'grid'].includes(formConfig.currentItem.componentCode)"
                >
                  <a-button class="border-radius bind-params" @click="showBindParams = true">绑定属性</a-button>
                </a-form-item>
              </a-collapse-panel>
              <a-collapse-panel
                key="3"
                header="组件属性"
                v-if="
                  formConfigPath &&
                  [
                    'select',
                    'radio',
                    'checkbox',
                    'custom-select',
                    'tree-select',
                    'transfer',
                    'select-modal',
                    'tree',
                    'link-select',
                    'view-select',
                    'table'
                  ].includes(formConfig.currentItem.componentCode)
                "
              >
                <component :is="formConfigPath" v-if="formConfigPath"></component>
              </a-collapse-panel>
              <a-collapse-panel key="4" header="数据加载">
                <a-form-item label="数据加载:">
                  <setting-outlined class="setting-btn" @click="showDataLoading = true" />
                  <div class="data-load" v-if="formConfig?.currentItem?.formItemDataLoad?.dataLoadType">
                    <div class="data-load-h">
                      <span v-if="formConfig.currentItem?.formItemDataLoad?.dataLoadType == 1">静态数据</span>
                      <span v-if="formConfig.currentItem?.formItemDataLoad?.dataLoadType == 2">API调用</span>
                      <span v-if="formConfig.currentItem?.formItemDataLoad?.dataLoadType == 3">当前用户信息</span>
                    </div>
                  </div>
                </a-form-item>
              </a-collapse-panel>
            </a-collapse>
          </a-form>
        </a-tab-pane>
        <a-tab-pane forceRender :key="2" tab="样式">
          <a-form layout="vertical" v-if="formConfig.currentItem['itemId']">
            <a-collapse v-model:activeKey="collapseKey" ghost expandIconPosition="right">
              <a-collapse-panel key="5" header="基本">
                <a-form-item label="Label名称:">
                  <a-input v-model:value="formConfig.currentItem.itemLabelName" placeholder="请输入Label名称" allowClear />
                </a-form-item>
                <a-form-item
                  label="Label标签是否显示:"
                  class="form-row"
                  v-if="!commonHideCodeList.includes(formConfig.currentItem.componentCode)"
                >
                  <a-checkbox v-model:checked="formConfig.currentItem.itemLabelShowFlag" class="form-row-top"></a-checkbox>
                </a-form-item>
                <a-form-item label="字段占比:" v-show="props.equipmentType == '1'">
                  <a-radio-group buttonStyle="solid" v-model:value="formConfig.currentItem.itemColumnNumber" class="fleid-col">
                    <a-radio-button :value="12">1/2</a-radio-button>
                    <a-radio-button :value="8"> 1/3 </a-radio-button>
                    <a-radio-button :value="6"> 1/4 </a-radio-button>
                    <a-radio-button :value="16"> 2/3 </a-radio-button>
                    <a-radio-button :value="24"> 1 </a-radio-button>
                  </a-radio-group>
                </a-form-item>
                <a-form-item
                  label="组件高度（px）:"
                  v-if="['json', 'tree', 'carousel', 'transfer', 'dashboard'].includes(formConfig.currentItem.componentCode)"
                >
                  <a-input-number
                    v-model:value="formConfig.currentItem.itemHeight"
                    class="w-full"
                    placeholder="请输入组件高度"
                    allowClear
                  />
                </a-form-item>
              </a-collapse-panel>
              <a-collapse-panel key="6" header="注释">
                <a-form-item label="是否注释:" class="form-row" v-if="!commonHideCodeList.includes(formConfig.currentItem.componentCode)">
                  <a-checkbox v-model:checked="formConfig.currentItem.itemTipFlag" class="form-row-top"></a-checkbox>
                </a-form-item>
                <a-form-item label="注释内容:">
                  <a-input v-model:value="formConfig.currentItem.itemTipContent" placeholder="请输入注释内容" allowClear />
                </a-form-item>
              </a-collapse-panel>
              <a-collapse-panel key="7" header="间距">
                <a-form-item label="组件上间隙:" class="form-row">
                  <a-input-number v-model:value="formConfig.currentItem.formItemStyle.marginTop" class="form-row-top" style="width: 100%" />
                </a-form-item>
                <a-form-item label="组件右间隙:" class="form-row">
                  <a-input-number
                    v-model:value="formConfig.currentItem.formItemStyle.marginRight"
                    class="form-row-top"
                    style="width: 100%"
                  />
                </a-form-item>
                <a-form-item label="组件下间隙:" class="form-row">
                  <a-input-number
                    v-model:value="formConfig.currentItem.formItemStyle.marginBottom"
                    class="form-row-top"
                    style="width: 100%"
                  />
                </a-form-item>
                <a-form-item label="组件左间隙:" class="form-row">
                  <a-input-number
                    v-model:value="formConfig.currentItem.formItemStyle.marginLeft"
                    class="form-row-top"
                    style="width: 100%"
                  />
                </a-form-item>
              </a-collapse-panel>
              <a-collapse-panel key="8" header="其他">
                <a-form-item label="是否隐藏:" class="form-row">
                  <a-checkbox v-model:checked="formConfig.currentItem.itemHiddenFlag" class="form-row-top"></a-checkbox>
                </a-form-item>
                <a-form-item label="是否可编辑:" class="form-row">
                  <a-checkbox v-model:checked="formConfig.currentItem.itemEditFlag" class="form-row-top"></a-checkbox>
                </a-form-item>
                <a-form-item
                  label="是否多选:"
                  class="form-row"
                  v-if="
                    [
                      'tree',
                      'select',
                      'upload',
                      'select-user',
                      'select-org',
                      'select-role',
                      'select-dict',
                      'select-modal',
                      'select-position',
                      'custom-select',
                      'tree-select',
                      'link-select',
                      'view-select',
                      'upload-pic'
                    ].includes(formConfig.currentItem.componentCode)
                  "
                >
                  <a-checkbox
                    v-model:checked="formConfig.currentItem.itemMultipleChoiceFlag"
                    class="form-row-top"
                    @change="itemMultipleChoiceFlagChange"
                  ></a-checkbox>
                </a-form-item>
                <a-form-item label="占位符文本:">
                  <a-input v-model:value="formConfig.currentItem.placeholderContent" placeholder="请输入占位符文本" allowClear />
                </a-form-item>
              </a-collapse-panel>
              <a-collapse-panel
                key="3"
                header="组件属性"
                v-if="
                  formConfigPath &&
                  [
                    'pure-text',
                    'title',
                    'divide-line',
                    'step',
                    'carousel',
                    'breadcrumb',
                    'modal-prompt',
                    'date',
                    'datetime',
                    'grid'
                  ].includes(formConfig.currentItem.componentCode)
                "
              >
                <component :is="formConfigPath" v-if="formConfigPath"></component>
              </a-collapse-panel>
            </a-collapse>
          </a-form>
        </a-tab-pane>
        <a-tab-pane forceRender :key="3" tab="事件">
          <a-form layout="vertical" v-if="formConfig.currentItem['itemId']">
            <a-collapse v-model:activeKey="collapseKey" ghost expandIconPosition="right">
              <a-collapse-panel key="9" header="事件">
                <a-form-item label="事件列表:">
                  <setting-outlined class="setting-btn" @click="showBindEvent = true" />
                  <div class="event-list">
                    <a-input
                      v-model:value="eventNameList[eIndex]"
                      v-for="(e, eIndex) in eventNameList"
                      :key="eIndex"
                      readonly
                      placeholder="请选择"
                      @click="showBindEvent = true"
                    ></a-input>
                    <a-input v-if="eventNameList?.length == 0" readonly placeholder="请选择" @click="showBindEvent = true"></a-input>
                  </div>
                </a-form-item>
              </a-collapse-panel>
            </a-collapse>
          </a-form>
        </a-tab-pane>
        <a-tab-pane forceRender :key="4" tab="校验">
          <a-form layout="vertical" v-if="formConfig.currentItem['itemId']">
            <a-collapse v-model:activeKey="collapseKey" ghost expandIconPosition="right">
              <a-collapse-panel key="10" header="校验">
                <a-form-item label="是否必填:" class="form-row" v-if="!commonHideCodeList.includes(formConfig.currentItem.componentCode)">
                  <a-checkbox v-model:checked="formConfig.currentItem.itemRequiredFlag" class="form-row-top">设为必填</a-checkbox>
                </a-form-item>
                <a-form-item label="内容校验类型:">
                  <a-select
                    v-model:value="formConfig.currentItem.contentValidateType"
                    placeholder="请选择内容校验类型"
                    allowClear
                    style="width: 100%"
                  >
                    <a-select-option :value="1">常用格式校验</a-select-option>
                    <a-select-option :value="2">基于正则表达式校验</a-select-option>
                    <a-select-option :value="3">基于js校验</a-select-option>
                    <a-select-option :value="4">基于后台接口校验</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="格式选择:" v-if="formConfig.currentItem?.contentValidateType == 1">
                  <a-select v-model:value="formConfig.currentItem.formatType" placeholder="请选择格式选择" allowClear style="width: 100%">
                    <a-select-option :value="10">手机号</a-select-option>
                    <a-select-option :value="20">邮箱</a-select-option>
                    <a-select-option :value="30">身份证</a-select-option>
                    <a-select-option :value="40">网址</a-select-option>
                    <a-select-option :value="50">银行卡</a-select-option>
                    <a-select-option :value="60">金额</a-select-option>
                    <a-select-option :value="70">纯数字</a-select-option>
                    <a-select-option :value="80">纯英文</a-select-option>
                    <a-select-option :value="90">纯中文</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="正则表达式:" v-if="formConfig.currentItem?.contentValidateType == 2">
                  <a-textarea v-model:value="formConfig.currentItem.regexExpression" placeholder="请输入" allowClear :rows="4" />
                </a-form-item>
                <a-form-item label="js代码:" v-if="formConfig.currentItem?.contentValidateType == 3">
                  <a-textarea v-model:value="formConfig.currentItem.jsValidateCode" placeholder="请输入" allowClear :rows="4" />
                </a-form-item>
                <a-form-item label="接口url:" v-if="formConfig.currentItem?.contentValidateType == 4">
                  <a-input v-model:value="formConfig.currentItem.backendValidateUrl" allowClear placeholder="请输入" />
                </a-form-item>
                <a-form-item label="参数名:" v-if="formConfig.currentItem?.contentValidateType == 4">
                  <a-input v-model:value="formConfig.currentItem.backendValidateParamName" allowClear placeholder="请输入" />
                </a-form-item>
                <a-form-item label="自定义校验错误提示:">
                  <a-input v-model:value="formConfig.currentItem.validateErrorTip" placeholder="请输入" allowClear />
                </a-form-item>
              </a-collapse-panel>
              <a-collapse-panel
                key="11"
                header="针对数字的校验"
                v-if="['dashboard', 'number'].includes(formConfig.currentItem.componentCode)"
              >
                <NumberConfig />
              </a-collapse-panel>
              <a-collapse-panel
                key="12"
                header="针对文件上传的校验"
                v-if="['upload', 'upload-pic'].includes(formConfig.currentItem.componentCode)"
              >
                <a-form-item label="文件类型:">
                  <a-select
                    v-model:value="formConfig.currentItem.formItemFile.fileTypeLimitList"
                    placeholder="请选择类型"
                    style="width: 100%"
                    mode="tags"
                    :options="options"
                  >
                  </a-select>
                </a-form-item>
                <a-form-item label="文件大小:">
                  <a-input-number
                    v-model:value="formConfig.currentItem.formItemFile.fileSizeLimitKb"
                    placeholder="请输入"
                    allowClear
                    style="width: 100%"
                  />
                </a-form-item>
                <a-form-item label="文件数量:">
                  <a-input-number
                    v-model:value="formConfig.currentItem.formItemFile.maxUploadCount"
                    placeholder="请输入"
                    allowClear
                    style="width: 100%"
                  />
                </a-form-item>
              </a-collapse-panel>
            </a-collapse>
          </a-form>
        </a-tab-pane>
        <a-tab-pane forceRender :key="5" tab="其他">
          <a-form layout="vertical" v-if="formConfig.currentItem?.formViewConfig">
            <a-collapse v-model:activeKey="collapseKey" ghost expandIconPosition="right">
              <a-collapse-panel key="13" header="其他">
                <a-form-item label="是否列表展示：" class="form-row">
                  <vxe-switch v-model="formConfig.currentItem.formViewConfig.showSelectColumn"></vxe-switch>
                </a-form-item>
                <a-form-item label="是否查询条件展示：" class="form-row">
                  <vxe-switch v-model="formConfig.currentItem.formViewConfig.openQueryParam"></vxe-switch>
                </a-form-item>
              </a-collapse-panel>
            </a-collapse>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="form-right-container bind-params" v-show="showBindParams">
      <a-form layout="vertical">
        <a-form-item label="" class="form-row">
          <a-button class="border-radius" type="primary" @click="showBindParams = false"><RollbackOutlined />返回</a-button>
        </a-form-item>
        <a-form-item label="绑定字段:" name="fieldCode" v-if="formConfig.currentItem['itemId']" style="position: relative">
          <a class="refresh-btn" @click="refresh">刷新</a>
          <div v-for="fieldItem in bindFieldList" :key="fieldItem.fieldId">
            <div class="sheet-title">{{ fieldItem.metaModelName }}：</div>
            <a-popover v-for="mfItem in fieldItem.metaFieldList" :key="mfItem.currentDefinitionId" placement="left">
              <template #content>
                <a-card :title="mfItem.fieldCode" style="width: 250px !important">
                  <p>展示名称：{{ mfItem.description }}</p>
                  <p style="word-break: break-word">属性编码：{{ mfItem.fieldCode }}</p>
                  <p>是否必填：{{ mfItem.notEmptyFlag == 'Y' ? '是' : '否' }}</p>
                  <p>
                    类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型：
                    <a-tag color="blue" v-if="mfItem.fieldType">{{ getFieldTypeName(mfItem.fieldType) }}</a-tag>
                  </p>
                  <p>
                    实际字段：
                    <a-tag color="blue" v-if="mfItem.realFlag == 'Y'">是</a-tag>
                    <a-tag color="red" v-if="mfItem.realFlag == 'N'">否</a-tag>
                  </p>
                </a-card>
              </template>
              <a-button
                @click="fieldCodeClick(fieldItem, mfItem)"
                :style="
                  formConfig.currentItem?.fieldCode == mfItem.fieldCode && formConfig.currentItem?.metaModelCode == fieldItem.metaModelCode
                    ? 'width: 100%; z-index:2;color:#fff;background-color:#1890ff;border-color:#1890ff;'
                    : 'width: 100%; z-index:2;'
                "
                :class="[{ 'border-red': mfItem.notEmptyFlag == 'Y' }]"
                class="radio-select"
              >
                {{ mfItem.fieldCode }}
              </a-button>
            </a-popover>
          </div>
          <a-empty v-show="!bindFieldList || bindFieldList?.length == 0" style="margin-top: 200px">
            <template #description>
              <span style="color: #cfcfcf">当前业务无数据表，请添加数据表</span>
            </template>
          </a-empty>
        </a-form-item>
      </a-form>
    </div>

    <!-- 绑定事件弹框 -->
    <FormCustomEvent
      v-model:visible="showBindEvent"
      v-if="showBindEvent"
      :formConfig="formConfig"
      v-model:currentItem="formConfig.currentItem"
    ></FormCustomEvent>

    <!-- 数据加载 -->
    <DataLoadingConfig v-model:visible="showDataLoading" v-if="showDataLoading" :formConfig="formConfig"></DataLoadingConfig>
  </div>
</template>

<script setup name="FormRight">
import { message } from 'ant-design-vue';
import { inject, watch, shallowRef, defineAsyncComponent, onMounted, ref, computed } from 'vue';
import FormCustomEvent from './diaolog/custom-event.vue';
import DataLoadingConfig from './diaolog/data-loading-config.vue';

const NumberConfig = defineAsyncComponent(() => import('./attr/number.vue'));

const props = defineProps({
  // 设备类型
  equipmentType: {
    type: String,
    default: '1'
  },
  componentNameList: Array,
  getBindFieldList: Function
});

const formConfig = inject('formConfig');
// 绑定字段列表
const bindFieldList = inject('bindFieldList');
// 是否绑定属性
const showBindParams = ref(false);
// 是否显示绑定事件弹框
const showBindEvent = ref(false);

// 组件路径
const formConfigPath = shallowRef('');

const commonHideCodeList = ref(['grid']);

// 所有字段列表
const allFieldList = computed(() => {
  let arr = [];

  if (bindFieldList.value?.length) {
    arr = bindFieldList.value.map(item => item.metaFieldList.map(fItem => fItem)).flat();
  }
  return arr;
});

// 组件值类型
const componentTypeName = computed(() => {
  let name = '';
  if (formConfig.value?.currentItem) {
    const { componentCode } = formConfig.value?.currentItem;

    if (['number', 'progress'].includes(componentCode)) {
      name = '数字';
    } else if (
      [
        'upload',
        'upload-pic',
        'select',
        'custom-select',
        'tree-select',
        'select-user',
        'select-org',
        'select-role',
        'select-position',
        'select-dict'
      ].includes(componentCode)
    ) {
      name = '字符串/数组字符串';
    } else if (
      ['city', 'tree', 'checkbox', 'date-range', 'org-user', 'view-select', 'select-modal', 'link-select'].includes(componentCode)
    ) {
      name = '数组字符串';
    } else if (['table'].includes(componentCode)) {
      name = '字符串数组';
    } else {
      name = '字符串';
    }
  }
  return name;
});

// 折叠列表
const collapseKey = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13']);

const eventNameList = computed(() => {
  let nameList = [];
  if (formConfig.value?.currentItem?.formItemEvent) {
    const { onClickEventCode, onChangeEventCode, onBlurEventCode, onFocusEventCode, onInputEventCode } =
      formConfig.value?.currentItem?.formItemEvent;

    if (onClickEventCode) {
      nameList.push(`点击事件`);
    }
    if (onChangeEventCode) {
      nameList.push(`数据改变事件`);
    }
    if (onBlurEventCode) {
      nameList.push(`失去焦点`);
    }
    if (onFocusEventCode) {
      nameList.push(`获取焦点`);
    }
    if (onInputEventCode) {
      nameList.push(`输入值`);
    }
  }
  return nameList;
});

const options = ref([]);

const showDataLoading = ref(false);

watch(
  () => formConfig.value?.currentItem?.itemId,
  val => {
    if (val) {
      buildFormConfigPath();
    }
  },
  { deep: true }
);

onMounted(() => {
  buildFormConfigPath();
});
// 构造表单项属性组件
const buildFormConfigPath = () => {
  let componentName = formConfig.value.currentItem.componentCode;

  if (['upload', 'upload-pic'].includes(componentName) && formConfig.value.currentItem?.formItemFile) {
    options.value = formConfig.value.currentItem?.formItemFile?.fileTypeLimitList?.map(item => {
      return {
        value: item,
        label: item
      };
    });
  }
  let arr = [
    'select',
    'radio',
    'checkbox',
    'custom-select',
    'tree-select',
    'transfer',
    'select-modal',
    'tree',
    'link-select',
    'view-select',
    'table',
    'pure-text',
    'title',
    'divide-line',
    'step',
    'carousel',
    'breadcrumb',
    'modal-prompt',
    'date',
    'datetime',
    'grid'
  ];
  if (arr.includes(formConfig.value.currentItem.componentCode)) {
    if (['tree', 'transfer', 'select-modal'].includes(formConfig.value.currentItem.componentCode)) {
      componentName = 'tree-select';
    } else if (['select', 'radio', 'checkbox'].includes(formConfig.value.currentItem.componentCode)) {
      componentName = 'select';
    } else if (['datetime'].includes(formConfig.value.currentItem.componentCode)) {
      componentName = 'date';
    }
    formConfigPath.value = defineAsyncComponent(() => import(`./attr/${componentName}.vue`));
  } else {
    formConfigPath.value = '';
  }
};

// 字段选中
const fieldCodeClick = (fieldItem, mfItem) => {
  let isError = false;
  if (componentTypeName.value == '数字') {
    if (![20, 30].includes(mfItem.fieldType)) {
      isError = true;
    }
  } else if (componentTypeName.value == '字符串数组') {
    if (mfItem.realFlag == 'Y') {
      isError = true;
    }
  } else if (componentTypeName.value == '字符串/数组字符串') {
    if (formConfig.value.currentItem.itemMultipleChoiceFlag) {
      if (![10, 11, 12].includes(mfItem.fieldType)) {
        isError = true;
      }
    } else {
      // 单选
      if (![10, 11, 12, 20, 21, 30, 50, 51, 52].includes(mfItem.fieldType)) {
        isError = true;
      }
    }
  } else {
    if (![10, 11, 12, 20, 21, 30, 50, 51, 52].includes(mfItem.fieldType)) {
      isError = true;
    }
  }

  if (isError) {
    message.warning('绑定属性的字段类型不匹配，请检查后在重新操作!');
  } else {
    if (!formConfig.value.currentItem.fieldCode && props.componentNameList.includes(formConfig.value.currentItem.itemLabelName)) {
      let itemLabelName = mfItem.description;
      if (mfItem.description.includes(':')) {
        itemLabelName = mfItem.description.split(':')[0];
      } else if (mfItem.description.includes('：')) {
        itemLabelName = mfItem.description.split('：')[0];
      } else if (mfItem.description.includes('，')) {
        itemLabelName = mfItem.description.split('，')[0];
      } else if (mfItem.description.includes(',')) {
        itemLabelName = mfItem.description.split(',')[0];
      }
      formConfig.value.currentItem.itemLabelName = itemLabelName;
    }
    formConfig.value.currentItem.metaModelCode = fieldItem.metaModelCode;
    formConfig.value.currentItem.fieldCode = mfItem.fieldCode;
  }
};

// 多选改变
const itemMultipleChoiceFlagChange = ({ target }) => {
  const { checked } = target;
  let itemFieldData = allFieldList.value.find(item => item.fieldCode == formConfig.value.currentItem.fieldCode);
  // 如果是单选时，加了绑定（整形、长整型、浮点型、日期、时间、日期时间），那么点多选复选框时，应当直接取消绑定字段
  if (checked && itemFieldData && [20, 21, 30, 50, 51].includes(itemFieldData.fieldType)) {
    formConfig.value.currentItem.fieldCode = null;
  }
};

// 获取字段类型名称
const getFieldTypeName = type => {
  let name = '';
  if (type == 10) {
    name = '可变字符串';
  } else if (type == 11) {
    name = '超长字符串';
  } else if (type == 12) {
    name = '固定长度字符串';
  } else if (type == 20) {
    name = '整型';
  } else if (type == 21) {
    name = '长整型';
  } else if (type == 30) {
    name = '浮点数';
  } else if (type == 50) {
    name = '日期时间';
  } else if (type == 51) {
    name = '日期';
  } else if (type == 52) {
    name = '时间';
  } else if (type == 60) {
    name = '对象';
  } else if (type == 61) {
    name = '列表（集合）';
  }
  return name;
};

// 获取demo
const getComponentDemo = () => {
  let demoValue = '';
  if (formConfig.value?.currentItem) {
    const { componentCode } = formConfig.value?.currentItem;
    if (['input', 'textarea', 'pure-text', 'json'].includes(componentCode)) {
      demoValue = `"这是一个示例字符串"`;
    } else if (['number', 'progress'].includes(componentCode)) {
      demoValue = `10`;
    } else if (componentCode == 'password') {
      demoValue = `"******"`;
    } else if (['upload', 'upload-pic', 'select', 'custom-select', 'tree-select'].includes(componentCode)) {
      demoValue = `
      <div>单选: "17811338"</div>
      <div>多选: "['17811338', '17811339']"</div>
      `;
    } else if (componentCode == 'radio') {
      demoValue = `"17811338"`;
    } else if (['checkbox', 'city', 'link-select', 'tree'].includes(componentCode)) {
      demoValue = `"['17811338', '17811339']"`;
    } else if (componentCode == 'switch') {
      demoValue = `"Y"`;
    } else if (componentCode == 'date') {
      demoValue = `"2024-01-01"`;
    } else if (componentCode == 'time') {
      demoValue = `"07:10:26"`;
    } else if (componentCode == 'datetime') {
      demoValue = `"2024-01-01 07:10:26"`;
    } else if (componentCode == 'date-range') {
      demoValue = `"['2024-01-01', '2024-01-02']"`;
    } else if (componentCode == 'phone') {
      demoValue = `"18727396542"`;
    } else if (componentCode == 'email') {
      demoValue = `"1239382@qq.com"`;
    } else if (componentCode == 'idcard') {
      demoValue = `"12323123123123123132"`;
    } else if (['select-user', 'select-org', 'select-role', 'select-position', 'select-dict'].includes(componentCode)) {
      demoValue = `
      <div>单选: "17811338"</div>
      <div>多选: "[
        { id: '17811338', name: '示例字名称1' }, 
        {  id: '17811339', name: '示例字名称2' }]"</div>
      `;
    } else if (['view-select', 'select-modal'].includes(componentCode)) {
      demoValue = `
      "[
        { id: '17811338', name: '示例字名称1' }, 
        {  id: '17811339', name: '示例字名称2' }]"
      `;
    } else if (['org-user'].includes(componentCode)) {
      demoValue = `
      "[
        { id: '17811338', name: '***公司', type: '1' }, 
        {  id: '17811339', name: '综合部', type: '2' },
        {  id: '17811340', name: '张三', type: '3' }]"
      `;
    } else if (['table'].includes(componentCode)) {
      demoValue = `
      "[
        { userId: '17811338', userName: '张三', sex: 'F' },
      `;
    } else if (['map'].includes(componentCode)) {
      demoValue = `"北京市-朝阳区"`;
    }
  }
  return demoValue;
};

const refresh = () => {
  props.getBindFieldList();
};
</script>

<style scoped lang="less">
.fleid-col {
  display: flex;
  width: 100%;
  .ant-radio-button-wrapper {
    flex: 1;
    text-align: center;
  }
}
.sheet-title {
  margin: 10px 0;
}
.radio-select {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bind-params {
  background-color: #7948ea;
  color: #fff;
  margin-left: 10px;
  margin-top: -10px;
}
body {
  overflow: hidden !important;
}
.refresh-btn {
  position: absolute;
  top: -30px;
  right: 0;
}

.data-load {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid rgba(197, 207, 209, 0.6);

  .data-load-h {
    color: #43505e;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
}

.event-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>
