<template>
    <el-dialog width="80%" :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 v-model="isRefundStock"></el-switch>
                </div>
                <el-radio-group v-model="type">
                    <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">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column label="耗材名称">
                <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.consId" :label="item.conName"
                            :value="item.consId">
                        </el-option>
                    </el-select>
                    <div class="tips" v-if="scope.row.stockNumber">库存：{{ scope.row.stockNumber }}</div>
                </template>
            </el-table-column>
            <el-table-column label="单位">
                <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="使用数量">
                <template v-slot="scope">
                    <el-input-number v-model="scope.row.surplusStock" :min="0" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100px">
                <template v-slot="scope">
                    <div class="table_btn_wrap">
                        <div class="btn sub" @click="tableData.cons.splice(scope.$index, 1)">
                            <i class="el-icon-remove-outline"></i>
                        </div>
                        <div class="btn add" @click="createItem">
                            <i class="el-icon-circle-plus-outline"></i>
                        </div>
                    </div>
                </template>
            </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 {
                this.formLoading = true
                const res = await tbProskuConV2(this.tableData)
                this.formLoading = false
                this.$message.success('编辑成功')
                this.dialogVisible = false
            } catch (error) {
                console.log(error);
                this.formLoading = false
            }
        },
        // 选择耗材
        selectionChange(e, row) {
            let item = this.options.find(item => item.consId == 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
            if (obj.conInfos.length) {
                this.tableData.cons = [...obj.conInfos]
            } else {
                this.createItem()
            }
        },
        // 生成新关系项
        createItem() {
            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 = 0
            item.status = 1
            this.tableData.cons.push(item)
        },
        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;
        }
    }
}
</style>