<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"  @input="watchText" v-model="inputValue" /><i class="select_selectImage" @click="selectShowList"></i></div>
        </div>
        <div v-if="showSelect"  class="select_body">
              <ul>
                  <li  v-for="item in selectBodyShow" @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"
    import bus from '@/utils/bus'

    const  selectType=ref([{key:'1',name:"企业"},{key:'2',name:"船舶"}])
    const showSelect = ref(false)
    let   selectValue=ref('1')
    const inputValue = ref("")
    const inputKey = ref("")
    //原始数据
    const  selectBody=ref([])
    //展示
    const  selectBodyShow=ref([])
    function onchickSelect(item) {
        selectValue.value=item.target.value
        console.log(selectValue.value)
        item.target.selected='selected'

        getSelectBody(selectValue.value)
    }
  function watchText() {

        if(inputValue.value!=null || inputValue.value!='') {
            if (selectValue.value === '1') {
                selectBodyShow.value = selectBody.value.filter(i =>  i.companyName!=null?i.companyName.includes(inputValue.value):null)
            } else {
                console.log('类型为2')
                selectBodyShow.value = selectBody.value.filter(i => i.shipName!=null?i.shipName.includes(inputValue.value):null)
            }
        }else {
            selectBodyShow.value=selectBody.value
        }
  }

    function selectShowList()
    {
        showSelect.value=!showSelect.value

    }
    onMounted(()=>{
        getSelectBody('1')
    })


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

    function selectOneBody(item) {
    console.log(selectValue.value)
        if (selectValue.value=='1')
        {
            inputValue.value=item.companyName
            inputKey.value=item.certNumber
        }else {

            inputValue.value=item.shipName
            inputKey.value=item.mmsi
            bus.emit('ueRec_BoatClick',{'mmsi':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: #1d63b3;
                        background: none;
                        border: none;
                    }
                    option  :focus :checked{
                        color: #FFFFFF;
                        border: none;
                        background: none;
                    }
                }
                select:active,select:focus,select:checked {
                    border: none;
                    outline: none;
                }

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

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

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