<template>
  <div class="provideUnit">
    <!-- 头部 -->
    <van-nav-bar fixed>
      <template #title>
        <div  @click="debugInfo">
          选择叶酸发放单位
        </div>
      </template>
      <template #left>
        <img src="../../assets/images/back.png" alt="" @click="handleBack"/>
      </template>
      <template #right>
        <div @click="handleRecord">申请记录</div>
      </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <van-search @blur="handleInput" style="width: 88%;display: inline-block" @clear="handleCancel"
                v-model="searchInfo.unitName" placeholder="请输入搜索关键词"/>
    <van-icon size="33" style="float: right;margin-right: 8px;" name="scan" @click="openQrCode"/>
    <!-- 申请部分 -->
    <template v-if="unitList.length != 0">
      <div class="flex_block" v-for="item in unitList" :key="item.id" @click="handleClick(item)">
        <div class="flex_block_title">
          <span class="top">{{ item.unitName }}</span>
          <span class="bottom">地址：{{
              (item.areaFullName ? item.areaFullName : "") + (item.unitAddress ? item.unitAddress : "")
            }}</span>
        </div>
        <div class="flex_block_btn">申请</div>
      </div>
    </template>
    <van-empty v-else description="暂无发放单位"/>
  </div>
</template>
<script>
import {getProvideUnit, getProvideUnitById} from '@/axios/api';
import {callMobile, isEmpty} from '@/utils/common';

export default {
  components: {},
  data() {
    return {
      searchInfo: {
        unitName: null,
      },
      unitList: [],
      scrollPosition: 0,
    }
  },
  created() {
    let vm = this;
    window['qrcodeContent'] = (result) => {
      vm.scanQRCallBack(result);
    };
  },
  mounted() {
    this.getProvideUnitList();
  },
  activated() {
    window.scrollTo(0, this.scrollPosition);
  },
  methods: {
    handleInput(val) {
      this.getProvideUnitList();
    },
    handleCancel() {
      this.getProvideUnitList();
    },
    openQrCode() {
      callMobile("qrcode", {});
    },
    getProvideUnitList() {
      this.$toast.open();
      let unitName = this.searchInfo.unitName || '云南省';
      if (isEmpty(unitName)) {
        unitName = undefined;
      }
      getProvideUnit(unitName).then(res => {
        if (res.code === 'SUCCESS') {
          if (res.data) {
            this.unitList = res.data;
          } else {
            this.unitList = [];
          }
        }
      }).finally(() => {
        this.$toast.close();
      });
    },
    debugInfo(){
      this.$router.push('debugInfo');
    },
    // 申请
    handleClick(val) {
      let areaFullName = val.areaFullName ? val.areaFullName : "";
      let address = val.unitAddress ? val.unitAddress : "";
      let unitAddress = areaFullName + address;
      let applyUnitInfo = {
        unitId: val.id,
        unitName: val.unitName,
        unitAddress: unitAddress,
      };
      window.sessionStorage.setItem('applyUnitInfo', JSON.stringify(applyUnitInfo));
      this.$router.push('questionAnswer');
    },
    // 申请记录
    handleRecord() {
      this.$router.push('applyRecord');
    },
    handleBack() {
      callMobile('goIndex', {});
    },
    scanQRCallBack(qrContent) {
      if (!qrContent) {
        this.$toast.success('无效的二维码');
        return;
      }
      let qrContentArr = qrContent.split("?");
      if (qrContentArr.length < 2) {
        this.$toast.success('无效的二维码');
        return;
      }
      getProvideUnitById(qrContentArr[1]).then(res => {
        if (res.code === 'SUCCESS') {
          if (res.data) {
            let areaFullName = res.data.areaFullName ? res.data.areaFullName : "";
            let unitAddress = res.data.unitAddress ? res.data.unitAddress : "";
            let applyUnitInfo = {
              unitId: res.data.id,
              unitName: res.data.unitName,
              unitAddress: areaFullName + unitAddress,
            };
            window.sessionStorage.setItem('applyUnitInfo', JSON.stringify(applyUnitInfo));
            this.$router.push('questionAnswer');
          } else {
            this.$toast.success('无效的二维码');
          }
        }
      })
    },
  },
  beforeRouteLeave(to, from, next) {
    this.scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
    next();
  },
}
</script>
<style lang="less" scoped>
.provideUnit {
  padding-top: 52px;

  .flex_block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 24px 24px 16px;

    .flex_block_title {
      display: flex;
      flex-direction: column;
      width: 90%;

      .top {
        color: #262626;
        font-size: 14px;
      }

      .bottom {
        color: #595959;
        font-size: 12px;
        margin-top: 7px;
      }
    }

    .flex_block_btn {
      width: 48px;
      height: 25px;
      border: 1px solid #F5222D;
      border-radius: 24px;
      font-size: 12px;
      color: #F5222D;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 8px;
    }
  }
}
</style>