<!--
 * @Description: 右侧属性面板控件 表单属性面板
-->
<template>
  <div class="properties-content">
    <Form class="properties-body" label-align="left" layout="vertical">
      <!--      <e-upload v-model="fileList"></e-upload>-->

      <FormItem label="表单布局">
        <RadioGroup button-style="solid" v-model:value="formConfig.layout">
          <RadioButton value="horizontal">水平</RadioButton>
          <RadioButton value="vertical" :disabled="formConfig.labelLayout === 'Grid'">
            垂直
          </RadioButton>
          <RadioButton value="inline" :disabled="formConfig.labelLayout === 'Grid'">
            行内
          </RadioButton>
        </RadioGroup>
      </FormItem>

      <!-- <Row> -->
      <FormItem label="标签布局">
        <RadioGroup
          buttonStyle="solid"
          v-model:value="formConfig.labelLayout"
          @change="lableLayoutChange"
        >
          <RadioButton value="flex">固定</RadioButton>
          <RadioButton value="Grid" :disabled="formConfig.layout !== 'horizontal'">
            栅格
          </RadioButton>
        </RadioGroup>
      </FormItem>
      <!-- </Row> -->
      <FormItem label="标签宽度（px）" v-show="formConfig.labelLayout === 'flex'">
        <InputNumber
          :style="{ width: '100%' }"
          v-model:value="formConfig.labelWidth"
          :min="0"
          :step="1"
        />
      </FormItem>
      <div v-if="formConfig.labelLayout === 'Grid'">
        <FormItem label="labelCol">
          <Slider v-model:value="sliderSpan" :max="24" />
        </FormItem>
        <FormItem label="wrapperCol">
          <Slider v-model:value="sliderSpan" :max="24" />
        </FormItem>

        <FormItem label="标签对齐">
          <RadioGroup button-style="solid" v-model:value="formConfig.labelAlign">
            <RadioButton value="left">靠左</RadioButton>
            <RadioButton value="right">靠右</RadioButton>
          </RadioGroup>
        </FormItem>

        <FormItem label="控件大小">
          <RadioGroup button-style="solid" v-model:value="formConfig.size">
            <RadioButton value="default">默认</RadioButton>
            <RadioButton value="small">小</RadioButton>
            <RadioButton value="large">大</RadioButton>
          </RadioGroup>
        </FormItem>
      </div>
      <FormItem label="表单属性">
        <Col
          ><Checkbox v-model:checked="formConfig.colon" v-if="formConfig.layout == 'horizontal'"
            >label后面显示冒号</Checkbox
          ></Col
        >
        <Col><Checkbox v-model:checked="formConfig.disabled">禁用</Checkbox></Col>
        <Col><Checkbox v-model:checked="formConfig.hideRequiredMark">隐藏必选标记</Checkbox></Col>
      </FormItem>
      <FormItem label="脚本">
        <a-space direction="vertical">
          <a-button
            v-model:value="formConfig.beforeSetData"
            size="mini"
            @click="handleBtnClick('beforeSetData')"
          >
            添加赋值前脚本
          </a-button>
          <a-button
            v-model:value="formConfig.afterValidateForm"
            size="mini"
            @click="handleBtnClick('afterValidateForm')"
          >
            添加校验后脚本
          </a-button>
          <a-button
            v-model:value="formConfig.afterSaveEvent"
            size="mini"
            @click="handleBtnClick('afterSaveEvent')"
          >
            添加保存后脚本
          </a-button>
          <a-button
            v-model:value="formConfig.changeDataEvent"
            size="mini"
            @click="handleBtnClick('changeDataEvent')"
          >
            添加数据改变脚本
          </a-button>
        </a-space>
      </FormItem>
    </Form>
  </div>
  <BasicModal
    @register="propsScriptModal"
    :title="formTitle"
    :height="500"
    :width="1000"
    @ok="handleSubmit"
  >
    <div class="alertModal">
      <div class="alertModal_content">
        <a-textarea
          v-model:value="formContent"
          autosize
          :auto-size="{ minRows: 22, maxRows: 22 }"
        />
      </div>
      <div class="alertModal_content">
        <a-textarea
          class="alertModal_content-textarea"
          v-model:value="formItemPropsScript"
          autosize
          readOnly
          :auto-size="{ minRows: 22, maxRows: 22 }"
        />
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup name="FormProps">
  import { ref, computed } from 'vue';
  import { BasicModal, useModal } from '@/components/Modal';
  import { formItemPropsScript } from '../../VFormDesign/config/formItemPropsScript';
  import { useFormDesignState } from '../../../hooks/useFormDesignState';
  import {
    InputNumber,
    Slider,
    Checkbox,
    Col,
    RadioChangeEvent,
    Form,
    FormItem,
    RadioButton,
    RadioGroup,
    message,
  } from 'ant-design-vue';

  const { formConfig } = useFormDesignState();

  formConfig.value = formConfig.value || {
    labelCol: { span: 24 },
    wrapperCol: { span: 24 },
  };

  const lableLayoutChange = (e: RadioChangeEvent) => {
    if (e.target.value === 'Grid') {
      formConfig.value.layout = 'horizontal';
    }
  };

  const sliderSpan = computed(() => {
    if (formConfig.value.labelLayout) {
      return Number(formConfig.value.labelCol!.span);
    }
    return 0;
  });

  // 当前打开脚本
  let formTitle: any = ref('');
  let btnClickEvent_now = '';
  let formContent: any = ref('');
  // 脚本窗口
  const [propsScriptModal, { openModal, closeModal }] = useModal();
  // 点击脚本按钮
  function handleBtnClick(btnClickEvent: string) {
    switch (btnClickEvent) {
      case 'beforeSetData':
        formTitle.value = '添加赋值前脚本';
        btnClickEvent_now = 'beforeSetData';
        formContent.value = formConfig.value?.beforeSetData;
        break;
      case 'afterValidateForm':
        formTitle.value = '添加校验后脚本';
        btnClickEvent_now = 'afterValidateForm';
        formContent.value = formConfig.value?.afterValidateForm;
        break;
      case 'afterSaveEvent':
        formTitle.value = '添加保存后脚本';
        btnClickEvent_now = 'afterSaveEvent';
        formContent.value = formConfig.value?.afterSaveEvent;
        break;
      case 'changeDataEvent':
        formTitle.value = '添加数据改变脚本';
        btnClickEvent_now = 'changeDataEvent';
        formContent.value = formConfig.value?.changeDataEvent;
        break;
      default:
        formTitle.value = '';
        break;
    }
    // console.log(formConfig.value);
    // console.log(description);
    openModal();
  }
  // 脚本窗口提交
  function handleSubmit() {
    if (!checkChinese(formContent.value)) {
      message.warning('脚本的代码部分不能含有中文字符！');
      return;
    }
    if (btnClickEvent_now) {
      if (btnClickEvent_now == 'beforeSetData') {
        formConfig.value.beforeSetData = formContent.value;
      } else if (btnClickEvent_now == 'afterValidateForm') {
        formConfig.value.afterValidateForm = formContent.value;
      } else if (btnClickEvent_now == 'afterSaveEvent') {
        formConfig.value.afterSaveEvent = formContent.value;
      } else if (btnClickEvent_now == 'changeDataEvent') {
        formConfig.value.changeDataEvent = formContent.value;
      }
    }
    closeModal();
  }
  // 检查脚本的运行代码是否含有中文
  function checkChinese(str) {
    // 分割字符串为多行
    const lines = str.split('\n');
    let flag = true;

    // 遍历每一行
    for (const line of lines) {
      // 先检查并移除console.log及其后的内容
      const consoleIndex = line.indexOf('console.log');
      let partToCheck = line;
      if (consoleIndex !== -1) {
        partToCheck = line.substring(0, consoleIndex).trim(); // 移除console.log及其后的内容，并去掉前导空格
      }

      // 再检查'//'
      const commentIndex = partToCheck.indexOf('//');
      // 如果有'//'，检查'//'前的部分并去掉前导空格；如果没有，保留原部分
      partToCheck =
        commentIndex !== -1 ? partToCheck.substring(0, commentIndex).trim() : partToCheck;
      // 代码部分不能含有中文字符
      if (/[\u4e00-\u9fa5]/.test(partToCheck)) {
        flag = false;
      }
    }
    return flag;
  }
</script>

<style lang="less" scoped>
  .alertModal {
    display: flex;
    background-color: @border-color-base;

    &_content {
      width: 50%;
      padding: 1px;

      &-textarea {
        background-color: @component-onlineform-formdesign-alert-background-color;
      }
    }
  }
</style>
