<template>
  <div>
    <el-button
      type="primary"
      size="mini"
      @click="dialog = true"
    >点击打开 Dialog</el-button>

    <el-dialog
      title="表单"
      :visible.sync="dialog"
      width="60%"
      :modal-append-to-body="false"
    >
      <publicForm
        ref="publicForm"
        :form-arr="formArr"
        :form-data="formData"
        @outOperation="outOperation"
        @getRequestData="getRequestData"
      />
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="setarr"
        >设置列表</el-button>
        <el-button
          size="mini"
          @click="setAttrs"
        >设置option</el-button>
        <el-button
          size="mini"
          @click="setValue(1)"
        >设置默认值</el-button>
        <el-button
          size="mini"
          @click="setValue(2)"
        >设空默认值</el-button>
        <el-button
          size="mini"
          @click="dialog = false"
        >取 消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="dialogOK"
        >取表单值</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import publicForm from '@/components/form/index.vue';
import mockData from './mockData';
import mockData1 from './mockData1';
import mockData2 from './mockData2';
export default {
  components: {
    publicForm,
  },
  data() {
    return {
      // 弹出框
      dialog: true,
      // form 配置

      formArr: [
        {
          type: 'inputFinance',
          prop: 'inputFinance1',
          span: 12,
          attrs: {
            label: '金额',
          },
        },
        {
          type: 'input',
          prop: 'input1',
          span: 12,
          attrs: {
            label: '文本',
            needStar: true,
            placeholder: '请填写',
            'prefix-icon': 'el-icon-date',
          },
          // rules: { required: true, message: '请输入文本' },
        },
        {
          type: 'textarea',
          prop: 'textarea1',
          span: 12,
          attrs: {
            label: '文本域',
            placeholder: '请填写',
            // minRows: 1,
            // maxRows: 2,
          },
        },
        {
          type: 'select',
          prop: 'select1',
          span: 12,
          attrs: {
            label: '静态选择',
            // multiple: true , // 多选
          },
          options: mockData,
        },
        {
          type: 'selectLabel',
          prop: 'select2',
          span: 12,
          attrs: {
            label: '自定义列选择',
          },
          options: mockData,
        },
        {
          // selectLazyLoading: true,
          type: 'selectLazyLoading',
          prop: 'selectLazyLoading',
          span: 12,
          attrs: {
            label: '下拉懒加载',
            placeholder: '请选择',
            api: this.$apis.getEventList,
            optionLabel: 'dealId',
            optionValue: 'id',
            params: {
              'queryParam.moduleName': 'pubSendExceptionManager',
              'queryParam.sendService': 'DCS',
              'queryParam.pageStart': 1,
              'queryParam.pageLimit': 10,
            },
          },
          options: [],
        },
        {
          // selectLazyLoading: true,
          type: 'selectTable',
          prop: 'selectTable',
          span: 12,
          attrs: {
            label: '下拉表格',
            placeholder: '请选择',
            api: this.$apis.getEventList,
            optionLabel: 'dealId',
            optionValue: 'eventId',
            // multiple: true,
            columns: [
              {
                prop: 'dealId',
                minWidth: '200px',
                align: 'center',
                label: this.$t('field.dealId'),
              },
              {
                prop: 'productStr',
                minWidth: '100px',
                align: 'center',
                label: this.$t('field.product'),
              },
              {
                prop: 'typeOfEventStr',
                minWidth: '200px',
                align: 'center',
                label: this.$t('field.typeOfEvent'),
              },
              {
                prop: 'eventStatusStr',
                minWidth: '100px',
                align: 'center',
                label: this.$t('field.eventStatus'),
              },
              {
                prop: 'eventId',
                minWidth: '160px',
                align: 'center',
                label: this.$t('field.eventId'),
              },
              {
                prop: 'blockNo',
                minWidth: '160px',
                align: 'center',
                label: this.$t('field.blockNo'),
              },
              {
                prop: 'eventDate',
                minWidth: '160px',
                align: 'center',
                label: this.$t('field.eventDate'),
              },
            ],
            params: {
              'queryParam.pageStart': 1,
              'queryParam.pageLimit': 10,
              'queryParam.moduleName': 'dcsEventManager',
            },
          },
          options: mockData1,
        },
        {
          type: 'selectApi',
          prop: 'selectApi1',
          span: 12,
          options: [],
          attrs: {
            label: '选择接口',
          },
        },
        {
          type: 'selectTree',
          prop: 'selectTree1',
          span: 12,
          options: mockData,
          attrs: {
            label: '选择树:',
            multiple: true, // 多选
          },
        },
        // {
        //   prop: "selectTreeApi2",
        //   span: 12,
        //   options: [
        //     {
        //       label: "系统",
        //       value: 1,
        //       children: [
        //         { label: "用户", value: 2 },
        //         { label: "用户组", value: 3 },
        //         { label: "角色", value: 4 },
        //         { label: "菜单", value: 5 },
        //         { label: "组织架构", value: 6 },
        //       ],
        //     },
        //   ],
        //   attrs: {
        //     label: "接口选择树:",
        //     multiple: true, // 多选
        //   },
        // },
        {
          type: 'inputNumber',
          prop: 'inputNumber1',
          span: 12,
          attrs: {
            label: '计数器',
          },
        },
        {
          type: 'inputNumber2',
          prop: 'inputNumber2',
          span: 12,
          attrs: {
            label: '计数器2',
          },
        },
        {
          type: 'inputDate',
          prop: 'inputDate1',
          span: 12,
          attrs: {
            label: '1D1M1Y',
          },
        },
        {
          type: 'pickerWeek',
          prop: 'pickerWeek',
          span: 12,
          attrs: {
            label: '选择周',
          },
        },
        {
          type: 'pickerMonth',
          prop: 'pickerMonth',
          span: 12,
          attrs: {
            label: '选择月',
          },
        },
        {
          type: 'pickerYear',
          prop: 'pickerYear',
          span: 12,
          attrs: {
            label: '选择年',
          },
        },
        {
          type: 'pickerDateSingle',
          prop: 'pickerDateSingle',
          span: 12,
          attrs: {
            label: '日期',
          },
        },
        {
          type: 'pickerDate',
          prop: 'pickerDate1',
          span: 12,
          attrs: {
            label: '日期范围',
            type: 'daterange',
            'value-format': 'yyyy-MM-dd',
            'range-separator': '至',
            'start-placeholder': '开始日期',
            'end-placeholder': '结束日期',
          },
        },
        {
          type: 'pickerTime',
          prop: 'timerDate1',
          span: 12,
          attrs: {
            label: '时间选择',
            'value-format': 'HH:mm:ss',
            format: 'HH:mm:ss',
          },
        },
        {
          type: 'pickerTimeRange',
          prop: 'timeRange',
          span: 12,
          attrs: {
            label: '时间范围',
          },
        },
        {
          type: 'pickerDateTime',
          prop: 'dateTime',
          span: 12,
          attrs: {
            label: '日期时间',
          },
        },
        {
          type: 'pickerDateTimeRange',
          prop: 'dateTimeRange',
          span: 12,
          attrs: {
            label: '日期时间范围',
          },
        },
        {
          type: 'radio',
          prop: 'radio1',
          span: 12,
          attrs: {
            label: '单选框',
          },
          options: [
            {
              label: 0,
              value: '11',
            },
            {
              label: 1,
              value: '22',
            },
          ],
        },
        {
          type: 'checkbox',
          prop: 'checkbox1',
          span: 12,
          attrs: {
            label: '多选框',
          },
          options: [
            {
              label: 0,
              value: '11',
            },
            {
              label: 1,
              value: '22',
            },
            {
              label: 2,
              value: '33',
            },
          ],
        },
        {
          type: 'switch',
          prop: 'switch1',
          span: 12,
          attrs: {
            label: '开关',
          },
        },
        {
          type: 'cascader',
          prop: 'cascader1',
          span: 12,
          attrs: {
            label: '级联',
          },
          options: mockData,
        },
        {
          type: 'transfer',
          prop: 'transfer1',
          span: 24,
          attrs: {
            label: '穿梭框',
            titles: ['选择项', '选择值'],
          },
          options: mockData1,
        },
        {
          type: 'selectSelect',
          prop: 'selectSelect',
          span: 12,
          attrs: {
            label: '单选-单选',
            // multiple: true , // 多选
          },
          attrs2: {
            // disabled:true
          },
          options1: mockData,
          options2: JSON.parse(JSON.stringify(mockData)),
        },
        {
          type: 'inputSelect',
          prop: 'inputSelect',
          span: 12,
          attrs: {
            label: '文本-单选',
            placeholder: '请填写',
          },
          attrs2: {
            // disabled:true
          },
          options: mockData,
        },

      ],
      // 默认值
      formData: {
        input1: '1',
        // textarea1: "",
      },
    };
  },
  watch: {
    dialog(newVal) {
      if (!newVal) {
        this.$refs.publicForm.resetForm(); // 窗口关闭清空表单
      }
    },
  },
  methods: {
    outOperation(val, index, prop, num) {
      if (val) {
        if (prop === 'selectApi1') {
          setTimeout(() => {
            this.formArr[index].options = [
              {
                value: 'select1',
                label: 'select11',
              },
              {
                value: 'select2',
                label: 'select22',
              },
            ];
          }, 1000);
        }
      }
    },
    setValue(val) {
      if (val == 1) {
        this.formData = {
          input1: '1',
          textarea1: '11',
          // select1: "select1",
          // select1:[ 'select1'],
          inputNumber1: 4,
          radio1: 0,
          checkbox1: [1, 2],
          switch1: false,
        };
      } else {
        this.formData = {};
      }
    },
    setAttrs() {
      this.formArr[2].options = mockData2;
    },

    setarr() {
      this.formArr = [
        {
          input: true, // 组件类型
          prop: 'input1', // 字段名
          span: 12, // 参考el-col
          attrs: {
            label: '文本:', // 字段
            placeholder: '请填写111',
            needStar: true,
            // disabled: false,
            // type: 'textarea', // input类型
            // prepend: "$", // 前文字
            // "prefix-icon": "el-icon-search", // 前icon
            // append: ".com", // 后文字
            // 'suffix-icon': "el-icon-date", // 后icon
          },
          rules: [
            {
              required: true,
              message: '请输入联系方式',
            },
          ], // 验证
        },
      ];
    },
    dialogOK() {
      // 判断表单验证是否通过
      if (this.$refs.publicForm.submitForm()) {
        console.log('success');
        console.log(this.formData);
      } else {
        console.log('error');
      }
    },
    // 加载数据
    async getRequestData(index, isLoadMore = false) {
      this.formArr[index].attrs.pageNum++;
      if (isLoadMore) {
        this.formArr[index].attrs.loadingMore = true;
      } else {
        this.formArr[index].attrs.loading = true;
      }

      try {
        const { data, total } = await this.fetchData({
          pageNum: this.formArr[index].attrs.pageNum,
          pageSize: this.formArr[index].attrs.pageSize,
        });

        this.formArr[index].attrs.total = total;

        // 关键点4：合并数据
        if (isLoadMore) {
          this.formArr[index].options = [
            ...this.formArr[index].options,
            ...data,
          ];
        } else {
          this.formArr[index].options = data;
        }

        // 判断是否还有更多数据
        if (
          this.formArr[index].options.length >= this.formArr[index].attrs.total
        ) {
          this.formArr[index].attrs.noMore = true;
        }
      } catch (error) {
        console.error('加载数据失败:', error);
        if (isLoadMore) {
          this.formArr[index].attrs.pageNum--; // 加载失败回退页码
        }
      } finally {
        if (isLoadMore) {
          this.formArr[index].attrs.loadingMore = false;
        } else {
          this.formArr[index].attrs.loading = false;
        }
      }
    },

    fetchData(params) {
      return new Promise((resolve) => {
        setTimeout(() => {
          // const { query, page, pageSize } = params
          // const start = (page - 1) * pageSize
          // const data = Array.from({ length: pageSize }, (_, i) => ({
          //   value: start + i,
          //   label: query ? `${query} 选项 ${start + i + 1}` : `选项 ${start + i + 1}`
          // }))
          const data = mockData;
          resolve({
            data,
            total: 20, // 假设总共有100条数据
          });
        }, 500);
      });
    },
  },
};
</script>
