<script setup lang="ts">
import { ElMessage } from 'element-plus'
import type { PropType } from 'vue'
import { ProductDetails } from '@/types/api/billOrder.ts'

const selection = ref<ProductDetails[]>([])
defineProps({
  list: {
    type: Array as PropType<ProductDetails[]>,
    default: () => [],
  },
})

const handleDetailSelectionChange = (arr: ProductDetails[]) => {
  selection.value = arr
}

const batchUpdate = async (arr:ProductDetails[], title:string, field: 'craft_price' | 'template_price') => {
  let { value } = await ElMessageBox.prompt(title, '更新价格', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /^\d+(\.\d+)?$/,
    inputErrorMessage: '请输入数字',
  })
  if (value) {
    if ( Number(value) < 0) {
      ElMessage.error('价格必须为大于等于0的数字')
      return
    }
    arr.forEach((item:ProductDetails) => {
      item[field] = Number(value)
    })
  }
}
</script>

<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-button
:disabled="!selection.length" type="success"
                 @click="batchUpdate(selection,'批量修改底胚价格','template_price')">批量修改底胚价格
      </el-button>
      <el-button
:disabled="!selection.length" type="warning"
                 @click="batchUpdate(selection,'批量修改工艺价格','craft_price')">批量修改工艺价格
      </el-button>
    </div>
    <ElTable
      ref="deTableRef"
      :data="list"
      height="500px"
      border
      row-key="id"
      @selection-change="handleDetailSelectionChange"
    >
      <el-table-column
        show-overflow-tooltip
        label="商品图片"
        width="100"
        prop="variant_image"
        align="center"
      >
        <template #default="{ row }">
          <el-image
            v-if="row.variant_image"
            preview-teleported="body"
            style="width: 60px; height: 60px"
            :preview-src-list="[row.variant_image]"
            :src="row.variant_image"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="50"
        header-align="center"
        align="center"
        fixed
      />
      <ElTableColumn
        show-overflow-tooltip
        width="60"
        align="center"
        label="序号"
        type="index"
        fixed
      />
      <el-table-column
        label="生产单号"
        prop="sub_order_number"
        header-align="center"
        align="center"
        min-width="220"
        show-overflow-tooltip
      />
      <el-table-column
        label="第三方生产单号"
        prop="product.factory_sub_order_number"
        header-align="center"
        align="center"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        show-overflow-tooltip
        label="底胚SKU"
        align="center"
        width="150"
        prop="product.base_sku"
      />
      <el-table-column
        label="底胚价格($)"
        width="200"
        align="center"
        prop="template_price"
      >
        <template #default="{row}">
          <el-input-number v-model="row.template_price" />
        </template>
      </el-table-column>
      <el-table-column
        label="工艺价格($)"
        width="200"
        align="center"
        prop="craft_price"
      >
        <template #default="{row}">
          <el-input-number v-model="row.craft_price" />
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="变体SKU"
        align="center"
        width="150"
        prop="product.variant_sku"
      />
      <el-table-column
        label="商品名"
        prop="product.product_name"
        header-align="center"
        align="center"
        width="180"
        show-overflow-tooltip
      />
      <el-table-column
        show-overflow-tooltip
        label="工艺编码"
        width="100"
        align="center"
        prop="product.craft_code"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="工艺名称"
        width="140"
        align="center"
        prop="product.craft_name"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="已发货数量"
        width="100"
        align="center"
        prop="shipment_num"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="产品价格($)"
        width="100"
        align="center"
        prop="product_price"
      >
        <template #default="{ row }">

                        <span>{{
                            row.template_price + row.craft_price || 0
                          }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="工厂"
        prop="product.factory_code"
        header-align="center"
        align="center"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="备注"
        prop="product.remark"
        header-align="center"
        align="center"
        min-width="160"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="创建时间"
        prop="product.create_time"
        header-align="center"
        align="center"
        min-width="180"
        show-overflow-tooltip
      ></el-table-column>
    </ElTable>
  </div>
</template>

<style scoped lang="scss">

</style>
