<template>
    <div class="pageContainer">
        <div class="title">境外法规检索</div>
        <div class="formBox">
            <div class="item">
                <div class="label">关键字</div>
                <div class="val">
                    <van-field :clearable="true" :center="true" class="txt" v-model="keywords" placeholder="请输入关键字"></van-field>
                </div>
            </div>
            <div class="item">
                <div class="label">地区</div>
                <div class="val">
                    <van-field class="areaInput" v-model="area.name" is-link readonly placeholder="地区" @click="onPick('area')" />
                </div>
            </div>
            <div class="item">
                <div class="label">国家</div>
                <div class="val">
                    <van-field class="areaInput" v-model="nation.name" is-link readonly placeholder="国家" @click="onPick('nation')" />
                </div>
            </div>
            <div class="item">
                <div class="label">生效区域</div>
                <div class="val">
                    <van-field class="areaInput" v-model="effectArea.name" is-link readonly placeholder="生效区域" @click="onPick('effectArea')" />
                </div>
            </div>
            <van-popup v-model:show="showAreaPicker" round position="bottom">
                <van-picker
                    v-model="curSelectedAreaValue"
                    :title="areaPickerTitle"
                    :columns="areaColumns"
                    :columns-field-names="{ text: 'name', value: 'id', children: null }"
                    @cancel="showAreaPicker = false"
                    @confirm="onAreaPickerConfirm"
                />
            </van-popup>


            <div class="item" v-if="legalCategories.length">
                <div class="label">法规分类</div>
                <div class="val">
                    <van-field class="areaInput" v-model="curCategory.name" is-link readonly placeholder="请选择法规分类" @click="showCategoryPicker = true" />
                    <div class="legalSubTypes" v-if="curCategory.children">
                        <van-checkbox-group v-model="checkedCategoryType">
                            <van-checkbox :key="item.id" :name="item.name" v-for="item in curCategory.children" shape="square" >{{ item.name }}</van-checkbox>
                        </van-checkbox-group>
                    </div>
                </div>
            </div>
            <van-popup v-model:show="showCategoryPicker" round position="bottom">
                <van-picker
                    title="法规分类"
                    :columns="legalCategories"
                    :columns-field-names="{ text: 'name', value: 'id', children: null }"
                    @cancel="showCategoryPicker = false"
                    @confirm="onCategoryPickerConfirm"
                />
            </van-popup>
            
        </div>
        <div class="btns">
            <button class="primary" @click="onSearch">检索</button>
            <button @click="onReset">重置</button>
        </div>
        <div class="tips">
            <p>友情提示：本网站仅只提供境外法规标题参考翻译及法规原文地址。境外网站访问不稳定，访问时请耐心等待。如原文地址打不开请稍后再尝试</p>
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onUpdated, watch } from 'vue';
import http from '@/io/http';
import { showToast } from 'vant';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();

const keywords = ref('');  // 关键字
const areas = ref([]);
const nations = ref([]);
const effectAreas = ref([]);
const area = ref({});
const nation = ref({});
const effectArea = ref({});

const showAreaPicker = ref(false);
const curAreaPickerType = ref();
const areaPickerTitle = ref();
const areaColumns = ref([]);
const selectedAreaValues = ref({});
const curSelectedAreaValue = ref();

const showCategoryPicker = ref(false);

const legalCategories = ref([]);
const curCategory = ref({});

const checkedTypeData = ref({});
const checkedCategoryType = ref([]);

onMounted(()=>{
    getAreas();
    getLegalCategory();
});

// 获取地区枚举
const getAreas = ()=>{
    let params = { parent_key: 'continent' };
    http('/api/keywords', params, 'get').then(res => {
        areas.value = res.data || [];
    }).catch(err => {
        showToast(err.message);
    });
};

// 获取法规分类
const getLegalCategory = (id) => {
    let params = { parent_key: 'law_category' };
    http('/api/keywords', params, 'get').then(res => {
        legalCategories.value = res.data || [];
        // curCategory.value = res.data[0];
    }).catch(err => {
        showToast(err.message);
    });
};

const areaPickerTitleOptions = {
    area: '请选择地区',
    nation: '请选择国家',
    effectArea: '请选择生效地区'
};

const onPick = (type)=>{
    showAreaPicker.value = true;
    curAreaPickerType.value = type;
    curSelectedAreaValue.value = selectedAreaValues.value[type];
    areaPickerTitle.value = areaPickerTitleOptions[type];
    if(type == 'area'){
        areaColumns.value = areas.value;
    }else if(type == 'nation'){
        areaColumns.value = nations.value;
    }else if (type == 'effectArea') {
        areaColumns.value = effectAreas.value;
    }
};

const onAreaPickerConfirm = (val)=>{
    showAreaPicker.value = false;
    let _temp = val.selectedOptions[0];
    let _typeVal = {...selectedAreaValues.value};
    _typeVal[curAreaPickerType.value] = _temp.id;
    selectedAreaValues.value = _typeVal;
    switch (curAreaPickerType.value){
        case 'area':
            nations.value = _temp.children;
            area.value = _temp;
            break;
        case 'nation':
            effectAreas.value = _temp.children;
            nation.value = _temp;
            break;
        case 'effectArea':
            effectArea.value = _temp;
            break;
    }

};


const onCategoryPickerConfirm = (val)=>{
    showCategoryPicker.value = false;
    let _temp = val.selectedOptions[0];
    curCategory.value = _temp;
    checkedCategoryType.value = [];
};


const onSearch = ()=>{
    let continent = area.value.name;
    let params = {
        title: keywords.value,
        continent: continent,  // 地区洲
        country: nation.value.id,
        area: effectArea.value.id,
        categories: checkedCategoryType.value.join(',')
    };
    router.push({
        path: `/business/legal/searchResult`,
        query: params
    });
};

const onReset = ()=>{
    keywords.value = '';
    area.value = '';
    nation.value = '';
    effectArea.value = '';
    nations.value = [];
    effectAreas.value = [];
    curCategory.value = {};
    checkedTypeData.value = {};
};

</script>

<style lang="scss" scoped>
.pageContainer{
    padding: 40px;
    color: #FFF;
    .title{
        font-size: 36px;
        padding: 20px 0;
        text-align: center;
        font-weight: bold;
    }
    .formBox{
        width: 100%;
        .item{
            padding: 8px 0;
            .label{
                width: 100%;
                height: 66px;
                line-height: 66px;
                font-size: 27px;
                font-weight: bold;
            }
            .val{
                flex: 1;
                line-height: 72px;
                display: flex;
                flex-direction: column;
                .txt,
                .areaInput{
                    flex: 1;
                    height: 72px;
                    border: 2px solid rgba($color: #414548, $alpha: 0.4);
                    border-radius: 4px;
                    background: none;
                    color: #FFF;
                    padding: 10px 20px;
                    box-sizing: border-box;

                    :deep(input) {
                        background: none;
                        color: #FFF;
                        font-size: 27px;
                        line-height: 52px;

                        &::placeholder {
                            color: #999;
                        }
                    }
                }
            }
            :deep(.van-cell:after){
                display: none;
            }
            .legalSubTypes{
                flex: 1;
                margin-top: 20px;
                border: 2px solid #A6A8AF;
                border-radius: 4px;
                padding: 20px;
                font-size: 28px;
                color: #FFF;
                li{
                    width: 100%;
                    line-height: 36px;
                    padding: 15px 10px;
                    margin-bottom: 10px;
                }
            }
            :deep(.van-checkbox__label){
                color: #FFF;
            }
            :deep(.van-checkbox){
                padding: 15px 0;
            }
            :deep(.van-checkbox__icon--checked ~ span){
                color: #3662FE;
            }
        }
    }
    .btns{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 50px 0;
        button{
            width: 200px;
            height: 72px;
            background: #414548;
            border-radius: 3px;
            font-size: 26px;
            color: #FFF;
            line-height: 72px;
            text-align: center;
            &.primary{
                background: #3662FE;
            }
        }
    }
    .tips{
        width: 100%;
        font-size: 22px;
        line-height: 36px;
        color: #A6A8AF;
        margin-top: 30px;
    }
}
</style>