<template>
  <div>
    <el-dialog width="800px" :title="title" :visible.sync="showDialog" :before-close="close">
        <el-form :model="form" ref="form" label-width="100px" label-position="left">
            <el-form-item v-for="item in field" :key="item.field" :label="item.label">
                <component style="width:100%" v-if="item.type == 'text'" :is='item.components' v-model="form[item.field]" :placeholder="`请输入${item.label}`"></component>
                <component style="width:100%" v-if="item.type == 'number'" :is='item.components' v-model="form[item.field]" :precision="item.precision" :step="item.step" :min="item.min" :max="item.max" :placeholder="`请输入${item.label}`"></component>
                <component style="width:100%" v-if="item.type == 'date'" :is='item.components' :type="item.type" value-format="yyyy-MM-dd" v-model="form[item.field]" :placeholder="`请选择${item.label}`"></component>
                <component style="width:100%" v-if="item.type == 'select'" :is='item.components' v-model="form[item.field]" :placeholder="`请选择${item.label}`" >
                    <el-option
                        v-for="option in item.options"
                        :key="option.value"
                        :label="option.label"
                        :value="option.value">
                    </el-option>
                </component>
                <component style="width:100%" v-if="item.type == 'upload'" :is='item.components' :file-list="form.systemFileList" @on-change="onchangeFile" @on-remove="onRemove" :autoUpload="true"></component>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm()" size="small" style="width:100px" :loading="btnLoading">保存</el-button>
            <el-button  @click="close()" size="small" style="width:100px">取消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        title:'',
        showDialog:false,
        field:[],
        form:{},
        btnLoading:false
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    open(field,form,title){
        this.field = field
        this.form = JSON.parse(JSON.stringify(form))
        this.title = title
        this.showDialog = true
    },
    close(){
        this.showDialog = false
    },
    submitForm(){
        this.$refs.form.validate((valid) => {
            if (valid) {
                if(this.form.systemFileList && this.form.systemFileList.length>0){
                    // 判断文件是否都上传完毕
                    var guids = this.$commonJS.checkUploadFile(this.form.systemFileList)
                    if(!guids){
                        return false
                    }
                    this.form.fileGuids = guids
                }
                this.$emit('save',this.form)
            }
        })
    },
    changeBtnLoading(val){
        this.btnLoading = val
    },
     // 上传的文件监听
     onchangeFile(file, fileList) {
      if(!this.form.systemFileList){
        this.$set(this.form,'systemFileList',[])
      }
      if (file.guid) {
        let index = this.form.systemFileList.findIndex(item => {
          return item.uid == file.uid
        })
        if (index != -1) {
          this.form.systemFileList.splice(index, 1, file)
        }
      } else {
        this.form.systemFileList.push(file.raw)
      }
    },
    // 删除上传的文件
    onRemove(file, fileList) {
      let index = this.form.systemFileList.findIndex(item => {
        return item.uid == file.uid
      })
      if (index != -1) {
        this.form.systemFileList.splice(index, 1)
      }
    },
  },
};
</script>
<style lang="scss" scoped>
</style>