/** 选择医院组件 */
<template>
  <div>
    <div class="header">
      <van-button type="danger" class="cancle" hairline plain @click="cancel"
        >取消</van-button
      >
      <div class="choose">选择医院</div>
      <van-button type="info" class="confirm" hairline plain @click="confirm"
        >确认</van-button
      >
    </div>

    <!-- 搜索医院 -->
    <div class="search-wrapper">
      <div class="search">
        <input
          type="text"
          placeholder="搜索医院"
          @input="search"
          v-model="searchValue"
        />
        <van-icon name="search" class="search-icon" @click="search" />
      </div>

      <!-- 搜索结果 -->
      <div class="search-result">
        <div
          v-for="item in hospitalList"
          :key="item.ID"
          @click="handleChecked(item)"
          :class="{ active: item.isSelect }"
        >
          <div class="hostpitalItem ellips">{{ item.HospitalName }}</div>
          <van-icon name="checked" v-if="item.isSelect" />
        </div>
      </div>
    </div>

    <!-- 暂无数据 -->
    <div class="noMoreData" v-if="!hospitalList.length">暂无数据</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      /** 医院数据 */
      hospitalList: [],
      // 临时文件
      tmpArr: [
        { id: 0, name: "粤北人民医院", isSelect: false },
        { id: 1, name: "湖南人民医院", isSelect: false }
      ],
      // 医院
      hospital: {
        id: null,
        name: ""
      },
      searchValue: "",
      timeId: null // 定时器
    };
  },
  methods: {
    cancel() {
      this.$emit("cancel");
    },
    confirm() {
      //数据 => 选中医院
      this.$emit("confirm", this.hospital);
    },
    //   点击选中
    handleChecked(item) {
      this.hospitalList.map(v => {
        v.isSelect = false;
      });
      item.isSelect = true;
      this.hospital = {
        id: item.ID,
        name: item.HospitalName
      };
    },
    //   搜索
    search() {
      // console.log("搜索");
      // this.hospitalList = [];
      // this.tmpArr.map(v => {
      //   if (v.name.includes(this.searchValue)) {
      //     this.hospitalList.push(v);
      //   }
      // });
      clearTimeout(this.timeId);
      this.timeId = setTimeout(() => {
        this.GetHospitalList();
      }, 300);
    },
    // 搜索医院
    GetHospitalList() {
      let obj = {
        name: this.searchValue,
        pageIndex: 1, // 从1 开始
        pageSize: 10
      };
      this.$http.GetHospitalList(obj).then(({ data }) => {
        if (data.IsSuccess) {
          // 成功,
          this.hospitalList = data.ResultObject.map(v => {
            v.isSelect = false;
            return v;
          });
        } else {
          // 失败,
        }
      });
    }
  },
  created() {
    // this.GetHospitalList();   //默认不显示
  }
};
</script>
<style lang="less" scoped>
@blue: #19a9eb;

.header {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem;
  color: #000;
  font-size: 0.3rem;
  .cancle,
  .confirm,
  .choose {
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.3rem;
  }
}

.search-wrapper {
  padding: 0 0.24rem;

  .search {
    display: flex;
    justify-items: center;
    height: 1.1rem;
    font-size: 0.3rem;
    background-color: #f9f9f9;

    input[type="text"] {
      width: 94%;
      text-indent: 0.22rem;
      background-color: transparent;
    }

    .search-icon {
      flex: 1;
    }
    /deep/ .van-icon,
    .van-icon::before {
      line-height: 1.1rem;
      font-size: 0.36rem;
      color: @blue;
    }
  }

  .search-result {
    background-color: #fff;
    line-height: 0.9rem;
    color: #191919;
    padding: 0 0.22rem;
    font-size: 0.3rem;

    > div {
      height: 0.9rem;

      &.active {
        color: #19a9eb;
      }
      display: flex;

      .hostpitalItem {
        width: 96%;
      }

      /deep/ .van-icon,
      .van-icon::before {
        line-height: 0.9rem;
      }

      &:not(:last-child) {
        border-bottom: 0.02rem solid #f2f2f2;
      }
    }
  }
}

.noMoreData {
  text-align: center;
  padding: 0.5rem 0.2rem 0;
  color: #191919;
  font-size: 0.3rem;
}
</style>
