<template>
  <div class="container">
    <div class="row" >
      <div class="col-sm-12 col-xs-12" style="height: auto" >
        <input  class="form-control"  type="text" v-model="model.selectVal" placeholder="点击搜索按钮筛选"/>
      </div>
      <!--用户的显示-->
      <div class="col-sm-11 col-xs-11" v-show="!show">
      <span v-for="dd in beginarray">
        <a  name="{{dd}}" v-if="zz(dd)">
       <p class="bq">{{dd}}</p>
    </a>
      <a name="#" v-if="sz(dd)">
       <p class="bq">#</p>
    </a>
    <ul class="list-unstyled" v-for="user in beginarrayss">
      <tr>
      <li v-if="user.PY===dd" @click.prevent="confirm(user)">
        &nbsp&nbsp
        <img src="../image/touxiang.jpg">
        <strong id="name">{{user.name}}</strong>
        <hr>
      </li>
      </tr>
    </ul>
        </span>
      </div>
      <!--根据首字母查找-->
      <div class="col-sm-1 col-xs-1" id="inlineZM" v-show="!show">
      <span v-for="cc in beginarrays">
        <a id="a" href="#{{cc}}" >{{cc}}</a><br>
      </span>
      </div>
      <div class="col-sm-11 col-xs-11" v-if="show">
      <span v-for="dd in quchong()">
        <a  name="{{dd}}" v-if="zz(dd)">
       <p class="bq">{{dd}}</p>
    </a>
      <a name="#" v-if="sz(dd)">
       <p class="bq">#</p>
    </a>
    <ul class="list-unstyled" v-for="user in model.like">
      <tr>
      <li v-if="user.PY===dd" @click.prevent="confirm(user)">
        &nbsp&nbsp
        <img src="../image/touxiang.jpg">
        <strong id="name">{{user.name}}</strong>
        <hr>
      </li>
      </tr>
    </ul>
        </span>
      </div>
      <!--根据首字母查找-->
      <div class="col-sm-1 col-xs-1" id="inlineZM" v-if="show">
      <span v-for="cc in model.db">
        <a id="a" href="#{{cc}}" >{{cc}}</a><br>
      </span>
      </div>

    </div>
  </div>
</template>
<script type="module">
  import Vue from 'vue'
  import pinyin from '../plugins/vue-py'

  export default {
    title: '展示客户信息',
    data () {
      return {
        show:false,
        beginarray:'',
        beginarrays:'',
        beginarrayss:'',
        model: {
          pp: [],
          db: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q',
            'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'],
          like: [],
          data: [
            {name: '张三', phone: '12321354213', userid: '11670', nickName: 'Z', img: '../assets/安检导航竖屏.png'},
            {name: '李四', phone: '12341231114', userid: '11671', nickName: 'L', img: '../asss/安检导航竖屏1.png'},
            {name: '王五', phone: '12345512345', userid: '11672', nickName: 'W', img: '../assets/安检导航竖屏2.png'}],
          selectVal: ''//关键字
        }
      }
    },
    methods: {
      sz (dd) {
        let m = /[0-9]/.test(dd)
        if (m) {
          return true
        } else {
          return false
        }
      },
      zz (dd) {
        let m = /[a-zA-Z]/.test(dd)
        if (m) {
          return true
        } else {
          return false
        }
      },
      confirm (user) {
        let phone = 1122334455
        this.$goto('phone-user-detil', {row: user, repair: phone})
      },
      search: function () {//搜索
        this.model.like = []
        let likename = this.model.selectVal
        let name = this.model.data
        if (likename){
          for (let i = 0; i < name.length; i++) {
            if (name[i].name.indexOf(likename) >= 0) {
              this.model.like.push(name[i])
              console.log(this.model.like)
            }
          }
        }else{
          this.model.like = name
        }
      },
      quchong () {
        return Array.from(new Set(this.model.pp)).sort()
      }
    },
    ready () {
      this.$resetpost(`${this.$androidUtil.getProxyUrl()}/rs/search`, {
        data: {
          source: 'this.getParentByType($organization$).getSpecialResByType($user$)',
          userid: Vue.user.id
        }
      }).then((res) => {
        console.log(res.data)
        this.model.data = res.data
        this.model.like = res.data
        for (let i = 0; i < this.model.like.length; i++) {
          this.model.like[i].PY = pinyin.chineseToPinYin(this.model.like[i].name).charAt(0).toUpperCase()
          this.model.pp.push(this.model.like[i].PY)
        }
        this.beginarray=Object.assign([],this.quchong())
        console.log(this.beginarray)

        this.beginarrays=Object.assign([],this.model.db)
        this.beginarrayss=Object.assign([],this.model.like)
        console.log(this.beginarrays)
      })
    },
    watch: {
      'model.selectVal'(val){
        console.log("999999999")
        console.log((val))
          if (val){
            this.search()
            this.show=true
            console.log("22222")

          }else {
            this.show=false
            console.log("33333")
            console.log(this.beginarray)
            console.log(this.quchong())
            console.log(this.beginarrays)
            console.log(this.model.db)
          }

      }
    }
  }
</script>
<style scoped>
  img {
    height: 15px;
    weight: 22%;
  }

  #inlineZM {
    text-align: center;
    position: fixed;
    right: 2%;
    top: 7%;
  }

  ul {
    color: #5bc0de;
    left: 1%;
  }

  li {
    list-style-type: none;

  }

  .bq {
    background-color: #dde2e5;
  }
</style>



