<template>
  <div class="content-box">
    <el-form ref="extendData" 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="'extendData['+field.code+']'" :field="field">
              <component :is="controlType(field)" v-model="extendData[field.code]" :config="getControlConfig(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 ControlCheckbox from '../platform/components/control/ControlCheckbox.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 ControlDatePicker from '../platform/components/control/ControlDatePicker.vue'
import ControlUpload from '../platform/components/control/ControlUpload.vue'
import ControlRichText from '../platform/components/control/ControlRichText.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,
    'control-checkbox': ControlCheckbox,
    'control-date-picker': ControlDatePicker,
    'control-date-upload': ControlUpload,
    'control-rich-text': ControlRichText,
    'z-from-item': FormItem
  },
  data() {
    return {
      modelSchema: [],
      modelCode: '',
      extendData: {}
    }
  },

  async created() {
    let queryStr = window.location.search
    let params = queryStr.replace('?', '').split('&')
    let query = {}
    params.forEach(param => {
      let arr = param.split('=')
      if (arr && arr.length === 2) {
        query[arr[0]] = arr[1]
      }
    })
    this.modelCode = query.code
    console.log('extendModelPreview:' + this.modelCode)
    await this.loadContentExtendModelData()
    this.initContentExtendWithDefault()
  },
  methods: {
    initContentExtendWithDefault(){
      // for (let group of this.modelSchema){
      //   for (let field of group.columns) {
      //     Vue.set(this.extendData, field.code, field.defaultValue)
      //   }
      // }
      this.modelSchema.forEach(group => {
        group.columns.forEach(field => {
          Vue.set(this.extendData, field.code, field.defaultValue)
        })
      })
    },

    async loadContentExtendModelData() {
      this.modelSchema = []
      if (this.modelCode) {
        let resp = await axios.get(`/ui/contentextends/${this.modelCode}`)
        let model = resp.data.data.modelSchema
        if (model && model.length > 0) {
          this.modelSchema = model
        }
      }
    },
    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'
        case 'Checkbox':
          return 'control-checkbox'
        case 'Date':
          return 'control-date-picker'
        case 'DateTime':
          return 'control-date-picker'
        case 'RichText':
          return 'control-rich-text'
        case 'ImageUpload':
        case 'FileUpload':
        case 'AudioUpload':
        case 'VideoUpload':
          return 'control-date-upload'
        default:
          return ''
      }
    },
    getControlConfig(field) {
      let config = {
        dataType: field.dataType
      }

      if (field.listOptions) {
        config.listOptions = field.listOptions
      }

      if (field.controlType === 'DateTime') {
        config.type = 'datetime'
      }
      if (['ImageUpload', 'FileUpload', 'AudioUpload', 'VideoUpload'].includes(field.controlType)) {
        config.resourceType = field.controlType.substring(0, field.controlType.length - 6)
      }
      return config
    }
  }

}
</script>
<style>
.panel-fieldset {
  padding: 13px 15px 4px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(99, 99, 99, .05);
  margin: 10px auto auto 0px;
}
.content-box {
  max-width: 1280px;
  margin: 0 auto;
}
</style>
