<template>
  <el-form :ref="form" label-position="right" class="comCon" :model="form" label-width="140px" :rules="rules">
    <template v-for="(item,index) in newformface">
      <!--输入-->
      <el-form-item v-if="Object.is(item.datatype,undefined)||item.datatype === 'input'" :label="item.chinese" class="info" :prop="item.english">
        <el-input v-model="newForm[item.english]" :placeholder="item.placeholder" :disabled="!item.enabled" />
        <div>{{ newForm[item.explain] }}</div>
      </el-form-item>
      <!--时间-->
      <el-form-item v-if="item.datatype === 'date'" :label="item.chinese" class="info" :prop="item.english">
        <el-date-picker v-model="newForm[item.english]" type="date" :placeholder="item.placeholder" :disabled="!item.enabled" style="width: 100%;" />
        <div>{{ newForm[item.explain] }}</div>
      </el-form-item>
      <!--时间区间-->
      <el-form-item v-if="item.datatype === 'daterange'" :label="item.chinese" class="info" :prop="item.english">
        <!--<el-date-picker v-model="newForm[item.english]" type="date" placeholder="选择日期" :disabled="!item.enabled" style="width: 100%;" />-->
        <el-date-picker
          v-model="newForm[item.english]"
          type="daterange"
          :disabled="!item.enabled"
          width="280"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <div>{{ newForm[item.explain] }}</div>
      </el-form-item>      

      <!--级联选择器-->
      <el-form-item v-if="item.datatype === 'cascader'" :label="item.chinese" :class="[Object.is(config&&config.form&&config.form[index],undefined)?'info':config.form[index].className]" :prop="item.english">
        <el-cascader
          v-model="newForm[item.english]"
          :options="newForm[item.sourcedata]"
        ></el-cascader>
      </el-form-item>
      <!--下拉-->
      <el-form-item v-if="item.datatype === 'select'" :label="item.chinese" class="info" :prop="item.english">
        <metii-select :newForm="newForm" :item="item"></metii-select>
        <!-- <el-select v-model="newForm[item.english]" :placeholder="item.placeholder" :disabled="!item.enabled">
          <el-option v-for="(options,index) in item.sourcedata" :key="index" :label="options.label" :value="options.value" />
        </el-select>
        <div v-if="newForm[item.explain]">{{ newForm[item.explain] }}</div> -->
      </el-form-item>
      <!--switch切换-->
      <el-form-item v-if="item.datatype === 'switch'" :label="item.chinese" class="info" :prop="item.english" >
        <el-switch v-model="newForm[item.english]" :disabled="!item.enabled" />
        <div v-if="newForm[item.explain]">{{ newForm[item.explain] }}</div>
      </el-form-item>
      <!--多选组件-->
      <el-form-item v-if="item.datatype === 'checkbox'" :label="item.chinese" class="info" :prop="item.english">
       
        <metii-checkbox :newForm="newForm" :item="item" @checked="changeChecked"></metii-checkbox>
        <!-- <el-checkbox-group v-model="newForm[item.english]">
          <el-checkbox v-for="(check,index) in item.sourcedata" :key="index" :label="check.label" :name="check.name" :disabled="!item.enabled" />
        </el-checkbox-group>
        <div v-if="newForm[item.explain]">{{ newForm[item.explain] }}</div> -->
      </el-form-item>
      <!--单选-->
      <el-form-item v-if="item.datatype === 'radio'" :label="item.chinese" class="info" :prop="item.english">
        <metii-radio :newForm="newForm" :item="item" ></metii-radio>
        <!-- <el-radio-group v-model="newForm[item.english]">
          <el-radio v-for="(radio,index) in item.sourcedata" :key="index" :label="radio.label" :disabled="!item.enabled" />
        </el-radio-group>
        <div v-if="newForm[item.explain]">{{ newForm[item.explain] }}</div> -->
      </el-form-item>
       <!--HR页面横线-->
       <el-form-item v-if="item.datatype === 'hr'" class="info" style="width:100vw; padding:0 2em; height:2.4em;border-bottom:.1em solid gray; position:relative;">
         <span style="font-size:1.8em;position:absolute; left:-4em;bottom:-1.2em;">{{item.chinese}}</span>
      </el-form-item>
      <!--文本域-->
      <el-form-item v-if="item.datatype === 'textarea'" :label="item.chinese" class="info" :prop="item.english">
        <el-input v-model="newForm[item.english]" type="textarea" :disabled="!item.enabled" />
        <div v-if="newForm[item.explain]">{{ newForm[item.explain] }}</div>
      </el-form-item>
      <!--图片上传-->
      <el-form-item v-if="item.datatype === 'imageUpload'" :label="item.chinese" :class="[imgUrlUpd?'infoImg': 'info']" :prop="item.english">
        <!--   :action="fileUrl"  list-type="picture-card"  class="upload-demo"  -->
        <el-upload
          class="avatar-uploader"
          action="http://upload.temiicore.cn:5555/upload/spdsmtservice"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="uploadSuc"
          list-type="picture-card" 
          :before-upload="beforeAvatarUpload"
          :file-list="newForm[item.fileList]"
        >
          <el-button size="small" type="primary" v-if="!imgUrlUpd">上传文件</el-button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>
        <div v-if="newForm[item.explain]">{{ newForm[item.explain] }}</div>
      </el-form-item>
      <!-- 证件上传
      <el-form-item v-if="item.datatype === 'papersUpload'" :label="item.chinese" class="info" :prop="item.english">
        <el-upload
          class="avatar-uploader fl"
          enctype="multipart/form-data"
          multiple
          name="files"
          :action=fileUrl
          :show-file-list="false"
          :on-success="frontSuccess"
          :before-upload="beforeAvatarUpload"
        >
         <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon">
            上传正面
          </i>
        
        </el-upload>
        <el-upload
          class="avatar-uploader fl"
          enctype="multipart/form-data"
          multiple
          name="files"
          :action=fileUrl
          :show-file-list="false"
          :on-success="reverseSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon">
            上传反面
          </i>
        </el-upload>
        <div v-if="newForm[item.explain]">{{ newForm[item.explain] }}</div>
      </el-form-item> -->
      <!--popover弹窗-->
      <el-form-item v-if="item.datatype === 'popover'" :label="item.chinese" class="info" :prop="item.english">
        <el-popover
          placement="bottom"
          title="标题"
          trigger="click"
        >
          <slot name="icons" />
          <el-input slot="reference" v-model="newForm[item.english]" :placeholder="item.placeholder">
            <!--<el-button slot="prepend" icon="el-icon-delete" />-->
            <el-button slot="prepend" style="width: 55px; height: 35px;">
              <svg-icon v-if="tag === 'svg'" :icon-class="newForm[item.english]" />
              <i v-if="tag === 'el'" :class="newForm[item.english]" />
            </el-button>
            <!--<el-button slot="append">选择图标</el-button>-->
            <el-button slot="append">选择图标</el-button>
          </el-input>
          <!--<el-button >选择图标</el-button>-->
        </el-popover>
        <div v-if="newForm[item.explain]">{{ newForm[item.explain] }}</div>
      </el-form-item>
    </template>
  </el-form>
</template>
<script>

import metiiSelect from './select';
import metiiRadio from './radio';
import metiiCheckbox from './checkBox';
import axios from 'axios';
import creatRules from '../utils/rules'; // 引入验证规则

export default {
  name: 'FormCom',
  components:{
    metiiSelect,
    metiiRadio,
    metiiCheckbox
  },
  props: { 
    tonyform: {
      type: [Array,Object],
      default() {
        return []
      }
    },
    config: Object,
    formface: {
      type: Array,
      default() {
        return []
      }
    },formlist: {
      type: Array,
      default() {
        return []
      }
    },
    form: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {},
      imgUrlUpd: '',
      newForm: this.form,
      newformface: this.formface,
      newtonyform:this.tonyform,
      tag: '',
      frontUrl: '',
      reverseUrl: '',
      SPDAPIURL: '',
      fileUrl: ''
    }
  },
  watch: {
    newtonyform:function(){ 
	
    },
    frontUrl() {
      this.$emit('changeFrontUrl', this.frontUrl)
    },
    reverseUrl() {
      this.$emit('changeReverseUrl', this.reverseUrl)
    },
    form() {
      if (Object.is(this.form, null)) {
        console.log('this.form', this.form)
        this.form = {}
      }
      this.newForm = this.form
    },
     tonyform() { 
      if (Object.is(this.tonyform, null)) {
        console.log('this.form', this.tonyform)
        this.tonyform = []
      }
      this.newtonyForm = this.tonyform
    },
     
    formface() {
      this.newformface = this.formface.filter(s => {
        if (s.chinese !== '操作') {
          return s
        }
      })
    }
  },
  beforeDestroy() {
   // this.bus.$off('selectIcon', this.handle)
  },
  mounted: function() {
    
   // this.bus.$on('selectIcon', this.handle)
  },
  created() {this.init()
		this.getaList()

  },
  methods: {
    // 图片上传成功
    uploadSuc(response, file, fileList) {
      console.log(file)
      this.imgUrlUpd = file.url
    },
    changeChecked(data){
      this.newForm[data.name] = data.data
    },
    async getaList() {

    },
    _toJson(sourcedata){
       console.log(sourcedata)
       this.axios.post(sourcedata)
        .then(res => {   console.log( res.data.result)    
        return  res.data.result;   
        })
    },
    // computed:{
    //   formlist:function () {
    //     return this.$store.retData
    //   }
    // },
    init() {
      this.rules = creatRules.createRules(this.formface)
      this.SPDAPIURL = JSON.parse(localStorage.getItem('smturl'))
      this.fileUrl = this.SPDAPIURL.UPLoadAPIUrl 
    },
    // 图片正面上传成功后
    frontSuccess(res, file) {
      console.log('res', res)
      // this.frontUrl = URL.createObjectURL(file.raw)
      this.frontUrl = this.SPDAPIURL.UPLoadAPIUrl + res[0]
    },
    // 图片正面上传成功后
    reverseSuccess(res, file) {
      // this.reverseUrl = URL.createObjectURL(file.raw)
      this.reverseUrl = this.SPDAPIURL.UPLoadAPIUrl + res[0]
    },
    // 上传图片之前先判断图片大小尺寸
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleRemove(file, fileList) {
      this.imgUrlUpd = ''
      console.log(file, fileList)
    },
    handlePreview(file) {
      window.open(file.url, '_blank')
      console.log(file)
    },
    handle({ text, tag }) {
      this.newForm.icon = text
      this.tag = tag
    },
    initForm() {
      console.log(2)
      this.newForm.icon = ''
    },
   
    onSubmit() {
      console.log('submit!')
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-date-editor--daterange.el-input__inner{
    width: 100%;
  }
  .avatar-uploader{
    margin-right: 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 18px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px #ccc dotted;
    display: inline-block;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .info{
    display: block !important;
    height: 2.4em;
  }
//   .infoImg{
//     height: 15.2em;
//   }
//   .infoImg /deep/ .el-upload-list__item{
//     height: 8em;
//     width: 8em;
//   }


 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
