<template>
  <div class="ui-wrap">
    <div>输入框</div>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-input v-model="input1" placeholder="请输入内容" :clearable="isClearable"></el-input>
      </el-col>
      <el-col :span="8">
        <el-input v-model="input2" placeholder="请输入内容" maxlength="10" show-word-limit></el-input>
      </el-col>
      <el-col :span="8">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item prop="age">
            <el-input v-model.number="ruleForm.age" @change="submitForm('ruleForm')"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="textarea"
          maxlength="30"
          show-word-limit
        >
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-input
          v-model="input2"
          placeholder="请输入内容"
          size="small"
          maxlength="10"
          show-word-limit
        ></el-input>
      </el-col>
      <el-col :span="8">
        <el-input
          v-model="input3"
          placeholder="请输入内容"
          size="mini"
          maxlength="10"
          show-word-limit
        ></el-input>
      </el-col>
    </el-row>

    <!----------------------------------复合型输入框-------------------------------------->
    <div>复合型输入框</div>
    <el-row :gutter="10">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="input3" :clearable="isClearable">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="input3" size="small">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="input3" size="mini">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" size="small">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" size="mini">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>
<script>
 const cityOptions = ['上海', '北京', '广州', '深圳'];
 export default {
   data() {
     var checkAge = (rule, value, callback) => {
       if (!value) {
         return callback(new Error('年龄不能为空'));
       }
       setTimeout(() => {
         if (!Number.isInteger(value)) {
           callback(new Error('请输入数字值'));
         } else {
           if (value < 18) {
             callback(new Error('必须年满18岁'));
           } else {
             callback();
           }
         }
       }, 1000);
     };
     const generateData = _ => {
       const data = [];
       for (let i = 1; i <= 15; i++) {
         data.push({
           key: i,
           label: `备选项 ${ i }`,
           disabled: i % 4 === 0
         });
       }
       return data;
     };
     return {
       radio: '1',

       checkAll: false,
       checkedCities: ['上海', '北京'],
       cities: cityOptions,
       isIndeterminate: true,

       checked: true,

       input1: '',
       input2: '',
       input3: '',
       textarea: '',
       select: '',
       isClearable: true,

       visible: false,

       ruleForm: {
         age: ''
       },
       rules: {
         age: [
           { validator: checkAge, trigger: 'blur' }
         ]
       },
       switchvalue01: true,
       switchvalue02: false,
       switchvalue03: true,
       slidervalue01: 20,
       slidervalue02: [10, 30],
       slidervalue03: [50, 100],
       slidervalue04: 20,
       slidervalue05: 20,
       pagination01: {
         page: 2,
         size: 6,
         total: 6
       },
       pagination02: {
         page: 2,
         size: 8,
         total: 10
       },
       transferdata: generateData(),
       transfervalue: [1, 4],
       tableData01: [{
         date: '2016-05-02',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1518 弄'
       }, {
         date: '2016-05-04',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1517 弄'
       }, {
         date: '2016-05-01',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1519 弄'
       }, {
         date: '2016-05-03',
         name: '王小虎',
         address: '上海市普陀区金沙江路 1516 弄'
       }]
     };
   },
   methods: {
     messageOpen1() {
       this.$message({
         message: '恭喜你，这是一条成功消息',
         type: 'success',
         duration: 0,
         showClose: true
       });
     },
     messageOpen2() {
       this.$message({
         message: '这是一条消息提示',
         duration: 0,
         showClose: true
       });
     },
     messageOpen3() {
       this.$message({
         showClose: true,
         message: '警告哦，这是一条警告消息',
         type: 'warning',
         duration: 0
       });
     },
     messageOpen4() {
       this.$message({
         showClose: true,
         message: '警告哦，这是一条警告消息',
         type: 'error',
         duration: 0
       });
     },
     handleCheckAllChange(val) {
       this.checkedCities = val ? cityOptions : [];
       this.isIndeterminate = false;
     },
     handleCheckedCitiesChange(value) {
       let checkedCount = value.length;
       this.checkAll = checkedCount === this.cities.length;
       this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
     },
     submitForm(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
           alert('submit!');
         } else {
           console.log('error submit!!');
           return false;
         }
       });
     },
     progressformat(percentage) {
       return percentage === 100 ? '满' : `${percentage}%`;
     },
     progressformat02(percentage) {
       return (percentage > 0 && percentage < 100) ? '加载中' : `${percentage}%`;
     }
   }
 };
</script>
<style lang="scss">
.ui-wrap > div  {
  margin-bottom: 10px;
  margin-top: 20px;
}
.el-form-item__content {
  margin-left: 0 !important;
}
.el-select .el-input {
  width: 100px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>