<template>
  <div class="newly-increased-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" ></bread-crumb>
    <div class="component-content screenSet">
      <el-tabs v-model="activeName2" @tab-click="handleTabClick" class="tab-list">
        <el-tab-pane label="单个录入" name="first" class="single-input">
          <el-row class="save-and-add">
            <el-button type="primary">保存并新增</el-button>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="二维码录入" name="second">
          <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>
        </el-tab-pane>
        <el-tab-pane label="批量导入" name="third">
          <div class="step-guide">
            <ul class="guide-list">
              <li class="first">
                <div class="procedure">
                  <i class="icon">1</i>
                  <p class="text">下载模板</p>
                  <p class="border"></p>
                </div>
                <div class="under-info">
                  <p class="step-tips">点击下方“下载模板”</p>
                  <el-button type="primary" size="small" @click="handleDownloadDemo">下载模板</el-button>
                </div>
              </li>
              <li class="first second">
                <div class="procedure">
                  <i class="icon">2</i>
                  <p class="text">填写居民信息</p>
                  <p class="border"></p>
                </div>
                <div class="under-info">
                  <p class="step-tips">按照模板编辑居民信息</p>
                  <ul class="fill-tips">
                    <li>
                      <i class="tips-title notice">填写要求：</i>
                    </li>
                    <li>
                      <i class="tips-title">居民姓名：</i>
                      <p>当前支持2~15个字符</p>
                    </li>
                    <li>
                      <i class="tips-title">出生年月：</i>
                      <p>"年-月-日"，我们将优先识别身份证信息中的出生年月信息，若身份证未填，将识别此处信息。</p>
                    </li>
                    <li>
                      <i class="tips-title">居住地址：</i>
                      <p>≤50字</p>
                    </li>
                    <li>
                      <i class="tips-title">电话：</i>
                      <p>请输入11为手机号码</p>
                    </li>
                    <li>
                      <i class="tips-title">分组与诊断：</i>
                      <p>多个分组之间，用中文逗号“，”分割</p>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="first third">
                <div class="procedure">
                  <i class="icon">3</i>
                  <p class="text">上传文件</p>
                </div>
                <div class="under-info">
                  <p class="step-tips">将填写好的居民信息文件在下方进行上传</p>
                  <el-upload
                    class="upload-file"
                    drag
                    :action="uploadUrl"
                    :headers="uploadHeaders"
                    :file-list="files"
                    :on-change="changeFile"
                    :on-error="uploadError"
						        :on-success="uploadSuccess"
                    :show-file-list="false"
                    :multiple="false">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                  </el-upload>
                </div>
              </li>
            </ul>
          </div>
          <div class="component-content screenSet upload-history-wrap">
            <p class="septal-line"></p>
            <p class="upload-record">上传历史记录：120</p>
            <el-table
              :data="searchData.tableData"
              class="upload-table"
              style="width: 100%">
              <el-table-column
                header-align="center"
                align="center"
                prop="fileName"
                label="文件名"
                width="180">
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="uploadTime"
                label="上传时间"
                width="180">
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="insertCount"
                label="新导入居民数">
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="updateCount"
                label="更新居民资料数">
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="status"
                label="处理状态">
              </el-table-column>
              <el-table-column
                header-align="center"
                align="center"
                prop="address"
                label="关闭理由">
              </el-table-column>
            </el-table>
            <el-pagination
              class="pagination-style"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :total="searchData.totalCount"
              :current-page="1"
              :page-sizes="[10, 30, 50, 100]"
              :page-size="searchData.pageSize"
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </div>
        </el-tab-pane>
    </el-tabs>
    </div>
    
  </div>
</template>

<script>
  import BreadCrumb from "@/components/breadcrumb.vue";
  import * as commonUtil from "@/utils/utils";
  import {
    getQRCode,
    getUploadHistory,
    getLabelList,
    refreshCode,
  } from "@/utils/patients/patientsapi";
  import { getSaasDomain } from '@/utils/index';
  import QRCode from 'qrcode';

  export default {
    data() {
      return {
        curmbFirst: "居民管理",
        curmbSecond: "新增居民",
        activeName2: 'second',
        searchData: {
          pageNo: 1,  // 第几页
          pageSize: 10,  // 每页条数
          tableData: [],
          totalCount: 0,
        },

        uploadUrl: `${getSaasDomain('web/patientManages/import')}`,
        uploadHeaders: {
          token: localStorage.getItem('token')
        },
        files: [],
        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: '北京烤鸭'
        }]
      }
    },
    components: {
      BreadCrumb,
    },
    created() {
      this.goToGetQRCode({
        labelIds: '',
        id: '',
        first: true,
      });
      this.goToGetUploadHistory();
    },
    // 挂载到Dom完成时
    mounted() {
      // commonUtil.resizeHeight();
    },
    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)
        });
      },

      goToGetUploadHistory(){
        console.log('go get upload history>>>>>>')
        let params = {
          pageNo: this.searchData.pageNo,
          pageSize: this.searchData.pageSize,
        };
        getUploadHistory(params).then(res => {
          console.log('获取上传历史记录：', res);
          if(res.code == "000000"){
            if(res.data.importRecordsModelList.length > 0){
              this.searchData.tableData = res.data.importRecordsModelList;
              this.searchData.totalCount = res.data.count;
            }
          }else{
            // 获取失败
            this.$message({
              message: '接口返回失败，请重新再试',
              type: 'warning'
            });
          }
        })
      },
      handleTabClick(tab, event) {
        console.log(tab, event);
      },
      handleCurrentChange(val) {
        this.searchData.pageNo = val;
        this.goToGetUploadHistory();
      },
      handleSizeChange(val) {
        this.searchData.pageSize = val;
        this.goToGetUploadHistory();
      },
      handleDownloadDemo(){
        window.location.href = 'https://file.yunqueyi.com/File/template/居民导入模板.xlsx';
      },
      changeFile(file, fileList) {
        const name = file.name;
        const type = name.substring(name.lastIndexOf('.') + 1);

        if (type !== 'xls' && type !== 'xlsx') {
          this.$message({
            message: '上传文件只能是 xls、xlsx格式!',
            type: 'warning'
          });	
          fileList.splice(0, 1);
          return false;
        }

        if (fileList.length > 1) {
          fileList.splice(0, 1);		
        }

        this.files = [file];
      },
      uploadError(err, file, fileList){
        console.log('%c upload Error >>>>>>>>', 'color: red;')
      },
      uploadSuccess(response, file, fileList) {
        console.log('%c upload Success >>>>>>>>', 'color: red;')
        // this.loading = false;
        // this.visible = false;
        // this.tipShow = true;
        console.log('response: ', response);
        console.log('file: ', file);
        console.log('fileList: ', fileList)
        // console.log(response, file, fileList);
        const { code } = response;
        this.code = response.code;

        const codes = ['000000', '400002', '400004'];

        if (codes.indexOf(code) > -1) {
          this.error = response.data;	
        } else {
          this.error = response.message;
        }
      },
      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>

<style lang="less" scoped>
  .newly-increased-wrap{
    
    .screenSet{
      background: #fff;
      padding: 30px;
      display: flex;
      flex-direction: column;
      &.upload-history-wrap{
        margin-top: 30px;
        margin: 0;
        padding: 0;
        .septal-line{
          width: 100%; 
          height: 1px;
          background: #EBEEF5;
        }
      }
    }
    .top-title{
      font-size: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #efefef;
    }
    .single-input{
      .save-and-add{
        text-align: right;
      }
    }
  }
</style>

<style lang="less">
  .newly-increased-wrap{
    #msg{
      width:200px !important;
      height:200px !important;
    }
    .top-title{
      border: 0 !important;
    }
    .upload-record{
      width: 100%;
      font-size: 20px;
      line-height: 28px;
      color: #1E2F3D;
      background: #fff;
      margin: 30px 0 24px;
    }
    .pagination-style{
      text-align: right;
      margin-top: 20px;
    }
    .tab-list{
      flex: 1;
      display: flex;
      flex-direction: column;
      .choose-label-wrap{
        
        .el-dialog__body{
          padding: 0 25px 30px;
        }
        .under-title-tips{
          font-size: 12px;
          color: #595959;
          text-align: center;

        }
        .row-in-line{
          overflow: hidden;
          margin-top: 35px;
          .el-button, .tips{
            display: inline-block;
          }
          .clear-select{
            color: #449284;
            border: 1px solid #449284;
            &.is-disabled{
              color: #c0c4cc !important;
              background: #fff !important;
              border: 1px solid #dcdfe6 !important;
              opacity: 1;
            }
          }
          .tips, .right{
            float: right;
          }
          .tips{
            line-height: 32px;
          }
        }
        .list-wrap{
          width: 100%; 
          height: 300px;
          border: 1px solid #E4E7ED;
          margin-top: 10px;
          padding: 10px;
          border-radius: 4px;
          .el-checkbox{
            margin-right: 10px;
            margin-left: 0;
            margin-bottom: 10px;
          }
        }
      }
      .reload-label-modal{
        text-align: center;
        .el-dialog__body{
          padding: 0 25px 8px;
          .tips{
            text-align: center;
          }
        }
      }
      .download-qr-modal{
        .qr-pic{
          width: 200px;
          height: 200px;
          background: pink;
          margin: 0 auto;
        }
        .exp-date{
          line-height: 36px;
          text-align: center;
          color: #606060;
          padding-bottom: 10px;
        }
        .choose-group{
          text-align: center;
          padding-bottom: 10px;
          .title{
            display: inline-block;
          }
          .el-select{
            width: 350px;
          }
        }
        .under-tips{
          color: #a3a5aa;
          font-size: 12px;
          line-height: 20px;
          text-align: center;
        }
      }
      .el-tabs__item{
        color: #303133;
        font-weight: 600;
        letter-spacing: 1px;
      }
      .el-tabs__active-bar{
        background-color: #449284;
      }
      .el-tabs__content{
        flex: 1;
        overflow: hidden;
        .el-tab-pane{
          width: 100%;
          height: 100%;
          background: #F0F2F5;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .step-guide{
            width: 100%;
            background: #fff;
            .guide-list{
              width: 100%; 
              height: 237px;
              margin-top: 15px;
              .first{
                width: 308px;
                // width: 30%;
                height: 200px;
                float: left;
                .procedure{
                  width: 100%; height: 20px;
                  .icon{
                    width: 20px; 
                    height: 20px;
                    display: inline-block;
                    background: #449284;
                    border-radius: 20px;
                    text-align: center; line-height: 20px;
                    font-size: 12px; color: #fff;
                  }
                  .text{
                    display: inline-block;
                    font-size: 14px;
                    color: #262626;
                    font-weight: 600;
                  }
                  .border{
                    display: inline-block;
                    width: 200px; 
                    // width: 70%;
                    height: 0px;
                    border-bottom: 1px solid #449284;
                    vertical-align: middle;
                  }
                  &::after{
                    content: '';
                    height: 100%;
                    display: inline-block;
                    vertical-align: middle;
                  }
                }
                .under-info{
                  padding-left: 25px;
                  .step-tips{
                    width: 100%; 
                    font-size: 12px; 
                    color: #595959;
                    margin: 8px 0 20px;
                  }
                  
                }
              }
              .second{
                  width: 380px;
                  // width: 40%;
                  .procedure{
                    .border{
                      width: 250px;
                      // width: 70%;
                    }
                  }
                  .under-info{
                    .fill-tips{
                      li{
                        font-size: 12px;
                        width: 300px;
                        line-height: 18px;
                        .tips-title{
                          display: inline-block;
                          color: #262626;
                          font-weight: 600;
                          &.notice{
                            color: #449284;
                          }
                        }
                        p{
                          display: inline;
                          color: #595959;
                        }
                      }
                    }
                  }
                  
              }
              .third{
                width: 300px;
                // width: 30%;
                .el-upload{
                  width: 260px;
                  height: 150px;
                }
                .el-upload-dragger{
                  width: 260px;
                  // width: 100%;
                  height: 150px;
                }
              }
            }

          }
          
          .upload-table{
          }
          .el-table__body-wrapper{
            &::-webkit-scrollbar  
            {  
                width: 5px;  
                height: 5px;  
                background-color: #fff;  
            }  
            &::-webkit-scrollbar-thumb
            {
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #bbb;
            }
          }
        }
      }
      .qr-code-wrap{
        background: #fff;
        .qr-group{
          width: 100%; height:auto;
          overflow: hidden; 
          margin: 30px 0 40px;
          .label-name{
            display: inline-block;
            font-size: 12px;
            color: #8C8C8C;
          }
          .el-tag{
            color: #449284;
            background:rgba(236,244,242,1);
            border:1px solid rgba(150,195,193,1);
            margin-left: 10px;
            &.choose-group{
              color: #666666;
              background:rgba(255,255,255,1);
              border:1px dashed rgba(217,217,217,1);
              cursor: pointer;
            }
          }
        }
        .qr-pic-wrap{
          width: 100%; height: auto;
          .qr-box{
            width: 200px;
            margin: 0 auto;
            text-align: center;
            .pic{
              background:rgba(240,242,245,1);
              width: 200px; height: auto;
              border: 0; 
              .qr-code-img{
                width: 200px;
                height: 200px;
                overflow: hidden;
                border: 0;
                display: block;
              }
              .qr-download-btn{
                color: #fff;
                background: #449284;
                width: 200px;
                border: 0;
              }
            }
            .time-limit{
              width: 100%; 
              text-align: center;
              color: #8C8C8C;
              font-size: 12px;
              line-height: 41px;
            }
            .refresh-btn{
              color: #449284;
              background:rgba(236,244,242,1);
              border:1px solid rgba(150,195,193,1);
            }
            
          }
        }
        .border-space{
          width: 100%;
          height: 1px;
          background: #EBEEF5;
          margin-top: 30px;
        }
        .increased-steps-wrap{
          overflow: hidden;
          .label-title{
            font-size: 20px;
            color: #1E2F3D;
            line-height: 28px;
            margin: 30px 0 24px;
          }
          .flow-path{
            // width: 100%; 
            height: 441px;
            display: block;
            border: 0;
            margin-left: -20px;
          }
        }
      }
    }
  }
</style>

