<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>
              <el-tag size="small">糖尿病高危分组</el-tag>
              <el-tag size="small">高血压分组</el-tag>
              <el-tag size="small" class="choose-group">+ 选择分组</el-tag>
            </div>
            <div class="qr-pic-wrap">
              <div class="qr-box">
                <div class="pic">
                  <div class="img" style="width: 200px; height: 200px;"></div>
                  <el-button icon="el-icon-download" class="qr-download-btn">下载二维码</el-button>
                </div>  
                <p class="time-limit">有效期：2019.5.1-2019.5.30 </p>
                <el-button icon="el-icon-refresh" class="refresh-btn" size="small">刷新有效期</el-button>
              </div>  
            </div>
            <div class="border-space"></div>
            <div class="increased-steps-wrap">
              <div class="label-title">居民添加流程</div>
              <ul>
                <li></li>
              </ul>
            </div>
          </div>
        </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 {
    getUploadHistory
  } from "@/utils/patients/patientsapi";
import { getSaasDomain } from '@/utils/index';


  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: [],

      }
    },
    components: {
      BreadCrumb,
      
    },
    created() {
      this.goToGetUploadHistory();
    },
    // 挂载到Dom完成时
    mounted() {
      // commonUtil.resizeHeight();
    },
    methods: {
      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.open('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;
        }
      },
    } 
  }

</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{
    .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;
      .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-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{
          .label-title{
            font-size: 20px;
            color: #1E2F3D;
            line-height: 28px;
            margin: 30px 0 24px;
          }
        }
      }
    }
  }
</style>

