<template>
  <div>
    <FormSearch
      :form-arr="formArr"
      :form-data="formData"
      @outOperation="outOperation"
      @searchSubmit="searchSubmit"
      @reset="resetForm"
    />

    <div style="margin: 100px;">
      <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>
      </span>
    </div>
  </div>
</template>

<script>
import FormSearch from '@/components/formSearch/index.vue';
import mockData from '@/components/mockData';
export default {
  components: {
    FormSearch,
  },
  data() {
    return {
      // form 配置
      formArr: [
        {
          // input: true,
          type: 'input',
          prop: 'input1',
          span: 6,
          attrs: {
            label: '文本:',
          },
          options: mockData,
        },
        {
          // selectApi: true,
          type: 'selectApi',
          prop: 'selectApi1',
          span: 6,
          options: [],
          attrs: {
            label: '选择接口:',
          },
        },
        {
          // pickerDate: true,
          type: 'pickerDate',
          prop: 'pickerDate1',
          span: 6,
          attrs: {
            label: '日期:',
            type: 'daterange',
            'value-format': 'yyyy-MM-dd',
            'range-separator': '至',
            'start-placeholder': '开始日期',
            'end-placeholder': '结束日期',
          },
        },
        {
          // selectTree: true,
          type: 'selectTree',
          prop: 'selectTree1',
          span: 6,
          options: mockData,
          attrs: {
            label: '选择树:',
            multiple: true, // 多选
          },
        },
        {
          // input: true,
          type: 'input',
          prop: 'input1',
          span: 6,
          attrs: {
            label: '文本:',
          },
          options: mockData,
        },
        {
          // input: true,
          type: 'input',
          prop: 'input1',
          span: 6,
          attrs: {
            label: '文本:',
          },
          options: mockData,
        },
        {
          // input: true,
          type: 'input',
          prop: 'input1',
          span: 6,
          attrs: {
            label: '文本:',
          },
          options: mockData,
        },
        {
          // input: true,
          type: 'input',
          prop: 'input1',
          span: 6,
          attrs: {
            label: '文本:',
          },
          options: mockData,
        },
      ],
      // 默认值
      formData: {},
    };
  },
  methods: {
    searchSubmit(val) {
      console.log('search结果', val);
    },
    resetForm() {
      this.formData = {};
    },
    outOperation(val, index, prop, num) {
      console.log(val, index, prop, num);
    },

    // 以下为设置项方法
    setValue(val) {
      if (val == 1) {
        this.formData = {
          input1: '1',
        };
      } else {
        this.formData = {};
      }
    },
    setAttrs() {
      this.formArr[1].options = mockData;
    },
    setarr() {
      this.formArr = [
        {
          input: true, // 组件类型
          prop: 'input1', // 字段名
          span: 12, // 参考el-col
          attrs: {
            label: '文本:', // 字段
            placeholder: '请填写111',
            needStar: true,
          },
          rules: [
            {
              required: true,
              message: '请输入联系方式',
            },
          ], // 验证
        },
      ];
    },
  },
};
</script>
