<template>
    <div>
        <div class="contentGoods">
            <div class="left">
                <a-spin :spinning="confirmLoading">
                    <j-form-container >
                        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                            <a-row>
                                <a-col :span="24">
                                    <a-form-model-item label="消费类目" :labelCol="labelCol1" :wrapperCol="wrapperCol1" prop="categoryId">
                                        <a-select
                                                v-model="model.categoryId"
                                                style="width: 90%"
                                                @change="changeStockType"
                                                placeholder="消费类目" >
                                            <a-select-option
                                                    v-for="(item, index) in stockTypeList"
                                                    :key="index"
                                                    :value="item.id"
                                            >{{ item.name }}</a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-model-item label="消费金额" :labelCol="labelCol1" :wrapperCol="wrapperCol1" prop="payPrice">
                                        <a-input-number
                                                :disabled="goodsCount > 0"
                                                v-model="model.payPrice"
                                                placeholder="请输入金额"
                                                style="width: 90%"
                                        />
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="24">
                                    <a-form-model-item label="备注" :labelCol="labelCol1" :wrapperCol="wrapperCol1" prop="remarks">
                                        <a-textarea
                                                v-model="model.remarks"
                                                rows="4"
                                                placeholder="请输入备注"
                                                style="width: 90%"
                                        />
                                    </a-form-model-item>
                                </a-col>

                            </a-row>
                        </a-form-model>
                    </j-form-container>
                </a-spin>
            </div>
            <div class="right"  v-if="goodsCount > 0">
                <a-spin :spinning="confirmLoading">
                    <j-form-container>
                        <a-form-model ref="formCommodity" :model="modelCommodity" slot="detail">
                            <a-row>
                                <a-col :span="9" v-if="type == 1">
                                    <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="categoryTwoId">
                                        <a-select
                                                v-model="modelCommodity.categoryTwoId"
                                                style="width: 100%"
                                                @change="handleSearch()"
                                                placeholder="类别" >
                                            <a-select-option
                                                    v-for="(item, index) in childStockTypeList"
                                                    :key="index"
                                                    :value="item.id"
                                            >{{ item.name }}</a-select-option>
                                        </a-select>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="9">
                                    <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                        <a-input
                                                v-model="model.goodsName"
                                                placeholder="名称"
                                                style="width: 100%"
                                        />
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="2">
                                    <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                                        <a-button @click="handleSearch()">
                                            <a-icon type="search" />
                                        </a-button>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="4">
                                    <a-form-model-item label="" :labelCol="labelCol" :wrapperCol="wrapperCol">
                                        <a-button @click="handleChangeType()">
                                            {{type == 1 ?"切换扫码模式":"切换普通模式"}}
                                        </a-button>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                        </a-form-model>
                    </j-form-container>
                </a-spin>
                <div style="max-height: 500px;height: 500px;">
                    <a-table
                            :scroll="{ y: 460 }"
                            :pagination="false"
                            ref="table"
                            size="middle"
                            bordered
                            rowKey="id"
                            :columns="columns"
                            :dataSource="dataSource"
                            :loading="loading"
                            class="j-table-force-nowrap">

                        <template slot="priceSlot" slot-scope="text,record">
                            <a-input-number
                                    v-model="record.sellingPrice"
                                    placeholder="请输入金额"
                                    style="width: 90%"
                                    :min="0"
                                    @change="e=>changePrice(e,record)"
                            />
                        </template>
                        <template slot="numberSlot" slot-scope="text,record">
                            <a-input-number :class="record.id"
                                            v-model="record.number"
                                            placeholder="请输入数量"
                                            style="width: 90%"
                                            :min="0"
                                            :disabled="record.sellingPrice == 0"
                                            @change="e=>changeNumber(e,record)"
                            />
                        </template>
                        <template slot="inventorySlot" slot-scope="text,record">
                            {{record.inventory - record.number}}
                        </template>

                    </a-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { httpAction, getAction } from "@/api/manage";
    import '@/assets/less/TableExpand.less'
    import { mixinDevice } from '@/utils/mixin'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'

    export default {
        name: 'goodsConsumeForm',
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            },
            agreementModel:{
                type: Object,
                required: false,
                default: () => {
                }
            }
        },
        mixins:[JeecgListMixin, mixinDevice],
        data () {
            return {
                confirmLoading: false,
                model: {
                    categoryId:'',
                    payPrice:0,
                    remarks:'',
                },
                modelCommodity:{
                    categoryId:'',
                    categoryTwoId:'',
                    goodsId:'',
                    shopPrice:0,
                    buyNumber:0,
                    amount:0,
                    remarks:'',//协议单位名称+备注
                },
                labelCol1: {
                    xs: { span: 24 },
                    sm: { span: 3 },
                },
                wrapperCol1: {
                    xs: { span: 24 },
                    sm: { span: 20 },
                },
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 6 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 18 },
                },
                validatorRules: {
                    categoryId: [
                        { required: true, message: '请选择消费类目!'},
                    ],
                },
                paymentMethodList: [],
                stockTypeList:[],
                childStockTypeList:[],
                type:1,
                url: {
                    list: "/rooms/cesGoods/queryList",
                    addEntry: "/business/busAgreementOrderFee/addEntry",
                },
                // 表头
                columns: [
                    {
                        title:'名称',
                        align:"center",
                        dataIndex: 'name'
                    },
                    {
                        title:'售价',
                        align:"center",
                        dataIndex: 'sellingPrice',
                        scopedSlots: { customRender: 'priceSlot' }
                    },
                    {
                        title:'数量',
                        align:"center",
                        dataIndex: 'number',
                        scopedSlots: { customRender: 'numberSlot' }
                    },
                    {
                        title:'剩余库存',
                        align:"center",
                        dataIndex: 'inventory',
                        scopedSlots: { customRender: 'inventorySlot' }
                    },
                ],
                projectName:'',
                goodsCount:0,
                // loading:true,
                // dataSource:[]
            }
        },
        created() {
            httpAction(
                "/rooms/cesStockType/getTopTypes",
                {},
                "get"
            ).then((res) => {
                if (res.success) {
                    this.stockTypeList = res.result;
                }
            });
        },
        methods:{
            edit() {
                // console.log(record)
                // this.model = Object.assign({}, record);
                // this.changeColumns(this.model.roomType, this.model.fixedDiscount)
                // this.visible = true;
            },
            changeStockType(e){
                this.modelCommodity.categoryTwoId = '';
                var _this = this;
                _this.childStockTypeList = []
                httpAction(
                    "/rooms/cesStockType/getChildTypes?parentId="+e,
                    { },
                    "get"
                ).then((res) => {
                    if (res.success) {
                        _this.childStockTypeList = res.result;
                    }
                }).finally(() => {
                    _this.handleSearch(1)
                });
            },
            handleSearch(type) {
                var typeId = "";
                var search = "";
                var _this = this;

                if (this.model.goodsName) {
                    search = this.model.goodsName;
                }

                if (type == 1) {
                    if (this.model.categoryId) {
                        typeId = this.model.categoryId;
                    }

                    httpAction(
                        "/rooms/cesGoods/queryList?typeId=" + typeId + "&search=" + search,
                        { },
                        "get"
                    ).then((res) => {
                        console.log(res)
                        if (res.success) {
                            _this.goodsCount = res.result.length;
                            console.log(_this.goodsCount)
                            if (_this.goodsCount > 0){
                                _this.labelCol1= {
                                    xs: { span: 24 },
                                    sm: { span: 8 },
                                }
                                _this.wrapperCol1= {
                                    xs: { span: 24 },
                                    sm: { span: 14 },
                                }
                            }else{
                                _this.labelCol1= {
                                    xs: { span: 24 },
                                    sm: { span: 3 },
                                }
                                _this.wrapperCol1= {
                                    xs: { span: 24 },
                                    sm: { span: 20 },
                                }
                            }
                        }
                    }).finally(() => {
                    });
                } else {
                    if (this.modelCommodity.categoryTwoId) {
                        typeId = this.modelCommodity.categoryTwoId;
                    }
                }

                this.url.list = "/rooms/cesGoods/queryList?typeId=" + typeId + "&search=" + search;

                this.loadData(1);

            },
            handleChangeType(){
                if (this.type == 1){
                    this.type = 2;
                    this.dataSource=[]
                } else{
                    this.type = 1;
                    this.loadData(1);
                }
            },
            submitForm () {
                var that = this;
                var categoryIndex = this.stockTypeList.findIndex((s) => s.id == this.model.categoryId);
                var _projectName = '';
                if (categoryIndex > 0){
                    _projectName = this.stockTypeList[categoryIndex].name
                }
                var goodsList = [];
                var goodsDataSource = this.dataSource;
                if (goodsDataSource && goodsDataSource.length > 0){
                    for(let i=0;i<goodsDataSource.length;i++){
                        var item = goodsDataSource[i];
                        if (parseFloat(item.number) > 0 && parseFloat(item.sellingPrice) > 0){
                            var _amount = parseFloat(item.number) * parseFloat(item.sellingPrice);
                            var amount = parseFloat(_amount.toFixed(2));
                            var goodsItem = {
                                categoryId:that.model.categoryId,
                                categoryTwoId:that.modelCommodity.categoryTwoId,
                                goodsId:item.id,
                                shopPrice:item.sellingPrice,
                                buyNumber:item.number,
                                amount:amount,
                                remarks:that.agreementModel.customerName+'，'+that.model.remarks,//协议单位名称+备注
                            }
                            goodsList.push(goodsItem)
                        }
                    }
                }
                if (that.model.payPrice <= 0){
                    that.$message.warning("没有消费");
                    return;
                }
                console.log(goodsList)
                // 触发表单验证
                this.$refs.form.validate(valid => {
                    if (valid) {
                        that.confirmLoading = true;
                        let httpurl = this.url.addEntry;
                        let method = 'post';
                        var data = {
                            agreementUnitId:that.agreementModel.id,
                            categoryId:that.model.categoryId,
                            projectName:_projectName,
                            type:3,
                            payPrice:that.model.payPrice,
                            remarks:that.model.remarks,
                            commodityRecords:goodsList
                        }
                        console.log(data);
                        httpAction(httpurl,data,method).then((res)=>{
                            if(res.success){
                                that.$message.success(res.message);
                                that.$emit('ok');
                            }else{
                                that.$message.warning(res.message);
                            }
                        }).finally(() => {
                            that.confirmLoading = false;
                        })
                    }

                })
            },
            changePrice(e,record){
                var _amount = 0;
                var goodsList = this.dataSource;
                if (goodsList){
                    for (var i = 0; i < goodsList.length; i++) {
                        var goods = goodsList[i];
                        if (parseFloat(goods.number) > 0){
                            var _money = parseFloat( goods.sellingPrice )* parseFloat(goods.number)
                            var money = parseFloat(_money.toFixed(2))
                            _amount = _amount+ money;
                        }
                    }
                }
                this.model.payPrice = _amount;
            },
            changeNumber(e,record){
                var _amount = 0;
                var goodsList = this.dataSource;
                if (goodsList){
                    for (var i = 0; i < goodsList.length; i++) {
                        var goods = goodsList[i];
                        if (parseFloat(goods.number) > 0){
                            var _money = parseFloat( goods.sellingPrice )* parseFloat(goods.number)
                            var money = parseFloat(_money.toFixed(2))
                            _amount = _amount+ money;
                        }
                    }
                }
                console.log(_amount)
                this.model.payPrice = _amount;
            },
        }
    }
</script>

<style scoped>
    .contentGoods{
        display: flex;
        flex-direction: row;
    }
    .contentGoods .left{
        flex: 1;
    }
    .contentGoods .right{
        flex: 2;
    }
</style>
