<template>
  <!-- 筛查地图 -->
  <div class="index-wrap">
    <x-header :left-options="{ backText: '', showBack: true }">
      筛查地图
    </x-header>
    <v-content
      has-header
      :has-footer="false"
    >
      <van-search
        v-model="searchInputValue"
        shape="round"
        background="#127BFF"
        placeholder="请输入搜索关键词"
      >
        <template slot="right-icon">
          <div
            @click="inputSearch"
            class="doText"
          >搜索</div>
        </template>
      </van-search>
      <div class="top_select">
        <div
          class="select_address"
          v-for="(item, index) in selectObj"
          :key="index"
        >
          <span
            v-show="!item.chooseData"
            @click="showChooseData(index)"
          >{{ item.label }}
            <van-icon
              name="play"
              class="column_play"
            />
          </span>
          <span v-show="item.chooseData">{{ item.chooseData }}
            <van-icon
              name="cross"
              color="red"
              @click="clearLocate(index)"
            />
          </span>
        </div>
      </div>
      <!-- 列表 -->
      <div
        class="list_content"
        ref="scroller"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
        >
          <van-cell-group
            inset
            v-for="(item, index) in hospitalList"
            :key="index"
          >
            <van-cell
              center
              :title="item.hospitalName"
              :label="item.address||'--'"
              is-link
              :to="`appointmentType?id=${item.hospitalNumber}`"
            >
              <template #right-icon> </template>
              <template
                #icon
                v-if="item.hospitalRank"
              >
                123
              </template>
              <template
                #icon
                v-else
              >
               234
              </template>
            </van-cell>
          </van-cell-group>
        </van-list>
      </div>
    </v-content>
    <!-- 弹出层公用 -->
    <van-popup
      v-model="chooseFlag"
      position="bottom"
    >
      <van-picker
        :title="showTitle"
        show-toolbar
        :columns="showOptions"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>
<script>
let addressInfo = [
  {
    value: "330301000000",
    label: "市辖区"
  },
  {
    value: "330302000000",
    label: "鹿城区"
  },
  {
    value: "330303000000",
    label: "龙湾区"
  },
  {
    value: "330304000000",
    label: "瓯海区"
  },
  {
    value: "330305000000",
    label: "洞头区"
  },
  {
    value: "330324000000",
    label: "永嘉县"
  },
  {
    value: "330326000000",
    label: "平阳县"
  },
  {
    value: "330327000000",
    label: "苍南县"
  },
  {
    value: "330328000000",
    label: "文成县"
  },
  {
    value: "330329000000",
    label: "泰顺县"
  },
  {
    value: "330381000000",
    label: "瑞安市"
  },
  {
    value: "330382000000",
    label: "乐清市"
  }
]
export default {
  name: 'screeningMap',
  data () {
    return {
      searchInputValue: "",
      chooseFlag: false,
      showTitle: "",
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
      showIndex: 0, // 展示的下标
      showOptions: [],
      selectObj: [
        {
          label: "选择区县",
          chooseData: '',
          options: addressInfo.map(e => e.label)
        },
        {
          label: "全部等级",
          chooseData: '',
          options: ["三级", "二级", "一级", "其他"]
        }
      ],
      hospitalList: [
        // {
        //   name: "长江医院",
        //   address: "温州皮革厂"
        // }
      ],
      loading: false,
      finished: false,
    };
  },
  methods: {
    // 搜索
    inputSearch () {
      this.pageNum = 0
      this.getList()
    },
    getList () {
      this.loading = true;
      this.finished = false;
      //? 处理一下区县编码
      let locatecode = this.selectObj[0].chooseData
      if (locatecode) {
        locatecode = addressInfo.filter(e => e.label == locatecode)[0].value
      }
      if (this.hospitalList.length > 0 && this.hospitalList.length <= this.totalCount) {
        this.pageNum++
      }
      let data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        hospitalName: this.searchInputValue || undefined,
        districtCode: locatecode || undefined,
        hospitalRank: this.selectObj[1].chooseData || undefined,
      }
    },
    // 调出底部面板
    showChooseData (num) {
      this.showIndex = num;
      this.showOptions = this.selectObj[num].options
      switch (num) {
        case 0:
          this.showTitle = "请选择所在区县";
          break;
        case 1:
          this.showTitle = "请选择等级";
          break;

        default:
          break;
      }
      this.chooseFlag = true;
    },
    clearLocate (index) {
      this.selectObj[index].chooseData = "";
      this.chooseFlag = false;
      this.pageNum = 0
      this.getList()
    },
    // 选择
    onConfirm (value, index) {
      this.chooseFlag = false;
      this.selectObj[this.showIndex].chooseData = value;
      this.pageNum = 0
      this.getList()
    },
    onCancel () {
      this.chooseFlag = false;
    }
  },
  watch: {},
  activated () {
    const scrollTop = this.$route.meta.scrollTop;
    const $content = document.querySelector('.list_content');
    if (scrollTop && $content) {
      this.$refs.scroller.scrollTo(0, scrollTop);
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.path != '/appointmentType') {
      from.meta.keepAlive = false
    } else
      if (to.path == '/appointmentType') {
        from.meta.keepAlive = true
        const $content = document.querySelector('.list_content'); // 列表的外层容器
        const scrollTop = $content ? $content.scrollTop : 0;
        from.meta.scrollTop = scrollTop;
      }
    next()
  }
};
</script>
<style lang="scss" scoped>
.doText {
  font-size: 16px;
  color: #127bff;
}
.top_select {
  display: flex;
  padding: 20px 10px;
  font-size: 14px;
  .select_address {
    margin-right: 20px;
    .column_play {
      font-size: 12px;
      transform: rotate(90deg);
    }
  }
}
.list_content {
  height: calc(100vh - 159px);
  overflow: auto;
}
::v-deep .hospital_level {
  width: 100%;
  height: 24px;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  text-align: center;
  color: #fff;
}
::v-deep .van-cell-group {
  margin-bottom: 10px;
}
</style>
