<template>
  <el-dialog :visible="visible" :title="_title" @close="_visible = false" center :close-on-click-modal="false" append-to-body>
    <el-form :model="proxyData" label-width="120px" :size="size" :rules="rules" ref="ruleForm">
      <el-form-item  v-for="column in columns.filter(({type}) => type !== 'index')" :key="column.prop" :prop="column.prop" :label="column.label">
        <template slot-scope="scope">
           <template v-if="column.type === 'image'">
              <image-upload-field 
                :url="proxyData[column.prop]" 
                @update:url="val => handleValueChange(val, column.prop)" 
              />
           </template>

           <template v-else-if="column.type === 'number'">
              <digital-input
                :placeholder="column.placeholder ? column.placeholder : column.label"
                :values="proxyData[column.prop]"
                :size="size"
                :position="'right'"
                :controls="false"
                :min="column.otherProps ? column.otherProps.min : 0"
                :max="column.otherProps ? column.otherProps.max : 100000000"
                :precision="column.otherProps ? column.otherProps.precision : 2"
                :append="column.otherProps ? column.otherProps.append : ''"
                @reschange="val => handleValueChange(val,column.prop)"
              />
           </template>

            <template v-else-if="column.type === 'select'">
               <el-select
                 style="width:100%"
                 :size="size"
                 :placeholder="column.placeholder ? column.placeholder : column.label"
                  v-model="proxyData[column.prop]" 
               >
                  <el-option v-for="item in column.options ? column.options : []" :key="item.value" :value="item.value" :label="item.label" />
               </el-select>
            </template>

           <template v-else>
              <el-input
                :placeholder="column.placeholder ? column.placeholder : column.label"
                :size="size"
                v-model="proxyData[column.prop]" 
              />
           </template>
        </template>
      </el-form-item>

      <div class="flex-end">
        <el-button type="primary" :size="size" @click="onCurrentDataSave">保存</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
import ImageUploadField from "./_image.vue"
export default {
  props:['visible','data','columns','size', 'action', 'rules', 'index','title'],
  components:{
    ImageUploadField
  },
  data(){
    return {
      proxyData:{}
    }
  },
  watch:{
    data:{
      handler(){
       this.proxyData = {...this.data}
      },
      deep:true,
      immediate:true
    },
    proxyData:{
      handler(newVal){
        this.$emit('rowUpdate', newVal, this.index)
      },
      deep:true,
      immediate:true
    }
  },
  computed:{
    _title(){
      const prefix =  this.action === 'add' ? '新增' : '编辑' 
      return prefix + this.title
    },
    _visible:{
      get(){
        return this.visible
      },
      set(newVal){
        this.$emit('update:visible', newVal)
      }
    }
  },
  mounted(){
    this.proxyData = {...this.data}
  },
  methods:{
    handleValueChange(val,prop){
      this.proxyData[prop] = val
    },
    async onCurrentDataSave(){
      try{
        await this.$refs.ruleForm.validate()
        this.$emit('save',this.proxyData, this.index)
        this._visible = false
      }catch(err){
        console.log(err)
      }
    }
  }
}
</script>
