<template>
  <div class="ele-body">
    <el-card shadow="never" header="消息提示">
      <div style="margin:0 0 10px 0;">默认风格</div>
      <el-button @click="showSuccessMessage(false)">成功</el-button>
      <el-button @click="showWarningMessage(false)">警告</el-button>
      <el-button @click="showErrorMessage(false)">错误</el-button>
      <el-button @click="showInfoMessage(false)">消息</el-button>
      <el-button @click="showLoadingMessage">loading</el-button>
      <div style="margin:20px 0 10px 0;">边框风格</div>
      <el-button @click="showSuccessMessage(true)">成功</el-button>
      <el-button @click="showWarningMessage(true)">警告</el-button>
      <el-button @click="showErrorMessage(true)">错误</el-button>
      <el-button @click="showInfoMessage(true)">消息</el-button>
    </el-card>

    <el-card shadow="never" header="分割线">
      <div class="demo-divider-item" style="margin-top:15px;">
        <el-divider class="ele-divider-dashed ele-divider-base"/>
        <el-divider class="ele-divider-light"/>
        <el-divider content-position="left" class="ele-divider-light">雨纷纷</el-divider>
        <el-divider content-position="right" class="ele-divider-light">旧故里</el-divider>
        <el-divider class="ele-divider-light">草木深</el-divider>
        <el-divider class="ele-divider-base ele-divider-dashed"><i class="el-icon-mobile-phone"/></el-divider>
      </div>
      <div class="demo-divider-item">
        <span>雨纷纷</span>
        <el-divider direction="vertical" class="ele-divider-base"/>
        <span>旧故里</span>
        <el-divider direction="vertical" class="ele-divider-base"/>
        <span>草木深</span>
      </div>
    </el-card>

    <el-card shadow="never" header="省市区级联选择">
      <div style="margin-bottom: 15px;">
        <span>请选择省市区：</span>
        <el-cascader v-model="city" :options="cityData.cityData" clearable popper-class="ele-pop-wrap-higher"/>
      </div>
      <div style="margin-bottom: 15px;">
        <span><em/>请选择省市：</span>
        <el-cascader v-model="provinceCity" :options="cityData.provinceCityData" clearable
                     popper-class="ele-pop-wrap-higher"/>
      </div>
      <div>
        <span><em/><em/>请选择省：</span>
        <el-cascader v-model="province" :options="cityData.provinceData" clearable popper-class="ele-pop-wrap-higher"/>
      </div>
    </el-card>

    <el-card shadow="never" header="裁剪图片">
      <el-button @click="(aspectRatio=1)&&(showCropper=true)">1:1裁剪</el-button>
      <el-button @click="(aspectRatio=16/9)&&(showCropper=true)">16:9裁剪</el-button>
      <div><img v-if="cropResult" :src="cropResult" style="height:120px;width:auto;margin-top:15px;"/></div>
    </el-card>

    <el-card shadow="never" header="数字动画">
      <h1>
        <vue-count-up :endVal="countUpVal" :delay="0" :options="countUpOptions" @ready="onCountUpReady"/>
      </h1>
      <div style="margin-top: 15px;">
        <el-button @click="startCountUp" size="mini">重新开始</el-button>
        <el-button @click="updateCountUp" size="mini">更新数字</el-button>
      </div>
    </el-card>

    <el-card shadow="never" header="空视图">
      <el-row>
        <el-col :md="8" style="padding: 22px 0;">
          <ele-empty></ele-empty>
        </el-col>
        <el-col :md="8" style="padding: 22px 0;">
          <ele-empty>
            <i slot="icon" class="el-icon-_retrieve-solid"></i>
          </ele-empty>
        </el-col>
        <el-col :md="8">
          <ele-empty text="哎呀~怎么还没有数据呀~">
            <div style="margin-top: 20px;">
              <el-button size="mini">添加数据</el-button>
              <el-button type="primary" size="mini">重新加载</el-button>
            </div>
          </ele-empty>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" header="二维码">
      <vue-qr :text="text" :size="100" :margin="0"/>
      <div style="display:inline-block;margin:15px 10px 0 15px;width:160px;vertical-align:bottom;">
        <el-input v-model="text" size="mini"/>
      </div>
    </el-card>

    <ele-cropper-dialog :show.sync="showCropper" @crop="onCrop" :aspectRatio="aspectRatio" :destroy-on-close="true"
                        src="https://cdn.eleadmin.com/20200610/LrCTN2j94lo9N7wEql7cBr1Ux4rHMvmZ.jpg"
                        :lock-scroll="false"/>
  </div>
</template>

<script>
import EleCropperDialog from '@/components/EleCropperDialog'  // 图片裁剪
import cityData from '@/utils/cityData'
import VueCountUp from 'vue-countup-v2'
import VueQr from 'vue-qr'

export default {
  name: "DemoMore",
  components: {EleCropperDialog, VueCountUp, VueQr},
  data() {
    return {
      /* citySelect */
      cityData: cityData,  // 省市区数据
      city: [],  // 选中的省市区
      provinceCity: [],  // 选中的省市
      province: [],  // 选中的省
      /* cropper */
      showCropper: false, // 是否显示图片裁剪
      aspectRatio: 1,  // 裁剪比例
      cropResult: null,  // 裁剪后的数据
      /* countUp */
      countUpVal: 6317,  // countUp值
      countUpOptions: {  // countUp配置
        useEasing: true, useGrouping: true, separator: ',', decimal: '.', prefix: '', suffix: ''
      },
      countUpIns: null,  // countUp实例
      /* qrCode */
      text: 'https://eleadmin.com'  // 二维码内容
    }
  },
  methods: {
    /* message */
    showSuccessMessage(border) {
      this.$message({type: 'success', message: '这是一条成功的提示', customClass: border ? 'ele-message-border' : ''});
    },
    showWarningMessage(border) {
      this.$message({type: 'warning', message: '这是一条警告的提示', customClass: border ? 'ele-message-border' : ''})
    },
    showErrorMessage(border) {
      if (border) this.$message({type: 'error', message: '这是一条错误的提示', customClass: 'ele-message-border'});
      else this.$message.error('这是一条错误的提示');
    },
    showInfoMessage(border) {
      if (border) this.$message({type: 'info', message: '这是一条普通的提示', customClass: 'ele-message-border'});
      else this.$message('这是一条普通的提示');
    },
    showLoadingMessage() {
      let loading = this.$message({message: '正在加载中..', customClass: 'ele-message-loading', duration: 0});
      setTimeout(() => {
        loading.close();
      }, 6000);
    },
    /* 图片裁剪完成事件 */
    onCrop(data) {
      this.cropResult = data;
      this.showCropper = false;
    },
    /* countUp渲染完成 */
    onCountUpReady(instance) {
      this.countUpIns = instance;
    },
    /* countUp重新开始 */
    startCountUp() {
      if (!this.countUpIns) return;
      this.countUpIns.reset();
      this.countUpIns.start();
    },
    /* countUp更新 */
    updateCountUp() {
      if (!this.countUpIns) return;
      this.countUpIns.update(1000 + Math.round(Math.random() * 9000));
    }
  }
}
</script>

<style scoped>
.demo-divider-item {
  max-width: 500px;
}

.demo-divider-item .el-divider {
  margin: 0 0 35px 0;
}

.demo-divider-item .el-divider--vertical {
  margin: 0 10px;
}

</style>