<template>
  <el-form ref="elform" :model="listQuery" :disabled="disabled" :label-width="props.labelWidth" :rules="props.rules"
    :inline="true" label-position="right">
    <div class="form-row" v-for="(child, idx) in props.formList" :key="idx"
      :style="{ width: Object.prototype.toString.call(child) === '[object Object]' ? child.width : '' }">
      <template v-if="Array.isArray(child)">
        <el-form-item v-for="(item, childIdx) in child" :key="childIdx" :prop="item.prop" :label="item.label"
          :label-width="item.labelWidth" :style="{ width: child.width }">
          <!-- input表单 input lx:textarea || number-->
          <MOSTY.Other v-if="item.type == 'input'" :type="item.lx" :rows="item.rows || 4" width="100%" clearable
            v-model="listQuery[item.prop]" :placeholder="`请输入${item.label}`" :disabled="item.disabled" />
          <!-- 数值 number-->
          <el-input-number v-else-if="item.type == 'number'" @change="handleNum" v-model="listQuery[item.prop]"
            style="width:100%" :min="item.min || 0" :max="item.max || 1000" />
          <!--选择 select-->
          <MOSTY.Select v-else-if="item.type == 'select'" @change="handleNum" filterable :multiple="item.multiple"
            v-model="listQuery[item.prop]" :collapse-tags="item.multiple" :dictEnum="item.options" width="100%"
            clearable :placeholder="`请选择${item.label}`" />
          <!-- 选择性别 -->
          <MOSTY.Sex v-else-if="item.type == 'Sex'" v-model:sex="listQuery[item.prop]" width="100%" clearable
            :placeholder="`请选择${item.label}`" />
          <!--其他类型other：  lx：EDUCATION（文化程度），NATION（民族）-->
          <MOSTY.PackageSelect v-else-if="item.type == 'other'" :dictEnum="item.lx" width="100%"
            v-model="listQuery[item.prop]" clearable filterable />
          <!-- 部门department -->
          <MOSTY.Department style="width:100%" v-else-if="item.type === 'department'" clearable
            :placeholder="listQuery.ssbm ? listQuery.ssbm : `请选择${item.label}`"
            @getDepValue="getdep($event, item.depMc)" v-model="listQuery[item.prop]" />
          <!-- 时间选择 type: date/time/datetime/datetimerange/daterange-->
          <MOSTY.Date v-else-if="item.type == 'date'" :type="item.lx ? item.lx : 'date'" width="100%" clearable
            v-model="listQuery[item.prop]" />
          <!-- 上传 upload  limit:'限制张数'-->
          <MOSTY.Upload v-else-if="item.type == 'upload'" :isAll="item.isAll" :key="item.prop" :showBtn="item.showBtn"
            :isImg="item.isImg" :limit="item.limit" width="100%" v-model="listQuery[item.prop]" />
          <!--选择checkbox -->
          <!-- <div v-else-if="item.type == 'checkbox'" >{{item.options  }}</div> -->
          <MOSTY.CheckBox v-else-if="item.type == 'checkbox'" width="100%" clearable v-model="listQuery[item.prop]"
            :m="item.options" :placeholder="`请选择${item.label}`" />

          <!-- 单选radio -->
          <el-radio-group v-else-if="item.type == 'radio'" v-model="listQuery[item.prop]">
            <el-radio v-for="obj in item.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
          </el-radio-group>
          <!-- 开关 switch -->
          <el-switch v-else-if="item.type == 'switch'" v-model="listQuery[item.prop]" class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
          <!-- 日期段选择器 -->
          <el-date-picker v-else-if="item.type === 'daterange'" v-model="searchObj[item.prop]" type="daterange"
            unlink-panels :range-separator="item.rangeSeparator" :start-placeholder="item.startPlaceholder"
            :end-placeholder="item.endPlaceholder" :shortcuts="item.shortcuts" value-format="YYYY-MM-DD" />
          <el-date-picker v-else-if="item.type == 'datetime'" v-model="searchObj[item?.prop]" type="datetime"
            value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间" />
          <el-date-picker v-else-if="item.type === 'date'" v-model="searchObj[item.prop]" type="date"
            :placeholder="item.placeholder" :shortcuts="item.shortcuts" value-format="YYYY-MM-DD">
          </el-date-picker>
          <el-time-picker v-else-if="item.type == 'time'" v-model="listQuery[item.prop]" placeholder="请选择时间" />
          <!-- 插槽 slot -->
          <template v-else-if="item.type === 'slot'">
            <slot :name="item.prop"></slot>
          </template>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item v-if="child.type != 'slot'" :prop="child.prop" :label="child.label"
          :style="{ width: child.width }">
          <!-- input表单 input lx:textarea || number-->
          <MOSTY.Other v-if="child.type == 'input'" :type="child.lx" :rows="child.rows || 4" width="100%" clearable
            v-model="listQuery[child.prop]" :placeholder="`请输入${child.label}`" />
          <!-- 数值 number-->
          <el-input-number v-else-if="child.type == 'number'" @change="handleNum" v-model="listQuery[child.prop]"
            style="width:100%" :min="child.min || 0" :max="child.max || 1000" />
          <!--选择 select-->
          <MOSTY.Select v-else-if="child.type == 'select'" @change="handleNum" filterable :multiple="child.multiple"
            v-model="listQuery[child.prop]" :collapse-tags="child.multiple" :dictEnum="child.options" width="100%"
            clearable :placeholder="`请选择${child.label}`" />
          <!-- 部门department -->
          <MOSTY.Department style="width:100%" v-else-if="child.type === 'department'" clearable
            v-model="listQuery[child.prop]" />
          <!-- 时间选择 type: date/time/datetime/datetimerange/daterange-->
          <MOSTY.Date v-else-if="child.type == 'date'" :type="child.lx ? child.lx : 'date'" width="100%" clearable
            v-model="listQuery[child.prop]" />
          <!-- 上传 upload  limit:'限制张数'-->
          <MOSTY.Upload v-else-if="child.type == 'upload'" :isImg="child.isImg" :limit="child.limit" width="100%"
            v-model="listQuery[child.prop]" />
          <!--选择checkbox -->


          <MOSTY.CheckBox v-else-if="child.type == 'checkbox'" width="100%" clearable v-model="listQuery[child.prop]"
            :data="child.options" :placeholder="`请选择${child.label}`" />
          <!-- 单选radio -->
          <el-radio-group v-else-if="child.type == 'radio'" v-model="listQuery[child.prop]">
            <el-radio v-for="obj in child.options" :key="obj.value" :label="obj.value">{{ obj.label }}</el-radio>
          </el-radio-group>
          <!-- 开关 switch -->
          <el-switch v-else-if="child.type == 'switch'" v-model="listQuery[child.prop]" class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
        </el-form-item>
        <!-- 插槽 slot -->
        <template v-if="child.type === 'slot'">
          <slot></slot>
        </template>
      </template>
    </div>
  </el-form>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, defineProps, defineEmits, defineExpose, watch } from "vue";
const props = defineProps({
  //循环的值
  formList: {
    default: [[]], //二维数组
    type: Array
  },
  rules: {
    default: {},
    type: Object
  },
  labelWidth: {
    default: "100px",
    type: String
  },
  disabled: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: Object,
    default: {}
  },
});
const elform = ref();
const listQuery = ref({});
const emits = defineEmits(["update:modelValue", 'change']);

// 提交
const submit = (resfun) => {
  elform.value.validate((valid) => {
    if (!valid) return false;
    resfun(listQuery.value);
  });
};
const getdep = (e, val) => {
  if (val) {
    if (Array.isArray(e)) {
      listQuery.value[val] = e ? e.map(item => item.orgName) : '';
    } else {
      listQuery.value[val] = e ? e.orgName : '';
    }
  }
}
const reset = () => {
  listQuery.value = {};
  elform.value.resetFields();
};

// // 处理表单数据变化
const handleNum = (val) => {
  emits('change', listQuery.value);
};

watch(() => props.modelValue, (newVal) => {
  listQuery.value = newVal; //赋值
}, { immediate: true, deep: true });

watch(() => listQuery.value, (newVal) => {
  emits('update:modelValue', newVal)
}, { immediate: true, deep: true });

defineExpose({ submit, reset });
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  // background-color: #F7FAFB;
  // padding: 0px 8px;
  // color: #000;
  // font-weight: 500;
  // border: 1px solid #E3E7ED;
}

.form-row {
  width: 100%;
  display: flex;
  color: #333;

  .el-form-item {
    flex: 1;
  }
}


.upload-group {
  display: flex;

  .el-form-item {
    flex: 1;
  }
}

::v-deep .el-input__inner {
  height: 36px !important;
  line-height: 36px !important;
  border-radius: 0;
  color: #777575;
}

::v-deep .el-textarea__inner {
  border-radius: 0;
}

.el-form-item--default {
  // margin-bottom: 0px;
}
</style>
