<template>
  <div class="add-diagnose-wrap">
    <el-dialog
      :close-on-click-modal="false"
      title="添加诊断"
      :visible.sync="centerDialogVisible"
      width="900px"
      center>
      <!-- <span>需要注意的是内容是默认不居中的</span> -->
      <div>
        <el-input v-model="searchInput" placeholder="搜索疾病" class="search-disease"></el-input>
      </div>
      <div class="main-content">
        <div class="left-box left">
          <!-- 常用诊断 -->
          <!-- <div class="common-diagnose">
            <p class="title">常用诊断<span class='no-result'>没有找到相关搜索结果</span></p>
            <ul class="list">
              <li 
                v-for="item in commonList" 
                :class="returnEachCommonLiClass(item)"
                @click="handleEachCommonLiClick(item)"
              >
                {{item}}
              </li>
            </ul>
          </div> -->
          <!-- 搜索列表 有搜索结果时-->
          <div class="search-list-wrap">
            <ul class="search-list">
              <li>
                <div class="left">
                   克里斯都看过了单身快乐<span class="keyword">关键词</span>格但斯克偶尔玩几个看总额为给了我赶紧来看看链接 
                  <p class="code">89234232</p>
                </div>
                <div class="right"><i class="el-icon-check"></i></div>
              </li>
              <li>
                <div class="left">
                   克里斯都看过了单身快乐<span class="keyword">关键词</span>格但斯克 
                  <p class="code">89234232</p>
                </div>
                <div class="right"><i class="el-icon-check"></i></div>
              </li>
              <li>
                <div class="left">
                   克里斯都看过了单身快乐<span class="keyword">关键词</span>格但斯克偶尔玩几个看总额为给了我赶紧来看看链接 
                  <p class="code">89234232</p>
                </div>
                <div class="right"><i class="el-icon-check"></i></div>
              </li>
              <li v-if="showSearchLoading" class="loading">加载中...</li>
            </ul>
          </div>
        </div>
        <!-- 已选 -->
        <div class="choosed-list-wrap left">
          <div class="title">已选 {{choosedList.length}}/20</div>
          <div class="choosed-list">
            <el-tag
              :key="tag"
              v-for="tag in choosedList"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
              <div class="text">{{tag}}</div>
            </el-tag>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="hideSelf">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 已选数量不能超过20个 提示 -->
    <el-dialog
      title="提示"
      :close-on-click-modal="false"
      :visible.sync="limitTipsVisible"
      width="400px"
      center>
      <span>最多只能选择20种疾病</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="limitTipsVisible = false">我知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
console.log('&&& 333333333333333333333333')
  export default {
    data() {
      return {
        centerDialogVisible: false,
        limitTipsVisible: false,
        showSearchLoading: false,
        searchInput: '',
        commonList:  ['杀戮空间放开了十几个', '北京', '水电费', '阿尕更多干点', '深刻理解过类似赶紧来看看就两个都是圣诞快乐广俊克雷登斯', '孔1结构','杀戮空间放1开了十几个', '北京2', '水电2费', '阿尕2更多干点', '深刻理2解过类似赶紧来看看就两个都是圣诞快乐广俊克雷登斯', '孔d结构'],
        commonChoosedList: ['上海'],
        choosedList: ['标签一', '标签一多少分的', '标签二是哦多功能流口水的功能上课了多个接口来的丧假快来打几个是的范德萨范德萨', '标签三','标签三d', 'dewf', '北京'],
        canScroll: true,
      }
    },
    computed: {
      
    },
    mounted() {
      console.log(11999);
      console.log('>>>>>>>>>>>>>>>>>>>>>>>> ', this.centerDialogVisible)
    },
    watch: {
      centerDialogVisible(val) {
        let that = this;
        console.log('val: ', val)
        // 搜索时
        that.$nextTick(function(){
          let searchListWrap = document.querySelector('.search-list-wrap');
          console.log('>>> ', searchListWrap)
          if( searchListWrap ){
            searchListWrap.onscroll = function(){
              console.log(11)
              
              let contentH = document.querySelector('.search-list').offsetHeight;
              let viewH = 290;
              let scrollTop = searchListWrap.scrollTop;
              if( that.canScroll && (contentH - viewH - scrollTop <= 50) ){
                console.log('到达临界点，开始加载下一页');
                that.canScroll = false;
                that.loadMoreSearchData();
              }
            }
          }
        })
      }
    },
    methods: {
      showSelf(params) {
        this.centerDialogVisible = true;
        if(params && params.clearChoosedList){
          this.choosedList = [];
        }
      },
      hideSelf() {
        this.centerDialogVisible = false;
      },
      handleConfirm() {
        // 

      },
      handleClose(tag) {
        this.choosedList.splice(this.choosedList.indexOf(tag), 1);
      },
      returnEachCommonLiClass(item) {
        let hasIndex = this.hasItem(this.choosedList, item);
        if(  hasIndex > -1 ){
          return 'active';
        }else{
          return '';
        }
      },
      handleEachCommonLiClick(item) {
        console.log('ddd', item);
        let hasIndex = this.hasItem(this.choosedList, item);
        if(  hasIndex > -1 ){
          this.choosedList.splice(hasIndex, 1);
        }else{
          this.choosedList.push(item);
        }
      },
      hasItem(list, item) {
        for(let i=0; i<list.length; i++){
          if( list[i] == item ){
            return i;
          }
        }
        return -1;
      },
      loadMoreSearchData() {
        // request ...加载完成后，可以继续滚动加载
        this.canScroll = true;

      },
    }, 
  }
</script>

<style lang="less">
  .scroll-bar{
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar
    {
        width: 5px;
        height: 5px;
        background-color: #fff;
    }
    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track
    {
        // border-radius: 10px;
        // background-color: rgb(241, 239, 239);
        // background: #fff;
    }
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb
    {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #bbb;
    }
  }
  .add-diagnose-wrap{
    .search-disease{
      width: 370px;
    }
    .main-content{
      overflow: hidden;
      .left{
        float: left;
      }
      .left-box{
        width: 370px;
        height: 300px;
        .common-diagnose{
          width: 100%; height: 300px;
          .title{
            color: #303133; 
            font-size: 16px;
            line-height: 40px;
            margin-top: 10px;
            .no-result{
              font-size: 14px;
              color: #e6a23c;
              margin-left: 28px;
            }
          }
          .list{
            width: 100%; height: 250px;
            overflow: hidden;
            overflow-y: scroll;
            .scroll-bar;
            padding: 10px;
            border: 1px solid #DCDFE6; border-radius: 4px;
            li{
              height: 35px; line-height: 35px; padding: 0 15px;
              background: #fff;
              border: 1px solid #dcdfe6;
              color: #606266;
              cursor: pointer;
              &.active{
                color: #fff;
                background: #409eff;
                border-color: #409eff;
              }
              display: inline-block;
              margin: 0 10px 10px 0;
              border-radius: 4px;
              max-width: 350px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            }
          }
        }
        .search-list-wrap{
          width: 100%; height: 290px; margin-top: 10px;
           border: 1px solid #DCDFE6;
          overflow: hidden;
          overflow-y: scroll;
          .scroll-bar;
        }
        .search-list{
          border-radius: 4px;
          width: 100%; 
          padding: 10px;
          li{
            position: relative;
            margin-bottom: 10px;
            line-height: 20px;
            overflow: hidden;
            .left{
              width: 310px;
              float: left;
            }
            .right{
              position: absolute;
              right: 0;
              top: 50%;
              margin-top: -13px;
              // width: 0px; 
              // float: left;
              display: inline-block;
              vertical-align: middle;
              i{
                font-size: 24px;
                color: #449284;
                font-weight: 700;
              }
            }
            
            .keyword{
              color: #ff8429;
            }
            .code{
              line-height: 30px;
            }
            &.loading{
              color: red;
              text-align: center;
              margin: 0;
            }
          }
        }
      }
      .choosed-list-wrap{
        width: 450px;
        height: 300px;
        margin-left: 30px;
        .title{
          color: #303133; 
          font-size: 16px;
          line-height: 40px;
          margin-top: 10px;
        }
        .choosed-list{
          overflow: hidden;
          overflow-y: scroll;
          width: 450px;
          height: 250px;
          padding: 10px;
          border: 1px solid #DCDFE6; border-radius: 4px;
          .scroll-bar;
          .el-tag {
            margin: 0 10px 10px 0;;
            .text{
              display: inline-block;
              max-width: 342px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            }
            .el-tag__close{
              top: -12px;
            }
          }
        }
      }
      
    }
  }
</style>


