<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, 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-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.shopList.show(tableData.list)">选择商品</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="head-container">
            <el-button type="primary" plain>
                共{{ tableData.list.length }}种商品，金额合计<span style="color: red;">￥{{ queryForm.totalAmount }}</span>
            </el-button>
        </div>
        <div class="head-container">
            <el-table :data="tableData.list">
                <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>
                            <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.guidePrice" :min="0" controls-position="right"
                            @change="e => scope.row.totalAmount = e * scope.row.number"></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 => scope.row.totalAmount = e * scope.row.guidePrice"></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>
                    </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" />
        <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 { tbShopPurveyorGet, tbProductStockOperateOutAndOn } from '@/api/invoicing'
export default {
    components: {
        shopList
    },
    data() {
        return {
            shopTypesActive: 0,
            shopTypes: [
                {
                    label: '供应商入库',
                    value: 'purveyor'
                },
                {
                    label: '其他入库',
                    value: 'purchase'
                }
            ],
            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: {
        // 提交
        submitHandle() {
            this.$refs.queryForm.validate(async valid => {
                if (valid) {
                    try {
                        this.queryFormLoading = true
                        this.queryForm.list = this.tableData.list
                        await tbProductStockOperateOutAndOn(this.queryForm)
                        this.queryFormLoading = false
                        this.showResult = true
                    } catch (error) {
                        console.log(error)
                        this.queryFormLoading = false
                    }
                }
            })
        },
        // 选择商品
        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 = []
        },
        // 切换类型
        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>