<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 class="catalog-model-extends" v-for="field in group.columns" :key="field.ID" :data-var="'extendModelData['+field.code+']'" :field="field">
        <component :is="getControlType(field)" v-model="extendsData.extendModelData[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 FormItem from '../../platform/components/control/FormItem.vue'
import ControlRichText from '../../platform/components/control/ControlRichText.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-upload': ControlUpload,
    'control-rich-text': ControlRichText,
    'z-from-item': FormItem
  },
  props: {
    extendsData: {
      type: Object,
      default: _ => ({})
    },
    catalogId: [Number, String]
  },
  data() {
    return {
      modelSchema: []
    }
  },

  watch: {
    extendsData: async function() {
      await this.getFieldData()
      this.initExtendWithDefault()
    },
    deep: true
  },
  methods: {
    initExtendWithDefault() {
      this.modelSchema.forEach(group => {
        group.columns.forEach(field => {
          if (!this.extendsData.extendModelData[field.code]) {
            Vue.set(this.extendsData.extendModelData, field.code, field.defaultValue)
          }
        })
      })
    },

    async getFieldData() {
      if (!this.catalogId) {
        return
      }
      this.modelSchema = []
      let resp = await axios.get(`/ui/contentcore/catalogs/${this.catalogId}/extends`)
      let config = resp.data.data
      if (config.catalogModelCode) {
        resp = await axios.get(`/ui/contentextends/${config.catalogModelCode}`)
        let model = resp.data.data.modelSchema
        let modelID = resp.data.data.ID
        resp = await axios.get(`/ui/contentextends/${modelID}/datas/${this.catalogId}`)
        if (resp.data.data) {
          let extendContent = resp.data.data.content || {}
          Vue.set(this.extendsData, 'extendModelData', extendContent || {})
        } else {
          Vue.set(this.extendsData, 'extendModelData', {})
        }
        this.modelSchema = model
      }
    },
    getControlType(field) {
      if (field.controlType === 'Text' && (field.dataType === 'Long' || field.dataType === 'Double')
      ) {
        return 'control-number'
      }
      switch (field.controlType) {
        case 'Radio':
          return 'control-radio'
        case 'Select':
          return 'control-select'
        case 'Text':
          return 'control-text'
        case 'TextArea':
          return 'control-text-area'
        case 'RichText':
          return 'control-rich-text'
        case 'Checkbox':
          return 'control-checkbox'
        case 'Date':
          return 'control-date-picker'
        case 'DateTime':
          return 'control-date-picker'
        case 'ImageUpload':
          return 'control-upload'
        case 'AudioUpload':
          return 'control-upload'
        case 'VideoUpload':
          return 'control-upload'
        case 'FileUpload':
          return 'control-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 (field.controlType) {
        if (field.controlType.indexOf('Upload') >= 0) {
          config.previewPrefix = this.previewPrefix
          config.resourceType = field.controlType.substring(0, field.controlType.length - 6)
        }
      }
      return config
    }
  }
}
</script>
<style scoped>
.through-btn {
  width: 60px;
}
</style>
<style>
.catalog-model-extends .el-input {
  width:55%;
  min-width:130px;
}
</style>
