<template>
  <div>
    <!-- <el-form :model="extendsData" ref="pkDataForm" label-width="230px" label-suffix="："> -->
      <div v-for="group in modelSchema" :key="group.code">
        <div class="panel-fieldset">
          <h4 class="panel-legend">{{group.name}}</h4>
            <z-from-item v-for="field in group.columns" :key="field.code" :data-var="'extend['+field.code+']'" :field="field">
              <component :is="controlType(field)" v-model="extendsData.extend[field.code]" :config="field"></component>
            </z-from-item>
        </div>
      </div>
    <!-- </el-form> -->
  </div>
</template>

<script>
import ControlPassword from '../../platform/components/control/ControlPassword.vue'
import ControlRadio from '../../platform/components/control/ControlRadio.vue'
import ControlSelect from '../../platform/components/control/ControlSelect.vue'
import ControlText from '../../platform/components/control/ControlText.vue'
import ControlTextArea from '../../platform/components/control/ControlTextArea.vue'
import ControlNumber from '../../platform/components/control/ControlNumber.vue'
import FormItem from '../../platform/components/control/FormItem.vue'
export default {
  components: {
    'control-password': ControlPassword,
    'control-radio': ControlRadio,
    'control-select': ControlSelect,
    'control-text': ControlText,
    'control-text-area': ControlTextArea,
    'control-number': ControlNumber,
    'z-from-item': FormItem
  },
  props: {
    member: {
      type: Object,
      default: _ => ({})
    }
  },
  data() {
    return {
      modelSchema: []
    }
  },
  computed: {
    extendsData: {
      set(val) {
        this.$emit('update:member', val)
      },
      get() {
        return this.member
      }
    }
  },
  created() {
    this.loadMemberExtendModelData()
  },
  methods: {
    async loadMemberExtendModelData() {
      let siteID = this.$root.siteID
      let res = await axios.get(`/ui/sites/${siteID}/membermodel`)
      if (res.data.status === 1) {
        // await this.getMemberExtendData()
        this.modelSchema = res.data.data
      }
    },
    controlType(item) {
      if (item.controlType === 'Text' && item.dataType === 'Long') {
        return 'control-number'
      }
      switch (item.controlType) {
        case 'Password':
          return 'control-password'
        case 'Radio':
          return 'control-radio'
        case 'Select':
          return 'control-select'
        case 'Text':
          return 'control-text'
        case 'TextArea':
          return 'control-text-area'
        default:
          return ''
      }
    }
  }
}
</script>
