<template>
  <div class="container-height column no-wrap justify-center items-center">
    <div class="q-gutter-xs">
      <q-btn label="提交" color="primary" @click="onSubmit" />
      <q-btn label="重置" color="primary" @click="onResetForm" />
      <q-btn label="改变" color="primary" @click="onChange" />
    </div>
    <div class="page2-form">
      <Com.MyForm
        ref="myForm"
        :config="formState.config"
        v-model="formState.value"
      >
        <template #solt2>
          <q-input filled v-model="formState.value.color" label="颜色">
            <template v-slot:append>
              <q-icon
                class="cursor-pointer"
                :name="ICON.takeColor"
                :style="{ color: formState.value.color }"
              >
                <q-popup-proxy :breakpoint="600">
                  <q-color
                    v-model="formState.value.color"
                    default-view="palette"
                    :palette="colorPalette"
                  />
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </template>

        <template> 123 </template>
      </Com.MyForm>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'PAGE2',
};
</script>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { delEmptyObjkey } from 'src/common/utils';
import ICON from 'src/config/icons';
import Com from 'src/components';
import { form } from './config';
import COLORLIST from './colorList';

const myForm = ref<any>(null);

const colorPalette = ref<any>([]);

const formState = reactive({
  config: form,
  value: {} as any,
});

onMounted(() => {
  getColorList();
});

function getColorList() {
  let arr: any[] = [];
  const length = 7;
  for (let i = 0; i < length; i++) {
    for (const key in COLORLIST) {
      const item = (COLORLIST as any)[key];
      arr.push(item[i + 1]);
    }
  }
  colorPalette.value = arr;
}

function onChange() {
  let obj = {
    name: '王二小',
    age: 1000,
    sex: '男',
  };
  formState.value = obj;

  let newForm = form.map((item: any) => {
    if (item.fild === 'country') {
      item.bind.label = '爱好';
      item.bind.multiple = true;
      item.bind.options = [
        {
          label: '看电视',
          value: 'watch_tv',
        },
        {
          label: '睡懒觉',
          value: 'sleep_in',
        },
        {
          label: '跑步',
          value: 'run',
        },
        {
          label: '听音乐',
          value: 'listen_music',
        },
      ];
    }
    return item;
  });
  formState.config = newForm;
}

function onSubmit() {
  console.log('formValue', delEmptyObjkey(formState.value));

  myForm.value.validate().then((success: any) => {
    if (!success) return;
  });
}

function onResetForm() {
  myForm.value.reset();
}
</script>

<style lang="scss" scoped>
.page2-form {
  width: 800px;
  border: 1px solid $border-color;
}
</style>