<template>
  <div class="selected-dialog">
    <el-dialog
      title="已选居民"
      :visible.sync="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">
          </el-table-column>
          <el-table-column
            prop="idNo"
            label="身份证号"
            align="center"
            min-width="220">
          </el-table-column>
          <el-table-column
            prop="mobilePhone"
            label="手机"
            align="center"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="showLabelName2"
            label="分组"
            align="center"
            min-width="200">
          </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>

  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.showLabelName2 = groupNames.join('、');
          } else {
            item.showLabelName2 = '-';
          }
        });
      }
      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() {
        this.$emit('closeSelectedDialog',false)
      },
      continueAdd() {
        this.$emit('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)
      },
    }
  }
</script>
<style scoped>
</style>
<style scoped lang="scss">
  .margin-top20{
    margin-top: 20px;
  }
  .title-div{
    display: flex;
    justify-content: flex-end;
  }
  .selected-dialog-content{
    margin-top: -15px;
  }
</style>
