<template>
  <div class="selected-dialog">
    <el-dialog
      title="已选居民"
      v-model:visible="showSelectedDialog"
      :before-close="clickClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
      :lock-scroll="false"
      width="65%"
    >
      <div class="selected-dialog-content">
        <div class="title-div">
          <el-button type="primary" size="small" @click="continueAdd"
            >继续添加</el-button
          >
        </div>
        <el-table
          :data="eachHasSelectedList"
          center
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="nickname" label="姓名" align="center">
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            align="center"
            min-width="70px"
          >
            <template v-slot="scope">
              <span v-if="scope.row.age || scope.row.age === 0">{{
                scope.row.age
              }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="idNo"
            label="身份证号"
            align="center"
            min-width="220"
          >
            <template v-slot="scope">
              <span v-if="scope.row.idNo">{{ scope.row.idNo }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="mobilePhone"
            label="手机"
            align="center"
            min-width="120"
          >
          </el-table-column>
          <el-table-column
            prop="labelId"
            label="分组"
            align="center"
            min-width="200"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" class="margin-top20">
          <el-pagination
            background
            v-if="eachHasSelectedList.length"
            @size-change="handleSizeChangePre"
            @current-change="handleCurrentChangePre"
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="paginationSet.pageNum"
            :page-sizes="[5, 10, 50, 100]"
            :page-count="paginationSet.total"
            :page-size="paginationSet.pageSize"
            :total="paginationSet.total"
          >
          </el-pagination>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../../../utils/gogocodeTransfer'
export default {
  components: {},
  name: 'select-patient',
  data() {
    return {
      showSelectedDialog: true,
      eachHasSelectedList: [], // 由分页pageSize算出一页多少条数
      paginationSet: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
    }
  },
  props: {
    hasSelectedList: Array, // 所有已选人数
  },
  mounted() {
    if (this.hasSelectedList.length) {
      this.hasSelectedList.forEach((item) => {
        let groupNames = []
        //转化分组
        if (item.labelModels) {
          item.labelModels.forEach((item) => {
            groupNames.push(item.label)
          })
          item.labelId = groupNames.join('、')
        } else if (item.labelId) {
          item.labelId = item.labelId
          // item.labelId = '-';
        } else {
          item.labelId = '-'
        }
      })
    }
    this.eachHasSelectedList = this.getPageList(this.hasSelectedList)
    const totalLength = this.hasSelectedList.length
    this.paginationSet.total = totalLength
  },
  methods: {
    getPageList(list) {
      const pageNum = this.paginationSet.pageNum - 1
      const pageSize = this.paginationSet.pageSize
      const startIndex = pageNum * pageSize
      const endIndex = this.paginationSet.pageNum * pageSize
      // return list.slice(pageNum,pageSize)
      return list.slice(startIndex, endIndex)
    },
    clickClose() {
      $emit(this, 'closeSelectedDialog', false)
    },
    continueAdd() {
      $emit(this, 'continueAdd', false)
    },
    handleSizeChangePre(val) {
      this.paginationSet.pageSize = val
      this.paginationSet.pageNum = 1
      this.eachHasSelectedList = this.getPageList(this.hasSelectedList)
    },
    handleCurrentChangePre(val) {
      this.paginationSet.pageNum = val
      this.eachHasSelectedList = this.getPageList(this.hasSelectedList)
    },
  },
  emits: ['closeSelectedDialog', 'continueAdd'],
}
</script>

<style scoped></style>

<style lang="scss" scoped>
.margin-top20 {
  margin-top: 20px;
}
.title-div {
  display: flex;
  justify-content: flex-end;
}
.selected-dialog-content {
  margin-top: -15px;
}
</style>
