<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 v-slot="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 v-slot="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 v-slot="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 v-slot="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 v-slot="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>
