<template>
  <div class="testPage">
    <div>
      <!-- <pre v-highlight>
    <code>
      var a= 1;
      a = new Date();
    </code>
  </pre> -->
    </div>
    <el-button
      type="primary"
      class="relogin-submit"
      @click="submitForm1()"
    >发送消息</el-button>
    <e-button>默认按钮</e-button>
    <e-button
      type="primary"
      icon="el-icon-edit"
    />
    <e-button-group>
      <e-button
        type="primary"
        icon="el-icon-arrow-left"
      >上一页</e-button>
      <e-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right" /></e-button>
    </e-button-group>
    <e-button
      type="primary"
      :loading="true"
    >加载中</e-button>
    <e-button
      round
      @click="testClick"
    >默认按钮</e-button>
    <e-icon class="el-icon-edit" />
    <e-button
      type="primary"
      icon="el-icon-search"
    >搜索</e-button>
    <e-link type="success">成功链接</e-link>
    <e-link icon="el-icon-edit">编辑</e-link>
    <e-radio
      v-model="radio"
      label="1"
    >备选项</e-radio>
    <e-radio
      v-model="radio"
      label="2"
    >备选项</e-radio>
    <e-radio-group v-model="radio1">
      <e-radio-button label="上海" />
      <e-radio-button label="北京" />
      <e-radio-button label="广州" />
      <e-radio-button label="深圳" />
    </e-radio-group>
    <e-radio
      v-model="radio2"
      label="1"
      border
    >备选项1</e-radio>
    <e-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      @change="handleCheckAllChange"
    >全选</e-checkbox>
    <div style="margin: 15px 0;" />
    <e-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <e-checkbox
        v-for="city in cities"
        :key="city"
        :label="city"
      >{{ city }}</e-checkbox>
    </e-checkbox-group>
    <e-input
      v-model="input1"
      placeholder="请选择日期"
      suffix-icon="el-icon-date"
    />
    <e-input
      v-model="input2"
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
    />
    <e-autocomplete
      v-model="state"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @select="handleSelect"
    />
    <e-input-number
      v-model="num"
      :precision="2"
      :step="0.1"
      :max="10"
    />
    <e-select
      v-model="value1"
      placeholder="请选择"
    >
      <e-option
        v-for="item in citiess"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      </e-option>
    </e-select>
    <e-select
      v-model="value"
      multiple
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="loading"
    >
      <e-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </e-select>
    <div class="block">
      <span class="demonstration">单选可搜索</span>
      <e-cascader
        placeholder="试试搜索：指南"
        :options="options1"
        filterable
      />
    </div>
    <div class="block">
      <span class="demonstration">多选可搜索</span>
      <e-cascader
        placeholder="试试搜索：指南"
        :options="options1"
        :props="{ multiple: true }"
        filterable
      />
      <e-tooltip
        :content="'Switch value: ' + value"
        placement="top"
      >
        <e-switch
          v-model="value4"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-value="100"
          inactive-value="0"
        />
      </e-tooltip>
      <el-time-picker
        v-model="value6"
        is-range
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
      />
      <el-time-picker
        v-model="value7"
        is-range
        arrow-control
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
      />
      <div class="block">
        <span class="demonstration">多个月</span>
        <el-date-picker
          v-model="value9"
          type="months"
          placeholder="选择一个或多个月"
        />
      </div>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value11"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
        />
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value12"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions"
        />
      </div>
      <div class="block">
        <span class="demonstration">起始日期时刻为 12:00:00</span>
        <el-date-picker
          v-model="value13"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']"
        />
      </div>
      <e-upload
        class="upload-demo"
        drag
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div
          slot="tip"
          class="el-upload__tip"
        >只能上传jpg/png文件，且不超过500kb</div>
      </e-upload>
      <div>
        <e-slider
          v-model="value5"
          range
          :marks="marks"
        />
      </div>
      <e-rate
        v-model="value14"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}"
      />
      <e-color-picker
        v-model="color"
        show-alpha
        :predefine="predefineColors"
      />
      <e-transfer
        v-model="value15"
        :props="{
          key: 'value',
          label: 'desc'
        }"
        :data="data"
      />
      <e-form
        ref="ruleForm"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <e-form-item
          label="密码"
          prop="pass"
        >
          <e-input
            v-model="ruleForm.pass"
            type="password"
            autocomplete="off"
          />
        </e-form-item>
        <e-form-item
          label="确认密码"
          prop="checkPass"
        >
          <e-input
            v-model="ruleForm.checkPass"
            type="password"
            autocomplete="off"
          />
        </e-form-item>
        <e-form-item
          label="年龄"
          prop="age"
        >
          <e-input v-model.number="ruleForm.age" />
        </e-form-item>
        <e-form-item>
          <e-button
            type="primary"
            @click="submitForm('ruleForm')"
          >提交</e-button>
          <e-button @click="resetForm('ruleForm')">重置</e-button>
        </e-form-item>
      </e-form>
      <e-table
        :data="tableData"
        style="width: 100%"
        height="250"
      >
        <e-table-column
          fixed
          prop="date"
          label="日期"
          width="150"
        />
        <e-table-column
          prop="name"
          label="姓名"
          width="120"
        />
        <e-table-column
          prop="province"
          label="省份"
          width="120"
        />
        <e-table-column
          prop="city"
          label="市区"
          width="120"
        />
        <e-table-column
          prop="address"
          label="地址"
          width="300"
        />
        <e-table-column
          prop="zip"
          label="邮编"
          width="120"
        />
      </e-table>
      <e-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <e-table-column
          type="selection"
          width="55"
        />
        <e-table-column
          label="日期"
          width="120"
        >
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </e-table-column>
        <e-table-column
          prop="name"
          label="姓名"
          width="120"
        />
        <e-table-column
          prop="address"
          label="地址"
          show-overflow-tooltip
        />
      </e-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
      <e-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        @current-change="handleCurrentChange"
      >
        <el-table-column
          type="index"
          width="50"
        />
        <el-table-column
          property="date"
          label="日期"
          width="120"
        />
        <el-table-column
          property="name"
          label="姓名"
          width="120"
        />
        <el-table-column
          property="address"
          label="地址"
        />
      </e-table>
      <div style="margin-top: 20px">
        <e-button @click="setCurrent(tableData[1])">选中第二行</e-button>
        <e-button @click="setCurrent()">取消选择</e-button>
      </div>
      <e-tag
        v-for="tag in dynamicTags"
        :key="tag"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
      >
        {{ tag }}
      </e-tag>
      <e-input
        v-if="inputVisible"
        ref="saveTagInput"
        v-model="inputValue"
        class="input-new-tag"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      />
      <e-button
        v-else
        class="button-new-tag"
        size="small"
        @click="showInput"
      >+ New Tag</e-button>

      <e-progress
        type="dashboard"
        :percentage="percentage"
        :color="colors"
      />
      <div>
        <e-button-group>
          <e-button
            icon="el-icon-minus"
            @click="decrease"
          />
          <e-button
            icon="el-icon-plus"
            @click="increase"
          />
        </e-button-group>
      </div>
      <e-pagination
        small
        layout="prev, pager, next"
        :total="50"
      />
      <e-badge
        value="new"
        class="item"
      >
        <e-button size="small">评论</e-button>
      </e-badge>
      <div
        v-for="fit in fits"
        :key="fit"
        class="block"
      >
        <span class="title">{{ fit }}</span>
        <e-avatar
          shape="square"
          :size="100"
          :fit="fit"
          :src="url"
        />
      </div>
      <e-skeleton style="width: 240px">
        <template slot="template">
          <e-skeleton-item
            variant="image"
            style="width: 240px; height: 240px;"
          />
          <div style="padding: 14px;">
            <e-skeleton-item
              variant="p"
              style="width: 50%"
            />
            <div
              style="display: flex; align-items: center; justify-items: space-between;"
            >
              <e-skeleton-item
                variant="text"
                style="margin-right: 16px;"
              />
              <e-skeleton-item
                variant="text"
                style="width: 30%;"
              />
            </div>
          </div>
        </template>
      </e-skeleton>
      <e-empty :image-size="200" />
      <e-descriptions
        title="自定义样式列表"
        :column="3"
        border
      >
        <e-descriptions-item
          label="用户名"
          label-class-name="my-label"
          content-class-name="my-content"
        >kooriookami</e-descriptions-item>
        <e-descriptions-item label="手机号">18100000000</e-descriptions-item>
        <e-descriptions-item label="居住地">苏州市</e-descriptions-item>
        <e-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </e-descriptions-item>
        <e-descriptions-item
          label="联系地址"
          :content-style="{'text-align': 'right'}"
        >江苏省苏州市吴中区吴中大道 1188 号</e-descriptions-item>
      </e-descriptions>
      <e-result
        icon="success"
        title="成功提示"
        sub-title="请根据提示进行操作"
      >
        <template slot="extra">
          <e-button
            type="primary"
            size="medium"
          >返回</e-button>
        </template>
      </e-result>
      <e-statistic
        group-separator=","
        :precision="2"
        decimal-separator="."
        :value="value16"
        :title="title"
      >
        <template slot="prefix">
          <i
            class="el-icon-s-flag"
            style="color: red"
          />
        </template>
        <template slot="suffix">
          <i
            class="el-icon-s-flag"
            style="color: blue"
          />
        </template>
      </e-statistic>
      <e-alert
        title="成功提示的文案"
        type="success"
      />
      <e-button
        v-loading.fullscreen.lock="fullscreenLoading"
        type="primary"
        @click="openFullScreen1"
      >
        指令方式
      </e-button>
      <e-button
        type="primary"
        @click="openFullScreen2"
      >
        服务方式
      </e-button>
      <e-button
        :plain="true"
        @click="openHTML"
      >使用 HTML 片段</e-button>
      <e-button
        :plain="true"
        @click="closeHTML"
      >close</e-button>
    </div>
  </div>
</template>

<script>

//   import SendNotice from '../../layouts/middleware';
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  props: {
  },
  data() {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          value: i,
          desc: `备选项 ${i}`,
          disabled: i % 4 === 0,
        });
      }
      return 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);
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          console.info('this.$refs:::::::::::', this.$refs);
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: '',
      ruleForm: {
        pass: '',
        checkPass: '',
        age: '',
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' },
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' },
        ],
        age: [
          { validator: checkAge, trigger: 'blur' },
        ],
      },
      data: generateData(),
      value15: [],
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333,
      }],
      pickerOptions: {
        shortcuts: [{
          text: '本月',
          onClick(picker) {
            picker.$emit('pick', [new Date(), new Date()]);
          },
        }, {
          text: '今年至今',
          onClick(picker) {
            const end = new Date();
            const start = new Date(new Date().getFullYear(), 0);
            picker.$emit('pick', [start, end]);
          },
        }, {
          text: '最近六个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setMonth(start.getMonth() - 6);
            picker.$emit('pick', [start, end]);
          },
        }],
      },
      color: 'rgba(255, 69, 0, 0.68)',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577',
      ],
      fullscreenLoading: false,
      value14: 3.7,
      value11: '',
      like: true,
      value16: 4154.564,
      title: '今年的增长',
      value12: '',
      value13: '',
      percentage: 10,
      colors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 },
      ],
      radio: '1',
      radio1: '',
      radio2: '',
      value9: '',
      multipleSelection: [],
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      input1: '',
      input2: '',
      value6: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      value7: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      restaurants: [],
      state: '',
      currentRow: null,
      timeout: null,
      num: 1,
      citiess: [{
        value: 'Beijing',
        label: '北京',
      }, {
        value: 'Shanghai',
        label: '上海',
      }, {
        value: 'Nanjing',
        label: '南京',
      }, {
        value: 'Chengdu',
        label: '成都',
      }, {
        value: 'Shenzhen',
        label: '深圳',
      }, {
        value: 'Guangzhou',
        label: '广州',
      }],
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      value1: '',
      options: [],
      value: [],
      list: [],
      loading: false,
      value5: [30, 60],
      marks: {
        0: '0°C',
        8: '8°C',
        37: '37°C',
        50: {
          style: {
            color: '#1989FA',
          },
          label: this.$createElement('strong', '50%'),
        },
      },
      states: ['Alabama', 'Alaska', 'Arizona',
        'Arkansas', 'California', 'Colorado',
        'Connecticut', 'Delaware', 'Florida',
        'Georgia', 'Hawaii', 'Idaho', 'Illinois',
        'Indiana', 'Iowa', 'Kansas', 'Kentucky',
        'Louisiana', 'Maine', 'Maryland',
        'Massachusetts', 'Michigan', 'Minnesota',
        'Mississippi', 'Missouri', 'Montana',
        'Nebraska', 'Nevada', 'New Hampshire',
        'New Jersey', 'New Mexico', 'New York',
        'North Carolina', 'North Dakota', 'Ohio',
        'Oklahoma', 'Oregon', 'Pennsylvania',
        'Rhode Island', 'South Carolina',
        'South Dakota', 'Tennessee', 'Texas',
        'Utah', 'Vermont', 'Virginia',
        'Washington', 'West Virginia', 'Wisconsin',
        'Wyoming'],
      value4: '100',
      options1: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致',
          }, {
            value: 'fankui',
            label: '反馈',
          }, {
            value: 'xiaolv',
            label: '效率',
          }, {
            value: 'kekong',
            label: '可控',
          }],
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航',
          }, {
            value: 'dingbudaohang',
            label: '顶部导航',
          }],
        }],
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局',
          }, {
            value: 'color',
            label: 'Color 色彩',
          }, {
            value: 'typography',
            label: 'Typography 字体',
          }, {
            value: 'icon',
            label: 'Icon 图标',
          }, {
            value: 'button',
            label: 'Button 按钮',
          }],
        }, {
          value: 'form',
          label: 'Form',
          children: [{
            value: 'radio',
            label: 'Radio 单选框',
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框',
          }, {
            value: 'input',
            label: 'Input 输入框',
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器',
          }, {
            value: 'select',
            label: 'Select 选择器',
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器',
          }, {
            value: 'switch',
            label: 'Switch 开关',
          }, {
            value: 'slider',
            label: 'Slider 滑块',
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器',
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器',
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器',
          }, {
            value: 'upload',
            label: 'Upload 上传',
          }, {
            value: 'rate',
            label: 'Rate 评分',
          }, {
            value: 'form',
            label: 'Form 表单',
          }],
        }, {
          value: 'data',
          label: 'Data',
          children: [{
            value: 'table',
            label: 'Table 表格',
          }, {
            value: 'tag',
            label: 'Tag 标签',
          }, {
            value: 'progress',
            label: 'Progress 进度条',
          }, {
            value: 'tree',
            label: 'Tree 树形控件',
          }, {
            value: 'pagination',
            label: 'Pagination 分页',
          }, {
            value: 'badge',
            label: 'Badge 标记',
          }],
        }, {
          value: 'notice',
          label: 'Notice',
          children: [{
            value: 'alert',
            label: 'Alert 警告',
          }, {
            value: 'loading',
            label: 'Loading 加载',
          }, {
            value: 'message',
            label: 'Message 消息提示',
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框',
          }, {
            value: 'notification',
            label: 'Notification 通知',
          }],
        }, {
          value: 'navigation',
          label: 'Navigation',
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单',
          }, {
            value: 'tabs',
            label: 'Tabs 标签页',
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑',
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单',
          }, {
            value: 'steps',
            label: 'Steps 步骤条',
          }],
        }, {
          value: 'others',
          label: 'Others',
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框',
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示',
          }, {
            value: 'popover',
            label: 'Popover 弹出框',
          }, {
            value: 'card',
            label: 'Card 卡片',
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯',
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板',
          }],
        }],
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components',
        }, {
          value: 'sketch',
          label: 'Sketch Templates',
        }, {
          value: 'jiaohu',
          label: '组件交互文档',
        }],
      }],
    };
  },
  mounted() {
    console.info('=====this', this.extraParams);
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  methods: {
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        console.info('input::::::::', this.$refs);
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      const inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    submitForm(formName) {
      console.info('form::::::::', this.$refs);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    closeHTML() {
      this.$Eui.messageClose();
    },
    openHTML() {
      console.info('进入方法：：：：：', this.$Eui);
      // this.$Eui.message('这是一条消息提示');
      // this.$Eui.message({
      //   dangerouslyUseHTMLString: true,
      //   message: '<strong>这是 <i>HTML</i> 片段</strong>'
      // });
      // this.$Eui.message({
      //   message: '恭喜你，这是一条成功消息',
      //   type: 'success'
      // });
      this.$Eui.MessageBox.show('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          this.$Eui.message({
            type: 'info',
            message: `action: ${action}`,
          });
        },
      });
    },
    openFullScreen1() {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
      }, 2000);
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    testClick() {
      console.info('测试：：：：：');
    },
    submitForm1() {
      console.info('====触发relogin');
      // this.$store.dispatch('relogin/showRelogin', {showReloginState: true})
      this.$Eui.SendNotice.$emit('sendNotice', {
        showType: 'all',
        level: 'success',
        id: 1,
        type: 'message',
        time: '2023-04-16',
        title: '特殊数据',
        content: '您发起的001产品市价交易成功',
        linkText: '去处理',
        customLink: {
          title: '测试数据',
          content: '/test',
          type: 'form',
          width: '80%',
          height: '80%',
          customClass: 'test-link',
          draggable: true,
        },
      });
    },
    loadAll() {
      return [
        { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
        { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
        { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
        { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
        { 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
        { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
        { 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
        { 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },
        { 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },
        { 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },
        { 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },
        { 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' },
        { 'value': 'Monica摩托主题咖啡店', 'address': '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
        { 'value': '浮生若茶（凌空soho店）', 'address': '上海长宁区金钟路968号9号楼地下一层' },
        { 'value': 'NONO JUICE  鲜榨果汁', 'address': '上海市长宁区天山西路119号' },
        { 'value': 'CoCo都可(北新泾店）', 'address': '上海市长宁区仙霞西路' },
        { 'value': '快乐柠檬（神州智慧店）', 'address': '上海市长宁区天山西路567号1层R117号店铺' },
        { 'value': 'Merci Paul cafe', 'address': '上海市普陀区光复西路丹巴路28弄6号楼819' },
        { 'value': '猫山王（西郊百联店）', 'address': '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
        { 'value': '枪会山', 'address': '上海市普陀区棕榈路' },
        { 'value': '纵食', 'address': '元丰天山花园(东门) 双流路267号' },
        { 'value': '钱记', 'address': '上海市长宁区天山西路' },
        { 'value': '壹杯加', 'address': '上海市长宁区通协路' },
        { 'value': '唦哇嘀咖', 'address': '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元' },
        { 'value': '爱茜茜里(西郊百联)', 'address': '长宁区仙霞西路88号1305室' },
        { 'value': '爱茜茜里(近铁广场)', 'address': '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
        { 'value': '鲜果榨汁（金沙江路和美广店）', 'address': '普陀区金沙江路2239号金沙和美广场B1-10-6' },
        { 'value': '开心丽果（缤谷店）', 'address': '上海市长宁区威宁路天山路341号' },
        { 'value': '超级鸡车（丰庄路店）', 'address': '上海市嘉定区丰庄路240号' },
        { 'value': '妙生活果园（北新泾店）', 'address': '长宁区新渔路144号' },
        { 'value': '香宜度麻辣香锅', 'address': '长宁区淞虹路148号' },
        { 'value': '凡仔汉堡（老真北路店）', 'address': '上海市普陀区老真北路160号' },
        { 'value': '港式小铺', 'address': '上海市长宁区金钟路968号15楼15-105室' },
        { 'value': '蜀香源麻辣香锅（剑河路店）', 'address': '剑河路443-1' },
        { 'value': '北京饺子馆', 'address': '长宁区北新泾街道天山西路490-1号' },
        { 'value': '饭典*新简餐（凌空SOHO店）', 'address': '上海市长宁区金钟路968号9号楼地下一层9-83室' },
        { 'value': '焦耳·川式快餐（金钟路店）', 'address': '上海市金钟路633号地下一层甲部' },
        { 'value': '动力鸡车', 'address': '长宁区仙霞西路299弄3号101B' },
        { 'value': '浏阳蒸菜', 'address': '天山西路430号' },
        { 'value': '四海游龙（天山西路店）', 'address': '上海市长宁区天山西路' },
        { 'value': '樱花食堂（凌空店）', 'address': '上海市长宁区金钟路968号15楼15-105室' },
        { 'value': '壹分米客家传统调制米粉(天山店)', 'address': '天山西路428号' },
        { 'value': '福荣祥烧腊（平溪路店）', 'address': '上海市长宁区协和路福泉路255弄57-73号' },
        { 'value': '速记黄焖鸡米饭', 'address': '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
        { 'value': '红辣椒麻辣烫', 'address': '上海市长宁区天山西路492号' },
        { 'value': '(小杨生煎)西郊百联餐厅', 'address': '长宁区仙霞西路88号百联2楼' },
        { 'value': '阳阳麻辣烫', 'address': '天山西路389号' },
        { 'value': '南拳妈妈龙虾盖浇饭', 'address': '普陀区金沙江路1699号鑫乐惠美食广场A13' },
      ];
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelect(item) {
      console.log(item);
    },
  },
};
</script>

  <style scope>
  .loginId-hidden {
      display: none;
  }

  .relogin-avatar .el-form-item__content {
      text-align: center;
      margin: 0 !important;
      cursor: pointer;
  }

  .relogin-password {
      width: 60%;
      display: inline-block;
      cursor: pointer;
  }

  .relogin-submit {
      display: inline-block;
      cursor: pointer;
  }
.app-main{
  overflow: auto !important;
}
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .my-label {
    background: #E1F3D8;
  }

  .my-content {
    background: #FDE2E2;
  }
  </style>
