<template>
  <div class="ui-wrap">
    <!----------------------------------Popover 弹出框-------------------------------------->
    <el-divider>Popover 弹出框</el-divider>
    <div>
      <el-popover
        placement="bottom"
        title="标题"
        width="200"
        trigger="click"
        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
        <el-button slot="reference">click 激活</el-button>
      </el-popover>
      <el-popover
        placement="top"
        title="这是一个提示信息。"
        width="160"
        v-model="visible"
        style="margin-left: 50px"
        >
        <p>气泡卡片标题它可以承载更复杂的内容，比如链接或按钮等</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="primary" @click="visible = false">知道了</el-button>
        </div>
        <el-button slot="reference">删除</el-button>
      </el-popover>
    </div>
  </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>