<template>
<a-card :bordered="false">
    <a-row type="flex" :gutter="16" class="container">
        <a-col :md="5" :sm="24">
            <!-- <dictionary-info-left v-model="currentOrgCode" /> -->
            <div v-if="selectGoods">
                <div class="sell-clear-top">
                    <div>
                        {{selectGoods.name}}
                    </div>
                    <div>
                        <a-button v-if="!selectGoods.isSellClear" @click="handleAdd">立即沽清</a-button>
                        <a-button v-else @click="handleDelete">取消沽清</a-button>
                    </div>
                </div>

                <a-space direction="vertical" size="large">
                    <a-checkbox v-model="isSellClear" @change="isOnChange">
                        启用自动沽清
                    </a-checkbox>
                    <template v-if="isSellClear">
                        <a-radio-group v-model="value" @change="onChangeKC">
                            <a-radio :style="radioStyle" :value="1">
                                按库存沽清
                            </a-radio>
                            <a-radio :style="radioStyle" :value="2">
                                按数量沽清
                            </a-radio>
                        </a-radio-group>
                        <div>
                            数量:
                            <a-input-number v-model="selectGoods.num" :min="1" :max="100" />
                        </div>
                        <div>
                            当前剩余: {{selectGoods.inventory}}份
                        </div>
                        <a-radio-group v-model="values" @change="onChangeDay">
                            <a-radio :value="1">
                                每天有效
                            </a-radio>
                            <a-radio :value="2">
                                总数量有效
                            </a-radio>
                        </a-radio-group>
                        <a-button type="primary" @click="()=>{ this.$message.success('成功'); this.selectGoods = null;this.isSellClear = false }">启用</a-button>
                    </template>

                </a-space>
            </div>
        </a-col>
        <a-col :md="24-5" :sm="24">
            <!-- 查询区域 -->
            <div class="table-page-search-wrapper">
                <a-form layout="inline" @keyup.enter.native="searchQuery">
                    <a-row :gutter="24">
                        <a-col :span="6">
                            <a-tree-select v-model="queryParam.goodType" :tree-data="treeData" :replaceFields="{
                children: 'children',
                title: 'name',
                key: 'id',
                value: 'id',
              }" placeholder="商品分类" />
                        </a-col>
                        <a-col :md="6" :sm="8">
                            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                            </span>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <!-- 查询区域-END -->

            <!-- 操作按钮区域 -->
            <div class="table-operator">
                <a-button @click="handleAdd">立即沽清</a-button>
                <a-button @click="handleDelete">取消沽清</a-button>
            </div>

            <div>
                <a-row :gutter="[5, 5]">
                    <a-col v-for="item in dataSource" :key="item.id" :span="2" @click.stop="itemClick(item)">
                        <div class="room-item" :class="item.sort == 888888 ? 'check' : ''" :style="{background: item.isSellClear ? 'grey' : 'goldenrod',}">
                            <div>{{ item.name }}</div>
                            <div style="margin-top: 20px">
                                ￥{{ item.sellingPrice.toFixed(2) }}
                            </div>
                            <div v-if="item.isSellClear" style="display: flex; justify-content: right">
                                <a-tag color="#f50"> 沽清 </a-tag>
                            </div>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </a-col>
    </a-row>

    <pos-region-modal ref="modalForm" @ok="modalFormOk"></pos-region-modal>
</a-card>
</template>

<script>
import {
    JeecgListMixin
} from "@/mixins/JeecgListMixin";
import PosRegionModal from "./modules/PosRegionModal";
import {
    filterObj
} from "@/utils/util";
import {
    getAction,
    postAction,
    deleteAction
} from "@/api/manage";
import {
    tree
} from "@/api/good";
export default {
    name: "memberList",
    mixins: [JeecgListMixin],
    components: {
        PosRegionModal,
    },
    data() {
        return {
            isSellClear: false,
            sellClear: 0,
            sellClearNum: 10,
            value: 1,
            values: 1,
            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
            queryParam: {},
            // 分页参数
            ipagination: {
                current: 1,
                pageSize: 99999,
                pageSizeOptions: ["10", "20", "30"],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条";
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0,
            },
            // 表头
            columns: [{
                    title: "pos类型",
                    align: "center",
                    dataIndex: "typeName",
                },
                {
                    title: "区域名称",
                    align: "center",
                    dataIndex: "name",
                },
                {
                    title: "操作",
                    dataIndex: "action",
                    align: "center",
                    fixed: "right",
                    width: 147,
                    scopedSlots: {
                        customRender: "action"
                    },
                },
            ],
            url: {
                list: "/pos/posSellClearGoods/list2",
                delete: "/pos/posSellClearGoods/delete",
                deleteBatch: "/pos/posSellClearGoods/deleteBatch",
                exportXlsUrl: "/pos/posSellClearGoods/exportXls",
                importExcelUrl: "pos/posSellClearGoods/importExcel",
            },
            dictOptions: {},
            superFieldList: [],
            selectedRowKeys: [],
            isorter: {
                column: "createTime",
                order: "desc",
            },
            treeData: [],
            selectGoods: null,
        };
    },
    created() {
        this.loadTree();
    },
    methods: {

        isOnChange(e) {
            console.log(e);
        },
        onChangeKC() {},
        onChangeDay() {},

        handleDelete() {

            let selectArr = this.dataSource.filter((t) => t.sort == 888888)
            if (!selectArr.length) {
                this.$message.warning("请选择取消沽清商品");
                return
            }
            if (selectArr.some(ele => !ele.isSellClear)) {
                this.$message.warning("未沽清商品不能取消沽清");
                return
            }
            let modelArr = selectArr.map(ele => ele.id)
            console.log(modelArr);
            deleteAction("/pos/posSellClearGoods/delete", {
                    goodsId: modelArr.join(",")
                })
                .then((res) => {
                    if (res.success) {
                        this.$message.success(res.message);
                        this.loadData();
                        this.sellClear = 0;
                        this.selectGoods = null
                        this.isSellClear = false
                    } else {
                        this.$message.warning(res.message);
                    }
                })
                .finally(() => {});
        },
        handleAdd() {
            var _info = JSON.parse(localStorage.getItem("storeInfo"));
            var model = {
                goodsId: this.selectGoods.id
            };
            if (_info) {
                model.hotelId = _info.id;
            }
            console.log(model, this.dataSource);
            let selectArr = this.dataSource.filter((t) => t.sort == 888888)
            if (!selectArr.length) {
                this.$message.warning("请选择沽清商品");
                return
            }
            if (selectArr.some(ele => ele.isSellClear)) {
                this.$message.warning("已沽清商品不能重复沽清");
                return
            }
            let modelArr = selectArr.map(ele => ({
                goodsId: ele.id,
                hotelId: _info.id
            }))
            console.log(modelArr);
            postAction("/pos/posSellClearGoods/add", modelArr)
                .then((res) => {
                    if (res.success) {
                        this.$message.success(res.message);
                        this.loadData();
                        this.sellClear = 0;
                        this.selectGoods = null
                        this.isSellClear = false
                    } else {
                        this.$message.warning(res.message);
                    }
                })
                .finally(() => {});
        },
        itemClick(row) {
            console.log(row);
            if (row.sort != 888888) {
                this.selectGoods = row;
                // var list = this.dataSource.filter((t) => (t) => t.sort == 888888);
                // list.forEach((t) => {
                //   t.sort = 0;
                // });
                row.sort = 888888;
                if (row.isSellClear) {
                    this.sellClear = 2;
                } else {
                    this.sellClear = 1;
                }
            } else {
                row.sort = 0;
                this.sellClear = 0;
                this.selectGoods = null
            }
        },
        loadTree() {
            var that = this;
            tree().then((res) => {
                if (res.success) {
                    this.treeData = res.result;
                }
            });
        },
    },
};
</script>

<style scoped>
@import "~@assets/less/common.less";

.room-item {
    height: 110px;
    /* line-height: 200px; */
    font-size: 13px;
    color: #f9f9f9;
    padding: 20px 10px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}

.check {
    border: #000 solid 3px;
}
.sell-clear-top{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100px;
}
</style>
