<script setup lang="ts">
import { ElTable } from 'element-plus'
import usePageList from '@/utils/hooks/usePageList.ts'
import {
  getPodShipmentDetailsById,
  apiPodUpdatePrice,
  apiItemLogList,
} from '@/api/order.ts'
import { useValue } from '@/utils/hooks/useValue.ts'
import { AccountStatementNote, AccountStatementNoteSearchForm } from '@/types/api/billOrder.ts'
import { ref } from 'vue'
import { LogListsData } from '@/types/api/deliveryNote.ts'

const [searchForm, resetSearchForm] = useValue<AccountStatementNoteSearchForm>(
  {},
)
const logList = ref<LogListsData[]>([])
const craftPrice = ref<string | undefined>('')
const costPrice = ref<string | undefined>('')
const logDialogVisible = ref<boolean>(false)
const viewTheLog = async (id: number) => {
  const res = await apiItemLogList(id)
  logList.value = res.data || []
  logDialogVisible.value = true
}

const selections = ref<AccountStatementNote[]>([])
const dateRange = ref<string[]>([])
const {
  currentPage,
  pageSize,
  total,
  data: tableData,
  refresh: search,
  onCurrentPageChange: handleCurrentChange,
  onPageSizeChange: handleSizeChange,
} = usePageList<AccountStatementNote>({
  query: (page, pageSize) =>
    getPodShipmentDetailsById(
      {
        ...searchForm.value,
        page,
        pageSize,
        startTime: dateRange.value && dateRange.value[0],
        endTime: dateRange.value && dateRange.value[1],
      },
    ).then((res) => {
      craftPrice.value = res.data?.craftPrice
      costPrice.value = res.data?.costPrice
      return res.data
    }) as never,
})

const handleSelectionChange = (v: AccountStatementNote[]) => {
  selections.value = v
}
const reset = () => {
  dateRange.value = []
  resetSearchForm()
}
const priceModification = (type: 1 | 3 | 4) => {
  if (selections.value.length === 0) {
    ElMessage.warning('至少选择一条对账单')
    return
  }
  const pricePrompts: Record<1 | 3 | 4, { title: string; param: string }> =
    {
      1: { title: '修改工厂价格', param: 'costPrice' },
      3: { title: '修改工艺价格', param: 'craftPrice' },
      4: { title: '修改物流价格', param: 'carriageAmount' },
    }
  const promptConfig = pricePrompts[type]
  if (!promptConfig) {
    ElMessage.error('无效的操作类型')
    return
  }
  ElMessageBox.prompt(promptConfig.title, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /\d+/,
    inputErrorMessage: '请输入数字',
  }).then(async ({ value }) => {
    const price = parseFloat(value)
    if (isNaN(price) || price < 0) {
      ElMessage.error('价格必须为大于等于0的数字')
      return
    }
    await apiPodUpdatePrice({
      ids: selections.value.map(item => item.id).join(),
      ...{ [promptConfig.param]: price },
    })
    ElMessage.success('操作成功')
    selections.value = []
    search()
  })
}
</script>

<template>
  <el-dialog v-model="logDialogVisible" title="操作日志" width="30%">
    <ul style="color: #333; font-size: 12px; height: 100%; overflow: auto">
      <li v-for="(item, index) in logList" :key="index" style="display: flex">
          <span style="display: inline-block; width: 23%">
            {{ item.create_time }}
          </span>
        <div style="display: inline-block; width: 80%">
          <span style="word-break: normal"> {{ item.employee_name }}:</span>
          <span v-html="item.description"></span>
        </div>
      </li>
    </ul>
  </el-dialog>
  <div class="delivery-note-page flex-column card h-100 overflow-hidden">
    <div class="header-filter-form">
      <ElForm :model="searchForm" inline>
        <ElFormItem style="margin-right: 10px" label="发货时间">
          <el-date-picker
            v-model="dateRange"
            :default-time="[
                new Date(0, 0, 0, 0, 0, 0),
                new Date(0, 0, 0, 23, 59, 59),
              ]"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            unlink-panels
            clearable
            style="width: 260px"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </ElFormItem>

        <ElFormItem style="margin-right: 10px" label="发货单号">
          <ElInput
            v-model="searchForm.shipmentNumber"
            clearable
            placeholder="发货单号"
            style="width: 130px"
          />
        </ElFormItem>
        <ElFormItem style="margin-right: 10px" label="订单号">
          <ElInput
            v-model="searchForm.orderNumber"
            clearable
            placeholder="订单号"
            style="width: 130px"
          />
        </ElFormItem>
        <ElFormItem style="margin-right: 10px" label="生产单号">
          <ElInput
            v-model="searchForm.subOrderNumber"
            clearable
            placeholder="生产单号"
            style="width: 130px"
          />
        </ElFormItem>
        <ElFormItem>
          <ElButton type="primary" @click="search">查询</ElButton>
        </ElFormItem>
        <ElFormItem>
          <ElButton @click="reset">重置</ElButton>
        </ElFormItem>
      </ElForm>
    </div>
    <div class="btn-list" style="margin-bottom: 5px">
      <el-button
        type="primary"
        @click="priceModification(1)"
      >修改工厂价格
      </el-button
      >
      <el-button type="warning" @click="priceModification(3)"
      >修改工艺价格
      </el-button
      >
      <el-button type="primary" @click="priceModification(4)"
      >修改物流价格
      </el-button
      >
    </div>
    <div
      class="delivery-note-content flex-1 flex-column overflow-hidden"
    >
      <div class="delivery-note-list flex-1 overflow-hidden">
        <ElTable
          ref="singleTableRef"
          highlight-current-row
          :data="tableData"
          show-summary
          default-expand-all
          size="small"
          style="width: 100%; height: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="70"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="序号"
            type="index"
            width="80"
            align="center"
            header-align="center"
          ></el-table-column>
          <el-table-column
            label="发货单号"
            prop="shipment_number"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="订单号"
            prop="factory_order_number"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="发货数(件)"
            prop="shipment_num"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="工厂价格(￥)"
            prop="cost_price"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="工艺价格(￥)"
            prop="craft_price"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="物流价格(￥)"
            prop="carriage_amount"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="生产单号"
            prop="factory_sub_order_number"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="店铺单号"
            prop="shop_number"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="供应货号"
            prop="supplier_item_no"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="产品名称"
            prop="product_name"
            header-align="center"
            align="center"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="工厂编码"
            prop="factory_code"
            header-align="center"
            align="center"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="订单来源"
            prop="namespace"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="客户"
            prop="user_mark"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <!-- <el-table-column
            label="ERP订单号"
            prop="erp_order_number"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="erp子单号"
            prop="erp_sub_order_number"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column> -->
          <el-table-column
            label="baseSKU"
            prop="base_sku"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="变体SKU"
            prop="variant_sku"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="工艺简称"
            prop="process"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="工艺全称"
            prop="process_name"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="重量"
            prop="weight"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="商品备注"
            prop="remark"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="模版类型"
            header-align="center"
            width="140"
            align="center"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              {{ row.diy_type == 0 ? '公模' : '私模' }}
            </template>
          </el-table-column>
          <el-table-column
            label="设计面数"
            prop="face_count"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="送货方式"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          >
            <template #default="{ row }">
              {{ row.shipping_way == 1 ? '送货上门' : '快递' }}
            </template>
          </el-table-column
          >
          <el-table-column
            label="运费(￥)"
            prop="carriage_amount"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="物流名称"
            prop="carriage_name"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="物流跟踪号"
            prop="logistics_tracking"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="揽收-姓名"
            prop="lanshou_name"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="揽收-电话"
            prop="lanshou_phone"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="揽收-区域"
            prop="lanshou_region"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="揽收-地址"
            prop="lanshou_address"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="揽收-邮政编码"
            prop="lanshou_post"
            header-align="center"
            align="center"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="创建时间"
            prop="create_time"
            header-align="center"
            align="center"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <!-- <el-table-column
            label="付款时间"
            prop="payment_time"
            header-align="center"
            align="center"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="确认时间"
            prop="start_stocking_time"
            header-align="center"
            align="center"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column> -->
          <el-table-column
            label="更新时间"
            prop="update_time"
            header-align="center"
            align="center"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="操作"
            width="100"
            header-align="center"
            align="center"
            fixed="right"
          >
            <template #default="{ row }">
              <div>
                <el-button type="primary" link @click="viewTheLog(row.id)"
                >操作日志
                </el-button
                >
              </div>
            </template>
          </el-table-column>
        </ElTable>
      </div>
      <div class="pagination" style="display: flex;align-items:center;justify-content: center">
        <div style="display:flex; position: relative;left: 200px;color: rgb(255, 153, 0);font-weight: bold" class="total-price">
          <div style="display:flex;margin-right: 10px" class="total">
            <div class="total-title">
              工艺总价(￥)：
            </div>
            <div class="total-price">
              {{ craftPrice }}元
            </div>
          </div>
          <div style="display:flex;" class="total">
            <div class="total-title">
              工厂价格(￥)：
            </div>
            <div class="total-price">
              {{ costPrice }}元
            </div>
          </div>
        </div>
        <ElPagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[100, 200, 300, 400, 500]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="margin: 10px auto 0; text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></ElPagination>
      </div>

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

<style scoped lang="scss">

</style>
