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

    <el-dialog
      title="折叠表单"
      :visible.sync="dialog"
      width="630px"
      :modal-append-to-body="false"
    >
      <publicForm
        ref="publicForm"
        :form-arr="zdArr"
        :form-data="formData"
        @outOperation="outOperation"
      />
      <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/formFold/index.vue';
import mockData from './mockData';
import mockData1 from './mockData1';
import mockData2 from './mockData2';
export default {
  components: {
    publicForm,
  },
  data() {
    return {
      // 弹出框
      dialog: true,
      zdArr: [
        {
          title: '折叠1',
          isActive: true,
          formArr: [
            {
              // textarea: true,
              type: 'textarea',
              prop: 'textarea1',
              span: 12,
              attrs: {
                label: '文本域',
                placeholder: '请填写',
                // minRows: 1,
                // maxRows: 2,
              },
            },
            {
              // select: true,
              type: 'select',
              prop: 'select1',
              span: 12,
              attrs: {
                label: '静态选择',
                // multiple: true , // 多选
              },
              options: mockData,
            },
            {
              // selectApi: true,
              type: 'selectApi',
              prop: 'selectApi1',
              span: 12,
              options: [],
              attrs: {
                label: '选择接口:',
              },
            },
            {
              // selectTree: true,
              type: 'selectTree',
              prop: 'selectTree1',
              span: 12,
              options: [
                {
                  label: '系统',
                  // disabled: true,
                  value: 1, // nodeKey 默认 value，可设置id等作为唯一标识的属性
                  id: 11, // nodeKey 默认 value，可设置id等作为唯一标识的属性
                  children: [
                    { label: '用户', value: 2, id: 22 },
                    { label: '用户组', value: 3, id: 33 },
                    { label: '角色', value: 4, id: 44 },
                    { label: '菜单', value: 5, id: 55 },
                    { label: '组织架构', value: 6, id: 66 },
                  ],
                },
              ],
              attrs: {
                label: '选择树:',
                multiple: true, // 多选
              },
            },
            // {
            //   selectTreeApi: 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, // 多选
            //   },
            // },
          ],
        },
        {
          title: '折叠2',
          isActive: true,
          formArr: [
            {
              // inputFinance: true,
              type: 'inputFinance',
              prop: 'inputFinance1',
              span: 12,
              attrs: {
                label: '金额',
              },
            },
            {
              // inputDate: true,
              type: 'inputDate',
              prop: 'inputDate1',
              span: 12,
              attrs: {
                label: '1D1M1Y:',
              },
            },
            {
              // pickerDate: true,
              type: 'pickerDate',
              prop: 'pickerDate1',
              span: 12,
              attrs: {
                label: '日期',
                type: 'daterange',
                'value-format': 'yyyy-MM-dd',
                'range-separator': '至',
                'start-placeholder': '开始日期',
                'end-placeholder': '结束日期',
              },
            },
            {
              // pickerTime: true,
              type: 'pickerTime',
              prop: 'timerDate1',
              span: 12,
              attrs: {
                label: '时间选择',
                'value-format': 'HH:mm:ss',
                format: 'HH:mm:ss',
              },
            },
            {
              // radio: true,
              type: 'radio',
              prop: 'radio1',
              span: 12,
              attrs: {
                label: '单选框',
              },
              options: [
                {
                  label: 0,
                  value: '11',
                },
                {
                  label: 1,
                  value: '22',
                },
              ],
            },
            {
              // checkbox: true,
              type: 'checkbox',
              prop: 'checkbox1',
              span: 12,
              attrs: {
                label: '多选框',
              },
              options: [
                {
                  label: 0,
                  value: '11',
                },
                {
                  label: 1,
                  value: '22',
                },
                {
                  label: 2,
                  value: '33',
                },
              ],
            },
          ],
        },
        {
          title: '折叠3',
          isActive: false,
          formArr: [
            {
              // inputNumber: true,
              type: 'inputNumber',
              prop: 'inputNumber1',
              span: 12,
              attrs: {
                label: '计数器:',
              },
            },
            {
              // switch: true,
              type: 'switch',
              prop: 'switch1',
              span: 12,
              attrs: {
                label: '开关:',
              },
            },
            {
              // cascader: true,
              type: 'cascader',
              prop: 'cascader1',
              span: 12,
              attrs: {
                label: '级联:',
              },
              options: mockData,
            },
            {
              // transfer: true,
              type: 'transfer',
              prop: 'transfer1',
              span: 24,
              attrs: {
                label: '穿梭框:',
                titles: ['选择项', '选择值'],
              },
              options: mockData1,
            },
          ],
        },
      ],
      // zdArr:[
      //   {
      //     title:'折叠1'
      //   },{
      //     title:'折叠2'
      //   }
      // ],
      // 默认值
      formData: {
        input: '1',
        // textarea1: "",
      },
    };
  },
  watch: {
    dialog(newVal) {
      if (!newVal) {
        this.$refs.publicForm.resetForm(); // 窗口关闭清空表单
      }
    },
  },
  methods: {
    outOperation(val, index, prop) {
      console.log(prop, index, val);
      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.zdArr[0].formArr[2].options = mockData2;
    },

    setarr() {
      this.zdArr = [
        {
          title: '折叠1',
          isActive: true,
          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');
      }
    },
  },
};
</script>
