<template>
    <div>
        <div class="search">
            <el-form ref="advancedForm" :model="advancedForm" label-width="160px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="解冻时间">
                            <el-date-picker v-model="time" type="daterange" 
                                align="center" :editable="false" unlink-panels :clearable="true"
                                :default-time="['00:00:00', '23:59:59']" range-separator="-" start-placeholder="开始日期"
                                value-format="timestamp" end-placeholder="结束日期" :picker-options="{
                                    disabledDate(time) {

                                    },
                                    shortcuts: MixinPickerShortcuts,
                                }"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <el-select v-model="advancedForm.status" clearable>
                                <el-option label="解冻" :value="true" />
                                <el-option label="未解冻" :value="false" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-button @click="advancedSearchEvent"> 搜索 </el-button>
        </div>
        <en-table-layout :tableData="tableData.records" ref="table" :loading="loading"
            @selection-change="handleSelectionChange">
            <div slot="toolbar" class="inner-toolbar">
                <!--    <div class="toolbar-btns">
        
          </div> -->
            </div>

            <template slot="table-columns">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="order_sn" label="单据编号">
                </el-table-column>
                <el-table-column label="单据类型" prop="order_type">
                    <template slot-scope="scope">
                        {{ typeName(scope.row.order_type) }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="status">
                    <template slot-scope="scope">
                        {{ scope.row.status ? '解冻' : '未解冻' }}
                    </template>
                </el-table-column>
                <el-table-column prop="locked_num" label="冻结个数" />
                <el-table-column prop="locked_time" label="冻结时间">
                </el-table-column>
                <el-table-column prop="un_locked_num" label="解冻个数" />
                <el-table-column prop="un_locked_time" label="解冻时间" />
                <!-- <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button type="success1" size="mini" v-if="checkPermission(['goodsTransfer:submit'])"
                @click="handleSubmitGoodsTransfer(scope.row)">设置预警库存</el-button>
               <el-button type="success1" size="mini"
                v-if="scope.row.allowable.submit && checkPermission(['goodsTransfer:submit'])"
                @click="handleSubmitGoodsTransfer(scope.row)">提交</el-button>
              <el-button type="danger" size="mini"
                v-else-if="scope.row.allowable.withdraw && checkPermission(['goodsTransfer:withdraw'])"
                @click="handleWithdrawGoodsTransfer(scope.row)">撤回</el-button> 
              <el-button size="mini" @click="handleEditGoodsTransfer(scope.row)"
                >查看</el-button
              >
              <el-button size="mini" @click="handleDelGoodsTransfer(scope.row)"
                >删除</el-button
              >
              <el-button size="mini" v-if="scope.row.allowable.confirm && checkPermission(['goodsTransfer:confirm'])"
                @click="handleSuccessGoodsTransfer(scope.row)" type="success">确认</el-button>
              <el-button size="mini" v-if="scope.row.allowable.confirm && checkPermission(['goodsTransfer:return'])"
                @click="handleRejectGoodsTransfer(scope.row)" type="danger">退回</el-button> 
            </template>
          </el-table-column>-->
            </template>

            <el-pagination v-if="tableData" slot="pagination" @size-change="handlePageSizeChange"
                @current-change="handlePageCurrentChange" :current-page="tableData.pages"
                :page-sizes="[10, 20, 50, 100]" :page-size="tableData.size"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
            </el-pagination>
        </en-table-layout>
        <!--  <el-dialog title="在途明细" :visible.sync="dialogVisible" append-to-body :close-on-click-modal="false"
            :close-on-press-escape="false">
            <el-table :data="transitDetails" border class="sku-table">
                <el-table-column prop="order_sn" label="订单编号" />
                <el-table-column prop="num" label="在途数量" />
                <el-table-column prop="end_time" label="返回日期" />
            </el-table>
        </el-dialog>
        <el-dialog title="设置预警数量" :visible.sync="numDialogVisible" append-to-body :close-on-click-modal="false"
            :close-on-press-escape="false" width="30%">
            <el-form ref="numAddForm" :model="numAddForm" :rules="numAddFormRule" label-width="160px" inline
                class="change-form">
                <el-form-item label="预警数量" prop="num" class="change-form-item">
                    <el-input v-model="numAddForm.num" placeholder="请输入"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="numDialogVisible = false">取 消</el-button>
                <el-button @click="submitNum" type="primary">确 定</el-button>
            </span>
        </el-dialog> -->
    </div>
</template>

<script>
import * as API_GoodsTransfer from "@/api/goodsTransfer";
import * as API_Setting from "@/api/setting";
import * as API_BasicSetting from "@/api/basicSetting";
import { mapGetters } from "vuex";
export default {
    name: "GoodsTransfer",
    data() {
        return {
            warehouseList: [],
            goodstransferType: [],
            // 列表loading状态
            loading: false,
            // 列表参数
            params: {
                page_no: 1,
                page_size: 10,
            },
            // 高级搜索数据
            advancedForm: {},
            // 列表数据
            tableData: "",
            // 当前已选择的行
            multipleSelection: [],
            GoodsTransferForm: {},
            dialogVisible: false,
            // 在途明细
            transitDetails: [],
            numDialogVisible: false,
            numAddForm: {},
            stockId: '',//选择的id
            numAddFormRule: {
                num: [{
                    required: true,
                    message: '请输入预警库存数量',
                    trigger: 'blur'
                },
                {
                    validator: (rule, value, callback) => {
                        if (/^(?:[1-9]\d*)$/.test(value) == false) {
                            callback(new Error("请输入正整数"));
                        } else {
                            callback();
                        }
                    },
                    trigger: "blur",
                },
                ],
            },
            selectedRow: null, // 用于记录当前选中的行
            orderDetailTypeL: [],
            time:[]
        };
    },
    mounted() {
        this.GET_GoodsTransferList();
        this.GET_DictDataInfo();
        this.GET_WarehouseList();
    },
    watch: {
        $route: function ({ query }) {
            this.params.page_no = 1;
            this.GET_GoodsTransferList();
        },
    },
    computed: {
        ...mapGetters(["user"]),
    },
    methods: {
        typeName(val) {
            let name = "";
            this.orderDetailType.map((el) => {
                if (el.value == val) {
                    return (name = el.label);
                }
            });
            return name;
        },
        /* 提交预警数量 */
        submitNum() {
            console.log(this.$refs["numAddForm"]);
            this.$refs["numAddForm"].validate((valid) => {
                if (valid) {
                    API_GoodsTransfer.updateWarnStock(this.stockId, this.numAddForm.num).then(res => {
                        this.numDialogVisible = false
                        this.numAddForm = {}
                        this.$message.success('预警库存设置成功!')
                        this.GET_GoodsTransferList();
                    })
                }
            })
        },
        // 删除
        handleDelGoodsTransfer(row) {
            this.$confirm("确定要删除这些库存吗？", "提示", { type: "warning" })
                .then(() => {
                    const ids = []
                    ids.push(row.id)
                    API_GoodsTransfer.deleteGoodsTransfer({ ids: ids }).then((res) => {
                        this.$message.success("删除成功！");
                        this.ids = []
                        this.GET_GoodsTransferList();
                    });
                })
                .catch(() => { });
        },
        // 导出
        checkExport() { },
        // 查看在途
        lookTransit() {
            if (!this.selectedRow) return this.$message.error('请先选择！')
            API_GoodsTransfer.transitDetail(this.selectedRow.id).then(res => {
                console.log(res);
                this.dialogVisible = true;
                this.transitDetails = res
            })
        },
        handleSuccessGoodsTransfer(row) {
            API_GoodsTransfer.successGoodsTransfer(row.id, {
                in_handled_by_id: this.user.uid,
                in_handled_by_name: this.user.username,
            }).then(() => {
                this.$message.success("确认成功！");
                this.GET_GoodsTransferList();
            });
        },
        handleRejectGoodsTransfer(row) {
            API_GoodsTransfer.rejectGoodsTransfer(row.id, {
                in_handled_by_id: this.user.uid,
                in_handled_by_name: this.user.username,
            }).then(() => {
                this.$message.success("退回成功！");
                this.GET_GoodsTransferList();
            });
        },
        /** 获取仓库 */
        GET_WarehouseList() {
            API_BasicSetting.getWarehouseListAll().then((response) => {
                this.warehouseList = response;
            });
            API_Setting.getPage({ dictType: "order_detail_type" }).then((res) => {
                this.orderDetailType = res.data;
            });
        },
        typeFilter(row) {
            return this.goodstransferType.find((type) => type.value === row).label;
        },
        GET_DictDataInfo() {
            API_Setting.getDictDataInfo("erp_goodstransfer_type").then((res) => {
                this.goodstransferType = res;
            });
        },
        handleSubmitGoodsTransfer(row) {
            this.stockId = row.id
            this.numDialogVisible = true
            /* API_GoodsTransfer.submitGoodsTransfer(row.id).then(() => {
              this.$message.success("提交成功！");
              this.GET_GoodsTransferList();
            }); */
        },
        handleWithdrawGoodsTransfer(row) {
            API_GoodsTransfer.withdrawGoodsTransfer(row.id).then(() => {
                this.$message.success("撤回成功！");
                this.GET_GoodsTransferList();
            });
        },
        /** 调拨单状态 */
        statusFilter(val) {
            switch (val) {
                case "NotSubmit":
                    return "未提交";
                case "Submit":
                    return "已提交";
                case "Confirm":
                    return "已确认";
                case "AuditReject ":
                    return "已退回";
                default:
                    return "";
            }
        },
        handleDeleteGoodsTransfer() {
            if (!this.multipleSelection || !this.multipleSelection.length)
                return this.$message.error("请先选择！");
            this.$confirm("确定要删除这些库存吗？", "提示", { type: "warning" })
                .then(() => {
                    const ids = this.multipleSelection.map((item) => item.id);
                    API_GoodsTransfer.deleteGoodsTransfer({ ids: ids }).then(() => {
                        this.$message.success("删除成功！");
                        this.GET_GoodsTransferList();
                    });
                })
                .catch(() => { });
        },
        /** 多选改变 */
        handleSelectionChange(selection, row) {
            if (selection.length > 0) {
                const lastSelected = selection[selection.length - 1];
                if (this.selectedRow && this.selectedRow !== lastSelected) {
                    this.selectedRow = lastSelected;
                } else {
                    this.selectedRow = lastSelected;
                }
            } else {
                this.selectedRow = null;
            }
        },
        selectableRow(row, index) {
            // 这个方法决定了哪些行是可选的
            return !this.selectedRow || this.selectedRow === row;
        },
        /** 分页大小发生改变 */
        handlePageSizeChange(size) {
            this.params.page_size = size;
            this.GET_GoodsTransferList();
        },

        /** 分页页数发生改变 */
        handlePageCurrentChange(page) {
            this.params.page_no = page;
            this.GET_GoodsTransferList();
        },

        /** 添加商品调拨 */
        handleAddGoodsTransfer() {
            this.$router.push({
                name: "goodsTransferAdd",
                params: { callback: this.GET_GoodsTransferList },
            });
        },
        /** 编辑商品调拨 */
        handleEditGoodsTransfer(row) {
            this.$router.push({
                name: "goodsTransferDetail",
                params: { id: row.id },
            });
        },
        /** 搜索事件触发 */
        searchEvent(data) {
            this.params = {
                ...this.params,
                sn: data,
            };
            Object.keys(this.advancedForm).forEach((key) => delete this.params[key]);
            this.params.page_no = 1;
            this.GET_GoodsTransferList();
        },
        /** 高级搜索事件触发 */
        advancedSearchEvent() {
            /*  delete this.params.start_time;
             delete this.params.end_time;
             if (this.advancedForm.purchasePlan_time_range) {
                 this.advancedForm.start_time = this.advancedForm.purchasePlan_time_range[0];
                 this.advancedForm.end_time = this.advancedForm.purchasePlan_time_range[1];
             } */

            this.advancedForm.start_time = this.time[0];
            this.advancedForm.end_time = this.time[1];
            this.params = {
                ...this.params,
                ...this.advancedForm,
            };
            this.params.page_no = 1;
            this.GET_GoodsTransferList();
        },
        /** 获取商品调拨列表 */
        GET_GoodsTransferList() {
            this.loading = true;
            API_GoodsTransfer.getLockedStock(this.params)
                .then((response) => {
                    this.loading = false;
                    this.tableData = response;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
    },
};
</script>

<style type="text/scss" lang="scss" scoped>
.search {
    display: flex;
    align-items: center;
    background: #fff;
    overflow: hidden;
    padding: 30px 10px 10px 10px;

    /deep/ .el-form-item {
        .el-form-item__content {
            .el-input {
                width: 200px;
            }
        }
    }

    .el-button {
        margin-top: -19px;
        margin-left: 20px;
    }
}

.tips-t {
    display: flex;
    padding: 10px 0;

    div {
        flex: 1;
        text-align: center;
    }
}

.tips-f {
    padding: 20px 0;
}

.face-image {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

/deep/ .el-dialog__body {
    padding: 10px 20px;
}
</style>