<template>
  <div class="max_formWrap" >
    <el-form class="wrap" ref="ruleForm" :model="item" v-for="item in options" :key="item.name" :rules="formRules"  :hide-required-asterisk="! item.required"    >
      <el-form-item  :label="item.name" prop="value" :rules=" item.required?  formRules[item.rules] : formRules.falseDataNull "    class="content" :style="'height:'+labelHeight"   >
        <blue-input :maxlength="item.maxlength ? item.maxlength : null" v-if="item.type == 'input'" v-model="item.value" :placeholder="item.placeholder" :disabled="item.disabled ? true : false "  ></blue-input>
        <el-select  :disabled="item.disabled?true:false " v-if="item.type == 'select'"  v-model="item.value"   :placeholder="item.placeholder">
          <el-option v-for="item2 in item.options" 
            :key="item.option_value ? item2[item['option_value']] : item2.value" :label="item.option_label ? item2[item['option_label']] : item2.label" 
            :value="item.option_value ? item2[item['option_value']] : item2.value">
          </el-option>
        </el-select>
        <blue-select-checkbox ref="test" v-model="item.value"  @item_obj_arrType="(val) => item_obj_arrType(val,item)" :if_show_as="item.ifShowAs"  v-if="item.type == 'select_checkbox'" :option_value="item.option_value ? item.option_value : 'value'" :option_label="item.option_label ? item.option_label : 'value'"  :city-options="item.options" ></blue-select-checkbox>
      </el-form-item>
    </el-form>
    <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建{{submitForm}}</el-button> -->

  </div>
</template>

<script>
import BlueInput from './BlueInput.vue' //引入蓝色input（输入框）
import BlueSelect from './BlueSelect.vue'
import BlueSelectCheckbox from './BlueSelectCheckbox.vue'

export default {
  components: { BlueInput, BlueSelect, BlueSelectCheckbox },
  methods:{
      item_obj_arrType(val,item){
        console.log(val);
        item.getObjTypeValue = val
        this.$emit('item_obj_arrType', val)
      },
      resetForm(formName){
        for(let i = 0 ;i<this.$refs[formName].length;i++){
          console.log(this.$refs[formName][i]);
          this.$refs[formName][i].resetFields()
        }
      },
      submitForm(formName) {
        let a=[]
        for(let i = 0 ;i<this.$refs[formName].length;i++){
          this.$refs[formName][i].validate((valid) => {
            a.push(valid)
          });
        }
        console.log(a);
        for(let i = 0;i<a.length;i++){
          if(a[i]==false){
            return false
          }
        }
        return true
      },
  },
  name: 'Con',
  data(){
  return {
    formRules: this.formRulesData  //内容地址一样  所以不用监听
   } 
  },

  watch:　{
    options(val,obl){
      console.log("aaa")
    },
    // ruleForm(val){
    //     this.resetForm('ruleForm')
    //    this.$emit('update:ruleForm', val)
    // }
  },
  props:{
    options:{  //数据
      type: Array,
        default(){
        return []
      }
    },
    labelHeight:{  //间隔
      type: String,
      default: '40px'
    },
    // ruleForm:{
    //   type:Boolean,
    //   default: false
    // },
    formRulesData:{
      type: Object,
      default(){
        return {
          falseDataNull:[{ required: true, message: '不允许为空',}],
          trueDataNull:[{ required: false, message: '允许为空',}],
          user: [
            { required: true, message: '请输入操作用户名', trigger: 'blur' },
            {pattern: /^\w{6,6}$/,  message: '长度在 6 个字符且只能输入数字、字母、下划线', trigger: ['change','blur'] }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { pattern: /^(?!·)(?!.*?·$)[\u4E00-\u9FA5\·_]{2,32}$/,  message: '长度最少 2 个字符且由中文组成最大长度为32', trigger: ['change','blur'] }
            // { pattern: /^[\u4E00-\u9FA5\·\.\-]+$/,  message: '长度最少 2 个字符且由中文组成最大长度为32', trigger: ['change','blur'] }
            // { pattern: /^[\u4e00-\u9fa5]{2,32}$/,  message: '长度最少 2 个字符且由中文组成最大长度为32', trigger: ['change','blur'] }
          ],
          checkPhone: [
            { required: true, message: '请输入手机号' ,trigger: 'blur' },
            {  pattern: /^1[3-9]\d{9}$/,message: '手机号不正确'}
          ],
          checkEmail: [
            { required: true, message: '请输入邮箱' ,trigger: 'blur' },
            { pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/,message: '请输入正确的邮箱格式'}
          ],
          peopleID: [
            { required: true, message: '请填写证件号码' ,trigger: 'blur' },
            { pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '证件号码格式有误！'}
          ],
          arrayType: [
            { type: 'array', required: true, message: '请至少选择一个', trigger: 'blur' }
          ],
          selectType: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
        }
      }
    }
  }
}
</script>

<style scoped >

.el-form-item >>> .el-form-item__label{
  display: inline-block;
  width: 150px;
  /* height: 14px; */
  text-align: right;
  font-size: 14px;
  font-family: 'SourceHanSansCN-Regular, SourceHanSansCN';
  font-weight: 400;
  color: #A1A8CB;
  padding: 0;
  height: 100%;
}
/* 下拉框高度 */
.el-select >>> .el-input__inner { 
  width: 238px;
  height: 30px;
  color: #fff;
  background: rgba(57, 75, 135, 0.7);
  border-radius: 2px;
  border: 1px solid rgba(77, 103, 186, 0.75);
  /* box-shadow:inset 1px 1px 1px rgba(77, 103, 186, 0.75); */
}
/* 下拉框调整 */
.content{
  display: block;
  margin: 0;
  margin-top: 24px;
  /* margin-left: 40px; */
}
.wrap{
  display: inline-block;
   width: 100%;
   text-align: right;
}
.el-form-item__content >>> .el-form-item__error{
  right: 0 ;
}
.max_formWrap{
  display: inline-block;
   width: 390px;
   text-align: right;
  vertical-align:top;
}
.el-form-item >>> .el-form-item__content  .el-form-item__error{
  right: 0 ;
}
.el-select >>> .el-input .el-input__inner{
    background: rgba(57, 75, 135, 0.7) ;
  border-radius: 2px;
  border: 1px solid rgba(77, 103, 186, 0.75) ;
}
.el-select >>> .el-input .el-input__inner:hover{
    background: rgba(57, 75, 135, 0.7) ;
  border-radius: 2px;
  border: 1px solid rgba(77, 103, 186, 0.75) ;
}
</style>
