<template>
    <div style="background:white">
        <div class="head">
            <div class="search-menu">
                <span class="type">
                    <el-radio-group v-model="DBType">
                        <el-radio label="CN">中国专利检索</el-radio>
                        <el-radio label="WD">世界专利检索</el-radio>
                    </el-radio-group>
                </span>
                  <el-link :type="isComponent === 'FormSearch' ? 'primary' : undefined" @click="changeComponent('FormSearch')" >表格检索</el-link>
                  <el-link :type="isComponent === 'customSearch' ? 'primary' : undefined" @click="changeComponent('customSearch')">高级检索</el-link>
                  <el-link :type="isComponent === 'AdvancedSearch' ? 'primary' : undefined" @click="changeComponent('AdvancedSearch')">专家检索</el-link>  
                <span class="icon">
                    <i class="iconfont icon-shouye" @click="openHistory"></i>
                </span>
            </div> 
        </div>
        
        <div style="width:70%;margin:0 auto;">
            <component :is='isComponent' @search="search" :countryList="countryList" :DBType="DBType"></component>
        </div>

        <el-dialog title="检索历史" :visible.sync="dialogVisible" width="1200px" :append-to-body="true" :close-on-click-modal="false">
            <div>
                <searchHistory ref="searchHistory" :importData="importData"></searchHistory> 
            </div>
        </el-dialog>
        
    </div>
</template>
<script>
import FormSearch from './FormSearch.vue';
import AdvancedSearch from './AdvancedSearch.vue';
import customSearch from './customSearch.vue'

import searchHistory from './components/search_history.vue';
import mixins from '../mixins/index'
export default {
    components:{
        FormSearch,
        AdvancedSearch,
        customSearch,
        searchHistory
    },
    mixins:[mixins],
    props:[],
    data() {
        return {
            isComponent:'FormSearch',
            countryList:[],
            DBType:"CN",
            dialogVisible:false,
        }
    },
    mounted() {
        this.getCountry()
    },
    methods: {
        //获取国家
        getCountry(){
            var str = 'AD 安道尔 AE 阿拉伯联合酋长国 AF 阿富汗 AG 安提瓜和巴布达 AI 安圭拉岛 AL 阿尔巴尼亚 AM 亚'
                    +'美尼亚 AN 荷属安的列斯群岛 AO 安哥拉 AP 非洲地区工业产权组织（ARIPO） AR 阿根廷 AT 奥地'
                    +'利 AU 澳大利亚 AW 阿鲁巴岛（荷） BA 波斯尼亚和黑塞哥维那（波黑） BB 巴巴多斯 BD 孟加拉 AZ'
                    +'阿塞拜疆 BE 比利时 BF 布基纳法索 BG 保加利亚 BH 巴林 BI 布隆迪 BJ 贝宁 BM 百慕大 BN 文'
                    +'莱 BO 玻利维亚 BR 巴西 BS 巴哈马 BT 不丹 BV 布韦岛 BW 博茨瓦那 BX 比、荷、卢经济联盟商'
                    +'标局及外观设计局 BY 白俄罗斯 BZ 伯利兹 CA 加拿大 CD 刚果民主共和国 CF 中非共和国 CG 刚'
                    +'果 CH 瑞士 CI 科特迪瓦 CK 库克群岛 CL 智利 CM 喀麦隆 CN 中国 CO 哥伦比亚 CR 哥斯达黎'
                    +'加 CU 古巴 CV 佛得角 CY 塞浦路斯 CZ 捷克共和国 DE 德国 DJ 吉布提 DK 丹麦 DM 多米尼克'
                    +'DO 多米尼加共和国 DZ 阿尔及利亚 EA 欧亚专利组织（EAPO） EC 厄瓜多尔 EE 爱沙尼亚 EG 埃'
                    +'及 EH 西撒哈拉 EM 内部市场协调局（OHIM） EP 欧洲专利局（EPO） ER 厄立特里亚 ES 西班牙 ET 埃'
                    +'塞俄比亚 FI 芬兰 FJ 斐济 FK 福克兰群岛（马尔维纳斯群岛） FO 法罗群岛 FR 法国 GA 加蓬 GB 英'
                    +'国 GD 格林纳达 GH 加纳 GC 海湾地区阿拉伯国家合作委员会专利局（GCC） GE 格鲁吉亚 GI 直布罗'
                    +'陀 GL 格陵兰 GM 冈比亚 GN 几内亚 GQ 赤道几内亚 GR 希腊 GS 南乔治亚和南三维治群岛 GT'
                    +'危地马拉 GW 几内亚比绍 GY 圭亚那 HK 中华人民共和国香港特别行政区 HN 洪都拉斯 HR 克罗地'
                    +'亚 HT 海地 HU 匈牙利  WO 世界知识产权组织国际局（WIPO） ID 印度尼西亚 IE 爱尔兰 IL 以色'
                    +'列 IN 印度 IQ 伊拉克 IR 伊朗，伊斯兰共和国'
                var regx = new RegExp("[A-Z]{2} ", "g")
                var a = str.split(regx)
                a.splice(0,1)
                var b = str.match(regx)
                b.forEach((item,index)=>{
                    this.countryList.push({
                        label:a[index],
                        value:item
                    })
                })
        },
        changeComponent(val){
            this.isComponent = val
        },
        search(val){
            var a = {
                searchCondition:val,
                DBType:this.DBType,
                retrieveRecordId:null,
                ...this.importData,
                type:4
            }
            this.$router.push({
                path: '/searchResult',
                query: {
                    data:JSON.stringify(a)
                }
            })
            // this.$s.setSession('retrieveRecordId',0)
            // window.open(router.href, '_blank');
        },
        openHistory(){
            // this.dialogVisible = true
            // this.$nextTick(()=>{
            //     this.$refs.searchHistory.open()
            // })
            const router = this.$router.resolve({
                path: '/searchHistory',
            })
            window.open(router.href, '_blank');
        },

    },
}
</script>
<style lang="scss" scoped>
.head{
    background: rgb(223 223 223);
    line-height: 50px;
    text-align: center;
}
.search-menu{
    width:70%;
    margin:0 auto;
    position: relative;
    .el-link{
        margin-right: 20px; 
    } 
    .type{
        position: absolute;
        left:0;
        top:0;
    }
    .icon{
        
        position: absolute;
        right:0;
        top:0;
        i{
            font-size:24px;
        }
    }
}
</style>