<template>
  <div>
    <div v-for="(value,key,i) in options" :key="i">
      <my-fieldDate v-if="value.type=='date'" :option="value" v-model="form[value.name]"></my-fieldDate>
      <my-select v-else-if="value.type=='select'" :ref="value.name" :pValue="form[value['parentCode']]" :selectChild="selectChild[value.name]" :option="value" :compentChilds="$refs" @changeStr="str=>form[value.name+'Str']=str" v-model="form[value.name]"></my-select>
      <!-- van-checkbox-group -->
      <div class="van-cell van-field" v-else-if="value.type=='checkBox'" style="overflow:inherit" :class="{'van-cell--required':!!value.required}">
          <div class="van-cell__title van-field__label"><span>{{value.label}}</span></div>
            <van-checkbox-group v-model="form[value.name]" direction="horizontal">
          <van-checkbox style="margin:.5rem 0" :name="sValue.key||sValue" v-for="(sValue,index) in value.columns" :key="index">{{sValue.value||sValue}}</van-checkbox>
        </van-checkbox-group>
      </div>
      <!-- file -->
      <my-upFile v-else-if="value.type=='file'" :ref="value.name" v-model="form[value.name]" :option="value"></my-upFile>
       <van-field
         v-else
				:value="value.value" 
        v-model="form[value.name]"
				:label="value.label"
				:required="!!value.required"
				clearable
				:placeholder="value['placeholder']?value['placeholder']:'请输入'+value.label"
			>
      <template #button>
      <van-button v-if="!!value['unit']&&value.unit['type']&&value.unit['type']=='button'" size="small" type="primary">{{value.unit.text}}</van-button>
      <span v-else-if="!!value['unit']">{{value.unit}}</span>
    </template>
      </van-field>
    </div>
 
  </div>
</template>

<script>
export default {
  name:"myForm",
    props:{
        options:Array,
        form:Object
    },
    data(){
      return{
        selectChild:{},
        fileList:[]
      }
    },
    created(){
      // 给父元素 注入子select组件
      for(let key in this.options){
        let item = this.options[key]
        if(item['parentCode']){//
          if(this.selectChild[item['parentCode']]){
            this.selectChild[item['parentCode']].push(item.name)
          }else{
            this.selectChild[item['parentCode']]=[item.name];
          }
        }
      }
    },
    updated(){
    },
    methods:{
      submitBefore(fn){
        let upActionForm=[]
        for(let i=0;i<this.options.length;i++){
          let item = this.options[i];
          if(!!item['type']&&item['type']=='file'&&!!item['upAction']&&item['upAction']=='form'&&!this.form[item.name]){
              upActionForm.push(this.$refs[item.name])
          }
        }
        let promiseAll=[];
        for(let i=0;i<upActionForm.length;i++){
          promiseAll.push(upActionForm[i][0].upload())
        }
        Promise.all(promiseAll).then(res=>{
          console.log('图片传输完成')
          setTimeout(()=>{
            !!fn&&fn()
          },1000)
          })
      },
      submit(fun){
        console.log(this.form)
        if(this.verify()){
          this.submitBefore(()=>{
            if(this.verifyFile()){
            !!fun&&fun()
          }
          });
        };
      },
      change(){
      },
      // 验证文件
      verifyFile(){
        let vali= true;
        for(let i=0;i<this.fileList.length;i++){
          let item = this.fileList[i];
          if(item.required){
            if(validatenull(this.form[item.name])){
              return showError(item,0)
            }
          }
        }
        function showError(item,own){
          vali=false;
          Notify({ type: 'danger', message: (!!own?"":item.type=='select'?'请选择':"请填写 ")+item.label });
          return vali;
        }
        return vali;
      },
      verify(){
        let vali= true;
        for(let i=0;i< this.options.length;i++){
          let item = this.options[i]
          if(item.type=='file'){
            this.fileList.push(item)
            continue;
          }
          if(item.required){
            if(validatenull(this.form[item.name])){
              return showError(item,0)
            }
          }
          if(item.isEmail&&!validatenull(this.form[item.name])){
            if(!isEmail(this.form[item.name])){
              return showError({label:"请输入正确的邮箱格式"},1)
            }
          }
          if(item.isPhone&&!validatenull(this.form[item.name])){
            if(!isMobile(this.form[item.name])){
              return showError({label:"请输入正确的手机号"},1)
            }
          }
          if(item.isIdcard&&!validatenull(this.form[item.name])){
            let res = isvalidcard(this.form[item.name]);
            if(!res[0]){
              return showError({label:res[1]},1)
            }
          }
        };
        function showError(item,own){
          vali=false;
          Notify({ type: 'danger', message: (!!own?"":item.type=='select'?'请选择':"请填写 ")+item.label });
          return vali;
        }
        return vali;
      }
    }
}
</script>

<style>

</style>