<template>
  <div class="form-demo">
    <h4>搜索组件</h4>
    <common-search
      :search-params="forms2"
      :form-values="formValues2"
      @do-search="dosearch"
      @clear-search="clearSearch"
    ></common-search>

    <h4>表单组件</h4>
    <el-row :gutter="20">
      <el-col :span="12">
        <common-form :form-values="formValues" :forms="forms1"></common-form>
      </el-col>
      <el-col :span="12">
        <!-- <common-form :forms="forms2"></common-form> -->
        <common-radio-group
          v-model="radio"
          :options="options"
        ></common-radio-group>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
// input/textarea/select/input-num/radio/cascader/switch/check-group
const forms1 = ref<any>([
  { label: '姓名', name: 'name', type: 'input', value: '' },
  { label: '年龄', name: 'age', type: 'input-num', value: '' },
  {
    label: '性别',
    name: 'sex',
    type: 'select',
    value: 'man',
    attrs: {
      options: [
        { label: '男', value: 'man' },
        { label: '女', value: 'woman' }
      ]
    }
  },
  {
    label: '爱好',
    name: 'like',
    type: 'cascader',
    attrs: {
      options: [
        {
          value: 'guide',
          label: 'Guide',
          children: [{ value: 'guide', label: 'Guide' }]
        }
      ]
    }
  },
  {
    label: '婚否',
    name: 'marray',
    type: 'switch',
    value: true,
    attrs: {
      'active-text': '是',
      'inactive-text': '否'
    }
  },
  {
    label: '学历',
    name: 'record',
    type: 'radio-group',
    attrs: {
      options: [
        { label: '小学', value: '1' },
        { label: '初中', value: '2' },
        { label: '高中', value: '3' },
        { label: '大学', value: '4' },
        { label: '研究生', value: '5' }
      ]
    }
  },
  {
    label: '兴趣',
    name: 'xq',
    type: 'check-group',
    attrs: {
      options: [
        { label: '篮球', value: '1' },
        { label: '足球', value: '2' },
        { label: '乒乓球', value: '3' },
        { label: '羽毛球', value: '4' }
      ]
    }
  },
  { label: '出生年月', name: 'birthday', type: 'date-picker' },
  { label: '描述', name: 'desc', type: 'textarea' }
]);
const radio = ref('');
const options = ref<any>([
  { label: '小学', value: '1' },
  { label: '初中', value: '2' },
  { label: '高中', value: '3' },
  { label: '大学', value: '4' },
  { label: '研究生', value: '5' }
]);
const formValues = ref<any>({
  name: '',
  age: '',
  sex: 'man',
  like: '',
  marray: '',
  record: '',
  xq: [],
  birthday: '',
  desc: ''
});

const formValues2 = ref<any>({
  name: '',
  age: ''
});
const forms2 = ref<any>([
  { label: '姓名', name: 'name', type: 'input', value: '' },
  { label: '年龄', name: 'age', type: 'input-num', value: '' }
]);

function dosearch(val: any) {
  console.log(val);
}

function clearSearch(val: any) {
  console.log(val);
}

watch(
  formValues.value,
  (val) => {
    console.log(val);
  },
  { deep: true }
);
</script>

<style scoped lang="scss">
.form-demo {
  padding: 20px;
  background: #fff;
}
</style>