<template>
  <div class="wrapper">
    <div class="searAreName">
      <AiAreaPicker ref="area" class="ai-area" v-model="areaId" :name.sync="areaName" :areaId="$areaId" @input="areaSelect" >
        <div class="ai-area__wrapper">
          <span class="label" v-if="areaName">{{ areaName }}</span>
          <span v-else>请选择</span>
          <u-icon name="arrow-down" color="#666" size="24" style="margin-left: 4px"></u-icon>
        </div>
      </AiAreaPicker>
      <!-- <span v-else>{{ areaName }}</span> -->

      <u-search v-model="name" ref="searchObj" placeholder="请输入名称/类型/电话" :show-action="false" clearabled bg-color="#F5F5F5" search-icon-color="#ccc" placeholder-color="#666" @search="handerSearch" @clear=";(index = []), (name = ''), getList()" style="width: 70%" />
    </div>

    <!-- <AiTopFixed>
      <div class="searchObj">
        <u-search v-model="name" ref="searchObj" placeholder="请输入姓名或电话" :show-action="false" clearabled bg-color="#F5F7F9" search-icon-color="#6AA8F8" placeholder-color="#D0D4D4" @search="handerSearch" @clear=";(index = []), (name = ''), getList()" />
      </div>
    </AiTopFixed> -->

    <template v-if="list.length">
      <u-index-list :scrollTop="scrollTop" :index-list="indexList">
        <div v-for="(letter, index) in indexList" :key="index">
          <u-index-anchor :index="letter" />
          <div class="item" hover-class="bg-hover" @click="phone(item)" v-for="(item, index) in list.filter((e) => e.nameInitials == letter)" :key="index">
            <label>{{ item.name }}</label>
            <div class="info">
              {{ item.type }}<span>{{ item.phone }}</span>
            </div>
          </div>
        </div>
      </u-index-list>
    </template>

    <AiEmpty v-else></AiEmpty>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AppAddressBook',
  appName: '便民通讯录',
  data() {
    return {
      scrollTop: 0,
      indexList: [],
      list: [],
      userInfo: {},
      areaId: '',
      $areaId: '',
      areaName: '',
      name: '',
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo')
    this.areaId = this.$areaId
    this.areaName = this.$areaName
    this.getList()
  },

  computed: {
    ...mapState(['user']),
  },
  watch: {},
  methods: {
    phone({ phone: phoneNumber }) {
      uni.makePhoneCall({ phoneNumber })
    },
    getList() {
      this.$instance
        .post('/app/appconvenientaddressbook/list', null, {
          params: {
            isPublic: 1,
            resource: 'portal',
            areaId: this.areaId,
            size: 999,
            name: this.name,
          },
        })
        .then((res) => {
          if (res?.data) {
            this.indexList = [...new Set(res.data.records.map((e) => e.nameInitials))]
            this.list = res.data.records
          }
        })
    },
    areaSelect(v) {
      if(this.user.status == 2 ) {
        this.areaId = v
        this.isMore = false
        this.current = 0
        this.list = []
      } else {
        return false
      }
      this.$nextTick(() => {
        this.getList()
      })
    },

    handerSearch(e) {
      this.name = e
      this.getList()
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
}
</script>

<style lang="scss" scoped>
.wrapper {
  .searAreName {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: #fff;
  }

  ::v-deep .AiTopFixed {
    width: 100%;
    .placeholder {
      opacity: 1;
      visibility: inherit;
      .content {
        padding: 0 !important;
      }
    }
    .fixed {
      width: 0;
      margin: 0 !important;
      .content {
        padding: 0 !important;
      }
    }
  }
  .searchObj {
    padding: 24px 32px;
    background: #fff;
  }
}

.item {
  box-sizing: border-box;
  padding: 32px 48px;
  background: #ffffff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);

  & > label {
    font-size: 32px;
    font-weight: 600;
    color: #333333;
    line-height: 44px;
  }

  .info {
    display: flex;
    align-items: center;
    font-size: 26px;
    color: #999999;
    margin-top: 8px;

    & > span {
      color: #333333;
      margin-left: 16px;
    }
  }
}
</style>
