<template>
    <div class="back">
        <div class="back-left">
            <a-button @click="handleStockTypeModelManager('-1',1)">添加分类</a-button>
            <a-button @click="unitVisible=true" style="margin-left: 30px;">单位设置</a-button>
            <a-tree class="draggable-tree" :tree-data="treeData" blockNode style="width: 400px;"
                :replaceFields="{ children: 'children', title: 'name', key: 'id' }">
                <div slot="title" slot-scope="item,key,children" style="display:flex; align-items: center; height: 100%; overflow: hidden;">
                    <a-button style="font-size: 12px" type="link" @click="() => { $message.success(item.name) }">{{ item.name}}</a-button>
                    <div style="flex:1;height:1px;"></div>
                    <a-button style="font-size: 12px; padding: 0 5px;" type="link" v-show="item.parentId == 0" @click="handleStockTypeModelManager(item,1)">添加分类</a-button>
                    <a-button style="font-size: 12px; padding: 0 5px;" type="link" @click="handleStockTypeModelManager(item,2)">编辑</a-button>
                    <a-popconfirm placement="topLeft" ok-text="是的" cancel-text="取消" @confirm="confirmDel(item.id)">
                        <template slot="title">
                        确定删除吗?
                        </template>
                        <a-button style="font-size: 12px; padding: 0 5px;" type="link">删除</a-button>
                    </a-popconfirm>
                </div>
            </a-tree>
        </div>
        <div class="back-right" style="margin-top: -28px; margin-left: 10px;">
            <a-card :bordered="false">
                <!-- 查询区域 -->
                <div class="table-page-search-wrapper">
                    <a-form layout="inline" @keyup.enter.native="searchQuery">
                        <a-row :gutter="24">
                            <a-col :span="4">
                                <a-form-item label="">
                                    <j-input placeholder="商品名称" v-model="queryParam.name" style="width: 200px"></j-input>
                                </a-form-item>
                            </a-col>
                            <a-col :md="13" :sm="8" style="display: flex;">
                                <span style="float:left; overflow: hidden;margin-right:10px;" class="table-page-search-submitButtons">
                                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                                </span>
                                <!-- <span style="float:left; overflow: hidden; line-height: 32px">【全部】房间属性</span> -->
                                <span style="float:left; overflow: hidden;margin-right:10px;">
                                    <a-button type="primary" @click="handleAdd">新增商品</a-button>
                                </span>
                                <span style="float:left; overflow: hidden">
                                    <a-button type="danger" @click="batchDel">批量删除</a-button>
                                </span>
                                <!-- <span style="float:left; overflow: hidden;">
                                    <a-button :disabled="selectedRowKeys.length==0 || selectedRowKeys.length>1" type="primary" style="background-color:coral;border: none"
                                        @click="goodsSet">进退货</a-button>
                                </span>
                                <span style="float:left; overflow: hidden">
                                    <a-button type="primary" style="background-color:seagreen;border: none"
                                        @click="searchQuery">导入商品</a-button>
                                </span> -->
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <!-- 查询区域-END -->
                <div>
                    <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns"
                        :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{
                            selectedRowKeys: selectedRowKeys,
                            onChange: onSelectChange,
                        }" class="j-table-force-nowrap" @change="handleTableChange">
                        <span slot="state" slot-scope="record">
                            {{record?'启用':'停用'}}
                            <!-- {{record}} -->
                        </span>
                        <span slot="action" slot-scope="text, record">
                            <a @click="handleEdit(record)">修改</a>
                            <a-divider type="vertical" />
                            <!-- <a @click="moreSet(record)">更多设置</a>
                            <a-divider type="vertical" /> -->
                            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                                <a>删除</a>
                            </a-popconfirm>
                        </span>
                    </a-table>
                </div>
                <!-- 进退货弹窗 -->
                <a-modal destroyOnClose title="进退货" closable :visible="goodsSetVisible" @ok="handleGoodOk" @cancel="handleGoodCancel"
                 width="50%" >
                 <a-space direction="vertical" style="width:100%" :size="'large'">
                    <a-card title="商品信息" :bordered="true" >
                        <a-row>
                            <a-col :span="8">
                                商品编号:{{goodsSetData.barCode}}
                            </a-col>
                            <a-col :span="8">
                                商品名称:{{goodsSetData.name}}
                            </a-col>
                            <a-col :span="8">
                                商品库存:{{goodsSetData.inventory}}
                            </a-col>
                        </a-row>
                    </a-card>
                    
                    <a-radio-group name="radioGroup" :default-value="1" @change="goodChange">
                        <a-radio :value="1">
                            进货
                        </a-radio>
                        <a-radio :value="2">
                            退货
                        </a-radio>
                    </a-radio-group>
                    <a-row style="display:flex;align-items:center;">
                        <a-col :span="1">
                            数量
                        </a-col>
                        <a-col :span="4">
                            <a-input-number v-model="goodsSetData.goodNum" :min="0" /> &nbsp;{{goodsSetData.unitName}}
                        </a-col>
                    </a-row>
                    <a-row style="display:flex;justify-content:center;align-items:center;">
                        <a-col :span="1">
                            备注
                        </a-col>
                        <a-col :span="23">
                            <a-input v-model="goodsSetData.remark" type="text" />
                        </a-col>
                    </a-row>
                  </a-space>
                </a-modal>
                <!-- 进退货区域END -->
                <!-- 更多设置弹窗 -->
                <moreSet ref='modalSet' @ok="onSave" />
                <!-- <a-modal destroyOnClose title="详细设置" closable :visible="moreSetVisible" @ok="handleMoreSetOk" @cancel="()=>{moreSetVisible=false}"
                 width="70%" >
                    <a-card style="width:100%" :tab-list="tabListNoTitle" :active-tab-key="noTitleKey"
                     @tabChange="key => onTabChange(key, 'noTitleKey')">
                        <Commodity v-if="noTitleKey=='commodity'" />
                        <GoodImg v-if="noTitleKey=='goodImg'" />
                    </a-card>
                </a-modal> -->
                <room-layout-form ref="modalForm" @ok="modalFormOk"></room-layout-form>
                <stock-type-model ref="stockTypeModel" @ok="onSave"></stock-type-model>
            </a-card>
        </div>
        <!-- 单位设置区域 -->
        <SetUnit :unitVisible="unitVisible" @center="handleCancel" />
    </div>

</template>
<script>
import { tree, delStockType, goodBatchDel, goodSet, getStockTypeList } from '@/api/good'
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import roomLayoutForm from './goodsModal/goodStock/goods.vue'
import stockTypeModel from './goodsModal/goodType/stockTypeModel.vue'
// import Commodity from './moreSet/commodity.vue'
// import GoodImg from './moreSet/goodImg.vue';
// import moreSet from './moreSet/moreModal.vue'
import { computed } from 'vue';
import SetUnit from './goodsModal/setUnit/index.vue'


const tabListNoTitle=[
        {
          key: 'commodity',
          tab: '商品小程序设置',
        },
        {
          key: 'goodImg',
          tab: '商品图片',
        },
        {
          key: 'project',
          tab: '餐饮设置',
        },
        {
          key: 'game',
          tab: '娱乐设置',
        },
      ]
export default {
    name: "goodList",
    mixins: [JeecgListMixin],
    components: {
        stockTypeModel,
        roomLayoutForm,
        SetUnit,
        // moreSet
        // Commodity,
        // GoodImg
      },
    data() {
        return {
            treeData: [
                {
                    t: '111',
                    k: '1',
                    c: [
                        {
                            t: '222',
                            k: '2',
                            c: [
                                { t: 'leaf', k: '333', disableCheckbox: true },
                                { t: 'leaf', k: '444' },
                            ],
                        },
                        {
                            t: '555',
                            k: '555',
                            c: [{ k: '666', t: 'sb' }],
                        },
                    ],
                },],

            key: 'tab1',
            noTitleKey: 'commodity',

            checkedKeys: [''],
            tabListNoTitle,
            selectedKeys: [],
            queryParam: {},
            //单位对话框
            unitVisible:false,
            // 分页参数
            ipagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: ["10", "20", "30"],
                showTotal: (total, range) => {
                    return range[0] + "-" + range[1] + " 共" + total + "条";
                },
                showQuickJumper: true,
                showSizeChanger: true,
                total: 0,
            },
            // 表头
            columns: [
                // {
                //     title: "商家",
                //     align: "center",
                //     dataIndex: "hotelName",
                //     customCell:() => {
                //         return {
                //         style: {
                //             wordWrap:'break-word',
                //             wordBreak:'break-all',
                //             whiteSpace:'normal',
                //             minHeight:'50px',
                //             width: '50px',
                //         }
                //         }
                //     }
                // },
                {
                    title: "分类",
                    align: "center",
                    dataIndex: "goodTypeName",
                    customCell:() => {
                        return {
                        style: {
                            wordWrap:'break-word',
                            wordBreak:'break-all',
                            whiteSpace:'normal',
                            minHeight:'50px',
                            width: '50px',
                        }
                        }
                    }
                },
                {
                    title: "单位",
                    align: "center",
                    dataIndex: "goodsUnitName",
                    customCell:() => {
                        return {
                        style: {
                            wordWrap:'break-word',
                            wordBreak:'break-all',
                            whiteSpace:'normal',
                            minHeight:'50px',
                            width: '50px',
                        }
                        }
                    }
                },
                {
                    title: "商品名称",
                    align: "center",
                    dataIndex: "name",
                },
                // {
                //     title: "商品简码",
                //     align: "center",
                //     dataIndex: "",
                // },
                {
                    title: "条码",
                    align: "center",
                    dataIndex: "barCode",
                },
                {
                    title: "售卖周期",
                    align: "center",
                    dataIndex: "sellDay",

                },

                {
                    title: "采购最高限价",
                    align: "center",
                    dataIndex: "maxPrice",

                },
                {
                    title: "成本标准价",
                    align: "center",
                    dataIndex: "costPrice",

                },
                {
                    title: "商品规格",
                    align: "center",
                    dataIndex: "spec",

                },
                {
                    title: "最高库存",
                    align: "center",
                    dataIndex: "maxSotck",

                },
                {
                    title: "最低库存",
                    align: "center",
                    dataIndex: "minSotck",

                },
                {
                    title: "库存预警数",
                    align: "center",
                    dataIndex: "stockWarning",

                },
                {
                    title: '状态',
                    dataIndex: 'isEnable',
                    // key: 'address',
                    scopedSlots: { customRender: "state" },
                    align:'center'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    key: 'action',
                    scopedSlots: { customRender: "action" },
                    align:'center',
                    fixed: "right",
                    width: 200,
                }
            ],
            url: {
                // list: 'org.jeecg.modules.business/busMarketMember/list',
                list:'/kc/kcGoods/list',
                // list: "/rooms/cesRoomLayout/list?hotelId",
                // delete: "/rooms/cesRoomLayout/remove",
                delete:'/kc/kcGoods/delete',
                // deleteBatch: "/rooms/cesRoomLayout/deleteBatch",
                deleteBatch:'/kc/kcGoods/deleteBatch',
                exportXlsUrl: "/rooms/cesRoomLayout/exportXls",
                importExcelUrl:"rooms/cesRoomLayout/importExcel",
            },
            dictOptions: {},
            superFieldList: [],
            selectedRowKeys: [],
            isorter: {
                column: "createTime",
                order: "desc",
            },
            stockTypeVisible:false,
            // 选中的数据
            beforeTree:null,
            goodsSetVisible:false,//进退货弹窗
            moreSetVisible:false,//更多设置弹窗
            goodsSetData:{
                number:0,
                type:1
            }
        };
    },
    computed: {

    },
    watch: {

    },
    created() {
        this.loadTree();
    },
    provide(){
        return {
            beforeTree:computed(() => this.beforeTree?this.beforeTree:{id:'0'}),
            treeData:computed(()=> this.treeData),
            dataSource:computed(()=> this.dataSource)
        }
    },
    methods: {
        handleStockTypeModelManager(item,type) {
            console.log(item, type)
            this.beforeTree = null
            if (item!='-1') {
                this.beforeTree = item
                this.beforeTree.editData = type ===2?true:false
            }
            console.log(this.beforeTree);
            this.$refs.stockTypeModel.title = type === 1 ?"新增":"修改"
            this.$refs.stockTypeModel.visible = true
        },
        loadTree() {
            var that = this
            getStockTypeList().then((res) => {
                if (res.success) {
                    this.treeData = res.result;
                }
            })
        },
        onExpand(expandedKeys) {
            console.log('onExpand', expandedKeys);
            // if not set autoExpandParent to false, if children expanded, parent can not collapse.
            // or, you can remove all expanded children keys.
        },
        onSelect(selectedKeys, info) {
            console.log('onSelect', info);
            this.selectedKeys = selectedKeys;
        },
        /**
         * 保存成功
         */
        onSave(){
            this.loadTree()
        },
        /**
         * 删除
         */
        confirmDel(id){
            delStockType({id:id}).then(res=>{
                if (res.code && res.code==200) {
                    this.$message.success('删除成功')
                    this.loadTree()
                }
            })
        },
        //批量删除
        goodBatchDel(){
            console.log(this.selectedRowKeys);
            if (this.selectedRowKeys.length==0) {
                this.$message.info('请先选择要删除的数据')
                return
            }
            this.$confirm({
                title: '提示',
                content: '确认要删除吗',
                okText: '确认',
                cancelText: '取消',
                onOk:(e)=>{
                    return goodBatchDel({idStr:this.selectedRowKeys.toString()}).then(res=>{
                        if (res.code && res.code==200) {
                            this.$message.success(res.message)
                            this.loadData();
                        }else{
                            this.$message.error(res.message)
                        }
                    })
                }
            });
        },
        //单位设置区域
        handleOk(e) {
            // this.confirmLoading = true;
            // setTimeout(() => {
            //     this.visible = false;
            //     this.confirmLoading = false;
            // }, 2000);
            this.unitVisible=false
        },
        handleCancel(e) {
            console.log('Clicked cancel button',e);
            this.unitVisible = false;
        },
        /**
         * 进退货
         */
        goodsSet(){
            this.goodsSetData = this.dataSource.filter(item=> item.id==this.selectedRowKeys.toString() )[0]
            console.log(this.goodsSetData);
            this.goodsSetVisible = true
        },
        goodChange(e){
            console.log(e);
            this.goodsSetData.type = e.target.value
        },
        //更多设置
        moreSet(record){
            console.log(this.$refs.modalSet);
            this.$refs.modalSet.edit(record)
            this.$refs.modalForm.disableSubmit = false;
            // this.moreSetVisible = true
        },
        //更多设置确认
        handleMoreSetOk(){

        },
        //更多设置切换卡片
        onTabChange(key, type) {
            console.log(key, type);
            this[type] = key;
        },

        //进退货确认事件
        handleGoodOk(){
            console.log(this.goodsSetData);
            if (!this.goodsSetData.type) {
                this.goodsSetData.type = 1
            }
            let obj = {
                hotelId:this.goodsSetData.hotelId,
                goodId:this.goodsSetData.id,
                type:this.goodsSetData.type,
                goodNum:this.goodsSetData.goodNum,
                remark:this.goodsSetData.remark?this.goodsSetData.remark:''
            }
            // this.goodsSetData.goodId = this.goodsSetData.id
            goodSet(obj).then(res=>{
                if (res.code && res.code==200) {
                            this.$message.success(res.message)
                            this.goodsSetVisible = false
                            // this.goodsSetData = {}
                            this.loadData();
                        }else{
                            this.$message.error(res.message)
                        }
            })

        },
        //进退货取消
        handleGoodCancel(){
            this.goodsSetVisible = false
        }
    },
};
</script>
<style scoped>
.back {
    display: flex;
    justify-content: space-between;
}

.back-left {
    flex: 10
}

.back-right {
    flex: 38;
}

.ant-tree li .ant-tree-node-content-wrapper {
    height: auto !important;
}

.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: #bae7ff33;
}</style>