<template>
  <section class="not-complete-wrap">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond">
    </bread-crumb>
    <section class="not-complete-content screenSet">
      <h1 class="page-title">资料不全居民</h1>
      <p class="tip" v-if="notCompleteList.length">
        共<span class="fontGreen">{{pagination.totalRows}}位</span>居民仅通过微信扫码与您绑定，但未完善姓名、手机号等关键信息。提醒居民完善信息后，您将可以对居民进行消息推送和随访计划设置。
        <el-button type="primary" style="float: right;" size="small" @click="sendCompleteMessageMultiple">批量提醒</el-button>
      </p>
      <el-table
        v-if="notCompleteList.length"
        :data="notCompleteList"
        :row-key="getRowKeys"
        @selection-change="handleSelectionChange"
        style="width: 100%;">
        <el-table-column
          type="selection"
          width="100">
        </el-table-column>
        <el-table-column
          prop="headimgurl"
          label="头像"
          width="100"
          lign="center">
          <template slot-scope="scope">
            <img v-if="scope.row.headimgurl" class="user-photo" :src="scope.row.headimgurl"/>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="wechatUsername"
          width="200"
          label="微信昵称"
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.wechatUsername">{{scope.row.wechatUsername}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="country"
          label="地区"
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.country">{{scope.row.country}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="wechatCreatedTime"
          label="添加时间"
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.wechatCreatedTime">{{scope.row.wechatCreatedTime}}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.isRemind==1" type="text" @click="sendMessageSingle(scope.row)">提醒完善信息</el-button>
            <el-button v-else-if="scope.row.isRemind==2" type="text" style="color: #999">提醒已发送</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" v-if="notCompleteList.length">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNo"
        :page-sizes="[15, 30, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.totalRows">
      </el-pagination>
      </div>
      <div v-if="!notCompleteList.length" class="blank-wrap">
        <div class="blank-content">
          <img src="../../../assets/image/no-content1.png"/>
          <p>暂无资料不全居民</p>
        </div>
      </div>
    </section>
  </section>
</template>

<script>
  import BreadCrumb from '../../../components/breadcrumb.vue'
  import { getNotCompleteList,
    sendCompleteMessage,
    getNotCompleteCount,
    sendCompleteMessageList,
    getRedNum} from '../../../utils/patients/patientsapi'
  export default {
    name: "not-complete",
    components: {
      BreadCrumb
    },
    data() {
      return {
        curmbFirst: '居民管理',
        curmbSecond: '资料不全居民',
        notCompleteList: [],  //未完善列表
        pagination: {
          pageNo: 1,
          pageSize: 15,
        },
        getRowKeys(row) {
          return row.patientId;
        },
        selectList: []
      }
    },
    mounted() {
      this.getRedData();
      this.getNotComplete()
      this.getNotCompleteNum()
    },
    methods: {
      getRedData() {
        getRedNum({
          openTime: (new Date()).getTime(),
          type: 1,
        }).then((data) => {
          if(data.code == '000000') {
            // vm.redNum = data.data
          }
        }).catch(error => {
          vm.$message.error(error)
        })
      },
      handleSelectionChange(val) {
        this.selectList = val;
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val
        this.getNotComplete()
      },
      handleCurrentChange(val) {
        this.pagination.pageNo = val
        this.getNotComplete()
      },
      getNotComplete() { //获取未完善居民列表
        const { pageNo, pageSize} = this.pagination
        getNotCompleteList({
          pageNo,
          pageSize,
        }).then((data) => {
          if(data.code == "000000") {
            this.notCompleteList = data.data;
          }
        }).catch((error) => {
          this.$message({
            message: error,
            type: 'error'
          });
        })
      },
      sendMessageSingle(item) { //发送单个提醒
        sendCompleteMessage({
          qrcodeType: 1,
          patientId: item.patientId,
        }).then((data) => {
          if(data.code == "000000") {
            this.$message({
              message: '已向居民发送提醒',
              type: 'success'
            });
            this.getNotComplete();
            this.getNotCompleteNum();
          }else {
            this.$message({
              message: data.message,
              type: 'error'
            });
          }
        }).catch((error) => {
          this.$message({
            message: error,
            type: 'error'
          });
        })

      },
      sendCompleteMessageMultiple() {
        if(!this.selectList.length) {
          this.$message({
            message: '请选择居民',
            type: 'warning'
          });
          return;
        }
        let patientIdList = [];
        this.selectList.forEach(item => {
          patientIdList.push(item.patientId)
        });
        sendCompleteMessageList({
          qrcodeType: 1,
          patientIds: patientIdList,
        }).then((data) => {
          if(data.code == "000000") {
            this.$message({
              message: '已向居民发送提醒',
              type: 'success'
            });
            this.getNotComplete();
            this.getNotCompleteNum();
          }else {
            this.$message({
              message: data.message,
              type: 'error'
            });
          }
        }).catch((error) => {
          this.$message({
            message: error,
            type: 'error'
          });
        })
      },
      getNotCompleteNum() {
        getNotCompleteCount().then((data) => {
          if(data.code == "000000") {
            this.pagination.totalRows = data.data;
          }
        }).catch((error) => {
          this.$message({
            message: error,
            type: 'error'
          });
        })
      }
    }
  }
</script>

<style lang="scss">
  .not-complete-wrap {
    .not-complete-content {
      padding: 30px;
      background: #ffffff;
      .tip {
        font-size: 12px;
        padding: 30px 0;
        line-height: 32px;
      }
      .page-title {
        font-size: 20px;
        color: #F1E2F3D;
        padding-bottom: 20px;
        border-bottom: 1px solid #efefef;
      }
      .blank-wrap {
        position: relative;
        @media screen and (min-width:1240px) and (max-width:1545px){
          height: 300px;
        }
        @media screen and (min-width:1545px) and (max-width:1600px){
          height: 500px;
        }
        @media screen and (min-width:1600px){
          height: 600px;
        }
        .blank-content {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          img {
            width: 100px;
          }
          p {
            font-size: 20px;
            color: #999;
          }
        }
      }
      .user-photo {
        border-radius: 50%;
        width: 40px;
      }
    }
    /*重置表格选择框*/
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      border-color: #449284;
      background-color: #449284;
    }
    .el-checkbox__inner {
      border-color: #DCDFE6!important;
    }
    .el-checkbox__input.is-focus,.el-checkbox__inner:hover,.el-checkbox__inner.is-focus {
      border-color: #449284!important;
    }
    .el-button--text {
      color: #449284;
    }
    .fontGreen {
      color: #449284;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background: #449284 !important;
    }

  }



</style>
