<template>
    <div class="select_content">
        <div class="select_header">
           <div class="select_header_content">
               <span>
                <select  @click="onchickSelect"  >
                    <option  @click="onchickSelect"
                            v-for="item in selectType"
                            :value="item.key"
                    >{{item.name}}
                    </option>
                </select>
            </span>|<i class="select_downImage"></i><input type="text" alt="请输出查询内容" :value="inputValue" /><i class="select_selectImage"></i></div>
        </div>
        <div v-if="showSelect"  class="select_body">
              <ul>
                  <li  v-for="item in selectBody" @click="selectOneBody(item)"><i></i><p>{{selectValue==1? item.companyName : item.shipName}}</p></li>
              </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SelectForUnit"
    }
</script>
<script setup>
    import { onMounted, reactive, watch, ref } from 'vue';
    import {ElSelect,ElOption} from "element-plus"
    import 'element-plus/es/components/select/style/css'
    import 'element-plus/es/components/option/style/css'
    import {GetSelectInfo} from "@/apis/other"

    const  selectType=ref([{key:'1',name:"企业"},{key:'2',name:"船舶"}])
    const showSelect = ref(false)
    let   selectValue=ref('1')
    const inputValue = ref("")
    const inputKey = ref("")
    function onchickSelect(item) {
        selectValue.value=item.target.value
        console.log(selectValue.value)
        item.target.selected='selected'
        showSelect.value=true
        getSelectBody(selectValue.value)
    }
    onMounted(()=>{
        getSelectBody('1')
    })

    const  selectBody=ref([])

    function getSelectBody(type) {
        GetSelectInfo(type).then(res=>{
            if (res.data!=null && res.data!=undefined && res.data!='')
            {
                selectBody.value= res.data.Rows
                // totalForVido.value= res.data.TotalRowCount
            }
        })
    }

function selectOneBody(item) {
    console.log(selectValue.value)
        if (selectValue.value=='1')
        {
            console.log("点击企业的信息："+item.companyName)
            inputValue.value=item.companyName
            inputKey.value=item.certNumber
        }else {
            console.log("点击船舶的信息："+item.shipName)
            inputValue.value=item.shipName
            inputKey.value=item.mmsi
        }

}

</script>

<style lang="scss" scoped>
.select_content{
    position: fixed;
    top: 35px;
    right: 17%;
    width:  300px;
    height: 320px;
    .select_header{
        margin-top: 10px;
        background: url("@/assets/imgs/header/select_bg.png") no-repeat;
        background-size: 100% 100%;
        height:40px;
        .select_header_content{
            display:flex;
            height: 100%;
            width: 100%;
            padding-top: 8px;
            padding-left: 10px;
            /*background-color: #00EAFF;*/
            span{
                margin-right: 5px;
                select {
                    color: #CCE6FF;
                    width:60px;
                    background: none;
                    border: none;
                    option{
                        color: #CCE6FF;
                        background: none;
                        border: none;
                    }
                    option  :focus :checked{
                        border: none;
                    }
                }
                select :active :focus  :checked{
                    border: none;
                }

            }
            input{
                margin-top: 3px;
                color: #FFFFFF;
                line-height: 40px;
                margin-left: 12px;
                width: 50%;
                height: 20px;
                background: none;
                border: none;

            }
            input :focus :checked{
                border: none;
                outline: none;
            }
            .select_selectImage{
                margin-left: 5px;
                width:10%;
                height:25px;
                background: url("@/assets/imgs/header/select_i.png") no-repeat;
                background-size: 100% 100%;
            }
        }

    }
    .select_body{
        margin-top: 10px;
        height:260px ;
        background: url("@/assets/imgs/header/select_body.png") no-repeat;
        background-size: 100% 100%;
        ul{
            height: 95%;
            width:98%;
            margin: 0 auto;
            overflow: auto;
            li{
                padding-top: 5px;
                line-height: 30px;
                height: 30px;
                i{
                    margin-left:1% ;
                    display:block;
                    float: left;
                    width: 30px;
                    height: 30px;
                    background: url("@/assets/imgs/header/dw.png") no-repeat;
                    background-size: 100% 100%;
                }
                p{
                    float: left;
                    width: 87%;
                    display:block;
                    font-size:6px;
                    text-align: left;
                }
            }
            li :hover{
                background: #07afd4;
                color: #FFFFFF;
                opacity: 0.8;
            }
        }
    }
}
</style>