<template>
  <div class="basic-info" v-for="item in formList" :key="item.name">
    <div class="label">*{{ item.name }}</div>
    <div class="value">
      <template v-for="it in item.lists" :key="it.name">
        <template v-if="it.component_type == 'input' && !it.is_hidden">
          <CustomInput
            v-model="it.value"
            :type="it.type"
            :placeholder="it.placeholder"
          ></CustomInput>
        </template>
        <template v-else-if="it.component_type == 'select'">
          <CustomSelect
            :options="it.options"
            v-model="it.value"
            :placeholder="it.placeholder"
          ></CustomSelect>
        </template>
        <!-- textarea -->
        <template v-else-if="it.component_type == 'textarea'">
          <CustomTextArea
            v-model="it.value"
            :placeholder="it.placeholder"
            :maxlength="it.maxlength"
          ></CustomTextArea>
        </template>
        <template v-else-if="it.component_type == 'radio_group_size'">
          <ImgSizeRadioGroupVue
            :list="it.options"
            v-model="it.value"
          ></ImgSizeRadioGroupVue>
        </template>
        <template v-else-if="it.component_type == 'custom-number'">
          <CustomInput
            class="input-pay-num"
            v-model="it.value"
            type="number"
            :placeholder="it.placeholder"
          ></CustomInput>
        </template>
        <template v-else-if="it.component_type == 'select_model'">
          <!--  -->
          <SelectModelDialog
            v-model:value="it.value"
            v-model="it.dialog_visible"
            :label="it.label"
            :name="it.name"
            :dialog_title="it.dialog_title"
            :placeholder="it.placeholder"
            :tool_url="it.tool_url"
            :sub_type="sub_type"
            @SubmitImage="SubmitImage"
          ></SelectModelDialog>
        </template>
        <template v-else-if="it.component_type == 'button'">
          <CustomResetButton width="48%" @click="openUrl(it.tool_url)">{{
            it.label
          }}</CustomResetButton>
        </template>
        <template v-else-if="it.component_type == 'local_upload'">
          <LocalUpload
            v-model="it.value"
            @SubmitImg="SubmitLocalImage"
          ></LocalUpload>
        </template>
        <template v-else-if="it.component_type == 'upload'">
          <CustomUpload v-model="it.value" :config="config"></CustomUpload>
        </template>
        <template v-else-if="it.component_type == 'label'">
          <CustomAddTag
            v-model="it.value"
            :rules="it.rules"
            :placeholder="it.placeholder"
          ></CustomAddTag>
        </template>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import CustomAddTag from '@/components/custom/CustomAddTag.vue';
import CustomUpload from '@/components/custom/upload';
import CustomSelect from '@/components/custom/Select.vue';
import CustomTextArea from '@/components/custom/textarea.vue';
import CustomInput from '@/components/custom/input/index.vue';
import CustomResetButton from '@/components/custom/resetbutton.vue';
import LocalUpload from '@/components/custom/LocalUpload.vue';
import SelectModelDialog from '@/components/custom/SelectModelDialog.vue';
import ImgSizeRadioGroupVue from '@/components/custom/ImgSizeRadioGroup.vue';
const props = withDefaults(
  defineProps<{
    formList: any[];
    sub_type?: string | number;
    config?: any;
  }>(),
  {
    sub_type: 0,
    config: {},
  }
);
const emit = defineEmits(['SubmitBackGround', 'SubmitLocalImage']);
// 选择的模特
const SubmitImage = (item: any) => {
  if (item) {
    emit('SubmitBackGround', item);
  }
};
const openUrl = (url: string) => {
  if (url) {
    window.open(url);
  }
};
const SubmitLocalImage = (item: any) => {
  emit('SubmitLocalImage', item);
};
</script>

<style lang="less">
@import '@/style/variables.less';
.basic-info {
  .label {
    margin: 4px 0 12px 0;
    color: #b1b5c4;
    font-weight: 300;
    font-size: @font-size-12;
    text-align: start;
  }
  .value {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 30px;
    .custom-input-global {
      width: 48%;
    }
    .custom-select-box {
      width: 48%;
    }
    .input-pay-num {
      width: 100%;
    }
    .local-file-upload {
      width: 100%;
      height: 225px;
    }
  }
}
</style>
