<template>
  <div class="page card h-100 flex-gap-10 overflow-hidden flex">
    <div class="left">
      <ElTree
        ref="treeRef"
        default-expand-all
        :expand-on-click-node="false"
        :default-expanded-keys="[]"
        :highlight-current="true"
        node-key="code"
        :data="treeData"
        :props="{ children: 'children', label: 'remark' }"
        @node-click="nodeClick"
      >
        <template #default="{ data }">
          <div class="tree-node">
            <div class="tree-node-label">{{ data.remark }}</div>
            <div v-if="data.count || data.count === 0" class="tree-node-count">
              {{ `(${data.count})` }}
            </div>
          </div>
        </template>
      </ElTree>
    </div>
    <div class="right">
      <div class="delivery-note-page flex-column card h-100 overflow-hidden">
        <splitDiv size="50">
          <template #top>
            <div class="header-filter-form">
              <ElForm :model="searchForm" inline ref="searchFormRef">
                <ElFormItem 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="结束时间"
                    clearable
                    style="width: 260px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                  />
                </ElFormItem>

                <ElFormItem label="对账单号">
                  <ElInput
                    v-model="searchForm.recNumber"
                    clearable
                    placeholder="对账单号"
                    style="width: 160px"
                  />
                </ElFormItem>
                <ElFormItem label="发货单号">
                  <ElInput
                    v-model="searchForm.billNumber"
                    clearable
                    placeholder="发货单号"
                    style="width: 160px"
                  />
                </ElFormItem>
                <ElFormItem style="margin-right: 10px" label="订单号">
                  <ElInput
                    v-model="searchForm.orderNumber"
                    clearable
                    placeholder="订单号"
                    style="width: 160px"
                  />
                </ElFormItem>

                <ElFormItem>
                  <ElButton type="primary" @click="search" ref="searchBtnRef"
                    >查询</ElButton
                  >
                </ElFormItem>
                <ElFormItem>
                  <ElButton @click="resetSearchForm">重置</ElButton>
                </ElFormItem>
                <ElFormItem v-if="nodeId === 10">
                  <el-button type="primary" @click="confirmOrder">
                    确认对账单
                  </el-button>
                </ElFormItem>
                <ElFormItem v-if="nodeId === 10">
                  <el-button type="warning" @click="rejectOrder">
                    驳回
                  </el-button>
                </ElFormItem>
                <ElFormItem>
                  <el-button type="success" @click="exportExcel">
                    导出
                  </el-button>
                </ElFormItem>
                <ElFormItem v-if="nodeId === 30">
                  <el-button type="danger" @click="auditOrder('archive')">
                    归档
                  </el-button>
                </ElFormItem>
              </ElForm>
            </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
                  :summary-method="getSummaries"
                  default-expand-all
                  size="small"
                  style="width: 100%; height: 100%"
                  border
                  @current-change="rowClick"
                  @selection-change="handleSelectionChange"
                >
                  <ElTableColumn
                    type="selection"
                    width="70"
                    header-align="center"
                    align="center"
                  ></ElTableColumn>
                  <ElTableColumn
                    type="index"
                    label="序号"
                    width="60"
                    fixed="left"
                    header-align="center"
                    align="center"
                  ></ElTableColumn>
                  <ElTableColumn
                    label="编码"
                    show-overflow-tooltip
                    prop="name"
                    width="200"
                    header-align="center"
                    align="center"
                  ></ElTableColumn>
                  <!-- <ElTableColumn
                    label="客户"
                    show-overflow-tooltip
                    prop="user_mark"
                    width="200"
                    header-align="center"
                    align="center"
                  ></ElTableColumn> -->
                  <ElTableColumn
                    label="对账单号"
                    show-overflow-tooltip
                    prop="rec_number"
                    min-width="200"
                    header-align="center"
                    align="center"
                  ></ElTableColumn>

                  <!-- <ElTableColumn
                    label="订单号"
                    show-overflow-tooltip
                    prop="order_number"
                    width="200"
                    header-align="center"
                    align="center"
                  ></ElTableColumn> -->
                  <!-- <ElTableColumn
                    label="ERP总价格"
                    show-overflow-tooltip
                    width="130"
                    prop="erp_total_amount"
                    header-align="center"
                    align="center"
                  ></ElTableColumn> -->
                  <el-table-column
                    label="账期"
                    header-align="center"
                    align="center"
                    min-width="340"
                  >
                    <template #default="scope">
                      {{ scope.row.start_time }} - {{ scope.row.end_time }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="商品总价格(￥)"
                    header-align="center"
                    prop="product_total_amount"
                    width="130"
                    align="center"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                  <!-- <el-table-column
                label="ERP总价格"
                header-align="center"
                prop="erp_total_amount"
                width="120"
                align="center"
                show-overflow-tooltip
              >
              </el-table-column> -->
                  <el-table-column
                    label="物流总价(￥)"
                    header-align="center"
                    prop="carriage_total_amount"
                    width="130"
                    align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    label="应付金额(￥)"
                    header-align="center"
                    width="130"
                    align="center"
                    show-overflow-tooltip
                  >
                    <template #default="{ row }">
                      <span>{{
                        row.carriage_total_amount + row.product_total_amount
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="实付金额(￥)"
                    header-align="center"
                    prop="actual_amount"
                    width="130"
                    align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    label="水单"
                    header-align="center"
                    prop="water_list"
                    width="100"
                    align="center"
                    show-overflow-tooltip
                  >
                    <template #default="{ row }">
                      <ImageView :src="row.water_list" />
                    </template>
                  </el-table-column>
                  <ElTableColumn
                    label="发货数量(件)"
                    show-overflow-tooltip
                    width="100"
                    prop="carriage_total_amount"
                    header-align="center"
                    align="center"
                  ></ElTableColumn>
                  <ElTableColumn
                    label="总发货数量(件)"
                    show-overflow-tooltip
                    prop="num"
                    width="130"
                    header-align="center"
                    align="center"
                  ></ElTableColumn>
                  <ElTableColumn
                    label="质检通过数量(件)"
                    show-overflow-tooltip
                    prop="pass_num"
                    width="130"
                    header-align="center"
                    align="center"
                  ></ElTableColumn>
                  <!-- <ElTableColumn
                    label="ERP状态"
                    show-overflow-tooltip
                    width="130"
                    prop="erp_status"
                    header-align="center"
                    align="center"
                  ></ElTableColumn> -->
                  <ElTableColumn
                    label="质检未通过数量(件)"
                    show-overflow-tooltip
                    width="140"
                    prop="not_pass_num"
                    header-align="center"
                    align="center"
                  ></ElTableColumn>

                  <ElTableColumn
                    label="创建时间"
                    show-overflow-tooltip
                    width="200"
                    prop="create_time"
                    header-align="center"
                    align="center"
                  ></ElTableColumn>
                </ElTable>
              </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>
          </template>
          <template #bottom>
            <el-tabs v-model="tabsValue" @tab-click="tabsClick">
              <el-tab-pane name="0" label="发货单详情">
                <el-form :model="detailForm" inline>
                  <el-form-item label="发货单号">
                    <el-input
                      v-model="detailForm.billNumber"
                      placeholder="请输入发货单号"
                      clearable
                      style="width: 130px"
                    />
                  </el-form-item>

                  <el-form-item label="订单号">
                    <el-input
                      v-model="detailForm.orderNumber"
                      placeholder="请输入订单号"
                      clearable
                      style="width: 130px"
                    />
                  </el-form-item>
                  <el-form-item label="生产单号">
                    <el-input
                      v-model="detailForm.subOrderNumber"
                      placeholder="请输入订单号"
                      clearable
                      style="width: 130px"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="searchDetail"
                      >查询</el-button
                    >
                  </el-form-item>
                </el-form>
                <div class="table-wrap">
                  <ElTable size="small" :data="detailList" height="100%" border>
                    <ElTableColumn
                      show-overflow-tooltip
                      width="60"
                      align="center"
                      label="序号"
                      type="index"
                    />
                    <ElTableColumn
                      show-overflow-tooltip
                      align="center"
                      label="单号"
                      prop="factory_order_number"
                    />
                    <!-- <ElTableColumn
                    show-overflow-tooltip
                    align="center"
                    label="ERP单号"
                    prop="erp_order_number"
                  /> -->
                    <ElTableColumn
                      show-overflow-tooltip
                      align="center"
                      label="发货单号"
                      prop="bill_number"
                    />

                    <ElTableColumn
                      show-overflow-tooltip
                      align="center"
                      label="发货数(件)"
                      prop="num"
                    />

                    <ElTableColumn
                      show-overflow-tooltip
                      align="center"
                      label="质检通过(件)"
                      prop="pass_num"
                    />
                    <ElTableColumn
                      show-overflow-tooltip
                      align="center"
                      label="质检不通过(件)"
                      prop="not_pass_num"
                    />
                    <!-- <ElTableColumn
                    show-overflow-tooltip
                    align="center"
                    label="ERP价格"
                    prop="erp_price"
                  /> -->
                    <ElTableColumn
                      show-overflow-tooltip
                      align="center"
                      label="成本价(￥)"
                      prop="price"
                    />
                    <ElTableColumn
                      show-overflow-tooltip
                      align="center"
                      label="物流价格(￥)"
                      prop="carriage_amount"
                    />
                    <ElTableColumn
                      show-overflow-tooltip
                      align="center"
                      label="发货时间"
                      prop="shipment_time"
                    />
                    <ElTableColumn
                      width="100"
                      align="center"
                      header-align="center"
                      label="操作"
                    >
                      <template #default="{ row }">
                        <ElButton type="primary" link @click="onDetail(row)"
                          >查看详情
                        </ElButton>
                      </template>
                    </ElTableColumn>
                  </ElTable>
                </div>

                <ElPagination
                  v-model:current-page="detailPager.page"
                  v-model:page-size="detailPager.rows"
                  :page-sizes="[100, 200, 300, 400, 500]"
                  background
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="detailPager.total"
                  style="margin: 10px auto 0; text-align: right"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                ></ElPagination>
              </el-tab-pane>
              <el-tab-pane name="1" label="操作日志">
                <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">
                      {{ item.create_time }}
                    </span>
                    <span style="margin: 0 5px 0 20px">{{
                      item.employee_account
                    }}</span>
                    <span style="display: inline-block">{{
                      item.description
                    }}</span>
                  </li>
                </ul>
              </el-tab-pane>
            </el-tabs>
          </template>
        </splitDiv>
      </div>
    </div>
  </div>
  <ElDrawer
    v-model="shipmentOrderDetailDrawerVisible"
    title="发货单详情"
    size="50%"
  >
    <shipmentOrderDetailInfo :detail="shipmentOrderDetail" />
  </ElDrawer>
  <ElDialog
    v-model="confirmOrderVisible"
    title="确认对账单"
    width="500px"
    :close-on-click-modal="false"
  >
    <ElForm ref="auditFormRef" :model="auditForm" label-width="80px">
      <ElFormItem
        label="意见"
        prop="pass"
        :rules="[{ required: true, message: '请选择' }]"
      >
        <ElRadioGroup v-model="auditForm.pass">
          <ElRadio :label="1">通过</ElRadio>
          <ElRadio :label="0">不通过</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem
        label="审核意见"
        prop="description"
        :rules="
          auditForm.pass === 0
            ? [{ required: true, message: '请输入审核意见' }]
            : []
        "
      >
        <ElInput v-model="auditForm.description" type="textarea" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="confirmOrderVisible = false">取消</el-button>
        <el-button type="primary" @click="submitConfirmOrder">确认</el-button>
      </span>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import {
  ElMessage,
  ElRadioGroup,
  ElTree,
  TableColumnCtx,
  type TableInstance,
} from 'element-plus'
import splitDiv from '@/components/splitDiv/splitDiv.vue'
import usePageList from '@/utils/hooks/usePageList'
import { useValue } from '@/utils/hooks/useValue'
import {
  customJomallReconciliation,
  getReconciliationAmount,
  getShipmentDetailsById,
  auditOrderApi,
  getShipmentOrderDetailById,
  confirmOrderApi,
  rejectOrderApi,
  getLogListApi,
  exportExcelApi,
} from '@/api/order'

import { ref, onMounted, watch, nextTick } from 'vue'
import 'element-plus/dist/index.css'
import {
  CountStatus,
  AccountStatementNote,
  ItemList,
  LogList,
  AccountStatementNoteSearchForm,
} from '@/types/api/billOrder.ts'
import { DetailForm, ShipmentOrderDetailData } from '@/types/api/deliveryNote'
import shipmentOrderDetailInfo from '@/components/ShipmentOrderDetail.vue'
import ImageView from '@/components/ImageView.vue'
import { showConfirm } from '@/utils/ui'
// import { getUserMarkList } from '@/api/auth.ts'
import { useEnterKeyTrigger } from '@/utils/hooks/useEnterKeyTrigger.ts'
interface Tree {
  remark?: string
  count?: number
  code?: string
  children?: Tree[]
}
interface SummaryMethodProps<
  T extends Record<PropertyKey, any> = AccountStatementNote,
> {
  columns: TableColumnCtx<T>[]
  data: T[]
}
// const nameSpaceList = ref<string[]>([])
const treeData = ref<CountStatus[]>()
const [searchForm, resetSearchForm] = useValue<AccountStatementNoteSearchForm>(
  {},
)

const dateRange = ref<string[]>([])
const selections = ref<AccountStatementNote[]>([])
const detailList = ref<ItemList[]>([])
const tabsValue = ref<string>('0')
const singleTableRef = ref<TableInstance>()
const currentRow = ref<AccountStatementNote | null>(null)
const logList = ref<LogList[]>([])

const nodeId = ref<number | string>(10)

const treeRef = ref<InstanceType<typeof ElTree>>()
const {
  currentPage,
  pageSize,
  total,
  data: tableData,
  refresh: search,
  onCurrentPageChange: handleCurrentChange,
  onPageSizeChange: handleSizeChange,
} = usePageList<AccountStatementNote>({
  query: (page, pageSize) =>
    customJomallReconciliation(
      {
        ...searchForm.value,
        status: nodeId.value === -1 ? null : nodeId.value,
        start_time: dateRange.value && dateRange.value[0],
        end_time: dateRange.value && dateRange.value[1],
      },
      page,
      pageSize,
    ).then((res) => res.data) as never,
})

onMounted(() => {
  // getNameSpaceList()
})

// const dialogVisible = ref<boolean>(false)

// const getNameSpaceList = async () => {
//   try {
//     const res = await getUserMarkList()
//     nameSpaceList.value = res.data
//   } catch (e) {
//     // showError(e)
//   }
// }
const getTreeNum = async () => {
  try {
    const res = await getReconciliationAmount()
    res.data = [{ code: -1, remark: '全部', children: res.data }]
    treeData.value = res.data
    await nextTick(() => {
      treeRef.value!.setCurrentKey(nodeId.value, true)
    })
  } catch (e) {
    console.error(e)
  }
}
const rowClick = (row: AccountStatementNote | null) => {
  if (!row) {
    currentRow.value = null
  }
  currentRow.value = row
  tabsClick()
}

const tabsClick = async () => {
  if (!currentRow.value) {
    detailList.value = []
    logList.value = []
    return
  }
  await nextTick()
  if (tabsValue.value === '0') {
    searchDetail()
  } else {
    getLogList()
  }
}
const handleSelectionChange = (v: AccountStatementNote[]) => {
  selections.value = v
}
const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param
  const sums: string[] = []
  columns.forEach(
    (column: TableColumnCtx<AccountStatementNote>, index: number) => {
      if (index === 0) {
        sums[index] = '合计'
        return
      }
      const values = data.map((item: AccountStatementNote) => {
        return Number(item[column.property as keyof AccountStatementNote])
      })
      if (!values.every((value: number) => !isNaN(value))) {
        return
      }
      sums[index] = values
        .reduce((prev: number, curr: number) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)
        .toString()
    },
  )

  return sums
}
const confirmOrderVisible = ref<boolean>(false)
const auditForm = ref({
  pass: 1,
  description: '',
})
const auditFormRef = ref()
const auditOrder = (key: string) => {
  let url = ''
  let text = ''
  switch (key) {
    case 'pay':
      url = 'reconciliation/payment'
      text = '确认付款'
      break
    case 'archive':
      url = 'reconciliation/archiving'
      text = '确认归档'
      break
  }

  if (selections.value.length === 0) {
    return ElMessage.warning('请选择要操作的数据')
  }
  ElMessageBox.confirm(`${text}对账单？`, '重要提示', {
    confirmButtonText: '确定',
    type: 'warning',
  }).then(async () => {
    const ids = selections.value.map((el) => el.id).join(',')
    await auditOrderApi(url, ids)
    ElMessage.success('操作成功')
    search()
    await getTreeNum()
  })
}
const rejectOrder = () => {
  if (selections.value.length === 0) {
    return ElMessage.warning('请选择要操作的数据')
  }
  ElMessageBox.prompt('请输入驳回原因', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    inputPattern: /.+/,
    customClass: 'reject',
    inputErrorMessage: '请输入驳回原因',
    inputPlaceholder: '驳回原因',
  }).then(async ({ value }) => {
    const ids = selections.value.map((el) => el.id).join(',')
    try {
      await rejectOrderApi({ ids: ids, description: value, pass: 0 })
      ElMessage.success('操作成功')
      search()
      await getTreeNum()
    } catch (e) {
      console.error(e)
    }
  })
}
const confirmOrder = async () => {
  if (selections.value.length === 0) {
    return ElMessage.warning('请选择要操作的数据')
  }
  try {
    await showConfirm('是否确认对账单?', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
  } catch {
    return
  }
  const ids = selections.value.map((el) => el.id).join(',')
  try {
    await confirmOrderApi({
      ids,
    })
    confirmOrderVisible.value = false
    ElMessage.success('操作成功')
    search()
    await getTreeNum()
  } catch (e) {
    console.error(e)
  }
  // confirmOrderVisible.value = true
  // auditForm.value = {
  //   pass: 1,
  //   description: '',
  // }
  // await nextTick()
  // auditFormRef.value!.clearValidate()
}
const submitConfirmOrder = async () => {
  try {
    await auditFormRef.value?.validate()
  } catch {
    return
  }
  const ids = selections.value.map((el) => el.id).join(',')
  await confirmOrderApi({
    ...auditForm.value,
    pass: auditForm.value.pass === 0 ? 0 : undefined,
    description:
      auditForm.value.description === ''
        ? undefined
        : auditForm.value.description,
    ids,
  })
  confirmOrderVisible.value = false
  ElMessage.success('操作成功')
  search()
  await getTreeNum()
  if (singleTableRef.value) {
    singleTableRef.value!.setCurrentRow(currentRow.value ?? undefined)
  }
}
watch(
  () => tableData.value,
  () => {
    if (tableData.value && tableData.value.length > 0) {
      if (singleTableRef.value) {
        singleTableRef.value!.setCurrentRow(tableData.value[0])
        currentRow.value = (tableData.value as never)[0]
      }
    } else {
      detailList.value = []
    }
  },
  { immediate: true },
)
const nodeClick = (data: Tree) => {
  nodeId.value = data.code ?? ''
  search()
}
const shipmentOrderDetailDrawerVisible = ref(false)
const shipmentOrderDetail = ref({} as ShipmentOrderDetailData)
const onDetail = async (row: ItemList) => {
  try {
    const res = await getShipmentOrderDetailById(row.shipment_id)
    shipmentOrderDetail.value = res.data
    shipmentOrderDetailDrawerVisible.value = true
  } catch (e) {
    console.error(e)
  }
}
const detailForm = ref({} as DetailForm)
const detailPager = ref({
  page: 1,
  rows: 100,
  total: 0,
})
const searchDetail = async () => {
  try {
    const res = await getShipmentDetailsById({
      ...detailForm.value,
      page: detailPager.value.page,
      rows: detailPager.value.rows,
      infoId: currentRow.value?.id,
    })
    detailList.value = res.data.records || []
    detailPager.value.total = res.data.total
    // logList.value = res.data.logList || []
  } catch (e) {
    console.error(e)
  }
}
const getLogList = async () => {
  try {
    const res = await getLogListApi(currentRow.value?.id)
    logList.value = res.data
    // logList.value = res.data.logList || []
  } catch (e) {
    console.error(e)
  }
}
const exportExcel = async () => {
  if (selections.value.length === 0) {
    return ElMessage.warning('请选择要操作的数据')
  }
  const ids = selections.value.map((el) => el.id).join(',')
  try {
    const res = await exportExcelApi(ids)
    window.open(res.data)
  } catch (e) {
    console.error(e)
  }
}

/**
 * @description: 页面添加回车监听
 */
const searchFormRef = ref()

const searchBtnRef = ref()

useEnterKeyTrigger({
  formRef: searchFormRef,
  btnRef: searchBtnRef,

  callback: (event: KeyboardEvent) => {
    console.log('回车键被按下', event)
    search()
  },
})

onMounted(() => {
  getTreeNum()
})
</script>

<style lang="scss" scoped>
.header-filter-form {
  :deep(.el-form-item) {
    margin-right: 14px;
    margin-bottom: 10px;
  }
}

$border: solid 1px #ddd;

.send-order-list {
  display: grid;
  grid-template-columns: 2fr 1fr;
  border-left: $border;
  border-top: $border;
}

.send-order-column {
  padding: 10px 16px;
  line-height: 1.5;
}

.send-order-header {
  font-weight: bold;
  text-align: center;
  background-color: #f8f8f9;
}

.send-order-product-item {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  &:not(:first-child) {
    border-top: $border;
    padding: 10px 0;
  }

  .send-order-prop-list {
    flex: 1;
  }
}

.send-order-product-image {
  width: 100px;
}

.dialog-footer {
  text-align: center;
}

.delivery-note-list {
  :deep(.vertical-align-top) {
    vertical-align: top;
  }
}

.left {
  width: 160px;
  :deep(.el-tree-node__content) {
    height: 30px;
    line-height: 30px;
  }
  :deep(.el-tree-node__label) {
    font-size: 13px;
    cursor: pointer;
    display: inline-block;
    width: 100%;
    color: black !important;

    padding: 3px 7px;
  }

  :deep(.el-tree-node__expand-icon) {
    display: none;
  }

  :deep(.is-current) {
    .tree-node-label,
    .tree-node-count {
      background-color: #ecf5ff;
      color: #409eff !important;
    }

    .el-tree-node__children {
      .tree-node-label,
      .tree-node-count {
        background-color: transparent !important;
        color: black !important;
      }
    }
  }
}

.tree-node {
  display: flex;
  color: #333;
  font-weight: 500;
}

.right {
  flex: 1;
  flex-shrink: 0;
  background: white;
  overflow: hidden;
}

::v-deep(.el-tree-node__label) {
  font-size: 13px;
  color: rgb(96, 98, 102);
  cursor: pointer;
}

::v-deep(.el-tree-node__expand-icon) {
  display: none;
}

::v-deep(.el-tree-node__label) {
  display: inline-block;
  width: 100%;
  color: black !important;

  padding: 3px 7px;
}

::v-deep(.is-current) {
  .el-tree-node__label {
    background-color: #ecf5ff;
    color: #409eff !important;
  }

  .el-tree-node__children {
    .el-tree-node__label {
      background-color: transparent !important;
      color: black !important;
    }
  }
}

::v-deep(.splitpanes__pane) {
  display: flex;
  flex-direction: column;
}

::v-deep(.splitpanes--horizontal > .splitpanes__splitter) {
  min-height: 5px;
  margin-top: 10px;
}

.draw-line {
  width: 100%;
  height: 5px;
  background: #eff3f6;
}
.btn-list {
  margin-bottom: 10px;
}

::v-deep(.el-tree-node) {
  cursor: pointer;
  margin-bottom: 5px;
}

::v-deep(.el-tree-node__label) {
  font-size: 14px;
}

::v-deep(.el-tabs) {
  display: flex;
  // flex-direction: column;
  height: 100%;

  .el-tabs__content {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;

    .el-tab-pane {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }
}
.delivery-note-page {
  :deep(#top) {
    height: 100%;
  }
}
</style>
