<template>
    <div>
        <van-row class="dk-title" type="flex" align="center">
            <img src="@/assets/temperature_randis.png" alt="">
            <span style="font-weight: bold">户籍地址</span>
        </van-row>
        <van-cell-group>
            <van-cell
                    class="dk-cell"
                    title="省市："
                    title-style="font-weight: bold"
                    :center="true"
                    :value="censusRegisterPcc"/>
            <van-cell
                    class="dk-cell"
                    title="详细地址："
                    :center="true"
                    title-style="font-weight: bold"
                    :value="censusRegisterAddress"/>
        </van-cell-group>
        <van-row class="dk-title" type="flex" align="center">
            <img src="@/assets/temperature_randis.png" alt="">
            <span style="font-weight: bold">居住地址</span>
        </van-row>
        <van-cell-group>
            <van-cell
                    class="dk-cell"
                    title="省市："
                    title-style="font-weight: bold"
                    :center="true"
                    :value="livingPcc"/>
            <van-cell
                    class="dk-cell"
                    title="详细地址："
                    :center="true"
                    title-style="font-weight: bold"
                    :value="livingAddress"/>
        </van-cell-group>
        <van-row class="dk-title" type="flex" align="center">
            <img src="@/assets/temperature_randis.png" alt="">
            <span style="font-weight: bold">行程信息</span>
        </van-row>
        <van-cell
                class="dk-cell"
                title="是否离市："
                title-style="font-weight: bold"
                :center="true"
                :value="isLeaving===0?'否':'是'"/>

        <van-cell
                class="dk-cell"
                title="离市后目的地："
                title-style="font-weight: bold"
                :center="true"
                v-if="isLeaving === 1"
                :value="leavingDestinationPc"/>
        <van-cell
                class="dk-cell"
                title="预计返市日期："
                title-style="font-weight: bold"
                :center="true"
                v-if="isLeaving === 1"
                :value="backDate"/>
        <van-row class="dk-title" type="flex" align="center">
            <img src="@/assets/temperature_randis.png" alt="">
            <span style="font-weight: bold">其他信息</span>
        </van-row>
        <van-cell
                class="dk-cell"
                title="两周内是否有湖北地区旅行史："
                title-style="font-weight: bold;flex:2;"
                :title-class="isHubeiTravel===1?'dk-color':''"
                value-class="dk-right"
                :center="true"
                :value="isHubeiTravel===0?'否':'是'"/>
        <van-cell
                class="dk-cell"
                title="是否有与湖北地区人员接触史："
                title-style="font-weight: bold;flex:2;"
                :title-class="isHubeiTouch===1?'dk-color':''"
                :center="true"
                :value="isHubeiTouch===0?'否':'是'"/>
        <van-cell
                class="dk-cell"
                title="是否有与新兴冠状病毒确诊病例接触史："
                title-style="font-weight: bold;flex:4;"
                :title-class="isCovTouch===1?'dk-color':''"
                :center="true"
                :value="isCovTouch===0?'否':'是'"
                data-value="test"/>

    </div>
</template>

<script>
    import {Button, Col, Row, Calendar, Cell, CellGroup, Popup, Area, Field, Picker} from 'vant';
    import areaList from '@/utils/area'
    import {dk_formatDate} from '@/utils/util'

    // import {getStore} from "@/utils/storage";
    // import {dk_formatDate} from '@/utils/util'

    import {getAction} from '@/api/manage'
    import {backtrackingInfoDetail} from '@/api/index'

    export default {
        name: "journey_detail",
        components: {
            [Button.name]: Button,
            [Col.name]: Col,
            [Row.name]: Row,
            [Calendar.name]: Calendar,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Area.name]: Area,
            [Popup.name]: Popup,
            [Field.name]: Field,
            [Picker.name]: Picker,
        },
        data() {
            return {
                areaList,
                show_address: false,
                show_living: false,
                show_leaving: false,
                show_choose: false,
                show_data: false,
                minDate: new Date(),
                columns: ['否', '是'],
                backDate: '',
                tmp_name: '',
                staff_id: '',
                censusRegisterProvinceCode: '',
                censusRegisterCityCode: '',
                censusRegisterCountryCode: '',
                censusRegisterPcc: '',
                censusRegisterAddress: '',
                livingProvinceCode: '',
                livingCityCode: '',
                livingCountryCode: '',
                livingPcc: '',
                livingAddress: '',
                isLeaving: '',
                leavingDestinationProvinceCode: '',
                leavingDestinationCityCode: '',
                leavingDestinationPc: '',
                estimateBackDate: '',
                isHubeiTravel: '',
                isHubeiTouch: '',
                isCovTouch: '',
            }
        },
        mounted() {
            this.staff_id = this.$route.params.id;
            getAction(backtrackingInfoDetail, {dkBackTracking_id: this.staff_id}).then(data => {
                if (data.data.dkBackTracking) {
                    const {
                        censusRegisterProvinceCode,
                        censusRegisterCityCode,
                        censusRegisterCountryCode,
                        censusRegisterPcc,
                        censusRegisterAddress,
                        livingProvinceCode,
                        livingCityCode,
                        livingCountryCode,
                        livingPcc,
                        livingAddress,
                        isLeaving,
                        leavingDestinationProvinceCode,
                        leavingDestinationCityCode,
                        leavingDestinationPc,
                        estimateBackDate,
                        isHubeiTravel,
                        isHubeiTouch,
                        isCovTouch
                    } = data.data.dkBackTracking;
                    const json = {
                        censusRegisterProvinceCode,
                        censusRegisterCityCode,
                        censusRegisterCountryCode,
                        censusRegisterPcc,
                        censusRegisterAddress,
                        livingProvinceCode,
                        livingCityCode,
                        livingCountryCode,
                        livingPcc,
                        livingAddress,
                        isLeaving,
                        leavingDestinationProvinceCode,
                        leavingDestinationCityCode,
                        leavingDestinationPc,
                        estimateBackDate,
                        isHubeiTravel,
                        isHubeiTouch,
                        isCovTouch,
                        backDate: dk_formatDate(estimateBackDate, '年')
                    };
                    for (let key in json) {
                        this[key] = json[key]
                    }
                }
            })
        },
        methods: {}
    }
</script>

<style scoped>
    .dk-title {
        height: 49px;
        font-size: 16px;
        color: #333;
        background: #EEEEEE;
        padding: 0 15px;
    }

    .dk-title img {
        width: 4px;
        height: 16px;
        margin-right: 10px;
    }

    .dk-cell {
        height: 55px;
    }

    .dk-fever-link {
        color: #0177FF;
        font-size: 14px;
        font-weight: bold;
    }

    .van-field__control {
        text-align: right;
    }

    .dk-color {
        color: #9F3112;
    }

    .dk-button {
        font-size: 15px;
        width: 100%;
        height: 50px;
        margin-top: 15px;
    }
</style>
