<script lang="ts">
import hwInput from './hw-input.vue';
import hwInputNumber from './hw-input-number.vue';
import hwTable from './hw-table.vue';
import hwChart from './hw-chart.vue';
import hwSlider from './hw-slider.vue';
import hwRadioGroup from './hw-radio-group.vue';
import tool from './tool.vue';

export default {
  name: 'hw-form',
  components: {
    hwInput,
    hwInputNumber,
    hwTable,
    hwChart,
    hwSlider,
    hwRadioGroup,
    tool
  }
};
</script>

<template>
  <div class="hw-form" @click.stop="formClick"
       :style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#ccc'}`">
    <tool v-if="selectUuid === options.uuid" :options="options" />
    <span>{{ options.name }}</span>
    <el-form :model="formData[options.key || ('form-'+options.uuid)]" :label-width="options.labelWidth">
      <draggable style="min-height: 10px;" :list="tasks" :group="{ name: 'list' }" itemKey="id">
        <template #item="{ element }">
          <div>
            <component :is="element.type" :options="element.options" :tasks="element.tasks"
                       :formData="formData[options.key || ('form-'+options.uuid)]" />
          </div>
        </template>
      </draggable>
    </el-form>
  </div>
</template>

<script lang="ts" setup>hwInput;
import draggable from 'vuedraggable';
import nestedDraggable from '@/views/tool/draggable/nest.vue';


const props = defineProps({
  options: Object,
  tasks: Array,
  formData: Object
});

const { options, tasks, formData } = toRefs(props);
console.log('formData', formData);
formData.value[options.value.key || ('form-' + options.value.uuid)] = {};


const selectUuid = inject('selectUuid');
const getSelectUuid = inject('getSelectUuid');
const getOptions = inject('getOptions');
const formClick = () => {
  getOptions(options.value);
  getSelectUuid(options.value.uuid);
};
</script>
<style scoped lang="less">
.hw-form {
  min-height: 20px;
  border: 1px dashed #ccc;
  margin: 2px;
  padding: 2px;
  position: relative;

  &:hover {
    background-color: #0001;
    border-color: #00afff;
  }
}
</style>



