<script lang="ts" setup>
import { transStatusColor } from '@/pages/order/constants.ts'
import Utils from '@/common/utils'
import AIcon from '@/components/a-icon/AIcon.vue'
import type { TableColumnCtx } from 'element-plus'
import { elIcons } from '@/common/element/element.ts'

const props = withDefaults(
  defineProps<{
    transRecodes?: OrderTypes.TransRecode[]
    selectable?: boolean
    summaries: string[]
  }>(),
  {
    selectable: false,
    transRecodes: () => [] as OrderTypes.TransRecode[],
  },
)

const model = defineModel({type: Array as PropType<string[]>})

const selectRows = Utils.resetAble(reactive<string[]>([]))
const selectHeader_indeterminate = computed(() => {
  return selectRows.length > 0 && selectRows.length < props.transRecodes.length
})
const selectHeader_checked = computed({
  get() {
    return selectRows.length === props.transRecodes.length
  },
  set(val) {
    if (val) {
      const newData = props.transRecodes.map(it => it.id)
      selectRows.$reset([ ...new Set([ ...selectRows, ...newData ]) ] as string[])
    } else {
      const newData = props.transRecodes.map(it => it.id)
      selectRows.$reset(selectRows.filter(it => !newData.includes(it)))
    }
    model.value = selectRows.$clone()
  },
})

function rowClick(val: Record<string, any> & { id: string }) {
  if (!props.selectable) {
    return
  }
  const indexOf = selectRows.indexOf(val.id)
  if (indexOf === -1) {
    selectRows.push(val.id)
  } else {
    selectRows.splice(indexOf, 1)
  }
  model.value = selectRows.$clone()
}

interface SummaryMethodProps {
  columns: TableColumnCtx<OrderTypes.TransRecode>[]
  data: OrderTypes.TransRecode[]
}

const getSummaries = ({columns, data}: SummaryMethodProps) => {
  const sums: (string | VNode)[] = []
  console.log(columns, data)
  return sums
}
</script>

<template>
  <ElTable
    :data="transRecodes"
    cell-class-name="table-cell"
    class="data-table"
    :class="{selectable}"
    empty-text="暂无数据"
    header-row-class-name="table-header"
    row-key="id"
    :summary-method="getSummaries"
    show-summary
    @row-click="rowClick">
    <ElTableColumn v-if="selectable" width="50">
      <template #default="{row}">
        <ElCheckbox :model-value="selectRows.includes(row.id)"/>
      </template>
      <template #header>
        <ElCheckbox v-model="selectHeader_checked" :indeterminate="selectHeader_indeterminate"/>
      </template>
    </ElTableColumn>
    <ElTableColumn label="车次" prop="trainNum"/>
    <ElTableColumn label="运输状态" prop="transStatusTxt">
      <template #default="{row}">
        <ElTag :data-cs="transStatusColor.cs(row.transStatus)"> {{ row.transStatusTxt }}</ElTag>
      </template>
    </ElTableColumn>
    <ElTableColumn label="司机姓名" prop="driverName"/>
    <ElTableColumn label="司机电话" prop="driverPhone"/>
    <ElTableColumn label="车牌号" prop="truckLicensePlate"/>
    <ElTableColumn label="毛重" prop="truckLicensePlate"/>
    <ElTableColumn label="皮重" prop="truckLicensePlate"/>
    <ElTableColumn label="净重" prop="truckLicensePlate"/>
    <ElTableColumn label="勘料员" prop="truckLicensePlate"/>
    <ElTableColumn label="总金额" prop="truckLicensePlate"/>
    <ElTableColumn label="支付状态" prop="truckLicensePlate"/>
    <ElTableColumn label="运输状态" prop="truckLicensePlate"/>
    <ElTableColumn label="勘料状态" prop="truckLicensePlate"/>
    <ElTableColumn label="操作" prop="action" width="200">
      <div class="action-btn">
        <ElButton plain type="success">
          <AIcon name="approach"/>
        </ElButton>
        <ElButton plain type="danger">
          <AIcon name="carexit"/>
        </ElButton>
        <ElButton plain type="warning">
          <AIcon name="chakanliaodan"/>
        </ElButton>
        <ElButton :icon="elIcons.Position" plain type="primary"/>
      </div>
    </ElTableColumn>
  </ElTable>
</template>

<style lang="stylus" scoped>
.data-table {
  width 100%

  &.selectable {
    :deep(.el-table__row) {
      cursor pointer;
    }
  }
}

.action-btn {
  width 100%;
  display flex;
  justify-content space-between;
  align-items center;

  :deep(.el-button) {
    width 32px;
    height 32px;
    padding 0;
  }
}
</style>
