<template>
  <cacp-search-layout class="typical-eleven">
    <template #search>
      <cacp-search-panel-layout
        :model="state.model"
        ref="formRef"
        label-width="auto"
        label-position="left"
        :gutter="30"
        :colSpan="6"
      >
        <el-form-item label="邮件号" prop="email">
          <el-input v-model="state.model.email"></el-input>
        </el-form-item>
        <el-form-item label="邮件税单号" prop="taxInvoice">
          <el-input v-model="state.model.taxInvoice" placeholder="请选择"> </el-input>
        </el-form-item>
        <el-form-item label="税单生成日期" prop="startTime">
          <el-date-picker type="date" value-format="YYYY-MM-DD" v-model="state.model.startTime" placeholder="" />
        </el-form-item>
        <el-form-item label="到" prop="endTime">
          <el-date-picker type="date" value-format="YYYY-MM-DD" v-model="state.model.endTime" placeholder="" />
        </el-form-item>
        <el-form-item label="行邮税总额" prop="startTotal">
          <el-input v-model="state.model.startTotal"></el-input>
        </el-form-item>
        <el-form-item label="到" prop="endTotal">
          <el-input v-model="state.model.endTotal"></el-input>
        </el-form-item>
        <el-form-item label="打印日期" prop="pintStartTime">
          <el-date-picker type="date" value-format="YYYY-MM-DD" v-model="state.model.pintStartTime" placeholder="" />
        </el-form-item>
        <el-form-item label="到" prop="pintEndTimer">
          <el-date-picker type="date" value-format="YYYY-MM-DD" v-model="state.model.pintEndTimer" placeholder="" />
        </el-form-item>
        <el-form-item label="缴款人姓名" prop="name">
          <el-input v-model="state.model.name"></el-input>
        </el-form-item>
        <el-form-item label="税单来源" prop="source">
          <el-input v-model="state.model.source"></el-input>
        </el-form-item>
        <template #buttonGroup>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button type="info" @click="onReset">重置</el-button>
        </template>
      </cacp-search-panel-layout>
    </template>
    <cacp-complex-table
      :data="tableData"
      :actions="actions"
      :primary-col-span="24"
      :action-space="20"
      :enable-selection="true"
      :loading="loading"
      :actions-width="60"
      @selection-change="onSelectionChange"
      @expand-change="onExpandChange"
    >
      <el-table-column label="序号" property="index" width="60" align="center">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column type="expand" property="children" v-slot="scope" width="0">
        <div v-loading="scope.row.loading" class="inner-padding">
          <el-table :data="scope.row.children" :border="true">
            <el-table-column label="序号" property="index" width="60" align="center">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column property="name" label="申报物品名称" width="110"></el-table-column>
            <el-table-column property="thingCode" label="申报物品归类编码" min-width="150"></el-table-column>
            <el-table-column property="thingTotal" label="申报物品数量" width="110"></el-table-column>
            <el-table-column property="thingPrice" label="申报人民币总额" min-width="150"></el-table-column>
            <el-table-column property="thingName" label="征税物品名称" width="110"></el-table-column>
            <el-table-column property="code" label="征税物品归类编码" min-width="150"></el-table-column>
            <el-table-column property="total" label="征税物品数量" width="110"></el-table-column>
            <el-table-column property="price" label="完税价格" width="110"></el-table-column>
            <el-table-column property="taxRate" label="税率" width="110"></el-table-column>
            <el-table-column property="tax" label="税额" width="110"></el-table-column>
            <el-table-column property="unit" label="计量单位" width="110"></el-table-column>
          </el-table>
        </div>
      </el-table-column>
      <el-table-column property="reason" label="作废原因" min-width="110"></el-table-column>
      <el-table-column property="email" label="邮件号" min-width="120"></el-table-column>
      <el-table-column property="taxInvoice" label="邮件税单号" width="110"></el-table-column>
      <el-table-column property="source" label="税单来源" width="110"></el-table-column>
      <el-table-column property="payer" label="缴款人信息" width="110"></el-table-column>
      <el-table-column property="total" label="行邮税总额" width="110"></el-table-column>
      <el-table-column property="dutiable" label="完税价格" width="110"></el-table-column>
      <el-table-column property="amount" label="申报人民币总额" width="120"></el-table-column>
      <el-table-column property="date" label="税单生成日期" width="160"></el-table-column>
      <el-table-column property="printing" label="税单打印人" width="110"></el-table-column>
      <el-table-column property="printDate" label="税单打印日期" width="160"></el-table-column>
    </cacp-complex-table>
  </cacp-search-layout>
</template>
<script lang="ts" setup>
import { onMounted, reactive, shallowRef } from 'vue'
import { SuccessResultCode, type TableAction, useLoading } from '@cacp/ui'
import { typicalEleven, typicalElevenGetChild } from '@/apis/mock'
import type { TypicalElevenInfo } from '@/types/eleven'

interface State {
  model: {
    email: string
    taxInvoice: string
    startTime: string
    endTime: string
    startTotal: number
    endTotal: number
    pintStartTime: string
    pintEndTimer: string
    name: string
    source: string
  }
}
const { loading, setLoading } = useLoading()
const state = reactive<State>({
  model: {
    email: '',
    taxInvoice: '',
    startTime: '',
    endTime: '',
    startTotal: undefined,
    endTotal: undefined,
    pintStartTime: '',
    pintEndTimer: '',
    name: '',
    source: ''
  }
})
const onReset = () => {
  state.model = {
    email: '',
    taxInvoice: '',
    startTime: '',
    endTime: '',
    startTotal: undefined,
    endTotal: undefined,
    pintStartTime: '',
    pintEndTimer: '',
    name: '',
    source: ''
  }
  onQuery()
}

const tableData = shallowRef<TypicalElevenInfo[]>([])

const handleCommand1 = () => {
  onQuery()
}

const actions: TableAction[] = [
  {
    key: '0',
    type: 'primary',
    text: '重新计证',
    position: 'left',
    onclick: handleCommand1,
    limit: 'none'
  }
  // {
  //   key: '1',
  //   type: 'primary',
  //   text: '删除税单',
  //   limit: 'one',
  //   position: 'left',
  //   onclick: handleCommand1
  // }
]

async function onQuery() {
  const params = {
    ...state.model
  }
  setLoading(true)
  const res = await typicalEleven(params)
  if (res.code === SuccessResultCode) {
    tableData.value = res.data ?? []
  }
  setLoading(false)
}

function onExpandChange(item: TypicalElevenInfo) {
  if (item.children?.length) {
    return
  }
  onLoadChild(item)
}

async function onLoadChild(row: TypicalElevenInfo) {
  row.loading = true
  const res = await typicalElevenGetChild(row.id)
  if (res.code === SuccessResultCode) {
    row.children = res.data
  }
  row.loading = false
}

function onSelectionChange(row: TypicalElevenInfo) {
  console.log(row)
}

onMounted(() => {
  onQuery()
})
</script>
<style lang="less" scoped>
.typical-eleven {
  :deep(.el-table__expanded-cell) {
    .inner-padding {
      padding: 9px 16px;
    }
  }
  :deep(.el-table__expand-column) {
    .el-icon {
      display: none;
    }

    .el-table__expand-icon {
      width: 14px;
      height: 14px;
      overflow: hidden;
      border: 1px solid var(--el-color-primary);
      border-radius: 3px;
      position: relative;

      &.el-table__expand-icon--expanded::after {
        display: none;
      }

      &::after,
      &::before {
        content: '';
        display: block;
        width: 1px;
        height: 6px;
        position: absolute;
        background: var(--el-color-primary);
        left: 5px;
        top: 3px;
      }

      &::after {
        transform: rotate(90deg);
      }

      &::before {
      }
    }
  }
}
</style>
