<template>
  <el-scrollbar class="typical-three" v-loading="loading">
    <el-row justify="space-between">
      <el-col :span="10">
          <span class="back-btn" @click="onGoBack"
          ><el-icon :size="20" class="back"><Back /></el-icon></span>
      </el-col>
    </el-row>
    <cacp-group-container title="基础信息">
      <template #content>
        <div class="cacp-complex__table" @mouseover="changeHoverEle" @mouseleave="visible = false">
          <el-row>
            <el-col class="cacp-complex__label--title" :span="2">报关单号</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.entryId }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">通关模式</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">
              <dict-tag :options="dict.pass_mode" :dictValue="info.passMode"/>
            </el-col>
            <el-col class="cacp-complex__label--title" :span="2">运输方式</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ formatTrafMode(info.trafMode) }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">进出口标记</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">
              <dict-tag :options="dict.ie_flag" :dictValue="info.ieFlag"/></el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">出入境口岸</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="4">{{ formatIePort(info.iePort) }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">主管海关</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="4">
              <dict-tag :options="dict.affiliation_customs_info" :dictValue="info.customsCode"/>
            </el-col>
            <el-col class="cacp-complex__label--title" :span="2">监管方式</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ formatTradeMode(info.tradeMode) }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">报关模式</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">
              <dict-tag :options="dict.decl_mode" :dictValue="info.declMode"/></el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">贸易国别</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="4">{{ formatCountryIso(info.tradeCountry) }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">申报日期</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.declDate ? dayjs(info.declDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">进口日期</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.ieDate ? dayjs(info.ieDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">是否提前申报</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">
              <dict-tag :options="dict.yes_no" :dictValue="info.declAdvanceFlag"/></el-col>
            <el-col class="cacp-complex__label--title" :span="2">自动受理时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.acceptDate ? dayjs(info.acceptDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">货物进港时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.exInPortDate ? dayjs(info.exInPortDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>

            <el-col class="cacp-complex__label--yellow" :span="2">申报单位</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="10">{{ info.agentName}}/{{ info.agentCode }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">境内收发货人</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="10">{{ info.consignName }}/{{ info.consignCode}}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">消费使用单位</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="10">{{ info.ownerName }}/{{info.ownerCode }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">境外收发货人</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="10">{{ info.frnConsignName }}/{{ info.frnConsignCode }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">现场接单时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.orderReceiveDate?dayjs(info.orderReceiveDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">接单耗时(小时)</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="4">{{ info.orderReceiveCost}}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">单证放行时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.certRlsDate?dayjs(info.certRlsDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">担保放行时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.preReleaseDate?dayjs(info.preReleaseDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">转关数据发送时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.examDate?dayjs(info.examDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">转关数据核销时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.checkDate?dayjs(info.checkDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">结关时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.releaseDate?dayjs(info.releaseDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">海关通关时间(小时)</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="4">{{ info.cuCost}}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">整体通关时间(小时)</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="4">{{ info.totalCost}}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">申报前准备时间(小时)</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="4">{{ info.beforeDeclCost}}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">是否专业审单</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">
              <dict-tag :options="dict.yes_no" :dictValue="info.profVerifyFlag"/></el-col>
            <el-col class="cacp-complex__label--title" :span="2">是否新两步申报</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">
              <dict-tag :options="dict.yes_no" :dictValue="info.newTwoStepFlag"/></el-col>
            <el-col class="cacp-complex__label--title" :span="2">现场验估时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.assessStartDate?dayjs(info.assessStartDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">验估处置完毕时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.assessEndDate?dayjs(info.assessEndDate).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">是否查验</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">
              <dict-tag :options="dict.yes_no" :dictValue="info.checkFlag"/></el-col>
            <el-col class="cacp-complex__label--title" :span="2">查验海关</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">
              <dict-tag :options="dict.affiliation_customs_info" :dictValue="info.checkCustomsCode"/></el-col>
            <el-col class="cacp-complex__label--title" :span="2">查验指令下达时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.manCreateTime?dayjs(info.manCreateTime).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">查验开始时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.manChkTimeStart?dayjs(info.manChkTimeStart).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">查验结束时间</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.manChkTimeEnd?dayjs(info.manChkTimeEnd).format('YYYY-MM-DD HH:mm:ss'):'' }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">处理结果</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">
              <dict-tag :options="dict.proc_result" :dictValue="info.manProcResult"/></el-col>
            <el-col class="cacp-complex__label--title" :span="2">处理意见</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">
              <dict-tag :options="dict.proc_idea" :dictValue="info.manProcIdea"/></el-col>
            <el-col class="cacp-complex__label--title" :span="2">毛重</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.grossWt }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">净重</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.netWt }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">货运值人民币(总)</el-col>
            <el-col class="cacp-complex__value--grey01" :span="4">{{ info.rmbPrice }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">货运值美元(总)</el-col>
            <el-col class="cacp-complex__value--grey01" :span="10">{{ info.usdPrice }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">备注</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="22">{{ info.noteS }}</el-col>
          </el-row>
        </div>
      </template>
    </cacp-group-container>

    <cacp-group-container title="商品信息">
      <template #content>
        <el-table
            ref="multipleTableRef"
            :scrollbar-always-on="true"
            :data="tableData"
            style="width: 100%"
            header-cell-class-name="cn-cacp-head"
            @row-click="rowClick"
        >
          <template v-for="(item, index) in column" :key="index">
            <el-table-column v-if="item.type == 'index'" :label="item.label" :show-overflow-tooltip="item.showOverflow" type="index" width="54" align="center" />
            <el-table-column
                v-else
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :min-width="item.minWidth"
                :show-overflow-tooltip="item.showOverflow"
            />
          </template>
        </el-table>
        <div class="cacp-mv-l">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[100, 200, 300, 400]"
              :background="true"
              layout="total, sizes,->, prev, pager, next"
              :total="100"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
        <div
            class="cacp-complex__table"
            @mouseover="changeHoverEle"
            @mouseleave="visible = false"
            v-loading="detailLoading"
        >
          <el-row>
            <el-col class="cacp-complex__nesting--col" :span="24">
              <el-row class="cacp-complex__nesting--row">
                <el-col class="cacp-complex__label--title" :span="2">商品项号</el-col>
                <el-col :span="2">{{ rowData.gno }}</el-col>
                <!-- 第二行 -->
                <el-col class="cacp-complex__label--title" :span="2">商品编码</el-col>
                <el-col :span="2">{{ rowData.codeTs }}</el-col>
                <el-col class="cacp-complex__label--title" :span="2">检验检疫编码</el-col>
                <el-col :span="2">{{ rowData.iqCode }}</el-col>
                <el-col class="cacp-complex__label--title" :span="2">商品名称</el-col>
                <el-col :span="10">{{ rowData.gname }}</el-col>
                <el-col class="cacp-complex__label&#45;&#45;title" :span="2">规格型号</el-col>
                <el-col :span="10">{{ rowData.gmodel }}</el-col>
                <!-- 第五行 -->
                <el-col class="cacp-complex__label--title" :span="2">法定第一数量</el-col>
                <el-col :span="2">{{ rowData.qty1 }}</el-col>
                <el-col class="cacp-complex__label&#45;&#45;title" :span="2">货运值人民币</el-col>
                <el-col :span="2">{{ rowData.rmbPrice }}</el-col>
                <el-col class="cacp-complex__label&#45;&#45;title" :span="2">货运值美元</el-col>
                <el-col :span="2">{{ rowData.usdPrice }}</el-col>
                <el-col class="cacp-complex__label&#45;&#45;title" :span="2">每项商品需要监管证件</el-col>
                <el-col :span="2">{{ rowData.gCertFlag }}</el-col>
                <el-col class="cacp-complex__label&#45;&#45;title" :span="2">非危险化学品</el-col>
                <el-col :span="2"><dict-tag :options="dict.yes_no" :dictValue="rowData.ungFlag"/></el-col>
                <el-col class="cacp-complex__label&#45;&#45;title" :span="2">危包规格</el-col>
                <el-col :span="6">{{ rowData.ungModel }}</el-col>
                <el-col class="cacp-complex__label&#45;&#45;title" :span="2">危险货物名称</el-col>
                <el-col :span="6">{{ rowData.ungGName }}</el-col>
                <el-col class="cacp-complex__label&#45;&#45;title" :span="2">危包类别</el-col>
                <el-col :span="2">{{ rowData.ungClassify }}</el-col>
                <el-col class="cacp-complex__label&#45;&#45;title" :span="2">危险品类型</el-col>
                <el-col :span="2"><dict-tag :options="dict.goods_type" :whole-match="true" :dictValue="rowData.goodsType"/></el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </template>
    </cacp-group-container>
    <el-tooltip
        effect="light"
        ref="tooltipRef"
        :visible="visible"
        :popper-options="{
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: [0, 7] // 水平偏移0，垂直偏移10像素
            }
          }
        ]
      }"
        :virtual-ref="buttonRef"
        virtual-triggering
        popper-class="tip-tooltip"
        :content="tipText"
    >
    </el-tooltip>
  </el-scrollbar>
</template>
<script lang="ts" setup>
import { getEntryHead} from '@/apis/analyze/goodsEntry'
import type {Head,List} from '@/types/analyze/goodsEntry'
import { SuccessResultCode } from '@cacp/ui'
import { ElTable } from 'element-plus'
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { getBaseCodeList } from '@/apis/base/baseCode'
import {useDictType} from "@/components/useDict";
import DictTag from "@/components/DictTag/dictTag.vue";
const currentPage = ref<number>(1)
const pageSize = ref<number>(100)
const buttonRef = ref<HTMLElement>()
const visible = ref<boolean>(false)
const tipText = ref<string>('')
const router = useRouter()
const route = useRoute()
const { dict } = useDictType('affiliation_customs_info', 'proc_idea', 'proc_result', 'yes_no', 'decl_mode', 'pass_mode', 'ie_flag','goods_type')


const info = ref<Head>({} as Head)
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const tableData = ref<List[]>([])
const rowData = ref<List>({} as List)
const column = [
  { type: 'index', label: '序号', width: '36px', fixed: 'left' },
  {
    label: '商品编号',
    prop: 'codeTs',
    width: '100px'
  },
  {
    label: '检验检疫编码',
    prop: 'iqCode',
    width: '120px'
  },
  {
    label: '商品名称',
    prop: 'gname',
    minWidth: '230px',
    showOverflow:true
  },
  {
    label: '规格型号',
    prop: 'gmodel',
    width: '260px',
    showOverflow:true
  },
  {
    label: '第一(法定)数量',
    prop: 'qty1',
    width: '120px'
  },
  {
    label: '统计人民币价',
    prop: 'rmbPrice',
    width: '120px'
  },
  {
    label: '统计美元价',
    prop: 'usdPrice',
    width: '120px'
  }
]
const loading = ref(false)
const detailLoading = ref(false)
const rowClick = async (row: List) => {
  rowData.value = row
}
const handleSizeChange = (size: number) => {
  console.log(size)
}
const handleCurrentChange = (page: number) => {
  console.log(page)
}

const changeHoverEle = (e: MouseEvent) => {
  if (e.target instanceof HTMLElement) {
    if (e.target && e.target.innerText && e.target.scrollWidth > e.target.offsetWidth) {
      buttonRef.value = e.target
      visible.value = true
      tipText.value = e.target.innerText
    } else {
      visible.value = false
    }
  }
}
//基础数据返回jsonObject
const iePort = ref([]);
const trafMode = ref([]);
const tradeMode = ref([]);
const tradeCountry = ref([]);
const countryIso = ref([]);
const unit = ref([]);
// 运输方式
function formatTrafMode(code: string): string {
  const result = trafMode.value.find((item) => item.value == code)
  if (result) {
    return result.label
  }
  return ''
}
// 监管方式
function formatTradeMode(code: string): string {
  const result = tradeMode.value.find((item) => item.value == code)
  if (result) {
    return result.label
  }
  return ''
}

function formatCountry(code: string): string {
  const result = tradeCountry.value.find((item) => item.value == code)
  if (result) {
    return result.label
  }
  return ''
}

// 监管方式
function formatCountryIso(code: string): string {
  const result = countryIso.value.find((item) => item.value == code)
  if (result) {
    return result.label
  }
  return ''
}

// 进出境口岸
function formatIePort(code: string): string {
  const result = iePort.value.find((item) => item.value == code)
  if (result) {
    return result.label
  }
  return ''
}

async function onQuery(entryId: string) {
  loading.value = true
  const res = await getEntryHead(entryId)
  if (res.code === SuccessResultCode) {
    info.value = res.data?.info
    tableData.value = res.data.list
    rowData.value = tableData.value?.[0]
  }
  loading.value = false
}

function onGoBack() {
  router.back()
}
async function getIePort() {
  const traf = await getBaseCodeList("customsCode")
  if (traf.code == SuccessResultCode) {
    iePort.value = traf.data
  }
}

async function getTrafMode() {
  const traf = await getBaseCodeList("TransitMode")
  if (traf.code == SuccessResultCode) {
    trafMode.value = traf.data
  }
}

async function getTradeMode() {
  const traf = await getBaseCodeList("tradeCode")
  if (traf.code == SuccessResultCode) {
    tradeMode.value = traf.data
  }
}

async function getTradeCountry() {
  const traf = await getBaseCodeList("countryCode")
  if (traf.code == SuccessResultCode) {
    tradeCountry.value = traf.data
  }
}

async function getCountryIso() {
  const traf = await getBaseCodeList("countryIsoE")
  if (traf.code == SuccessResultCode) {
    countryIso.value = traf.data
  }
}

async function getUnit() {
  const traf = await getBaseCodeList("unit")
  if (traf.code == SuccessResultCode) {
    unit.value = traf.data
  }
}

onMounted(async () => {
  const entryId = route.query.entryId as string
  if (entryId) {
    await Promise.all([getIePort(),getTrafMode(), getTradeMode(), getTradeCountry(), getCountryIso(),getUnit()])
    onQuery(entryId)
  }
})

watch(
    () => rowData.value,
    async () => {
      detailLoading.value = true
      detailLoading.value = false
    }
)
</script>
<style scoped lang="less">
.typical-three {
  width: 100%;
}
</style>
