<template>
    <el-dialog top="5vh" :visible.sync="dialogVisible" :show-close="false" @close="reset">
        <div class="header_wrap">
            <div class="title">耗材信息</div>
            <div class="btn_wrap">
                <div class="refund_stock">
                    <span>退款退回库存</span>
                    <el-switch :active-value="1" :inactive-value="0" v-model="goodsDetail.isRefundStock"></el-switch>
                </div>
                <el-radio-group v-model="type" @change="typeChange">
                    <el-radio-button label="1">添加至商品</el-radio-button>
                    <el-radio-button label="2" v-if="goodsDetail.typeEnum == '多规格'">添加至规格</el-radio-button>
                </el-radio-group>
            </div>
        </div>
        <div class="name_wrap">
            <div class="name">商品名：{{ goodsDetail.name }}</div>
        </div>
        <!-- 绑定到商品 -->
        <el-table :data="tableData.cons" border v-show="type == 1">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column label="耗材名称" prop="conInfoId">
                <template v-slot="scope">
                    <el-select v-model="scope.row.conInfoId" filterable remote reserve-keyword placeholder="请输入关键词"
                        :remote-method="remoteMethod" :loading="loading" @change="selectionChange($event, scope.row)">
                        <el-option v-for="item in options" :key="item.id" :label="item.conName" :value="item.id">
                        </el-option>
                    </el-select>
                    <div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div>
                </template>
            </el-table-column>
            <el-table-column label="单位" prop="conUnit">
                <template v-slot="scope">
                    <span v-if="scope.row.conInfoId">{{ scope.row.conUnit }}</span>
                    <span v-else>请选择耗材</span>
                </template>
            </el-table-column>
            <el-table-column label="使用数量" prop="surplusStock">
                <template v-slot="scope">
                    <el-input-number v-model="scope.row.surplusStock" :min="0" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template v-slot="scope">
                    <div class="table_btn_wrap">
                        <div class="btn sub" v-if="tableData.cons.length > 1"
                            @click="tableData.cons.splice(scope.$index, 1)">
                            <i class="el-icon-remove-outline"></i>
                        </div>
                        <div class="btn add" v-if="scope.$index == tableData.cons.length - 1"
                            @click="createItem(scope.row)">
                            <i class="el-icon-circle-plus-outline"></i>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!-- 绑定到规格 -->
        <el-table :data="tableData.cons" border v-show="type == 2">
            <el-table-column label="序号" type="index" width="100"></el-table-column>
            <el-table-column label="规格名称" prop="specSnap"></el-table-column>
            <el-table-column label="耗材" width="600">
                <el-table-column label="耗材信息">
                    <template v-slot="scope">
                        <div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
                            <el-select v-model="item.conInfoId" filterable remote reserve-keyword placeholder="请输入关键词"
                                :remote-method="remoteMethod" :loading="loading"
                                @change="skuSelectionChange($event, item)">
                                <el-option v-for="item in options" :key="item.id" :label="item.conName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="耗材单位">
                    <template v-slot="scope">
                        <div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
                            <div class="t">
                                <span v-if="item.conInfoId">{{ item.conUnit }}</span>
                                <span v-else>请选择耗材</span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="消耗量">
                    <template v-slot="scope">
                        <div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
                            <el-input-number v-model="item.surplusStock" :min="1" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template v-slot="scope">
                        <div class="sku_table_item" v-for="(item, index) in scope.row.consList" :key="index">
                            <div class="table_btn_wrap t">
                                <div class="btn sub" v-if="scope.row.consList.length > 1"
                                    @click="scope.row.consList.splice(index, 1)">
                                    <i class="el-icon-remove-outline"></i>
                                </div>
                                <div class="btn add" v-if="index == scope.row.consList.length - 1"
                                    @click="skuCreateItem(scope.$index)">
                                    <i class="el-icon-circle-plus-outline"></i>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" :loading=formLoading @click="onSubmitHandle">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { gettbConsInfo, tbProskuConV2 } from "@/api/consumable"
export default {
    data() {
        return {
            dialogVisible: false,
            type: '1',
            isRefundStock: true,
            goodsDetail: '',
            tableData: {
                productId: '',
                cons: [],
            },
            loading: false,
            options: [],
            formLoading: false
        }
    },
    mounted() {
        this.gettbConsInfo()
    },
    methods: {
        // 提交
        async onSubmitHandle() {
            try {
                // let flag = true

                // this.tableData.cons.map(item => {
                //     if (!item.conInfoId) {
                //         flag = false
                //     }
                // })

                // if (!flag) {
                //     this.$message.error('请完善信息')
                //     return
                // }

                let res = null
                this.formLoading = true
                if (this.type == 1) {
                    res = await tbProskuConV2(this.tableData)
                } else if (this.type == 2) {
                    let data = { ...this.tableData }

                    let arr = []

                    data.cons.map(item => {
                        item.consList.map(val => {
                            if (val.name) {
                                let obj = { ...item }
                                obj.id = val.id
                                obj.name = val.name
                                obj.productSkuId = item.productSkuId
                                obj.conInfoId = val.conInfoId
                                obj.surplusStock = val.surplusStock
                                arr.push(obj)
                            }
                        })
                    })

                    data.cons = arr
                    res = await tbProskuConV2(data)
                }
                this.formLoading = false
                this.$message.success('编辑成功')
                this.dialogVisible = false
                this.$emit('refundChange', this.goodsDetail)
            } catch (error) {
                console.log(error);
                this.formLoading = false
            }
        },
        // 商品选择耗材
        selectionChange(e, row) {
            let item = this.options.find(item => item.id == e)
            row.name = item.conName
            row.conUnit = item.conUnit
        },
        // 规格选择耗材
        skuSelectionChange(e, row) {
            let item = this.options.find(item => item.id == e)
            row.name = item.conName
            row.conUnit = item.conUnit
        },
        // 远程搜索耗材
        remoteMethod(query) {
            if (query !== '') {
                this.gettbConsInfo(query)
            }
        },
        // 获取耗材列表
        async gettbConsInfo(query = '') {
            try {
                this.loading = true;
                const res = await gettbConsInfo({
                    page: 0,
                    size: 100,
                    shopId: localStorage.getItem("shopId"),
                    conName: query,
                })
                this.loading = false;
                this.options = res.content;
            } catch (error) {
                console.log(error);
            }
        },
        // 显示
        show(obj) {
            this.dialogVisible = true
            this.goodsDetail = { ...obj }
            this.tableData.productId = this.goodsDetail.id
            this.type = this.goodsDetail.isSaveSku

            this.initItem()
        },
        // 切换类型
        typeChange() {
            this.initItem(true)
        },
        // 初始化绑定耗材项
        initItem(radio = false) {
            this.tableData.cons = []
            if (this.type == 1) {
                // 添加至商品
                if (radio) {
                    let item = {}
                    item.id = ''
                    item.shopId = localStorage.getItem('shopId')
                    item.productId = this.goodsDetail.id
                    item.productSkuId = 0
                    item.conInfoId = ''
                    item.name = ''
                    item.conUnit = ''
                    item.surplusStock = 1
                    item.status = 1
                    this.tableData.cons.push(item)
                } else {
                    if (this.goodsDetail.conInfos.length) {

                        this.goodsDetail.conInfos.map(val => {
                            let item = {}

                            item.id = val.id
                            item.shopId = val.shopId
                            item.productId = val.productId
                            item.productSkuId = 0
                            item.conInfoId = val.conInfoId
                            item.name = ''
                            item.conUnit = val.conUnit
                            item.surplusStock = val.surplusStock
                            item.status = 1
                            item.specSnap = ''

                            this.tableData.cons.push(item)
                        })
                    } else {
                        let item = {}
                        item.id = ''
                        item.shopId = localStorage.getItem('shopId')
                        item.productId = this.goodsDetail.id
                        item.productSkuId = 0
                        item.conInfoId = ''
                        item.name = ''
                        item.conUnit = ''
                        item.surplusStock = 1
                        item.status = 1
                        this.tableData.cons.push(item)
                    }
                }
            } else {
                // 添加至规格
                this.goodsDetail.skuList.map(val => {
                    let item = {}

                    item.id = ''
                    item.shopId = localStorage.getItem('shopId')
                    item.productId = this.goodsDetail.id
                    item.productSkuId = val.id
                    item.conInfoId = ''
                    item.name = ''
                    item.conUnit = ''
                    item.surplusStock = 1
                    item.status = 1
                    item.specSnap = val.name

                    item.consList = [
                        {
                            surplusStock: 0,
                            conInfoId: '',
                            name: '',
                            conUnit: ''
                        }
                    ]

                    this.tableData.cons.push(item)
                })

                if (this.goodsDetail.conInfos.length) {
                    this.tableData.cons.map(val => {
                        this.goodsDetail.conInfos.map(item => {
                            if (item.productSkuId == val.productSkuId) {
                                if (val.consList.length == 1 && val.consList[0].conInfoId == '') {
                                    val.consList = []
                                    val.consList.push({
                                        id: item.id,
                                        surplusStock: item.surplusStock,
                                        conInfoId: item.conInfoId,
                                        name: item.conName,
                                        conUnit: item.conUnit
                                    })
                                } else {
                                    val.consList.push({
                                        id: item.id,
                                        surplusStock: item.surplusStock,
                                        conInfoId: item.conInfoId,
                                        name: item.conName,
                                        conUnit: item.conUnit
                                    })
                                }
                            }
                        })
                    })
                }
            }
        },
        // 生成新商品绑定耗材关系项
        createItem(val) {
            let item = {}

            item.id = ''
            item.shopId = localStorage.getItem('shopId')
            item.productId = this.goodsDetail.id
            item.productSkuId = 0
            item.conInfoId = ''
            item.name = ''
            item.conUnit = ''
            item.surplusStock = 1
            item.status = 1

            this.tableData.cons.push(item)
        },
        // 规格生成新关系项
        skuCreateItem($index) {
            this.tableData.cons[$index].consList.push({
                conInfoId: '',
                name: '',
                conUnit: '',
                surplusStock: 0
            })
        },
        reset() {
            this.goodsDetail = ''
            this.tableData.productId = ''
            this.tableData.cons = []
        }
    }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__header {
    padding: 0;
}

.header_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
        font-size: 16px;
        font-weight: bold;
    }

    .btn_wrap {
        display: flex;
        align-items: center;

        .refund_stock {
            display: flex;
            align-items: center;
            margin-right: 20px;

            span {
                margin-right: 6px;
            }
        }
    }
}

.name_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
}

.table_btn_wrap {
    display: flex;
    align-items: center;
    gap: 16px;

    .btn {
        font-size: 26px;

        &.sub {
            color: #FF4D4F;
        }

        &.add {
            color: #52C41A;
        }
    }
}

.cons_list_wrap {
    .row {
        display: flex;
        padding: 10px 0;
        align-items: center;
        gap: 10px;

        .item {
            flex: 1;
            display: flex;
            align-items: center;
        }
    }
}

.sku_table_item {
    padding: 10px 0;

    .t {
        height: 32px;
        display: flex;
        align-items: center;
    }
}
</style>