<template>
    <div class="provideUnit">
        <!-- 头部 -->
        <van-nav-bar fixed title="选择叶酸发放单位">
            <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="seachInfo.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, isIOSWebKit, isEmpty} from '@/utils/common';
import {Dialog} from 'vant';

export default {
    components: {},
    data() {
        return {
            seachInfo: {
                unitName: '云南省',
            },
            unitList: [],
            scrollPosition: 0,
        }
    },
    created() {
        Dialog.alert({
            title: '温馨提示',
            message: '备孕妇女从孕前3个月，坚持每天服用0.4mg叶酸或含叶酸的复合维生素至少到怀孕满3个月，可预防胎儿神经管缺陷的发生,还能减少唇腭裂、先心病、早产等风险。特殊情况妇女如肥胖、糖尿病等要加量。',
            confirmButtonText: "好的，知道了"
        }).then(() => {
        });
        let vm = this;
        window['init'] = (result) => {
            vm.initUserInfo(result);
        };
        window['qrcodeContent'] = (result) => {
            vm.scanQRCallBack(result);
        };
    },
    mounted() {
        if (process.env.NODE_ENV == "dev") {
            let userInfo = {
                account: '18487125843',
                token: '7de354fd8be1484cacbc41e96fe88d7e',
                userId: '11133351501171512',
            };
            window.sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
        } else {
            callMobile('init', {});
        }
        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.seachInfo.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();
            });
        },
        // 申请
        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(unitId) {
            if (!unitId) {
                this.$toast.success('无效的二维码');
                return;
            }
            getProvideUnitById(unitId).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('无效的二维码');
                    }
                }
            })
        },
        initUserInfo(val) {
            let ios = isIOSWebKit();
            if (ios) {
                window.sessionStorage.setItem('userInfo', val);
            } else {
                window.sessionStorage.setItem('userInfo', JSON.stringify(val));
            }
        },
    },
    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>