<template>
  <el-drawer :visible.sync="show" title="产品选择" @close="handleCancelClick" :size="size" :close-on-click-modal="false" append-to-body>
    <div style="width: 90%;margin: 0 auto;">
        <el-form label-width="68px">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="产品名称" style="width: 100%;">
                <el-input v-model="query.itemName" clearable placeholder="产品名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="规格名称">
                <el-input class="w200" v-model="query.skuName" clearable placeholder="规格名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div style="margin-top: 5px;">
                <el-button type="primary" @click="loadAll">查询</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div style="width: 100%;max-height: 65vh;overflow-y: auto;">
          <el-table :data="list" @selection-change="handleSelectionChange" border :row-key="row=>row.id" empty-text="暂无产品" v-loading="loading" ref="skuSelectFormRef" cell-class-name="my-cell">
            <el-table-column type="selection" width="55" :reserve-selection="true" v-if="!singleSelect" :selectable="judgeSelectable"/>
            <el-table-column label="产品信息" prop="itemId">
              <template #default="{ row }">
                <div>{{ row.item.itemName }}</div>
                <div v-if="row.item.itemCode">编号：{{ row.item.itemCode }}</div>
                <div v-if="row.item.itemBrand">品牌：{{ useWmsStore().itemBrandMap.get(row.item.itemBrand).brandName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="规格信息">
              <template #default="{ row }">
                <div>{{ row.itemSku.skuName }}</div>
                <div v-if="row.itemSku.skuCode">编号：{{ row.itemSku.skuCode }}</div>
                <div v-if="row.itemSku.barcode">条码：{{ row.itemSku.barcode }}</div>
              </template>
            </el-table-column>
            <el-table-column label="规格单位">
              <template #default="{ row }">
                <div>{{ row.itemSku.unit }}</div>
              </template>
            </el-table-column>
            <el-table-column label="价格(元)">
              <template #default="{ row }">
                <div v-if="row.itemSku.costPrice" class="flex-space-between">
                  <span>成本价：</span>
                  <div>{{ (row.itemSku.costPrice || row.itemSku.costPrice === 0) ? row.itemSku.costPrice : '' }}</div>
                </div>
                <div v-if="row.itemSku.sellingPrice" class="flex-space-between">
                  <span>销售价：</span>
                  <div>{{ (row.itemSku.sellingPrice || row.itemSku.sellingPrice === 0) ? row.itemSku.sellingPrice : '' }}</div>
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column label="重量(kg)" width="160">
              <template #default="{ row }">
                <div v-if="row.itemSku.netWeight" class="flex-space-between">
                  <span>净重：</span>
                  <div>{{ (row.itemSku.netWeight || row.itemSku.netWeight === 0) ? row.itemSku.netWeight : '' }}</div>
                </div>
                <div v-if="row.itemSku.grossWeight" class="flex-space-between">
                  <span>毛重：</span>
                  <div>{{ (row.itemSku.grossWeight || row.itemSku.grossWeight === 0) ? row.itemSku.grossWeight : '' }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="长宽高(cm)" width="250">
              <template #default="{ row }">
                <div>{{ getVolumeText(row) }}</div>
              </template>
            </el-table-column> -->
            <el-table-column label="操作" width="100" v-if="singleSelect" align="center">
              <template #default="{ row }">
                <el-button link type="primary" @click="handleChooseSku(row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        v-show="total > 0">
      </el-pagination>
    </el-row>
      <div style="width: 100%;display: flex;justify-content: space-between;margin-top: 20px;">
        <span>
          <!-- <el-button @click="goCreateItem" icon="Plus">创建产品</el-button> -->
          <el-button @click="loadAll" icon="Refresh">刷新</el-button>
        </span>
        <span>
          <el-button @click="handleCancelClick">取消</el-button>
          <el-button type="primary" @click="handleOkClick" v-if="!singleSelect">确认</el-button>
      </span>
      </div>
    </div>
  </el-drawer>
</template>
<script setup name="SkuSelect">
import {computed, getCurrentInstance, onMounted, reactive, ref} from 'vue';
import {listItemSkuPage} from "@/api/wms/itemSku";
import {useWmsStore} from '@/store_v3/modules/wms'
useWmsStore().getItemBrandList();

const { proxy } = getCurrentInstance()

const loading = ref(false)
const query = reactive({
  itemName: '',
  itemCode: '',
  skuName: '',
  barcode: '',
  warehouseId: null,
  projectId: null,
});
const categoryType = ref('')
const selectItemSkuVoCheck = ref([])
const skuSelectFormRef = ref()
const total = ref(0);
const pageReq = reactive({
  page: 1,
  size: 10,
});
const list = ref([]);
const rightList = ref([]);
const rightListKeySet = computed(() => {
  const set = new Set();
  rightList.value.forEach((it) => set.add(it.id));
  return set
});

const currentPage = ref(1)
const handleSizeChange = (e)=>{
  pageReq.size = e;
  getList();
}
const handleCurrentChange = (e)=>{
  pageReq.page = e;
  getList();
}

const loadAll = () => {
  pageReq.page = 1
  getList()
}

const getList = () => {
  const data = {
    ...query,
    page: pageReq.page,
    limit: pageReq.size,
    categoryType:categoryType.value
  }
  loading.value = true
  listItemSkuPage(data).then((res) => {
    const content = [...res.data.list];
    list.value = content.map((it) => ({...it, id: it.skuId, checked: false}));
    total.value = res.data.total;
  }).then(() => toggleSelection()).finally(() => loading.value = false);
}

const goCreateItem = () => {
  const data = proxy.$router.resolve({path: '/system/itemManage2', query: {openDrawer: true}})
  window.open(data.href, '_blank')
}
// 定义props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: '30%'
  },
  singleSelect:{
    type: Boolean,
    default: false
  },
  selectedSku: {
    type: Array,
    default: []
  }
})

const show = computed(() => {
  return props.modelValue;
})

// 定义事件
// const emit = defineEmits<{
//   (e: 'handleCancelClick')
//   (e: 'handleOkClick', value)
//   (e: 'handleSingleOkClick', value)
// }>()
const emit= defineEmits(['handleCancelClick', 'handleOkClick','handleSingleOkClick'])

function handleCancelClick() {
  emit('handleCancelClick');
  clearQuantity()
}

function handleChooseSku(row) {
  emit('handleSingleOkClick', row);
}

function handleOkClick() {
  emit('handleOkClick', selectItemSkuVoCheck.value);
  clearQuantity()
}
/** 多选框选中数据 */
const handleSelectionChange = (selection) => {
  selectItemSkuVoCheck.value = selection
}

const toggleSelection = () => {
  props.selectedSku.forEach(selected => {
    const index = list.value.findIndex(it => selected.id=== it.id)
    if (index !== -1) {
      skuSelectFormRef.value.toggleRowSelection(list.value[index], true)
    }
  })
}

const judgeSelectable = (row) => {
  if (props.selectedSku.find(selected => selected.id === row.id)) {
    return false;
  }
  return true
}


function clearQuantity() {
  skuSelectFormRef.value.clearSelection()
}

const getVolumeText = (row) => {
  if((row.length || row.length === 0) && (row.width || row.width === 0) && (row.height || row.height === 0)) {
    return row.length + ' * ' + row.width + ' * ' + row.height
  }
  return ((row.length || row.length === 0) ? ('长：' + row.length) : '')
    + ((row.width || row.width === 0) ? (' 宽：' + row.width) : '')
    + ((row.height || row.height === 0) ? (' 高：' + row.height) : '')
}
const setWarehouseId = (warehouseId = null) => {
  query.warehouseId = warehouseId
}
const setProjectId = (projectId = null) => {
  query.projectId = projectId
}
defineExpose({
  setWarehouseId,
  setProjectId,
  getList,
  categoryType
})
</script>
<style lang="scss">
.el-table .my-cell {
  vertical-align: top
}
</style>
<style scoped lang="scss">
::v-deep .el-drawer__wrapper .el-drawer__body{
  overflow-y: auto !important;
}
</style>

