<template>
    <div>
        <div>
            <el-button
                type="primary"
                @click="dialogShop = true"
                v-perms="['store_order.store_order/cart_info_add']"
            >
                追加商品
            </el-button>
            <el-table
                :data="pager.lists"
                v-loading="pager.loading"
                @selection-change="handleSelectionChange"
            >
                <el-table-column
                    label="商品信息"
                    prop="store_name"
                    show-overflow-tooltip
                    width="400"
                >
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <el-image
                                :src="row.image"
                                class="w-16 h-16 mr-2"
                                :preview-teleported="true"
                            ></el-image>
                            <div>{{ row.store_name }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="规格" prop="sku_name" show-overflow-tooltip />
                <el-table-column label="结算单价" prop="price" show-overflow-tooltip />
                <el-table-column label="数量" prop="cart_num" show-overflow-tooltip />
                <el-table-column label="合计" prop="total_price" show-overflow-tooltip />
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button
                            v-perms="['store_order.store_order/cart_info_edit']"
                            type="primary"
                            link
                            @click="handleEdit(row)"
                        >
                            编辑
                        </el-button>
                        <el-button
                            v-perms="['store_order.store_order/cart_info_delete']"
                            type="danger"
                            link
                            @click="handleDelete(row.id)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex mt-4 justify-end" v-if="pager.lists.length < pager.count">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </div>
    <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
    <el-dialog v-model="dialogShop" title="追加商品" width="1200">
        <el-form ref="formRef" :model="updateInfo" label-width="90px">
            <div class="mb-2">
                <el-button type="primary" @click="showProduct = true">添加商品</el-button>
            </div>
            <el-table :data="productList">
                <el-table-column label="商品ID" prop="id" show-overflow-tooltip />

                <el-table-column label="商品图片" prop="image" min-width="80">
                    <template #default="{ row }">
                        <el-image
                            style="width: 50px; height: 50px"
                            :src="row.image"
                            :preview-teleported="true"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    label="商品名称"
                    prop="store_name"
                    min-width="180"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="分类"
                    prop="cate_name"
                    min-width="80"
                    show-overflow-tooltip
                />
                <el-table-column
                    label="单位"
                    prop="unit_name"
                    min-width="80"
                    show-overflow-tooltip
                />
                <el-table-column label="数量" min-width="150">
                    <template #default="{ row }">
                        <el-input v-model="row.cart_num" @change="handleChange(row)" />
                    </template>
                </el-table-column>
                <el-table-column label="价格" min-width="150">
                    <template #default="{ row }">
                        <el-input v-model="row.price" @change="handleChange(row)" />
                    </template>
                </el-table-column>
                <el-table-column label="总价" min-width="150">
                    <template #default="{ row }">
                        <el-input v-model="row.total_price" />
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="danger" link @click="handleDeleteProdut(row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogShop = false">取消</el-button>
                <el-button type="primary" @click="goodsOfferUpdate"> 确认 </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="showProduct" title="选择商品" width="70%">
        <product-pop @onBindStore="onBindProduct" :store_id="store_id" :is_branch="1"></product-pop>
    </el-dialog>
</template>

<script lang="ts" setup name="storeTable">
import { usePaging } from '@/hooks/usePaging'
import { useDictData } from '@/hooks/useDictOptions'
import {
    apiStoreOrderCartInfo,
    apiStoreOrderCartInfoAdd,
    apiStoreOrderCartInfoDel
} from '@/api/store_order'
import { timeFormat } from '@/utils/util'
import feedback from '@/utils/feedback'
import EditPopup from './editProduct.vue'

const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const store_id = ref(0)
const showEdit = ref(false)
const dialogShop = ref(false)
const showProduct = ref(false) // 选择商品列表是否显示
// 商品列表
const productList = ref([])
// 删除已有商品
const handleDeleteProdut = (id: number) => {
    productList.value = productList.value.filter((item: any) => item.id !== id)
}
// 选择商品
const onBindProduct = (e: any[]) => {
    e.forEach((item: any) => {
        if (!productList.value.find((t: any) => t.id == item.id)) {
            productList.value.push(item)
        }
    })
    showProduct.value = false
}
const emit = defineEmits(['change'])

// 选中的数据
const selectionList = ref([])

// 选中数据时触发
const handleSelectionChange = (val: any) => {
    selectionList.value = val
    emit('change', selectionList.value)
}

// 查询条件
const queryParams = reactive({
    oid: '',
    pay_type: ''
})
function handleChange(row) {
    row.total_price = row.cart_num * row.price
}
const updateInfo = ref({})

const goodsOfferUpdate = () => {
    const product_arr = productList.value.map((item: any) => {
        return {
            product_id: item.product_id,
            cart_num: item.cart_num || 0,
            price: item.price || 0
        }
    })
    apiStoreOrderCartInfoAdd({
        oid: queryParams.oid,
        product_arr: product_arr
    }).then((res) => {
        dialogShop.value = false
        getLists()
    })
}
// 获取字典数据
const { dictData } = useDictData('')

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiStoreOrderCartInfo,
    params: queryParams
})

const getList = (e: any) => {
    queryParams.oid = e.oid
    store_id.value = e.store_id
    console.log(store_id.value)
    getLists()
}
// 编辑
const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.setFormData(data)
}

// 删除
const handleDelete = async (id: number | any[]) => {
    await feedback.confirm('确定要删除？')
    await apiStoreOrderCartInfoDel({ id: id })
    getLists()
}
defineExpose({
    getList,
    getLists
})
</script>
