<template>
  <el-scrollbar class="typical-three" v-loading="loading">
    <cacp-sticky-toolbar @toggleEnd="toggleEnd">
      <template #content>
        <el-input v-model="txt" placeholder="请输入" style="width: 180px"></el-input>
        <el-button type="primary">读单</el-button>
        <el-button type="primary">确认</el-button>
        <el-button type="primary">放弃</el-button>
        <el-button type="primary">拒绝</el-button>
        <el-button type="primary">风控指令信息</el-button>
        <el-button type="primary">转有纸</el-button>
        <el-button type="primary">环节备注</el-button>
        <el-button type="primary" disabled>辅助信息</el-button>
        <el-button type="primary">单证核扣</el-button>
        <el-button type="primary">智慧审证结果</el-button>
        <el-button type="primary">不符合数据上报</el-button>
        <el-button type="primary">重新筛选</el-button>
        <el-button type="primary">智慧审证结果</el-button>
        <el-button type="primary">不符合数据上报</el-button>
        <el-button type="primary">重新筛选</el-button>
      </template>
    </cacp-sticky-toolbar>
    <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="2">{{ info.filed1 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">统一编号</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed2 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">报关单类型</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed3 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">进出口标记</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed4 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">合同协议号</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed5 }}</el-col>
            <el-col class="cacp-complex__label--title cacp-complex__coltext--disabled" :span="2">许可证号</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed6 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">申报日期</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed7 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">进口日期</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed8 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">启运日期</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed9 }}</el-col>
            <el-col class="cacp-complex__label--title cacp-complex__coltext--disabled" :span="2">备案号</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed10 }}</el-col>
            <el-col class="cacp-complex__label--title cacp-complex__coltext--disabled" :span="2">关联备案</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed11 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">关联报关单号</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed12 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">申报单位</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="10">{{ info.filed13 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">境内收发货人</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="10">{{ info.filed14 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">消费使用单位</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="10">{{ info.filed15 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">境外收发货人</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="10">{{ info.filed16 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">申报地海关</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed17 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">进境关别</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed18 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">入境口岸</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed19 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">启运国</el-col>
            <el-col :span="8" class="cacp-complex__nesting--col">
              <el-row class="cacp-complex__nesting--row">
                <el-col class="cacp-complex__value--yellow01" :span="4">{{ info.filed20 }}</el-col>
                <el-col class="cacp-complex__label--yellow" :span="4">启运港</el-col>
                <el-col class="cacp-complex__value--yellow01" :span="4">{{ info.filed21 }} </el-col>
                <el-col class="cacp-complex__label--yellow" :span="4">经停港</el-col>
                <el-col class="cacp-complex__value--yellow01" :span="4">{{ info.filed22 }}</el-col>
                <el-col class="cacp-complex__label--yellow" :span="4">领证海关</el-col>
              </el-row>
            </el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed23 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">贸易国别</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed24 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">货物存放地点</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed25 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">保税/监管场所</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed26 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">包装种类</el-col>
            <el-col class="cacp-complex__nesting--col" :span="8">
              <el-row class="cacp-complex__nesting--row">
                <el-col class="cacp-complex__value--yellow01" :span="4">{{ info.filed27 }}</el-col>
                <el-col class="cacp-complex__label--yellow" :span="4">原箱运输</el-col>
                <el-col class="cacp-complex__value--yellow01" :span="8">{{ info.filed28 }}</el-col>
                <el-col class="cacp-complex__label--yellow" :span="8">口岸检验检疫</el-col>
              </el-row>
            </el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed29 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">运输方式</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed30 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">运输工具名称</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed31 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">航次号</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed32 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">提运单号</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed33 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">B/L号</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed34 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">目的地海关</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed35 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">监管方式</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed36 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">征免性质</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed37 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">运费总价</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed38 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">保费总价</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed39 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">杂费率</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed40 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">检验检疫受理</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed41 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">成交方式</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed42 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">件数</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed43 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">毛重</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed44 }}</el-col>
            <el-col class="cacp-complex__label--title" :span="2">净重</el-col>
            <el-col class="cacp-complex__value--grey01" :span="2">{{ info.filed45 }}</el-col>
            <el-col
              @mouseover.stop="priceHoverEle"
              @mouseleave.stop="visible = false"
              class="cacp-complex__label--title cacp-complex__label--link"
              :span="2"
            >
              <el-icon size="16px"> <Warning /> </el-icon>价格说明
            </el-col>
            <el-col class="cacp-complex__value--grey01" :span="6">{{ info.filed46 }}</el-col>
            <el-col class="cacp-complex__label--yellow cacp-complex__coltext--disabled" :span="2">随附单据</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed47 }}</el-col>
            <el-col class="cacp-complex__label--yellow cacp-complex__label--link" :span="2">
              <el-icon> <FolderOpened /> </el-icon>集装箱数
            </el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed48 }}</el-col>

            <el-col class="cacp-complex__label--yellow" :span="2">特殊业务标识</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed49 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">关联号码及理由</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed50 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">标记唛码</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="6">{{ info.filed51 }}</el-col>
            <el-col class="cacp-complex__label--yellow cacp-complex__coltext--disabled" :span="2">随附单据</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed52 }}</el-col>
            <el-col class="cacp-complex__label--yellow cacp-complex__coltext--disabled" :span="2">企业资质</el-col>
            <el-col class="cacp-complex__value--yellow01 cacp-complex__coltext--disabled" :span="2">{{
              info.filed53
            }}</el-col>
            <el-col class="cacp-complex__label--yellow cacp-complex__coltext--disabled" :span="2">其他包装</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="2">{{ info.filed54 }}</el-col>
            <el-col class="cacp-complex__label--yellow" :span="2">备注</el-col>
            <el-col class="cacp-complex__value--yellow01" :span="10">{{ info.filed55 }}</el-col>
          </el-row>
        </div>
      </template>
    </cacp-group-container>

    <cacp-group-container title="商品信息">
      <template #toolbar>
        <el-button type="text" :icon="EditPen" @click="onClick">编辑</el-button>
      </template>
      <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" type="index" width="54" align="center" />
            <el-table-column
              v-else
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :min-width="item.minWidth"
            />
          </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="13">
              <el-row class="cacp-complex__nesting--row">
                <el-col class="cacp-complex__label--title" :span="3">项号</el-col>
                <el-col :span="3">{{ rowData.index }}</el-col>
                <el-col class="cacp-complex__label--title" :span="3">备案序号</el-col>
                <el-col :span="3">{{ rowData.num }}</el-col>
                <el-col class="cacp-complex__label--title" :span="3">境内目的地</el-col>
                <el-col :span="3"></el-col>
                <el-col class="cacp-complex__label--title" :span="3">目的国(地区)</el-col>
                <el-col :span="3">{{ rowData.mcountry }}</el-col>
                <!-- 第二行 -->
                <el-col class="cacp-complex__label--title" :span="3">商品编码</el-col>
                <el-col :span="3">{{ rowData.num2 }}</el-col>
                <el-col class="cacp-complex__label--title" :span="3">商品名称</el-col>
                <el-col :span="15">{{ rowData.productName }}</el-col>
                <!-- 第三行 -->
                <el-col class="cacp-complex__label--title" :span="3">监管类别名称</el-col>
                <el-col :span="3">{{ rowData.name }}</el-col>
                <el-col class="cacp-complex__label--title cacp-complex__label--link" :span="3">
                  <el-icon> <FolderOpened /> </el-icon>检验检疫货物规格</el-col
                >
                <el-col :span="3"></el-col>
                <el-col class="cacp-complex__label--title cacp-complex__coltext--disabled" :span="3">商品单据</el-col>
                <el-col :span="3"></el-col>
                <el-col class="cacp-complex__label--title cacp-complex__coltext--disabled" :span="3">产品资质</el-col>
                <el-col :span="3">410</el-col>
                <!-- 第四行 -->
                <el-col class="cacp-complex__label--title" :span="3">申报数量</el-col>
                <el-col :span="3">{{ rowData.num4 }}</el-col>
                <el-col class="cacp-complex__label--title" :span="3">申报单位</el-col>
                <el-col :span="3">{{ rowData.unit }}</el-col>
                <el-col class="cacp-complex__label--title" :span="3">申报单价</el-col>
                <el-col :span="3">{{ rowData.price }}</el-col>
                <el-col class="cacp-complex__label--title" :span="3">申报总价</el-col>
                <el-col :span="3">1</el-col>
                <!-- 第五行 -->
                <el-col class="cacp-complex__label--title" :span="3">法定第一数量</el-col>
                <el-col :span="3">1</el-col>
                <el-col class="cacp-complex__label--title" :span="3">法定第一单位</el-col>
                <el-col :span="3">台</el-col>
                <el-col class="cacp-complex__label--title" :span="3">法定第二数量</el-col>
                <el-col :span="3">1</el-col>
                <el-col class="cacp-complex__label--title" :span="3">法定第二单位</el-col>
                <el-col :span="3">千克</el-col>
              </el-row>
            </el-col>
            <el-col class="cacp-complex__nesting--col" :span="11">
              <el-row class="cacp-complex__nesting--row">
                <el-col class="cacp-complex__label--title" :span="4">原产国(地区)</el-col>
                <el-col :span="8">{{ rowData.country }}</el-col>
                <el-col class="cacp-complex__value--grey01 cacp-complex__labellink--disabled" :span="4">
                  <el-icon> <FolderOpened /> </el-icon>协定享惠</el-col
                >
                <el-col class="cacp-complex__label--title" :span="4">原产地区</el-col>
                <el-col :span="4">科雷兹(法国)</el-col>
                <!-- 第二行 -->
                <el-col class="cacp-complex__label--title" :span="4">规格型号</el-col>
                <el-col :span="20">{{ rowData.specifications }}</el-col>
                <!-- 第三行 -->
                <el-col class="cacp-complex__label--title" :span="4">货物属性</el-col>
                <el-col :span="4">3C目录内</el-col>
                <el-col class="cacp-complex__label--title cacp-complex__coltext--disabled" :span="4"
                  >危险货物信息</el-col
                >
                <el-col :span="4"></el-col>
                <el-col class="cacp-complex__label--title" :span="4">用途</el-col>
                <el-col :span="4">种用或緊殖</el-col>
                <!-- 第四行 -->
                <el-col class="cacp-complex__label--title" :span="4">海关单价</el-col>
                <el-col :span="4">1</el-col>
                <el-col class="cacp-complex__label--title" :span="4">海关总价</el-col>
                <el-col :span="4">{{ rowData.total }}</el-col>
                <el-col class="cacp-complex__label--title" :span="4">币制</el-col>
                <el-col :span="4">{{ rowData.money }}</el-col>
                <!-- 第五行 -->
                <el-col class="cacp-complex__label--title" :span="4">征免方式</el-col>
                <el-col :span="4">{{ rowData.way }}</el-col>
                <el-col class="cacp-complex__label--title" :span="4">加工成品单价</el-col>
                <el-col :span="4"></el-col>
                <el-col class="cacp-complex__label--title" :span="4">货号</el-col>
                <el-col :span="4"></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 { typicalThree, typicalThreeDetail } from '@/apis/mock'
import type { TypicalThreeInfo, TypicalThreeList } from '@/types/three'
import { FolderOpened, Warning, EditPen } from '@cacp/svg-icons'
import { SuccessResultCode } from '@cacp/ui'
import { ElMessage } from 'element-plus'
import { ElTable } from 'element-plus'
import { onMounted, ref, watch } from 'vue'
const currentPage = ref<number>(4)
const pageSize = ref<number>(100)
const txt = ref<string>('')
const buttonRef = ref<HTMLElement>()
const visible = ref<boolean>(false)
const tipText = ref<string>('')

const info = ref<TypicalThreeInfo>({} as TypicalThreeInfo)
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const tableData = ref<TypicalThreeList[]>([])
const rowData = ref<TypicalThreeList>({} as TypicalThreeList)
const column = [
  { type: 'index', label: '项号', width: '36px', fixed: 'left' },
  {
    label: '备案序号',
    prop: 'num',
    width: '160px'
  },
  {
    label: '商品编号',
    prop: 'num2',
    width: '120px'
  },
  {
    label: '监管类别名称',
    prop: 'name',
    minWidth: '260px'
  },
  {
    label: '商品名称',
    prop: 'productName',
    minWidth: '260px'
  },
  {
    label: '规格型号',
    prop: 'specifications',
    width: '130px'
  },
  {
    label: '申报数量',
    prop: 'num4',
    width: '150px'
  },
  {
    label: '申报单位',
    prop: 'unit',
    width: '100px'
  },
  {
    label: '申报单价',
    prop: 'price',
    width: '80px'
  },
  {
    label: '统计审',
    prop: 'statistics',
    width: '80px'
  },
  {
    label: '币制',
    prop: 'money',
    width: '80px'
  },
  {
    label: '海关总价',
    prop: 'total',
    width: '80px'
  },
  {
    label: '原产国(地区)',
    prop: 'country',
    width: '110px'
  },
  {
    label: '目的国(地区)',
    prop: 'mcountry',
    width: '120px'
  },
  {
    label: '征免方式',
    prop: 'way',
    width: '80px'
  },
  {
    label: '统计人民币价',
    prop: 'sprice',
    width: '120px'
  },
  {
    label: '统计美元价',
    prop: 'mprice',
    width: '120px'
  }
]
const loading = ref(false)
const detailLoading = ref(false)
const toggleEnd = (collapse: boolean) => {
  if (collapse) {
    ElMessage.success('收起')
  } else {
    ElMessage.success('展开')
  }
}
const onClick = () => {
  ElMessage.error('无权限')
}
const rowClick = (row: TypicalThreeList) => {
  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
    }
  }
}
const priceHoverEle = (e: MouseEvent) => {
  buttonRef.value = e.target as HTMLElement
  visible.value = true
  tipText.value = '邮政审核后会提交海关进行审核，如包裹需办理海关手续，邮政会通知收件人。'
}

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

onMounted(() => {
  onQuery()
})

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