<template>
    <div class="container">
        <van-form @submit="handleSubmit" required colon>
            <div class="content">
                <div class="header">
                    <span class="title">基本信息</span>
                    <div class="title-line"></div>
                </div>
                <div class="form">

                    <!-- <van-field v-model="formData.area" is-link readonly label="拍摄地区" placeholder="请选择拍摄地区"
                        @click="showArea = true" :rules="[{ required: true, message: '请选择拍摄地区' }]" />
                    <van-field v-model="formData.address" label="详细地址" placeholder="请填写拍摄详细地址"
                        :rules="[{ required: true, message: '请填写拍摄详细地址' }]" /> -->
                    <van-field v-model="formData.shootLocation" is-link readonly label="拍摄地区" placeholder="请选择拍摄地区"
                        @click="handleRegionPicker" :rules="[{ required: true, message: '请选择拍摄地区' }]" />
                    <van-field v-model="formData.shoottime" is-link readonly label="拍摄时间" placeholder="请选择拍摄时间"
                        @click=" showShoottimeCalendar = true" :rules="[{ required: true, message: '请选择拍摄时间' }]" />
                    <van-field v-model="formData.materialtime" is-link readonly label="入库时间" placeholder="请选择入库时间"
                        @click="showMaterialtimeCalendar = true" :rules="[{ required: true, message: '请选择入库时间' }]" />
                    <van-field v-model="formData.materialTitle" label="图组标题" placeholder="请填写图组标题"
                        :rules="[{ required: true, message: '请填写图组标题' }]" />
                    <van-field v-model="formData.materialIntro" type="textarea" label="图组描述" placeholder="请填写图组描述"
                        :rules="[{ required: true, message: '请填写图组描述' }]" />

                </div>
            </div>
            <div class="footer" ref="footerRef">
                <div>
                    <van-button plain hairline round type="primary" @click="handlePre">上一步</van-button>
                </div>
                <div>
                    <van-button round type="primary" native-type="submit">提交</van-button>
                </div>
            </div>
        </van-form>
    </div>
    <!-- <van-popup v-model:show="showArea" position="bottom">
        <van-area :area-list="areaList" @confirm="areaConfirm" @cancel="showArea = false" />
    </van-popup> -->
    <van-calendar v-model:show="showShoottimeCalendar" :min-date="minDate" @confirm="shoottimeCalendarConfirm" />
    <van-calendar v-model:show="showMaterialtimeCalendar" :min-date="minDate" @confirm="materialtimeCalendarConfirm" />
</template>
<script setup>
import { areaList } from '@vant/area-data'
import dayjs from 'dayjs'
const props = defineProps({
    enclosureLists: String
});
const emits = defineEmits(["confirm"])
const footerRef = ref()
let currentDate = new Date();
const formData = ref({
    shoottime: dayjs(currentDate).format('YYYY-MM-DD'),
    materialtime: dayjs(currentDate).format('YYYY-MM-DD'),
    materialTitle: props.enclosureLists[0].enclosureDesc ?? formData.value.materialTitle,
    materialIntro: props.enclosureLists[0].enclosureDesc ?? formData.value.materialIntro,
    shootLocation: ''
})
const showArea = ref(false)
const showShoottimeCalendar = ref(false)
const showMaterialtimeCalendar = ref(false)
const minDate = ref(new Date('1970-01-01'))

const handlePre = () => {
    emits('confirm', { code: 'pre' })
}

const handleSubmit = () => {
    formData.value.shoottime = formData.value.shoottime + ' 00:00:00'
    formData.value.materialtime = formData.value.materialtime + ' 00:00:00'
    // formData.value.shootLocation = formData.value.area + formData.value.address
    emits('confirm', { code: 'submit', catalog: formData.value })
}

const areaConfirm = (selectedOptions) => {
    showArea.value = false;
    formData.value.area = selectedOptions.selectedOptions.map((item) => item.text).join('');
}

const shoottimeCalendarConfirm = (data) => {
    showShoottimeCalendar.value = false
    formData.value.shoottime = dayjs(data).format('YYYY-MM-DD')
}

const materialtimeCalendarConfirm = (data) => {
    showMaterialtimeCalendar.value = false
    formData.value.materialtime = dayjs(data).format('YYYY-MM-DD')
}

const handleRegionPicker = () => {
    xma.chooseLocation({
        success: function (res) {
            formData.value.shootLocation = res.address
        },
        fail: function (err) {
            console.log(err)
        }
    });
}

// 获取定位
function getLocationFn() {
    uni.getLocation({
        type: 'wgs84',
        isHighAccuracy: true,
        success: function (res) {
            // 经纬度
            console.log(res);
            getLocationDetail(res.latitude, res.longitude)
        },
        fail: function (err) {
            console.log(err)
        },
    })
}
getLocationFn()

const getLocationDetail = (latitude, longitude) => {
    uni.request({
        url: '/ws/geocoder/v1/',
        data: {
            key: 'MN4BZ-7JXKW-2RYRD-32QGF-AHONV-PAFUN',
            location: `${latitude},${longitude}`,
        },
        success: function (res) {
            if (res.data.status === 0) {
                formData.value.shootLocation = res.data.result.address ?? formData.value.shootLocation
            }
        }
    })
}
</script>
<style lang="scss" scoped>
.container {
    padding-top: 10px;
    background-color: #f6f6f6;

    .content {
        padding: 10px;
        background-color: #ffffff;

        .header {
            display: flex;
            font-size: 16px;
            flex-direction: column;
            align-items: center;
            gap: 6px;

            .title {
                color: #545454;
            }

            .title-line {
                background-color: #2879fe;
                height: 4px;
                width: 15px;
                border-radius: 5px;
            }
        }

        .form {
            margin-top: 10px;

            .van-cell-group--inset {
                margin: 0;

                .van-cell {
                    margin-top: 10px;
                    font-size: 15px;
                }
            }
        }
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        padding: 15px 10px;
        box-shadow: -1px -1px 5px rgba(0, 0, 0, 0.1);
        align-items: center;
        height: 38px;
        z-index: 999;

        .info {
            font-size: 14px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .info-content {
                color: #2879fe;
            }
        }

        :deep(.van-button--normal) {
            padding: 0 20px;
            width: 90px;
            height: 35px;
            font-size: 15px;
        }
    }
}
</style>