<template>
    <div class="dk-content">
        <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
                        required
                        class="dk-cell"
                        title="省市："
                        title-style="font-weight: bold"
                        :center="true"
                        is-link
                        :value="censusRegisterPcc||'请选择'"
                        @click="setData('show_address')"/>
                <van-cell
                        required
                        class="dk-cell"
                        title="详细地址："
                        :center="true"
                        title-style="font-weight: bold">
                    <van-field
                            slot="default"
                            v-model="censusRegisterAddress"
                            placeholder="请填写 "
                            input-align="right"
                            style="padding: 0;"/>
                </van-cell>
            </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
                        required
                        class="dk-cell"
                        title="省市："
                        title-style="font-weight: bold"
                        :center="true"
                        is-link
                        :value="livingPcc||'请选择'"
                        @click="setData('show_living')"/>
                <van-cell
                        required
                        class="dk-cell"
                        title="详细地址："
                        :center="true"
                        title-style="font-weight: bold">
                    <van-field
                            slot="default"
                            v-model="livingAddress"
                            placeholder="请填写 "
                            input-align="right"
                            style="padding: 0;"/>
                </van-cell>
            </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
                    required
                    class="dk-cell"
                    title="是否离市："
                    title-style="font-weight: bold"
                    :center="true"
                    is-link
                    :value="isLeaving===''?'请选择':isLeaving===0?'否':'是'"
                    @click="setData('show_choose','isLeaving')"
            />

            <van-cell
                    required
                    class="dk-cell"
                    title="离市后目的地："
                    title-style="font-weight: bold"
                    :center="true"
                    is-link
                    :value="leavingDestinationPc||'请选择'"
                    v-show="isLeaving !== 0"
                    @click="setData('show_leaving')"
            />
            <van-cell
                    required
                    class="dk-cell"
                    title="预计返市日期："
                    title-style="font-weight: bold"
                    :center="true"
                    is-link
                    v-show="isLeaving !== 0"
                    :value="backDate||'请选择'"
                    @click="setData('show_data')"
            />
            <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
                    required
                    class="dk-cell"
                    title="两周内是否有湖北地区旅行史："
                    title-style="font-weight: bold;flex:2;"
                    :title-class="isHubeiTravel===1?'dk-color':''"
                    value-class="dk-right"
                    :center="true"
                    is-link
                    :value="isHubeiTravel===''?'请选择':isHubeiTravel===0?'否':'是'"
                    @click="setData('show_choose','isHubeiTravel')"
            />
            <van-cell
                    required
                    class="dk-cell"
                    title="是否有与湖北地区人员接触史："
                    title-style="font-weight: bold;flex:2;"
                    :title-class="isHubeiTouch===1?'dk-color':''"
                    :center="true"
                    is-link
                    :value="isHubeiTouch===''?'请选择':isHubeiTouch===0?'否':'是'"
                    @click="setData('show_choose','isHubeiTouch')"
            />
            <van-cell
                    required
                    class="dk-cell"
                    title="是否有与新兴冠状病毒确诊病例接触史："
                    title-style="font-weight: bold;flex:4;"
                    :title-class="isCovTouch===1?'dk-color':''"
                    :center="true"
                    is-link
                    :value="isCovTouch===''?'请选择':isCovTouch===0?'否':'是'"
                    data-value="test"
                    @click="setData('show_choose','isCovTouch')"
            />
        </div>

        <van-row>
            <van-col span="24">
                <van-button color="#0177FF" :loading="loading" text="提交" class="dk-button" @click="commit"/>
            </van-col>
        </van-row>
        <van-popup
                v-model="show_address"
                position="bottom"
                :safe-area-inset-bottom="true"
                :style="{ height: '45%' }"
        >
            <van-area :area-list="areaList" @cancel="show_address = false" @confirm="address"/>
        </van-popup>
        <van-popup
                v-model="show_living"
                position="bottom"
                :safe-area-inset-bottom="true"
                :style="{ height: '45%' }"
        >
            <van-area :area-list="areaList" @cancel="show_living = false" @confirm="living"/>
        </van-popup>
        <van-popup
                v-model="show_leaving"
                position="bottom"
                :safe-area-inset-bottom="true"
                :style="{ height: '45%' }"
        >
            <van-area :area-list="areaList" @cancel="show_leaving = false" @confirm="leaving"/>
        </van-popup>
        <van-popup
                v-model="show_choose"
                position="bottom"
                :safe-area-inset-bottom="true"
                :style="{ height: '45%' }"
        >
            <van-picker :columns="columns" show-toolbar @cancel="show_choose = false" @confirm="choose"/>
        </van-popup>
        <van-calendar
                v-model="show_data"
                :min-date="minDate"
                :round="false"
                color="#0177FF"
                :default-date="defaultDate"
                @confirm="chooseTime"/>

    </div>
</template>

<script>
    import {Button, Col, Row, Calendar, Cell, CellGroup, Popup, Area, Field, Picker, Toast, Notify} from 'vant';
    import areaList from '@/utils/area'
    import {getStore} from "@/utils/storage";
    import {dk_formatDate} from '@/utils/util'
    import {postAction, getAction} from '@/api/manage'
    import {backtrackingInfoRegister, backtrackingPersonalInfo} from '@/api/index'

    const message = {
        censusRegisterProvinceCode: '请选择户籍地址',
        censusRegisterCityCode: '请选择户籍地址',
        censusRegisterCountryCode: '请选择户籍地址',
        censusRegisterPcc: '请选择户籍地址',
        censusRegisterAddress: '请填写户籍详细地址',
        livingProvinceCode: '请选择居住地址',
        livingCityCode: '请选择居住地址',
        livingCountryCode: '请选择居住地址',
        livingPcc: '请选择居住地址',
        livingAddress: '请填写居住详细地址',
        isLeaving: '请选择是否历史',
        isHubeiTravel: '请选择是否有武汉旅行史',
        isHubeiTouch: '请选择是否有与湖北地区人员接触史',
        isCovTouch: '请选择是否有与新兴冠状病毒确诊病例接触史'
    };
    const _message = {
        leavingDestinationProvinceCode: '请选择离市后目的地',
        leavingDestinationCityCode: '请选择离市后目的地',
        leavingDestinationPc: '请选择离市后目的地',
        estimateBackDate: '请选择预计返市日期',
    };
    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,
                loading: false,
                dkBackTracking_id: '',
                minDate: new Date(2019, 11, 1),
                defaultDate: new Date(),
                columns: ['否', '是'],
                tmp_name: '',
                backDate: '',
                staff_id: '',
                censusRegisterProvinceCode: '',
                censusRegisterCityCode: '',
                censusRegisterCountryCode: '',
                censusRegisterPcc: '',
                censusRegisterAddress: '',
                livingProvinceCode: '',
                livingCityCode: '',
                livingCountryCode: '',
                livingPcc: '',
                livingAddress: '',
                isLeaving: '',
                leavingDestinationProvinceCode: '',
                leavingDestinationCityCode: '',
                leavingDestinationPc: '',
                estimateBackDate: '',
                isHubeiTravel: '',
                isHubeiTouch: '',
                isCovTouch: '',
            }
        },
        mounted() {
            this.staff_id = getStore(getStore('role')).id;
            getAction(backtrackingPersonalInfo, {staffId: this.staff_id}).then(data => {
                if (data.data.dkBackTrackingAPI) {
                    const {
                        id,
                        censusRegisterProvinceCode,
                        censusRegisterCityCode,
                        censusRegisterCountryCode,
                        censusRegisterPcc,
                        censusRegisterAddress,
                        livingProvinceCode,
                        livingCityCode,
                        livingCountryCode,
                        livingPcc,
                        livingAddress,
                        isLeaving,
                        leavingDestinationProvinceCode,
                        leavingDestinationCityCode,
                        leavingDestinationPc,
                        estimateBackDate,
                        isHubeiTravel,
                        isHubeiTouch,
                        isCovTouch
                    } = data.data.dkBackTrackingAPI;
                    const json = {
                        dkBackTracking_id: id,
                        censusRegisterProvinceCode,
                        censusRegisterCityCode,
                        censusRegisterCountryCode,
                        censusRegisterPcc,
                        censusRegisterAddress,
                        livingProvinceCode,
                        livingCityCode,
                        livingCountryCode,
                        livingPcc,
                        livingAddress,
                        isLeaving,
                        leavingDestinationProvinceCode,
                        leavingDestinationCityCode,
                        leavingDestinationPc,
                        estimateBackDate: isLeaving === 0 ? '' : estimateBackDate,
                        isHubeiTravel,
                        isHubeiTouch,
                        isCovTouch,
                        backDate: isLeaving === 0 ? '' : dk_formatDate(new Date(estimateBackDate.replace(/-/g, '/')), '年')
                    };
                    for (let key in json) {
                        this[key] = json[key]
                    }
                }
            })
        },
        methods: {
            setData(show, data) {
                this[show] = true;
                if (data) {
                    this.tmp_name = data
                }
            },
            address(data) {
                this.censusRegisterProvinceCode = data[0].code;
                this.censusRegisterCityCode = data[1].code;
                this.censusRegisterCountryCode = data[2].code;
                this.censusRegisterPcc = data[0].name + data[1].name + data[2].name;
                this.show_address = false;
            },
            living(data) {
                this.livingProvinceCode = data[0].code;
                this.livingCityCode = data[1].code;
                this.livingCountryCode = data[2].code;
                this.livingPcc = data[0].name + data[1].name + data[2].name;
                this.show_living = false;
            },
            leaving(data) {
                this.leavingDestinationProvinceCode = data[0].code;
                this.leavingDestinationCityCode = data[1].code;
                this.leavingDestinationPc = data[0].name + data[1].name + data[2].name;
                this.show_leaving = false;
            },
            choose(val, key) {
                this[this.tmp_name] = key;
                this.show_choose = false;
            },
            chooseTime(date) {
                this.estimateBackDate = dk_formatDate(new Date(date), '-');
                this.backDate = dk_formatDate(new Date(date), '年');
                this.show_data = false;
            },
            commit() {
                this.loading = true;
                let {
                    staff_id,
                    censusRegisterProvinceCode,
                    censusRegisterCityCode,
                    censusRegisterCountryCode,
                    censusRegisterPcc,
                    censusRegisterAddress,
                    livingProvinceCode,
                    livingCityCode,
                    livingCountryCode,
                    livingPcc,
                    livingAddress,
                    isLeaving,
                    leavingDestinationProvinceCode,
                    leavingDestinationCityCode,
                    leavingDestinationPc,
                    estimateBackDate,
                    isHubeiTravel,
                    isHubeiTouch,
                    isCovTouch
                } = this;
                const json = {
                    censusRegisterProvinceCode,
                    censusRegisterCityCode,
                    censusRegisterCountryCode,
                    censusRegisterPcc,
                    censusRegisterAddress,
                    livingProvinceCode,
                    livingCityCode,
                    livingCountryCode,
                    livingPcc,
                    livingAddress,
                    isLeaving,
                    isHubeiTravel,
                    isHubeiTouch,
                    isCovTouch
                };
                const _json = {
                    leavingDestinationProvinceCode,
                    leavingDestinationCityCode,
                    leavingDestinationPc,
                    estimateBackDate,
                };
                if (isLeaving === 1) {
                    for (let key in _json) {
                        if (_json[key] === '') {
                            Notify(_message[key]);
                            this.loading = false;
                            return
                        }
                    }
                }
                for (let key in json) {
                    if (json[key] === '') {
                        Notify(message[key]);
                        this.loading = false;
                        return
                    }
                }
                if (isLeaving === 0) {
                    leavingDestinationProvinceCode = '';
                    leavingDestinationCityCode = '';
                    leavingDestinationPc = '';
                    estimateBackDate = '';
                } else {
                    estimateBackDate = estimateBackDate + ' 00:00:00'
                }
                // if (isLeaving === 0) {
                //     leavingDestinationProvinceCode = livingProvinceCode;
                //     leavingDestinationCityCode = livingCityCode;
                //     leavingDestinationPc = livingPcc;
                //     estimateBackDate = dk_formatDate(new Date(), '-')
                // }
                const data = {
                    staffId: staff_id,
                    dkBackTracking_id: this.dkBackTracking_id,
                    censusRegisterProvinceCode,
                    censusRegisterCityCode,
                    censusRegisterCountryCode,
                    censusRegisterPcc,
                    censusRegisterAddress,
                    livingProvinceCode,
                    livingCityCode,
                    livingCountryCode,
                    livingPcc,
                    livingAddress,
                    isLeaving,
                    leavingDestinationProvinceCode,
                    leavingDestinationCityCode,
                    leavingDestinationPc,
                    estimateBackDate,
                    isHubeiTravel,
                    isHubeiTouch,
                    isCovTouch
                };
                postAction(backtrackingInfoRegister, data).then(data => {
                    Toast(data.errmsg);
                    setTimeout(() => {
                        this.loading = false;
                        this.$router.back();
                    }, 1200)
                }).catch(() => {
                    this.loading = false;
                })

            }
        }
    }
</script>

<style scoped>
    .dk-content {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .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>
