<template>
  <div>
    <!-- 使用input输入金额，过滤其他字符-->
    <div>输入金额校验</div>
    <el-input class="input" type="digit" v-model="money" placeholder="请输入提现金额" clearable
              @input="onInput" :maxlength="moneyMaxLength"></el-input>

    <!-- 自动补全-->
    <div>自动补全 {张三:18888888888} {李四:19999999999}</div>
    <el-autocomplete
        class="input-width"
        v-model="userName"
        :fetch-suggestions="queryUserWithName"
        placeholder="请输入用户姓名搜索用户"
        :trigger-on-focus="false"
        @change="onUserChange"
        @select="onUserSelect"
    ></el-autocomplete>

    <!-- 带快捷键的日期选择 -->
    <div>带快捷键的日期选择</div>
    <el-date-picker
        ref="datePicker"
        style="width: 200px;"
        v-model="date"
        value-format="yyyy-MM-dd"
        type="dates"
        @change="onFilterChange"
        :picker-options="pickerOptions"
        placeholder="选择一个或多个日期">
    </el-date-picker>

    <!-- el-popover 可以基于元素定位弹窗 -->
    <!-- el-image preview-list 可以预览 -->
  </div>

</template>

<script>
import {dateFormat, getWeekDayInMonth} from "@/utils/dateUtil";
import AMapPolyline from "@/components/AMap/AMapPolyline"
import AMapPosition from '@/components/AMap/AMapPosition'

export default {
  name: "elementForm",
  components: {AMapPolyline, AMapPosition},
  data() {
    return {
      money: '',
      moneyMaxLength: 8,

      userId: undefined, // 选择的用户id
      userName: undefined, // 选择的用户名

      date: [], // 指定日期范围
      pickerOptions: {
        shortcuts: [{
          text: '星期一',
          onClick: (picker) => {
            // 主动选择，点击快捷键后不会关闭，仍可选择其他日期
            this.onWeekDay(1);
            // 自动选择，点击快捷键后会自动关闭
            // picker.$emit('pick', getWeekDayInMonth(new Date().getFullYear(), new Date().getMonth(), 1));
          }
        }, {
          text: '星期二',
          onClick: (picker) => {
            this.onWeekDay(2);
          }
        }, {
          text: '星期三',
          onClick: (picker) => {
            this.onWeekDay(3);
          }
        }, {
          text: '星期四',
          onClick: (picker) => {
            this.onWeekDay(4);
          }
        }, {
          text: '星期五',
          onClick: (picker) => {
            this.onWeekDay(5);
          }
        }, {
          text: '星期六',
          onClick: (picker) => {
            this.onWeekDay(6);
          }
        }, {
          text: '星期日',
          onClick: (picker) => {
            this.onWeekDay(0);
          }
        }]
      }
    }
  },

  methods: {
    onInput: function (val) {
      val = val.replace(/[^\d.]/g, '')
      val = val.replace(/\.{2,}/g, '.')
      val = val.replace(/^0+\./g, '0.')
      val = val.match(/^0+[1-9]+/) ? val.replace(/^0+/g, '') : val
      val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
      if (val.includes('.')) {
        let numDian = val.toString().split('.')[1].length
        if (numDian === 2) {
          this.moneyMaxLength = val.length
        }
      } else {
        this.moneyMaxLength = 8
      }
      this.money = val
    },
    // 限制正整数 oninput="value=value.replace(/[^\d]/g,'')"
    // 限制整数 oninput="value=(value.match(/^-/) ? '-':'') + value.replace(/[^\d]/g,'')"

    // 根据名称搜索用户
    queryUserWithName(queryString, cb) {
      this.$axios.get("/user/search", {params: {keywords: queryString}}).then((data) => {
        const userList = data.map(item => {
          return {
            value: item.nickname, // 用于显示
            id: item.id,
            phone: item.phone
          }
        });
        cb(userList);
      })
    },

    onUserChange() {
      this.userId = undefined;
    },

    onUserSelect(user) {
      this.userId = user.id;
      this.userPhone = user.phone;
      this.userName = user.value;
    },

    // 条件改变
    onFilterChange() {
      // this.listQuery.page = 1;
      // this.queryToRoute();
      // this.getList();
    },

    // 设置最近2个月指定星期的日期
    onWeekDay(week) {
      const date = this.$refs['datePicker'].picker.date;
      const day1 = getWeekDayInMonth(date.getFullYear(), date.getMonth(), week).map(item => dateFormat("yyyy-MM-dd", item));
      const day2 = getWeekDayInMonth(date.getFullYear(), date.getMonth() + 1, week).map(item => dateFormat("yyyy-MM-dd", item));
      this.date = day1.concat(day2);
    }
  }
}
</script>

<style scoped>
.input {
  width: 320px;
  height: auto;
}


</style>
