<template>
  <div class="box">
    <div class="container">
      <publicForm
        ref="publicForm"
        :form-arr="formArr"
        :form-data="formData"
        @outOperation="outOperation"
      />
    </div>
    <el-button
      style="margin-top: 40px;margin-left: 700px;"
      type="primary"
      size="mini"
      @click="dialogOK"
    >取表单值</el-button>
  </div>
</template>

<script>
import publicForm from '@/components/formLinkage';
import mockData from './mockData';
import mockData1 from './mockData1';

export default {
  components: {
    publicForm,
  },
  data() {
    return {
      mockData1: mockData1,
      // form 配置
      formArr: [
        {
          type: 'select',
          prop: 'select1',
          span: 6,
          attrs: {
            label: '静态选择',
          },
          options: mockData,
          onchange:
            `
            const params = {
              q: '',
              'queryParam.loginId': Eui.Share.get('loginId'),
              'queryParam.bankId': Eui.Share.get('bankId'),
            };
            this.$apis.queryCptyPage1(params).then((res) => {
              console.log(res.data.result.datals);
              const arr = res.data.result.datals;
              this.formArr[0].options = arr.map((item) => {
                return {
                  label: item.name,
                  value: item.id,
                };
              });
            });
            `,
        },
        {
          type: 'input',
          prop: 'input1',
          span: 6,
          attrs: {
            label: '文本',
            needStar: true,
            placeholder: '请填写',
            'prefix-icon': 'el-icon-date',
          },
          rules: { required: true, message: '请输入文本' },
        },
        {
          type: 'radio',
          prop: 'radio1',
          span: 6,
          attrs: {
            label: '单选框',
          },
          options: [
            {
              label: 0,
              value: '11',
            },
            {
              label: 1,
              value: '22',
            },
          ],
        },
        {
          type: 'checkbox',
          prop: 'checkbox1',
          span: 6,
          attrs: {
            label: '多选框',
          },
          options: [
            {
              label: 0,
              value: '11',
            },
            {
              label: 1,
              value: '22',
            },
            {
              label: 2,
              value: '33',
            },
          ],
        },
        {
          type: 'switch',
          prop: 'switch1',
          span: 6,
          attrs: {
            label: '开关',
          },
        },
        {
          type: 'cascader',
          prop: 'cascader1',
          span: 6,
          attrs: {
            label: '级联',
          },
          options: mockData,
        },
        {
          type: 'selectSelect',
          prop: 'selectSelect',
          span: 6,
          attrs: {
            label: '单选-单选',
            // multiple: true , // 多选
          },
          attrs2: {
            // disabled:true
          },
          options1: mockData,
          options2: JSON.parse(JSON.stringify(mockData)),
        },
        {
          type: 'inputSelect',
          prop: 'inputSelect',
          span: 6,
          attrs: {
            label: '文本-单选',
            placeholder: '请填写',
          },
          attrs2: {
            // disabled:true
          },
          options: mockData,
        },
      ],
      // 默认值
      formData: {
        input1: '1',
      },
      //
    };
  },
  methods: {
    outOperation(val, num1, num2, num3, formItems) {},
    dialogOK() {
      // 判断表单验证是否通过
      if (this.$refs.publicForm.submitForm()) {
        console.log('success');
        console.log(this.formData);
      } else {
        console.log('error');
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 800px;
  margin: 0 auto;
  background-color: #fff;
}
</style>
