<template>
  <div>
    <van-popup
      v-if="showMoreUser"
      v-model="showMoreUser"
      round
      overlay
      safe-area-inset-bottom
      position="bottom"
      style="min-height: 60%;max-height: 80%;"
      duration="0.8"
    >
      <div class="user-top" :class="dataList.length > 1 ? 'haveBorder' : ''">
        <span class="top-close" @click="handleClose">关闭</span>
        <h3 class="user-title">
          <span v-if="dataList.length > 1">候选人</span>
          <span v-else>{{ dataList[0].name }}</span>

          <span class="user-count">{{ dataListLength }}</span>
        </h3>
      </div>
      <div class="content">
        <van-tabs v-if="dataList.length > 1" v-model="active" class="vanTabs">
          <van-tab v-for="(index, i) in dataList" :key="i" :title="index.name">
            <van-list
              v-if="index.list && index.list.length > 0"
              v-model="loading"
              :finished="index.finished"
              finished-text="没有更多了"
              @load="onLoad"
              @check="onLoad"
            >
              <ul class="user-wrap user-wrapS">
                <li v-for="item in index.list" :key="item.id" class="user-item">
                  <div class="user-left">
                    <img v-if="avatarMap[item.id]" :src="imgSrc(item.id)" />
                    <span v-else class="name">
                      {{ item.fullname ? item.fullname.substr(-2) : '' }}
                    </span>
                  </div>
                  <div class="user-right">
                    <div class="right-top">
                      <span class="user-name">{{ item.fullname }}</span>
                      <span v-if="item.account" class="user-account">
                        （{{ item.account }}）
                      </span>
                    </div>
                    <div class="right-bottom">
                      <span class="right-org">
                        <ht-icon name="org-tree2"></ht-icon>
                        <span>{{ item.orgName || '暂无组织' }}</span>
                      </span>
                      <span class="right-post">
                        <ht-icon name="post"></ht-icon>
                        <span>{{ item.postName || '暂无岗位' }}</span>
                      </span>
                    </div>
                  </div>
                </li>
              </ul>
            </van-list>

            <van-empty
              v-else
              class="custom-image"
              :image="noDataImage"
              description="暂无法获取用户"
            />
          </van-tab>
        </van-tabs>
        <template v-else-if="dataList.length == 1">
          <van-list
            v-for="(index, i) in dataList"
            v-if="index.list && index.list.length > 0"
            :key="i"
            v-model="loading"
            :finished="index.finished"
            finished-text="没有更多了"
            @load="onLoad"
            @check="onLoad"
          >
            <ul class="user-wrap">
              <li v-for="item in index.list" :key="item.id" class="user-item">
                <div class="user-left">
                  <img v-if="avatarMap[item.id]" :src="imgSrc(item.id)" />
                  <span v-else class="name">
                    {{ item.fullname ? item.fullname.substr(-2) : '' }}
                  </span>
                </div>
                <div class="user-right">
                  <div class="right-top">
                    <span class="user-name">{{ item.fullname }}</span>
                    <span v-if="item.account" class="user-account">
                      （{{ item.account }}）
                    </span>
                  </div>
                  <div class="right-bottom">
                    <span class="right-org">
                      <ht-icon name="org-tree2"></ht-icon>
                      <span>{{ item.orgName || '暂无组织' }}</span>
                    </span>
                    <span class="right-post">
                      <ht-icon name="post"></ht-icon>
                      <span>{{ item.postName || '暂无岗位' }}</span>
                    </span>
                  </div>
                </div>
              </li>
            </ul>
          </van-list>
        </template>
        <van-empty
          v-else
          class="custom-image"
          :image="noDataImage"
          description="暂无法获取用户"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
  import popupMode from '@/mixins/popupMode.js'
  export default {
    name: 'PeoplePopup',
    mixins: [popupMode('showMoreUser')],
    data() {
      return {
        loading: false,

        finished: false,
        noDataImage: require('@/assets/no_data_list.png'),
        active: 0,
        showMoreUser: false,
        avatarMap: {},
        dataListLength: 0,
        dataList: [],
        pageSize: 50,
        page: 1,
      }
    },
    computed: {
      imgSrc() {
        return (userId) => {
          return this.$requestConfig.getImgSrc(this.avatarMap[userId])
        }
      },
    },
    watch: {
      dataList: {
        handler(val) {
          console.log('handler: ', val)
        },
      },
    },

    methods: {
      onLoad() {
        if (this.dataList.length > 0) {
          let list = this.dataList[this.active]

          let data = {
            type: list.groupType || list.type,

            page: list.page + 1,
            pageSize: this.pageSize,
          }
          if (list.type !== 'user') {
            data.id = list.id
          } else {
            let ids = list.id.slice(
              this.pageSize * list.page + 1,
              this.pageSize * list.page + 1 + this.pageSize
            )
            data.ids = ids
            data.page = 1
          }

          this.$requestConfig.getUserOrgPostPolymer(data).then((res) => {
            if (res) {
              if (list.type != 'user') {
                //如果大于total则不再请求
                if (Number(res.pageSize * res.page) >= res.total) {
                  list.finished = true
                }
              } else {
                list.page += 1
                //如果大于total则不再请求
                if (Number(this.pageSize * list.page) >= list.id.length) {
                  list.finished = true
                }
              }

              this.loading = false
              res.rows.map((item) => {
                item.orgName = item.orgNames ? item.orgNames.join('/') : ''
                item.postName = item.postNames ? item.postNames.join('/') : ''
              })
              list.pageSize = res.pageSize
              list.page = res.page

              list.list.push(...res.rows)
            }
          })
        }
      },

      showDialog(list) {
        let dataList = []
        this.dataList = []
        this.dataListLength = 0
        list.forEach((itme) => {
          if (itme.type == 'user') {
            dataList = [
              {
                name: '用户',
                id: [],
                type: 'user',
                finished: false,
              },
            ]
          }
        })

        list.forEach((item) => {
          if (item.type == 'user') {
            dataList[0].id.push(item.id)
          } else {
            dataList.push(item)
          }
        })
        dataList.forEach(async (item, index) => {
          let data = {}
          if (item.type == 'user') {
            let ids = item.id.slice(0, this.pageSize)
            data = {
              type: item.type,
              ids: ids,
              page: this.page,
              pageSize: this.pageSize,
            }
          } else {
            data = {
              type: item.groupType || item.type,
              id: item.id,
              page: this.page,
              pageSize: this.pageSize,
            }
          }
          await this.$requestConfig.getUserOrgPostPolymer(data).then((res) => {
            if (res) {
              res.rows.map((item) => {
                // item.orgNames.length = 2
                // item.postNames.length = 2

                item.orgName = item.orgNames ? item.orgNames.join('/') : ''
                item.postName = item.postNames ? item.postNames.join('/') : ''
              })
              item.finished = false
              item.pageSize = res.pageSize
              item.page = res.page
              item.list = []
              item.list = res.rows

              if (item.type != 'user') {
                this.dataListLength = this.dataListLength + res.total
                //如果大于total则不再请求
                if (Number(res.pageSize * res.page) >= res.total) {
                  // this.finished = true
                  item.finished = true
                }
              } else {
                this.dataListLength = this.dataListLength + item.id.length

                //如果大于total则不再请求
                if (Number(res.pageSize * res.page) >= item.id.length) {
                  //

                  // this.finished = true
                  item.finished = true
                }
              }

              //当最后一个请求成功后执行
              if (index + 1 == dataList.length) {
                this.loading = false

                this.dataList = dataList

                this.$nextTick(() => {
                  this.showMoreUser = true
                })
              }
            }
          })
        })
      },
      handleClose() {
        this.showMoreUser = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .van-popup {
    display: flex;
    flex-direction: column;
  }
  .haveBorder {
    border-bottom: 10px solid #f6f6f6;
  }
  .user-top {
    background: #fff;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: center;
    padding: 12px 16px;
    width: calc(100% - 32px);

    z-index: 2;
    .top-close {
      font-size: 14px;
      color: #8c8c8c;
      position: absolute;
      left: 16px;
    }
    .user-title {
      margin: 0;
      font-size: 17px;
      color: #1a1a1a;
      font-weight: 800;
      .user-count {
        padding-left: 4px;
        color: #409eff;
      }
    }
  }
  .user-wrap {
    padding: 8px 16px;
    .user-item {
      display: flex;
      width: 100%;
      padding: 12px 0;
      .user-left {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #409eff;
        text-align: center;
        line-height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 36px;
          height: 36px;
          border-radius: 50%;
        }
        .name {
          font-size: 12px;
          color: #fff;
        }
      }
      .user-right {
        flex: 1;
        padding-left: 8px;
        .right-top {
          height: 21px;
          line-height: 21px;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          .user-name {
            font-size: 15px;
            color: #212121;
            font-weight: 500;
          }
          .user-account {
            font-size: 12px;
            color: #8c8c8c;
          }
        }

        .right-bottom {
          display: flex;

          margin-top: 4px;
          // height: 17px;
          line-height: 17px;
          .right-org,
          .right-post {
            color: #8c8c8c;
            font-size: 12px;
            span {
              margin-left: 4px;
            }
          }
          .right-org {
            width: 40%;
            padding-right: 32px;
            span {
              margin-left: 4px;
            }
          }
          .right-post {
            width: 60%;
          }
        }
      }
    }
  }
  .user-wrapS {
    padding-top: 0;
  }
  ::v-deep .van-tabs {
    margin: 0px !important;
    padding: 0 !important;
    .van-tabs__nav {
      // padding-bottom: 0px;
    }

    .van-tabs__line {
      background: #409eff;
    }
  }
  .vanTabs {
    ::v-deep .van-tabs__wrap {
      border-bottom: 1px solid #eee;
    }
  }
  .content {
    flex: 1;
    overflow-y: auto;
  }
</style>
