<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.operatingArea }}</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-video table-carousel" v-if="currentTab==='vedio'">
        <div  v-if="tableData_video.value.length>0" >
          <ul v-for="item , index in tableData_video.value" >
            <li ><span>{{indexNow(index)}}</span><span>{{item.cameraName}}</span><span @click="clickVideo(item.cameraIds)">查看</span></li>
          </ul>
          <el-pagination
                  class="pagi-default"
                  :current-page="currentPageForVido"
                  :page-size="pageSizeForVido"
                  :total="totalForVido"
                  layout="prev, pager, next"
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
        <div v-else class="no-data">
          <span>无数据</span>
        </div>

      </div>

      <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 class="tab-overGrade table-carousel" v-if="currentTab==='overGrade'">
        <di class="tab-table"  v-if="tableData_yun.value.length>0">
        <el-table :data="tableData_yun.value" class="table-default_UnitYunYing"  >
          <el-table-column label="序号"  type="index" :dataformatas="indexCreate" />
          <el-table-column label="mmsi" prop="mmsi" min-width="90" />
          <el-table-column label="船名" prop="shipName" min-width="90" />
          <el-table-column label="图像抓取时间" min-width="80" >
            <template #default="scope">
              <span>{{ scope.row.time.slice(5,16) }}</span>
            </template>
          </el-table-column>
          <el-table-column >
            <template #default="scope">
              <el-button class="buttonForChakan" @click="showImages(scope.row.imgInfo)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                class="pagi-default"
                :current-page="currentPageForImage"
                :page-size="pageSizeForImage"
                :total="totalForImage"
                layout="prev, pager, next"
                @current-change="handleCurrentChangeImage"
                @size-change="handleSizeChangeImage"
        >
        </el-pagination>
        </di>
        <div v-else class="no-data">
          <span>无数据</span>
        </div>
      </div>

<!--         //图片查看-->
      <PicViewerForPhotos v-if="imageShow" :picImg="imagesUrl"  @closePicViewerOne="closePicViewerOne"/>
<!--查看视频-->
       <VideoForHK  v-if="vidoShow" :cameraIndexCode="cameraIndexCode"   @closeVido="closeVido"/>
    </div>
  </div>
</template>

<script>
import Video from "@/views/home/cpns/VideoForHK";
export default {
  name: 'EntInfo',
  components: {Video},
}
</script>

<script setup>
  import { onMounted, reactive, ref, watch, computed } from 'vue'
  import {GetQysb,PostVideoForUnit} from '@/apis/yyjg'
  import { ElCarousel, ElCarouselItem, ElTooltip,ElPagination} from 'element-plus'
  import 'element-plus/es/components/pagination/style/css'
  import { ElTable, ElTableColumn } from 'element-plus'
  import 'element-plus/es/components/table/style/css'
  import 'element-plus/es/components/table-column/style/css'
  import 'element-plus/es/components/pagination/style/css'
  import PicViewerForPhotos from "@/views/home/cpns/PicViewerForPhotos";
  import VideoForHK from "@/views/home/cpns/VideoForHK";


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

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

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

  const imageShow = ref(false)

  const vidoShow = ref(false)
  const  cameraIndexCode= ref("")
  const imagesUrl=ref([
          {imgurl:'',boatstatus:'船舶作业'},
          {imgurl:'',boatstatus:'船舶靠泊'},
          {imgurl:'',boatstatus:'船舶离泊'},
          ])

  // 关闭图片
  function closePicViewerOne() {
    imagesUrl.value.url="#"
    imageShow.value=false
  }
  function closeVido()
  {
    vidoShow.value=false
  }

  function showImages(url)
  {
    imageShow.value=true
    imagesUrl.value=url
  }


  const currentTab = ref(null)

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

  onMounted(() => {
    
  })



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

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

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

  function changeTab(name) {
    currentTab.value = name
      if(name==='vedio') {
       console.log("点击视频")
        getVidoForData(props.entData.objectId)
      }

  }

  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_video = reactive({value: []});
  const tableData_goods = reactive({value: []})

  const tableData_yun = reactive(
          {value:
            [{mmsi:'11111',shipName:'22222',type:"主厂区图片",time:"123123123"
              ,imgInfo: [
                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶作业'},
                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶靠泊'},
                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶离泊'}
              ]}
              ,{mmsi:'11111',shipName:'22222',type:"主厂区图片",time:"123",imgInfo: [
                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶作业'},
                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶靠泊'},
                {imgurl:'http://172.16.58.3:8081/checkPhoto/shareCoverage/20230810/095957_Og.jpg',boatstatus:'船舶离泊'}
              ]}
              ]
          })

  watch(tableData_video, (val) => {
    // getData(val, pageSize.value, 1)
  },{immediate:true})

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





  // function openVideo(code){  废除UE视频调用
  //   // alert("openVideo")
  //   // ueCallOpenUnitVideo(code)
  // }

  // 分页信息end
  const currentPageForVido = ref(1)
  const pageSizeForVido  = ref(5)
  const totalForVido  = ref(0)
  function  indexNow(index) {
    return index + 1 + pageSizeForVido.value*(currentPageForVido.value - 1)
  }
  // 点击查看视频
  function clickVideo(id) {
    console.log(id);
    vidoShow.value=true
    cameraIndexCode.value=id

  }
  // 视频首页调用
  function handleSizeChange(val) {
    // debugger
    pageSizeForVido.value = val
    currentPageForVido.value = 1
    getVidoForData(props.entData.objectId)
  }

  // 视频分页调用
  function   handleCurrentChange(val) {
    currentPageForVido.value = val
    getVidoForData(props.entData.objectId)
 }

  //获取视频接口
  function getVidoForData(id) {
    PostVideoForUnit(currentPageForVido.value,pageSizeForVido.value,id).then(res=>{
      if (res.data!=null && res.data!=undefined && res.data!='')
      {
        tableData_video.value= res.data.Rows
        totalForVido.value= res.data.TotalRowCount
      }

    })
  }


  const currentPageForImage = ref(1)
  const pageSizeForImage  = ref(5)
  const totalForImage = ref(0)

  function  indexCreate(row, column, cellValue, index) {
    return index + 1 + pageSizeForImage.value*(currentPageForImage.value - 1)
  }
  function handleSizeChangeImage(val) {
    // debugger
    pageSizeForImage.value = val
    currentPageForImage.value = 1

  }
  // 内部调用切换数据
  function   handleCurrentChangeImage(val) {
    currentPageForImage.value = val
  }
</script>

<style lang="scss" scoped>
.ent-info {
  box-sizing: border-box;
  position: absolute;
  top: 16vh;
  right: 40%;
  width: 609px;
  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;
  }
.dialog-tab{
  div{
    width: 30%;
  }
}
  .tab-content {
    height: 170px;
  }

  &.ent-info-expand {
    width: 609px;
    height: 553px;
    background: url('@/assets/imgs/page_yyjg/yydtbg.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%;
      }
    }
    .tab-video{
      padding-top: 7px;
      height: 100%;
      ul{

      }
    }
  }
  .tab-video{
    height: 100%;
     ul {
       height: 100%;
       li {
         padding-top: 3px;
         padding-bottom: 10px;
         padding-left: 10px;
         text-align: left;
         height:40px;
         background: url('@/assets/imgs/page_yyjg/qyspfgx.png') no-repeat;
         background-position: bottom;
         background-size: 90% 5px;
         span:first-child{
           padding-left: 20px;
           line-height: 40px;
           display: inline-block;
         font-weight: bold;
         color: #FFFFFF;
           width: 6%;
       }
         span:not(:first-child,:last-child){
           font-size: 14px;
           line-height: 40px;
           display: inline-block;
           font-weight: bold;
           color: #FFFFFF;
         }
         span:last-child{
           margin-right: 25px;
           margin-top: 5px;
           font-size: 14px;
           font-weight: bold;
           color: #FFFFFF;
           display: inline-block;
           line-height: 34px;
           float: right;
           height: 80%;
           font-style: oblique;
           width:15%;
           text-align:center;
           background: url('@/assets/imgs/page_yyjg/chakanTu.png') no-repeat;
           background-size: 100% 100%;
           opacity: 0.6;
         }
       }

     }
   }
   .tab-overGrade{
     .table-default_UnitYunYing{
       height: 100%;
       width: 90%;
       margin: 0 auto;
       .el-th{ text-align: center}
       .el-table__body, .el-table__footer, .el-table__header {
           -webkit-border-vertical-spacing: 5px !important;
         }

         .el-table__body-wrapper{
           width: 95%;
         }
       .el-scrollbar{
             width: 95%;
             overflow-x: hidden;
             overscroll-behavior-x: none;
             overscroll-behavior-y: none;
           }
       }
     }



  .pagi-default{
       position: absolute;
       bottom:5%;
       left: 38%;
     }
   }
  .buttonForChakan{
    text-align: center;
    display: block;
    width: 80px;
    height: 100%;
    background: url('@/assets/imgs/page_yyjg/chakanTu.png') no-repeat;
    background-size: 100% 100%;
  }

</style>
