<template>
  <div>
    <div class="qr-code-wrap">
      <el-alert
        class="top-tips"
        title="提醒：选择分组后，会自动生成相应的分组二维码，居民扫码后直接进入该分组（若未选择分组，则自动生成未分组二维码，居民扫码后进入默认未分组）"
        type="warning"
        show-icon>
      </el-alert>
      <div class="qr-group">
        <p class="label-name">二维码分组：</p>
        <template v-for="labelItem in currentLabelList">
          <el-tag size="small" :key="labelItem">{{labelItem}}</el-tag> 
        </template>
        <el-tag size="small" class="choose-group" @click="handleChooseGroup">+ 选择分组</el-tag>
      </div>
      <div class="qr-pic-wrap">
        <div class="qr-box">
          <div class="pic">
            <!-- <vue-qr :text="qrCodeInfo.qrcodeUrl" class="qr-code-img"></vue-qr> -->
            <canvas id="msg"></canvas>
            <el-button icon="el-icon-download" class="qr-download-btn" @click="handleQRDownloadModal">下载二维码</el-button>
          </div>  
          <p class="time-limit">有效期：{{qrCodeInfo.beginTime}}-{{qrCodeInfo.endTime}} </p>
          <el-button icon="el-icon-refresh" class="refresh-btn" size="small" @click="handleRefreshCode">刷新有效期</el-button>
        </div>  
      </div>
      <div class="border-space"></div>
      <div class="increased-steps-wrap">
        <div class="label-title">居民添加流程</div>
        <img src="../../../../assets/image/patient-add-flow-path.png" alt="" class="flow-path">
      </div>
    </div>
    <!-- 选择分组 弹窗 -->
    <el-dialog
      class="choose-label-wrap"
      title="选择分组"
      :visible.sync="showChooseLabelModal"
      width="680px"
      :close-on-click-modal="false"
      center>
      <p class="under-title-tips">选择分组后，会自动生成相应的分组二维码，居民扫码后直接进入该分组</p>
      <el-row class="row-in-line">
        <el-button size="small" class="clear-select" :disabled="choosedLabelList.length<1" @click="handleClearSelect">清空选择</el-button>
        <el-button type="primary" class="right" size="small" @click="handleGoToLabelManage">分组管理</el-button>
        <p class="tips">未找到分组可去分组管理新建分组</p>
      </el-row>
      <div class="list-wrap">
        <el-checkbox-group v-model="choosedLabelList">
          <template v-for="item in labelNameList" >
            <el-checkbox v-if="item.labelId != 0" :label="item.labelId" border :key="item.labelId">
              {{item.labelName}}
            </el-checkbox>
          </template>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showChooseLabelModal = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleAfterChooseLabel" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 重新加载当前分组列表 -->
    <el-dialog
      class="reload-label-modal"
      :visible.sync="showReloadLabelModal"
      width="320px"
      :show-close="false"
      :close-on-click-modal="false"
      center>
      <p class="tips">您刚才跳转到分组管理页面进行新建分组，请点击下方按钮刷新数据</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleReloadLabel">重新加载</el-button>
      </span>
    </el-dialog>
    <!-- 下载二维码 弹窗 -->
    <el-dialog
      class="download-qr-modal"
      title="下载二维码"
      :visible.sync="showDownloadQRModal"
      width="500px"
      :show-close="false"
      :close-on-click-modal="false"
      center>
      <div class="qr-pic"></div>
      <p class="exp-date">有效期：2019.5.1-2019.5.30</p>
      <div class="choose-group">
        <p class="title">分组：</p>
        <el-select v-model="currentQRDownloadGroup" placeholder="选择分组">
          <el-option
            v-for="item in qrDownloadGroups"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <p class="under-tips">选择分组后，会自动生成相应的分组二维码，居民扫码后直接进入该分组</p>
      <p class="under-tips">（若未选择分组，则自动生成未分组二维码，居民扫码后进入默认未分组）</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDownloadQRModal = false">取 消</el-button>
        <el-button type="primary" @click="handleGoToDownloadQR">确定下载</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import QRCode from 'qrcode';
  import {
    getQRCode,
    refreshCode,
    getLabelList,
  } from "@/utils/patients/patientsapi";

  export default {
    name: "qrCodeImport",
    data() {
      return {
        showChooseLabelModal: false,
        showReloadLabelModal: false,
        showDownloadQRModal: false,
        currentQRDownloadGroup: '',
        qrCodeInfo: {
          qrcodeUrl: '',
          beginTime: '',
          endTime: '',
          id: '',
          labelIds: '',
        },
        currentLabelList: [],
        labelNameList: [],
        choosedLabelList: [],
        qrDownloadGroups: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }]

      }
    },
    created() {
      this.goToGetQRCode({
        labelIds: '',
        id: '',
        first: true,
      });
    },
    methods: {
      // 二维码录入
      goToGetQRCode(params){
        getQRCode(params).then(res => {
          if(res.code == '000000'){
            let data = res.data;
            this.qrCodeInfo = data;
            if(data.labelIds != ''){
              this.currentLabelList = data.labelIds.split(',');
            }
            this.calculateQRCode(data.qrcodeUrl);
          }else{
            this.$message({
              message: '获取二维码失败，请重新再试',
              type: 'warning'
            });
          }
        })
      },
      calculateQRCode(val){
        // 获取页面的canvas
        var msg= document.getElementById('msg')
        // 将获取到的数据（val）画到msg（canvas）上
        QRCode.toCanvas(msg, val, function (error) {
              console.log(error)
        })
      },
      handleChooseGroup() {
        this.showChooseLabelModal = true;
        this.goToGetGroupList();
      },
      handleRefreshCode() {
        let params = {
          labelIds: this.qrCodeInfo.labelIds,
          id: this.qrCodeInfo.id,
          first: false,
        }
        refreshCode(params).then(res => {
          if(res.code == '000000'){
            let data = res.data;
            this.qrCodeInfo = data;
            if(data.labelIds != ''){
              this.currentLabelList = data.labelIds.split(',');
            }
          }else{
            this.$message({
              message: '获取二维码失败，请重新再试',
              type: 'warning'
            });
          }
        })
      },
      handleQRDownloadModal() {
        this.showDownloadQRModal = true;
      },
      handleGoToDownloadQR() {
        alert('待接口OK')
      },
      handleAfterChooseLabel() {
        if(this.choosedLabelList.length < 1){
          this.$message({
            message: '请选择分组',
            type: 'warning'
          });
          return;
        }
        this.showChooseLabelModal = false;
        this.goToGetQRCode({
          labelIds: this.choosedLabelList.join(','),
          id: '',
          first: false,
        });
        this.choosedLabelList = [];
      },
      handleClearSelect() {
        this.choosedLabelList = [];
      },
      goToGetGroupList() {
        // 获取分组列表
        let params = {
          type: 1,
        };
        if(this.labelName){
          params.labelName = this.labelName;
        }
        getLabelList(params).then(data => {
          // console.log('获取分组列表>> ', data)
          if(data.data && data.data.labelNameList){
            this.labelNameList = data.data.labelNameList;
          }
        }).catch(err => {
          console.log('error: ', err)
        });
      },
      
      
      handleGoToLabelManage(){
        let routeUrl = this.$router.resolve({
          path: '/patients-manage/labels-manage/labels-list',
        });
        window.open(routeUrl.href, '_blank');
        this.showReloadLabelModal = true;
      },
      handleReloadLabel() {
        this.showReloadLabelModal = false;
        this.goToGetGroupList();
      },

    },
    
    
  }
</script>


