<template>
  <div class="ui-wrap">
    <h3>form</h3>
    <el-form
      ref="form02"
      :rules="rules02"
      :model="form02"
      label-width="90px"
      size="small"
      label-position="left"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="form02.name" style="width: 600px"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <!-- <el-popover
                placement="right"
                trigger="hover">
                   <div slot="content">
                      <img :src="inputPopove" alt="" />
                     <span style="font-size:12px;color:#000;">这是一个提示信息</span>
                 </div> -->
        <el-input
          type="text"
          style="width: 600px"
          v-model="form02.email"
        ></el-input>
        <!-- </el-popover> -->
      </el-form-item>
      <el-form-item label="电话" prop="mobile">
        <el-input
          placeholder="请输入电话号码"
          v-model="form02.mobile"
          style="width: 600px"
        >
          <el-select
            v-model="form02.mobiletype"
            slot="prepend"
            placeholder="请选择"
          >
            <el-option label="+86" value="+86"></el-option>
            <el-option label="+010" value="+010"></el-option>
          </el-select>
          <el-select
            v-model="form02.wwwtype"
            slot="append"
            placeholder="请选择"
            style="border-left: 1px solid #d0d2d7"
          >
            <el-option label=".com" value=".com"></el-option>
            <el-option label=".cn" value=".cn"></el-option>
            <el-option label=".net" value=".net"></el-option>
          </el-select>
        </el-input>
      </el-form-item>
      <el-form-item label="地区" prop="address">
        <el-input
          v-model="form02.address"
          style="width: 600px"
          placeholder="请输入地区"
        ></el-input>
      </el-form-item>
      <el-form-item label="详细地址" prop="detail">
        <el-input
          type="textarea"
          :rows="5"
          v-model="form02.detail"
          auto-complete="off"
          placeholder="请输入详细地址"
          style="width: 600px; font-size: 12px"
          maxlength="30"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item style="text-align: center; width: 600px">
        <el-button>重置</el-button>
        <el-button type="primary" @click="form02save">创建</el-button>
      </el-form-item>
    </el-form>
  </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);
    };
    let emailValidate = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error('邮箱不能为空'));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error('请输入正确的邮箱格式'));
        }
      }, 100);
    };
    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 弄'
        }
      ],
      tabChecked: false,
      tableData02: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      multipleSelection02: [],
      tableData03: [
        {
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        },
        {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        },
        {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        },
        {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }
      ],
      rules02: {
        name: { required: true, message: '请输入姓名' },
        email: { required: true, validator: emailValidate },
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            validator: 'regexp',
            pattern: /^(0|86|17951)?(13[0-9]|14[57]|15[012356789]|166|17[01678]|18[0-9]|199)[0-9]{8}$/,
            message: '手机号码格式不正确'
          }
        ],
        address: { required: true, message: '请输入地区' },
        detail: { required: true, message: '请详细地址' }
      },
      inputPopove: require('../images/inputPopove.png'),
      form02: {
        name: '',
        email: '',
        mobile: '',
        mobiletype: '+86',
        wwwtype: '.com',
        address: '',
        detail: ''
      }
    };
  },
  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}%`;
    },
    toggleSelection02(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable02.toggleRowSelection02(row);
        });
      } else {
        this.$refs.multipleTable02.clearSelection();
      }
    },
    handleSelectionChange02(val) {
      this.multipleSelection02 = val;
    },
    handleCommand(command) {
      this.$message('click on item ' + command);
    },
    form02save() {}
  }
};
</script>