<template>
    <div class="app-container">
        <div class="head-container">
            <el-form ref="queryForm" :model="queryForm" :rules="queryRules" label-position="left" label-width="80px">
                <el-form-item label="入库内容">
                    <div class="shop_type_box">
                        <div class="item" v-for="item in inTabs" :key="item.value"
                            :class="{ active: inTabValue == item.value }" @click="tabChange(item.value, item.type)">
                            <div class="s_title">{{ item.label }}</div>
                            <div class="active_dot">
                                <i class="el-icon-check"></i>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="入库类型" v-if="inTabValue == 'goods'">
                    <div class="shop_type_box">
                        <div class="item" v-for="(item, index) in shopTypes" :key="index"
                            :class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
                            <div class="s_title">{{ item.label }}</div>
                            <div class="active_dot">
                                <i class="el-icon-check"></i>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="入库类型" v-else>
                    <div class="shop_type_box">
                        <div class="item" v-for="(item, index) in shopTypes2" :key="index"
                            :class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
                            <div class="s_title">{{ item.label }}</div>
                            <div class="active_dot">
                                <i class="el-icon-check"></i>
                            </div>
                        </div>
                    </div>
                </el-form-item>
                <el-row>
                    <el-col :span="8" v-if="shopTypes[shopTypesActive].value == 'purveyor'">
                        <el-form-item label="供应商" prop="purveyorId">
                            <el-select v-model="queryForm.purveyorId" placeholder="请选择供应商" style="width: 220px;">
                                <el-option :label="item.purveyorName" :value="item.id" v-for="item in purveyorList"
                                    :key="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="入库时间" prop="time">
                            <el-date-picker v-model="queryForm.time" type="date" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 220px;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="shopTypes[shopTypesActive].value == 'purveyor'">
                    <el-col :span="8">
                        <el-form-item label="应付金额">
                            <el-input v-model="queryForm.totalAmount" placeholder="请输入应收金额"
                                style="width: 220px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="实付金额">
                            <el-input v-model="queryForm.paidAmount" placeholder="请输入实收金额"
                                style="width: 220px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="shopTypes[shopTypesActive].value == 'purveyor'">
                    <el-col :span="8">
                        <el-form-item label="付款时间">
                            <el-date-picker v-model="queryForm.paidAt" type="date" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" placeholder="选择日期" style="width: 220px;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="批号">
                            <el-input v-model="queryForm.batchNumber" placeholder="请输入批号"
                                style="width: 220px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="备注">
                            <el-input v-model="queryForm.remark" placeholder="请输入备注" style="width: 220px;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="$refs.ConsumableList.show(tableData.list)"
                        v-if="inTabValue == 'consumable'">选择耗材</el-button>
                    <el-button type="primary" @click="$refs.shopList.show(tableData.list)" v-else>选择商品</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="head-container">
            <el-button type="primary" plain v-if="inTabValue == 'consumable'">
                共{{ tableData.list.length }}种耗材，金额合计<span style="color: red;">￥{{ queryForm.totalAmount }}</span>
            </el-button>
            <el-button type="primary" plain v-else>
                共{{ tableData.list.length }}种商品，金额合计<span style="color: red;">￥{{ queryForm.totalAmount }}</span>
            </el-button>
        </div>
        <div class="head-container">
            <el-table :data="tableData.list" v-if="inTabValue == 'consumable'">
                <el-table-column label="耗材名称" prop="conName">
                    <template v-slot="scope">
                        {{ scope.row.conName }}
                    </template>
                </el-table-column>
                <el-table-column label="进价">
                    <template v-slot="scope">
                        <el-input-number v-model="scope.row.price" :min="0" controls-position="right"
                            @change="consCountTotal()"></el-input-number>
                        <div class="tips">原价￥{{ scope.row.costPrice }}/{{ scope.row.conUnit }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="数量">
                    <template v-slot="scope">
                        <el-input-number v-model="scope.row.stockNumber" :min="0" controls-position="right"
                            @change="consCountTotal()"></el-input-number>
                        <div class="tips">入库前：{{ scope.row.number }}{{ scope.row.conUnit }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="小计">
                    <template v-slot="scope">
                        <!-- <el-input-number v-model="scope.row.totalAmount" :min="0"
                            controls-position="right"></el-input-number> -->
                        <el-input :value="formatDecimal(scope.row.price * scope.row.stockNumber)" readonly
                            style="width: 100px;" />
                    </template>
                </el-table-column>
                <!-- <el-table-column label="变动后剩余库存">
                    <template v-slot="scope">
                        {{ scope.row.stockNumber + scope.row.number }}{{ scope.row.conUnit }}
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" width="80">
                    <template v-slot="scope">
                        <el-button type="text" @click="tableData.list.splice(scope.$index, 1)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-table :data="tableData.list" v-else>
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column label="商品名称" prop="name">
                    <template v-slot="scope">
                        <div class="name_wrap">
                            <span class="name">{{ scope.row.name }}</span>
                            <span v-if="scope.row.specSnap" >({{ scope.row.specSnap }})</span>
                            <!-- <el-tag type="info" v-if="scope.row.specSnap" size="mini">{{ scope.row.specSnap }}</el-tag> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="进价">
                    <template v-slot="scope">
                        <el-input-number v-model="scope.row.costPrice" :min="0" controls-position="right"
                            @change="e => { modifyPrice(); scope.row.costPrice = e }"></el-input-number>
                        <div class="tips">成本价￥{{ scope.row.costPrice }}/{{ scope.row.unitName }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="数量">
                    <template v-slot="scope">
                        <el-input-number v-model="scope.row.number" :min="0" controls-position="right"
                            @change="e => { modifyPrice(); scope.row.totalAmount = e }"></el-input-number>
                        <div class="tips">入库前：{{ scope.row.stockNumber }}{{ scope.row.unitName }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="小计">
                    <template v-slot="scope">
                        <!-- <el-input-number v-model="scope.row.totalAmount" :min="0"
                            controls-position="right"></el-input-number> -->
                        <el-input :value="scope.row.costPrice * scope.row.number" readonly style="width: 100px;" />
                    </template>
                </el-table-column>
                <el-table-column label="变动后剩余库存">
                    <template v-slot="scope">
                        {{ scope.row.stockNumber + scope.row.number }}{{ scope.row.unitName }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template v-slot="scope">
                        <el-button type="text" @click="tableData.list.splice(scope.$index, 1)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <el-button type="primary" @click="submitHandle" :loading="queryFormLoading">确定</el-button>
        </div>
        <!-- 选择商品 -->
        <shopList ref="shopList" @success="selectShop" />
        <!-- 选择耗材 -->
        <ConsumableList ref="ConsumableList" @success="selectConsumable" />
        <el-dialog :visible.sync="showResult" :show-close="false" :close-on-press-escape="false"
            :close-on-click-modal="false">
            <el-result icon="success" title="入库提交成功" :subTitle="`共操作${tableData.list.length}件商品`">
                <template slot="extra">
                    <el-button type="primary" size="medium" @click="resetHandle">创建新的入库单</el-button>
                    <router-link to="/invoicing/operating_record">
                        <el-button size="medium">历史提交</el-button>
                    </router-link>
                </template>
            </el-result>
        </el-dialog>
    </div>
</template>

<script>
import dayjs from 'dayjs'
import shopList from './components/shopList'
import ConsumableList from './components/consumableList'
import { tbShopPurveyorGet, tbProductStockOperateOutAndOn, stockInOut } from '@/api/invoicing'
import { formatDecimal } from '@/utils'
export default {
    components: {
        shopList,
        ConsumableList
    },
    data() {
        return {
            formatDecimal,
            inTabValue: 'goods',
            inTabs: [
                {
                    label: '商品入库',
                    value: 'goods',
                    type: 'purveyor'
                },
                {
                    label: '耗材入库',
                    value: 'consumable',
                    type: 'in'
                }
            ],
            shopTypesActive: 0,
            shopTypes: [
                {
                    label: '供应商入库',
                    value: 'purveyor'
                },
                {
                    label: '其他入库',
                    value: 'purchase'
                }
            ],
            shopTypes2: [
                {
                    label: '供应商入库',
                    value: 'purveyor'
                },
            ],
            resetForm: '',
            queryFormLoading: false,
            queryForm: {
                batchNumber: '',
                list: [],
                paidAmount: 0,
                paidAt: '',
                purveyorId: '',
                purveyorName: '',
                remark: '',
                time: dayjs().format('YYYY-MM-DD'),
                totalAmount: 0,
                type: 'purveyor',
                shopId: localStorage.getItem('shopId')
            },
            queryRules: {
                purveyorId: [
                    {
                        required: true,
                        message: '请选择供应商',
                        trigger: 'change'
                    }
                ],
                time: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    }
                ]
            },
            purveyorList: [],
            tableData: {
                list: []
            },
            showResult: false
        }
    },
    mounted() {
        this.resetForm = { ...this.queryForm }
        this.tbShopPurveyorGet()
    },
    methods: {
        // 切换入库内容
        tabChange(value, type) {
            console.log(type);
            this.inTabValue = value
            this.shopTypesActive = 0
            this.resetHandle()
            this.queryForm.type = type
        },
        // 计算耗材总价
        consCountTotal() {
            let zong = 0
            this.tableData.list.forEach(ele => {
                zong += ele.price * ele.stockNumber
            })
            this.queryForm.totalAmount = formatDecimal(zong)
        },
        // 计算商品总价
        modifyPrice() {
            let zong = 0
            this.tableData.list.forEach(ele => {
                zong += ele.costPrice * ele.number
            })
            this.queryForm.totalAmount = formatDecimal(zong)
        },
        // 提交
        submitHandle() {
            this.$refs.queryForm.validate(async valid => {
                if (valid) {
                    try {
                        this.queryFormLoading = true
                        switch (this.inTabValue) {
                            case 'goods':
                                this.queryForm.list = this.tableData.list
                                await tbProductStockOperateOutAndOn(this.queryForm)
                                break;
                            case 'consumable':
                                this.queryForm.accountsPayable = this.queryForm.totalAmount
                                this.queryForm.actualPayment = this.queryForm.paidAmount
                                this.queryForm.paymentTime = this.queryForm.paidAt
                                this.queryForm.supplierId = this.queryForm.purveyorId
                                this.queryForm.list = this.tableData.list
                                await stockInOut(this.queryForm)
                                break;
                            default:
                                break;
                        }
                        this.queryFormLoading = false
                        this.showResult = true
                    } catch (error) {
                        console.log(error)
                        this.queryFormLoading = false
                    }
                }
            })
        },
        // 选择耗材
        selectConsumable(res) {
            this.tableData.list = res.map(item => {
                item.number = formatDecimal(item.stockNumber - item.stockConsume, 2, true)
                item.stockNumber = 0
                item.costPrice = item.price
                item.conInfold = item.id
                return item
            })
        },
        // 选择商品
        selectShop(res) {
            let arr = []
            res.forEach(item => {
                item.skuList.forEach(i => {
                    arr.push({
                        name: item.name,
                        unitName: item.unitName,
                        productId: item.id,
                        number: 0,
                        totalAmount: '',
                        ...i
                    })
                })
            })
            console.log(arr)
            this.tableData.list = arr
        },
        // 初始化
        resetHandle() {
            this.showResult = false
            this.queryForm = { ...this.resetForm }
            this.tableData.list = []
            this.$refs.queryForm.resetFields()
        },
        // 切换类型
        changeTypeEnum(index) {
            this.shopTypesActive = index
            this.queryForm.type = this.shopTypes[index].value
        },
        // 获取供应商列表
        async tbShopPurveyorGet() {
            try {
                const res = await tbShopPurveyorGet({
                    shopId: localStorage.getItem('shopId'),
                    page: 0,
                    size: 100
                })
                this.purveyorList = res.content
            } catch (error) {
                console.log(error)
            }
        }
    }
}
</script>

<style scoped lang="scss">
.name_wrap {
    display: flex;
    align-items: center;

    .name {
        margin-right: 10px;
    }
}
</style>