<template>
  <div class="right-detail-toolbar">

    <el-dialog :title="!!PKValue ? '修改记录':'添加记录'" :visible.sync="isShow" @open="dialogOpen" class="custom-from-data-dialog">
      <!-- 工具栏按钮 -->
      <el-toolbar>
        <el-button @click="save" :Priv="!!PKValue ?'Modules.CustomForm.EditData':'Modules.CustomForm.AddData'">
          <i class="fa fa-save"></i>保存</el-button>
        <el-button @click="print">
          <i class="fa fa-print"></i>打印</el-button>
        <el-button @click="isShow = false">
          <i class="fa fa-close"></i>关闭</el-button>
      </el-toolbar>
      <!-- 表单 -->
      <el-form :model="tmpFormData" ref="recordDataForm" label-width="130px" label-suffix="：">
        <template v-for="group in modelSchema">
          <div class="panel-card" :key="group.code">
            <h4 class="panel-legend">{{group.name}}</h4>
            <z-from-item v-for="field in group.columns" :key="field.code" :field="field">
              <component :is="getControlType(field)" v-model="tmpFormData.content[field.code]" :config="getControlConfig(field)"></component>
            </z-from-item>
          </div>
        </template>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>

import util from '@src/common/util.js'
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 FromItem from '../platform/components/control/FormItem.vue'

export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    ID: {
      required: true
    },
    PKValue: {
      required: true
    },
    formData: {
      required: true
    }
  },
  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-upload': ControlUpload,
    'control-rich-text': ControlRichText,
    'z-from-item': FromItem
  },
  data() {
    return {
      tmpFormData: {content: {}},
      modelSchema: []
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    async dialogOpen() {
      let res = await axios.get(`/ui/customforms/${this.ID}`)
      this.modelSchema = res.data.data.modelSchema
      if (this.PKValue && String(this.PKValue) !== '0') {
        let formData = await axios.get(`/ui/customforms/${this.ID}/datas/${this.PKValue}`)
        this.tmpFormData = formData.data.data
      }
    },
    // 数据列表弹框中打印按钮触发事件
    print() {
      var el = this.$refs.recordDataForm.$el
      var printHtml = el.innerHTML
      window.document.body.innerHTML = printHtml
      window.print()
      window.location.reload()
    },

    // 添加数据列表数据点击保存按钮触发事件
    async save() {
      try {
        await util.validateForm(this.$refs['recordDataForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      let res
      if (this.PKValue) {
        res = await axios.put(`/ui/customforms/${this.ID}/datas/${this.PKValue}`, this.tmpFormData)
      } else {
        res = await axios.post(`/ui/customforms/${this.ID}/datas`, this.tmpFormData)
      }
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.$emit('callback')
        this.isShow = false
      }
    },

    getControlType(field, type) {
      // type: dialog--编辑框    searchBar--搜索框
      if (
        field.controlType === 'Text' && (field.dataType === 'Long' || field.dataType === 'Double')
      ) {
        return 'control-number'
      }
      if (type === 'searchBar') {
        switch (field.controlType) {
          case 'Radio':
            return 'control-select'
          case 'Select':
            return 'control-select'
          case 'Text':
            return 'control-text'
          case 'TextArea':
            return 'control-text'
          case 'RichText':
            return 'control-rich-text'
          case 'Checkbox':
            return 'control-select'
          case 'Date':
            return 'control-date-picker'
          case 'DateTime':
            return 'control-date-picker'
          default:
            return ''
        }
      } else {
        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, type) {
      // type: dialog--编辑框    searchBar--搜索框
      let config = {
        dataType: field.dataType
      }

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

      if (field.controlType === 'DateTime') {
        config.type = 'datetime'
      }

      if (type === 'searchBar' && (field.controlType === 'DateTime' || field.controlType === 'Date')) {
        config.type = 'daterange'
      }

      if (field.controlType) {
        if (field.controlType.indexOf('Upload') >= 0) {
          config.resourceType = field.controlType.substring(0, field.controlType.length - 6)
        }
      }
      return config
    }
  }

}
</script>

<style scoped>
</style>
