<template>
    <div>
        <el-card class="el-card">
            <el-row style="margin-bottom: 20px;">
                <el-button type="primary" @click="batchSetParams(null,'salesListNo')">批量设置销售清单</el-button>
                <el-button type="primary" @click="batchSetParams(null, 'firstSalesInvNo')">批量设置销售发票第一票</el-button>
                <el-button type="primary" @click="batchSetParams(null, 'secSalesInvNo')">批量设置销售发票第二票</el-button>
            </el-row>

            <el-table v-loading="detailLoading"
                      :data="detailList"
                      @selection-change="changeFun"
                      style="width: 100%">

                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>

                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column label="产品通用名" width="200" prop="productName"></el-table-column>
                <el-table-column label="包装规格" width="200" prop="spec"></el-table-column>
                <el-table-column label="批次号" width="100" prop="batchNo"></el-table-column>

                <el-table-column label="生产日期" width="120" prop="productDate"></el-table-column>
                <el-table-column label="失效日期" width="120" prop="expireDate"></el-table-column>
                <el-table-column label="单据数量" width="100" prop="count"></el-table-column>
                <el-table-column label="实际数量" width="100" prop="reCount"></el-table-column>
                <el-table-column label="价格" width="120" prop="price"></el-table-column>
                <el-table-column label="销售清单号（第二票）" width="180" prop="secSalesListNo">
                    <template slot-scope="scope">
                        <el-input :disabled="scope.$index !== currentCheckIndex" v-model="scope.row.secSalesListNo"
                                  placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="销售发票号（第一票）" width="180" prop="firstSalesInvNo">
                    <template slot-scope="scope">
                        <el-input :disabled="scope.$index !== currentCheckIndex" v-model="scope.row.firstSalesInvNo"
                                  placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="销售发票号（第二票）" width="180" prop="secSalesInvNo">
                    <template slot-scope="scope">
                        <el-input :disabled="scope.$index !== currentCheckIndex" v-model="scope.row.secSalesInvNo"
                                  placeholder="请输入"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="发票日期" width="150" prop="invoiceDate">
                    <template slot-scope="scope">
                        <el-date-picker :disabled="scope.$index !== currentCheckIndex" format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                                        v-model="scope.row.invoiceDate" style="width: 100%;"></el-date-picker>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" prop="price" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                            type="text"
                            size="small"
                            @click="handleSave(scope.$index, scope.row)"
                        >保存
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                :page-size="detailQuery.limit"
                @current-change="detailHandleCurrentChange"
                layout="prev, pager, next"
                :total="detailTotal"
            >
            </el-pagination>
        </el-card>

        <el-dialog v-bind:width="'25%'" :visible.sync="salesListNoFormVisible" append-to-body>
            <el-form :model="batchForm">
                <label></label>
                <el-form-item label="销售清单：" :label-width="formLabelWidth">
                    <el-input style="width: 80%;;" v-model="batchForm.secSalesListNo" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="salesListNoFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="batchSetParams('1','salesListNo')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog v-bind:width="'25%'" :visible.sync="firstSalesInvNoFormVisible" append-to-body>
            <el-form :model="batchForm">
                <label></label>
                <el-form-item label="销售发票第一票：" :label-width="formLabelWidth">
                    <el-input style="width: 80%;;" v-model="batchForm.firstSalesInvNo" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="firstSalesInvNoFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="batchSetParams('1','firstSalesInvNo')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog v-bind:width="'25%'" :visible.sync="secSalesInvNoFormVisible" append-to-body>
            <el-form :model="batchForm">
                <label></label>
                <el-form-item label="销售发票第二票：" :label-width="formLabelWidth">
                    <el-input style="width: 80%;" v-model="batchForm.secSalesInvNo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="发票日期：" :label-width="formLabelWidth">
                    <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                                    v-model="batchForm.invoiceDate" style="width: 80%;"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="secSalesInvNoFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="batchSetParams('1','secSalesInvNo')">确 定</el-button>
            </div>
        </el-dialog>


    </div>

</template>

<script>
import {stockOrderDetail, updateStockOrderDetail} from "@/api/inout/stockOrder";

export default {
    name: "stockOrderEdit",
    props: {
        detailList: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            detailQuery: {
                orderIdFk: "",
                page: 1,
                limit: 20
            },
            batchForm: {
                secSalesListNo: '',
                firstSalesInvNo: '',
                secSalesInvNo: '',
                invoiceDate: ''
            },
            multipId: [],
            currentCheckIndex: -1,
            salesListNoFormVisible: false,
            firstSalesInvNoFormVisible: false,
            secSalesInvNoFormVisible: false,
        }
    },
    methods: {
        handleEdit(index, row) {
            this.currentCheckIndex = index;
            console.log(this.currentCheckIndex)
        },
        handleSave(index, row) {
            this.currentCheckIndex = -1;

            updateStockOrderDetail(row).then((res) => {
                if (res.code == 20000) {
                    this.$message.success(res.data);
                }
            })
        },
        changeFun(row) {
            let _this = this;
            _this.multipId = []; //每次改动重置ID
            row.forEach((item) => {
                _this.multipId.push(item.id);
            })
            console.log(this.multipId);
        },
        batchSetParams(flag, type) {
            if (flag == '1' && type == 'salesListNo') {

                if (this.$isBlank(this.batchForm.secSalesListNo)) {
                    this.$message.warning("请输入销售清单");
                    return;
                }

                this.salesListNoFormVisible = false;
                this.detailList.forEach(data => {
                    this.multipId.forEach(id => {
                        if (data.id == id) {
                            data.secSalesListNo = this.batchForm.secSalesListNo;
                            //更新到数据库
                            updateStockOrderDetail(data);
                        }
                    })
                });
                //置空批量设置表单
                Object.keys(this.batchForm).forEach(key => this.batchForm[key] = '');
            } else if (flag == '1' && type == 'firstSalesInvNo') {
                if (this.$isBlank(this.batchForm.firstSalesInvNo)) {
                    this.$message.warning("请输入销售发票第一票");
                    return;
                }
                this.firstSalesInvNoFormVisible = false;
                this.detailList.forEach(data => {
                    this.multipId.forEach(id => {
                        if (data.id == id) {
                            data.firstSalesInvNo = this.batchForm.firstSalesInvNo;
                            //更新到数据库
                            updateStockOrderDetail(data);
                        }
                    })
                });
                Object.keys(this.batchForm).forEach(key => this.batchForm[key] = '');
            } else if (flag == '1' && type == 'secSalesInvNo') {
                if (this.$isBlank(this.batchForm.secSalesInvNo)) {
                    this.$message.warning("请输入销售发票第二票");
                    return;
                }
                this.secSalesInvNoFormVisible = false;
                this.detailList.forEach(data => {
                    this.multipId.forEach(id => {
                        if (data.id == id) {
                            data.secSalesInvNo = this.batchForm.secSalesInvNo;
                            data.invoiceDate = this.batchForm.invoiceDate;
                            //更新到数据库
                            updateStockOrderDetail(data);
                        }
                    })
                });
                Object.keys(this.batchForm).forEach(key => this.batchForm[key] = '');
            } else {
                if (this.multipId.length == 0) {
                    this.$message.warning("请选择数据");
                } else {
                    switch (type) {
                        case 'salesListNo':
                            this.salesListNoFormVisible = true;
                            return;
                        case 'firstSalesInvNo':
                            this.firstSalesInvNoFormVisible = true;
                            return;
                        case 'secSalesInvNo':
                            this.secSalesInvNoFormVisible = true;
                            return;
                        default:
                            return;
                    }
                }
            }
        },

        detailHandleCurrentChange(val) {
            this.query.page = val;
            this.getStockOrderDetailList();
        },
        getStockOrderDetailList(row) {
            if (this.$isNotBlank(row)) {
                this.detailQuery.orderIdFk = row.id;
            }
            this.detailLoading = true;
            stockOrderDetail(this.detailQuery)
                .then((response) => {
                    console.log(response)
                    this.detailLoading = false;
                    this.detailList = response.data.list || [];
                })
                .catch(() => {
                    this.detailLoading = false;
                    this.detailList = [];
                });
        },
    },
}
</script>

<style scoped>

</style>
