<template>
  <div class="ent-info" :class="{'ent-info-expand':isExpand}">
    <i class="ei-close" @click="handleClose"></i>
    <div class="ei-title">{{ props.entData.unitName }}</div>
    <div class="ei-info">
      <span>许可证编号：</span><span>{{ props.entData.certNumber }}</span>
    </div>
    <div class="ei-info">
      <span>法定代表人：</span><span>{{ entInfo.legalPerson }}</span>
    </div>
    <div class="ei-info ei-info-addr">
      <span>办公地址：</span><span>{{ entInfo.address }}</span>
    </div>
    <div class="dialog-tab">
      <div :class="{'disabled': !tab_usable.vedio, 'highlight': currentTab==='vedio'}" @click="changeTab('vedio')"><span>企业实时视频</span></div>
      <div :class="{'disabled': !tab_usable.goods, 'highlight': currentTab==='goods'}" @click="changeTab('goods')"><span>货物装卸信息</span></div>
      <div :class="{'disabled': !tab_usable.overGrade, 'highlight': currentTab==='overGrade'}" @click="changeTab('overGrade')"><span>超等级靠泊预警</span></div>
    </div>
    <div class="tab-content" v-if="isExpand">
      <div class="tab-goods table-carousel" v-if="currentTab==='goods'">
        <div class="head coloumn"><span>船舶名称</span><span>货物名称</span><span>起运港</span><span>目的港</span><span>申报数</span></div>
        <el-carousel
          v-if="tableData_goods_len>0"
          trigger="click"
          indicator-position="outside"
          arrow="never"
          :autoplay="false"
        >
          <el-carousel-item v-for="page in tableData_goods_len" :key="page">
            <ul class="tc-list">
              <li v-for="item,index in tableData_goods.value.slice((page-1)*3, (page-1)*3+3)" class="coloumn">
                <el-tooltip v-for="item2 in item" effect="dark" :content="item2.toString()" placement="top">
                  <span>{{item2}}</span>
                </el-tooltip>
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
        <div v-else class="no-data">
          <span>无数据</span>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'EntInfo',
}
</script>

<script setup>
  import { onMounted, reactive, ref, watch, computed } from 'vue'
  import { GetQyxx, GetQysb } from '@/apis/yyjg'
  import { ElCarousel, ElCarouselItem, ElTooltip } from 'element-plus'
  import 'element-plus/es/components/carousel/style/css'
  import 'element-plus/es/components/carousel-item/style/css'
  import 'element-plus/es/components/tooltip/style/css'
  import { ueCallOpenUnitVideo } from '@/utils/UIInteractions'

  const props = defineProps(['ent-data'])

  const isExpand = computed(() => {
    return (currentTab.value==='goods' || currentTab.value==='overGrade')
  })

  const tab_usable = reactive({
    vedio: true,
    goods: true,
    overGrade: false
  })

  const currentTab = ref(null)

  const entInfo = reactive({
    legalPerson: '',
    address: '',
    cameraId: ''
  })

  onMounted(() => {
    
  })

  watch(()=>props.entData, (n, o) => {
    for(let key in entInfo) {
      entInfo[key] = '查询中...'
    }
    GetQyxx(n.objectId).then(res => {
      for(let key in entInfo) {
        entInfo[key] = res.data.Rows.length>0? res.data.Rows[0][key]: '无数据'
      }
    })
  }, { immediate: true })

  const emit = defineEmits(['closeEntInfo', 'closeUnitVedio','onVideoShow'])

  function handleClose() {
    emit('closeEntInfo')
  }

  function changeTab(name) {
    if(currentTab.value===name) {
      if(name==='vedio') {
        // emit('closeUnitVedio')
      }
      currentTab.value = null
    } else if(tab_usable[name]) {
      if(name==='goods') {
        getQysb()
      }
      if(name==='vedio') {
        openVideo(entInfo.cameraId)
        emit('onVideoShow')
      }
      currentTab.value = name
    }
  }

  function getQysb() {
    GetQysb(props.entData.certNumber).then(res => {
      if(res.data.Rows.length>0) {
        let temp = []
        res.data.Rows.forEach(i => {
          temp.push({
            SHIP_NAME: i.SHIP_NAME,
            CARGO_NAME: i.CARGO_NAME,
            PORT_NAME: i.PORT_NAME,
            TRANSFER_PORT_NAME: i.TRANSFER_PORT_NAME,
            DECLARE_TON: i.DECLARE_TON
          })
        })
        tableData_goods.value = temp
      } else {
        tableData_goods.value = []
      }
    })
  }

  const tableData_goods = reactive({value: []})

  const tableData_goods_len = computed(() => {
    return Math.ceil(tableData_goods.value.length/3)
  })

  function openVideo(code){
    // alert("openVideo")
    ueCallOpenUnitVideo(code)
  }
</script>

<style lang="scss" scoped>
.ent-info {
  box-sizing: border-box;
  position: absolute;
  top: 30vh;
  right: 40%;
  width: 409px;
  height: 231px;
  padding: 0 25px 15px 15px;
  background: url('@/assets/imgs/page_yyjg/bg-pop-ent1.png') no-repeat;
  background-size: 100% 100%;
  
  .ei-close {
    position: absolute;
    top: 8px;
    right: 16px;
    display: block;
    width: 18px;
    height: 18px;
    background: url('@/assets/imgs/common/btn-close.png') no-repeat;
    background-size: 12px 12px;
    background-position: center;
    cursor: pointer;
  }

  .ei-title {
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 16px;
    line-height: 35px;
    text-align: left;
    font-style: italic;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ei-info {
    display: flex;
    align-items: flex-start;
    margin-bottom: 17px;
    &>span {
      display: inline-block;
      height: 100%;
      text-align: left;
      font-size: 14px;
      line-height: 16px;
    }
    &>span:first-child {
      width: 90px;
      text-align-last:justify;
      text-align:justify;
      text-justify:distribute-all-lines; 
      color: #afc2dd;
    }
    &>span:last-child {
      width: calc(100% - 90px);
    }
  }

  .ei-info-addr {
    height: 32px;
    margin-bottom: 0;
  }

  .tab-content {
    height: 170px;
  }

  &.ent-info-expand {
    width: 409px;
    height: 403px;
    background: url('@/assets/imgs/page_yyjg/bg-pop-ent2.png') no-repeat;
    background-size: 100% 100%;
  }

  .tab-goods {
    padding-top: 7px;
    height: 100%;

    .coloumn {
      span:nth-child(1) {
        width: 23%;
      }
      span:nth-child(2) {
        width: 19%;
      }
      span:nth-child(3) {
        width: 16%;
      }
      span:nth-child(4) {
        width: 16%;
      }
      span:nth-child(5) {
        width: 14%;
      }
    }
  }

}

</style>
