<template>
  <div class="PeopleList">
    <u-navbar back-icon-color="#000" title="居民管理" title-color="#000" title-width="300" title-size="32" 
        :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44" z-index="999"></u-navbar>
    <div class="header-content-bg">
      <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
    </div>
    <div class="top-tabs" :style="{'top': `${statusBarHeight+44}px`}">
      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#fff" inactive-color="#222"
        active-color="#1D2229" :bar-style="barStyle"  font-size="34" @change="change"></u-tabs>
      <div class="select-content">
        <div class="search-input">
          <u-search placeholder="姓名/联系方式/身份证后6位" :clearabled="true" v-model="keyword" :show-action="false" bg-color="#F4F5FA" search-icon-color="#F4F5FA" 
            color="#666" height="72" @search="handerSearch"  @clear="handerClear"></u-search>
        </div>
        <div class="area-content fill">
          <AiAreaPicker class="ai-area" v-model="areaId" :areaId="$areaId" :fullName.sync="areaName" @input="areaSelect">
            <AiMore v-model="areaName" placeholder="选择地区"/>
          </AiAreaPicker>
        </div>
      </div>
    </div>
    <div class="dataes">
      <div class="datass" v-for="(item, index) in datas" :key="index" @click="toDetailCard(item)">
        <div class="left">
          <div class="select-img" @click.stop="clickCheck(index)">
            <img :src="item.isCheck ? checkImg : circleImg" alt="" >
          </div>
          <img :src="item.photo ? item.photo : userImg " alt="" class="user-img"/>
        </div>

        <div class="right">
          <div class="rightTop">
            <span class="name">{{ item.name }}</span>
            <span class="btn" v-if="user.id == item.createUserId">
              <img src="https://cdn.sinoecare.com/i/2024/07/16/66963dd974ad1.png" alt="" @click.stop="edit(item.id)">
              <img src="https://cdn.sinoecare.com/i/2024/07/16/6696151964a8b.png" alt="" @click.stop="del(item.id)">
            </span>
          </div>
          <div class="rightBottom">
            <span>{{ item.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</span>
            <span>{{ item.phone || ''}}</span>
          </div>
          <span class="item-tag" v-for="(items, indexs) in item.residentLabelList" :key="indexs">{{items.labelName}}</span>
        </div>
      </div>
      <AiEmpty v-if="!datas.length" />
    </div>
    
    <div style="height: 60px"></div>
    <div class="footer" @click="showTagClick">
      <div class="btn" :class="showBtn ? '' : 'bg-gray'">打标签</div>
    </div>
    <u-popup v-model="showTag" mode="bottom">
      <div class="popup-content">
        <div class="title">选择标签</div>
        <div class="tag-list">
          <div class="item" :class="item.isCheck ? 'active' : ''" v-for="(item, index) in tagList" :key="index" @click="tagClick(index)">{{ item.labelName }}</div>
        </div>
        <div class="poup-btn">
          <div>取消</div>
          <div class="confirm" @click="confirmTag">确定</div>
        </div>
      </div>
    </u-popup>

  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'PeopleList',
  appName: '查看居民档案',
  customNavigation: true,
  data() {
    return {
      keyword: '',
      datas: [],
      current: 1,
      size: 10,
      tabList: [
        {
          name: '全部居民',
        },
        {
          name: '本地居民',
        },
        {
          name: '流动人员',
        },
      ],
      currentTabs: 0,
      areaId: '',
      areaName: '',
      backgroundNavbar: {
        background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
        backgroundSize: 'cover',
      },
      barStyle: {
        'width': '20px',
        'height': '4px',
        'border-radius': '3px',
        'bottom': '-4px',
        'background': '#026AF2'
      },
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      checkImg: 'https://cdn.sinoecare.com/i/2024/07/16/6695ddf91113c.png',
      circleImg: 'https://cdn.sinoecare.com/i/2024/07/16/6695ddf890b1e.png',
      userImg: 'https://cdn.sinoecare.com/i/2024/07/16/6695e2a0d95c9.png',
      showTag: false,
      tagList: []
    }
  },
  computed: {
    ...mapState(['user']),
    showBtn() {
      var btn = false
      this.datas.map((item) => {
        if(item.isCheck) {
          btn = true
        }
      })
      return btn
    }
  },
  onLoad() {
    this.areaId = this.user.areaId
    this.areaName = this.user.areaName
    uni.$on('reload', () => {
      this.current = 1
      this.getList()
    })
    this.getList()
  },
  onShow() {
    uni.setNavigationBarColor({
      frontColor: 'black',
      backgroundColor: '#ffffff'
    })
  },
  methods: {
    getList() {
      var residentType = ['', 0, 1][this.currentTabs]
      this.$instance
      .post('/app/appresident/list', null, {
        params: {
          size: 20,
          current: this.current,
          con: this.keyword,
          areaId: this.areaId,
          residentType: residentType,
          auditStatus: 1
        },
      })
      .then((res) => {
        if (res.code == 0) {
          res.data.records.map((item) => {
            item.isCheck = false
          })
          this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records

          this.pages = res.data.pages
        }
      })
    },
    change(index) {
      this.currentTabs = index
      this.current = 1
      this.datas = []
      this.getList()
    },
    toDetailCard(item) {
      uni.navigateTo({url: `./DetailCard?id=${item.id}`})
    },
    areaSelect(e) {
      this.areaId = e
      this.current = 1
      this.getList()
    },
    handerSearch(e) {
      this.keyword = e
      this.current = 1
      this.getList()
    },
    handerClear() {
      this.keyword = ''
      this.current = 1
      this.getList()
    },
    edit(id) {
      var residentType = ['', 0, 1][this.currentTabs]
      uni.navigateTo({url: `./Add?id=${id}&type=${residentType}`})
    },
    del(id) {
      this.$dialog.confirm('确定删除该数据?').then(() => {
        uni.showLoading()
        this.$instance.post(`/app/appresident/delete?ids=${id}`).then((res) => {
          if (res.code == 0) {
            this.$u.toast('删除成功！')
            this.current = 1
            this.getList()
          }
          uni.hideLoading()
        })
      }).catch(() => {
      })
    },
    clickCheck(index) {
      this.datas[index].isCheck = !this.datas[index].isCheck
    },
    showTagClick() {
      if(!this.showBtn) return
      this.getTagList()
    },
    tagClick(index) {
      this.tagList[index].isCheck = !this.tagList[index].isCheck
    },
    getTagList() {
      this.$instance.post('app/appresidentlabelinfo/list?current=1&size=2000').then((res) => {
        if (res.code == 0) {
          res.data.records.map((item) => {
            item.isCheck = false
          })
          this.tagList = res.data.records
          this.showTag = true
        }
      })
    },
    confirmTag() {
      var residentId = [], residentLabelList = []
      this.datas.map((item) => {
        if(item.isCheck) {
          residentId.push(item.id)
        }
      })
      this.tagList.map((item) => {
        residentLabelList.push(item)
      })
      this.$instance.post('app/appresidentlabel/batchUpdate', {
        residentIds: residentId,
        residentLabelList
      }).then((res) => {
        if (res.code == 0) {
          this.$u.toast('操作成功')
          this.getList()
        }
      })
    }
  },
  onReachBottom() {
    this.current = this.current + 1
    this.getList()
  },
}
</script>

<style scoped lang="scss">
.PeopleList {
  height: 100%;

  .header-content-bg {
    width: 100%;
    position: fixed;
    z-index: -1;
    img {
      width: 100%;
      height: 592px;
    }
  }
  
  .top-tabs {
    width: calc(100% - 64px);
    box-sizing: border-box;
    position: fixed;
    left: 32px;
    z-index: 9;

    .select-content {
      width: 100%;
      padding: 0 32px;
      box-sizing: border-box;
      background-color: #fff;
      .search-input {
        width: 100%;
        padding: 28px 0;
      }
      .area-content {
        width: 100%;
        padding: 26px 32px;
        box-sizing: border-box;
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #222;
        ::v-deep u-icon, 
        ::v-deep .u-icon {
          width: 100%;
        }
        ::v-deep .u-icon__label {
          display: inline-block;
          width: calc(100% - 32px);
        }
      }

      
    }
  }

  ::v-deep .u-tabs {
    border-bottom: 1px solid #eee;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  // .top-tabs {
  //   width: 100%;
  //   padding: 0 32px;
  //   box-sizing: border-box;
  //   position: fixed;
  //   z-index: 9;
  //   ::v-deep .u-tabs {
  //     border-top-left-radius: 16px;
  //     border-top-right-radius: 16px;
  //     border-bottom: 1px solid #eee;
  //   }
  //   .select-content {
  //     width: 100%;
  //     padding: 0 32px;
  //     box-sizing: border-box;
  //     background-color: #fff;
  //     .search-input {
  //       width: 100%;
  //       padding: 28px 0;
  //     }
  //     .area-content {
  //       width: 100%;
  //       padding: 26px 32px;
  //       box-sizing: border-box;
  //       font-family: PingFangSC-Regular;
  //       font-size: 32px;
  //       color: #222;
  //       ::v-deep u-icon, 
  //       ::v-deep .u-icon {
  //         width: 100%;
  //       }
  //       ::v-deep .u-icon__label {
  //         display: inline-block;
  //         width: calc(100% - 32px);
  //       }
  //     }

      
  //   }
  // }

  .areatop {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .line {
    height: 16px;
    background: #f5f5f5;
  }

  .seachObjs {
    border-bottom: 2px solid #f5f5f5;
    border-top: 2px solid #f5f5f5;
    padding: 20px 32px;
    background: #fff;
  }

  ::v-deep .u-form {
    width: 100%;

    .areaIds {
      .u-form-item__body {
        .u-form-item--right {
          .u-form-item--right__content {
            display: flex;
            align-items: center;

            .u-form-item--right__content__slot {
              .AiAreaPicker {
                width: 100%;
                display: flex;
                justify-content: flex-end;

                .areaSelector {
                  .location {
                    opacity: 0;
                  }
                }
              }
            }

            .u-form-item--right__content__icon {
              margin-bottom: 8px;
            }
          }
        }
      }
    }
  }

  .dataes {
    width: calc(100% - 64px);
    margin: 320px 0 0 32px;
    .datass {
      display: flex;
      padding: 20px 0 12px 0;
      width: 100%;
      background: #fff;
      .left {
        width: 208px;
        .user-img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
        }
        .select-img {
          display: inline-block;
          padding: 0 32px;
          img {
            width: 48px;
            height: 48px;
            vertical-align: super;
          }
        }
      }

      .right {
        // display: flex;
        // flex-direction: column;
        width: calc(100% - 208px);
        padding: 0 32px 20px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;

        .rightTop {
          display: flex;
          justify-content: space-between;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 32px;
          color: #333;
          line-height: 44px;

          .btn {
            img {
              width: 48px;
              height: 48px;
              margin-left: 40px;
            }
          }
        }

        .rightBottom {
          display: flex;
          justify-content: space-between;
          margin: 8px 0;
          font-size: 28px;
          font-family: PingFangSC-Regular;
          color: #999;
          span:nth-of-type(1) {
            display: inline-block;
            margin-right: 16px;
            font-size: 26px;
          }
        }

        .item-tag {
          display: inline-block;
          line-height: 44px;
          padding: 0 10px;
          background-color: #F0F2F5;
          font-family: PingFangSC-Regular;
          font-size: 24px;
          color: #8891A1;
          margin: 0 12px 8px 0;
          border-radius: 6px;
        }
      }
    }
    .datass:nth-last-of-type(1) {
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
      .right {
        border-bottom: none;
      }
    }
  }

  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #F4F5FA;
    padding: 64px 64px 68px 64px;
    z-index: 9;
    .btn {
      width: calc(100% - 128px);
      line-height: 88px;
      background: #026AF2;
      border-radius: 44px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 34px;
      color: #FFF;
      text-align: center;
    }
    .bg-gray {
      background-color: #ddd;
    }
  }

  .empty {
    padding-bottom: 64px;
    img {
      width: 282px;
      height: 306px;
      margin: 168px 0 0 234px;
    }

    p {
      text-align: center;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999;
      line-height: 44px;

      span {
        color: #467DFE;
      }
    }
  }

  .popup-content {
    height: 800px;
    width: 100%;
    padding: 16px 32px 170px;
    box-sizing: border-box;
    overflow-y: scroll;
    position: relative;
    .title {
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 32px;
      color: #333;
      line-height: 44px;
      margin-bottom: 16px;
    }
    .tag-list {
      .item {
        display: inline-block;
        padding: 0 16px;
        line-height: 44px;
        border-radius: 8px;
        margin: 0 16px 16px 0;
        background: #F0F2F5;
        color: #8891A1;
        font-size: 24px;
      }
      .active {
        background-color: #467DFE;
        color: #fff;
      }
    }
    .poup-btn {
      padding: 0 32px 68px;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      div {
        display: inline-block;
        width: calc(50% - 64px);
        height: 88px;
        line-height: 88px;
        text-align: center;
        border-radius: 44px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 34px;
        color: #222;
        border: 1px solid #eee;
      }
      .confirm {
        margin-left: 64px;
        color: #fff;
        background-color: #026AF2;
        border-color: #026AF2;
      }
    }
  }
  ::v-deep .emptyWrap {
    background-color: #fff;
    padding-bottom: 32px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }
}
</style>
