<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.unitName : item.BOATNAME}}</p></li>
              </ul>
        </div>
    </div>


    <EntInfo
            v-if="entInfoShow"
            :ent-data="currentEnt"
            @closeEntInfo="handleCloseEntInfo"
            @closeUnitVedio="ue_closeUnitVedio"
            @onVideoShow="handleOnVideoShow"
    />
</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'
    import EntInfo from '@/views/yyjg/cpns/EntInfo'
    import {locationUnit} from "@/utils/map/OperationSupervision";
    import {GetHpjShip} from "@/apis/ship";
    import {ueCallCloseUnitVedio} from "@/utils/UIInteractions";

    const  selectType=ref([{key:'1',name:"企业"},{key:'2',name:"船舶"}])
    const showSelect = ref(false)

    const entInfoShow = ref(false)
    let   selectValue=ref('1')
    const inputValue = ref("")
    const inputKey = ref("")
    const  selectBody=ref([])
    //原始数据
    const currentEnt = 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.unitName!=null?i.unitName.includes(inputValue.value):null)
            } else {
                console.log('类型为2')
                selectBodyShow.value = selectBody.value.filter(i => i.BOATNAME!=null?i.BOATNAME.includes(inputValue.value):null)
            }
        }else {
            selectBodyShow.value=selectBody.value
        }
  }

    function selectShowList()
    {
        showSelect.value=!showSelect.value
    }
    onMounted(()=>{
        getSelectBody('1')
    })


    function getSelectBody(type) {
        if(type==1)
        {
            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
                }
            })
        }else {
            GetHpjShip().then(res=>{
                selectBody.value= res.Result.data
                selectBodyShow.value=res.Result.data
            })
        }

    }


    function selectOneBody(item) {
        if (selectValue.value=='1')
        {
            inputValue.value=item.unitName
            inputKey.value=item.certNumber
            let data={
                name:item.unitName,
                certNumber:item.certNumber,
                mapx:item.shape.x,
                mapy:item.shape.y

            }
            locationUnit(null,false)
            locationUnit(data,true)
            console.log('企业内容：',item)
            currentEnt.value=item
            entInfoShow.value=true
        }else {
            entInfoShow.value=false
            locationUnit(null,false)
            inputValue.value=item.BOATNAME
            inputKey.value=item.DEVICEID
            bus.emit('ueRec_BoatClick',{'mmsi':item.DEVICEID})
        }

}
    function handleCloseEntInfo() {
        locationUnit(null,false)
        entInfoShow.value=false
    }
    function handleOnVideoShow() {
        setTimeout(() => {
            entInfoShow.value=false
        }, 500);
    }
    function ue_closeUnitVedio() {

    }
</script>

<style lang="scss" scoped>
.select_content{
    position: absolute;
    top: 55px;
    right: 30vh;
    width:  300px;
    height: 320px;
    .select_header{
        display:flex;
        align-items: center;
        background: url("@/assets/imgs/header/select_bg.png") no-repeat;
        background-size: 100% 100%;
        height:36px;

        .select_header_content{
            display:flex;
            align-items: center;
            height: calc(100% - 8px);
            width: 100%;
            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{
                color: #FFFFFF;
                line-height: 40px;
                margin-left: 12px;
                width: 56%;
                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>