<template>
  <!-- 交收-->
  <Drawer :title="'交收'"
          :placement="'right'"
          class="bottom486"
          :visible="visible"
          @cancel="cancel">
    <div class="listed c_c_s_s">
      <a-form class="inlineForm dialogForm"
              ref="formRef">
        <div class="formBar">
          <div class="formtop">
            <div class="firstTitle">
              <span>合约数量 {{selectedRow.enableqty}}</span>
              <span>可交收数量 {{getCanSettlementNum()}} {{selectedRow.goodunit}}</span>
            </div>
            <div class="secondLine">
              <div class="left">持有人/商品/仓库</div>
              <div class="middle">升贴水/数量</div>
              <div class="right">选择数量</div>
            </div>
            <a-checkbox-group class="commonCheckboxGroup"
                              v-model:value="checked"
                              @change="checkGroupChange">
              <div class="lineBar"
                   v-for="(item, index) in tableList"
                   :key="index + '11'">
                <div class="line1">
                  <div class>
                    <a-checkbox @change="checkboxChange(item)"
                                :value="item.ladingbillid"></a-checkbox>
                  </div>
                  <div class="name">{{item.username}}</div>
                </div>
                <div class="line2">
                  <div class="left">
                    <div>{{item.wrtypename}}</div>
                    <div>{{item.warehousename}}</div>
                  </div>
                  <div class="middle">
                    <div>{{item.pricemove}}</div>
                    <div>{{item.avalidqty}}{{item.enumdicname}}</div>
                  </div>
                  <div class="right">
                    <template class="inputNumberBlock"
                              :class="isChecked(item.ladingbillid) ? '' : 'disabled'">
                      <a-input-number class="dialogInput dialogInput34"
                                      v-model:value="item.num"
                                      style="width: 130px !important; height: 34px;"
                                      :disabled="!isChecked(item.ladingbillid)"
                                      :max="item.avalidqty"
                                      :min="0"></a-input-number>
                      <MinusOutlined @click="decrease(item)" />
                      <PlusOutlined @click="increase(item)" />
                    </template>
                  </div>
                </div>
              </div>
            </a-checkbox-group>
          </div>
        </div>
        <div class="fixedBtns">
          <div class="formbottom">
            <div class="line1">
              <div>
                <span>已点选数量</span>
                <span class="white">{{selctedNum()}} {{selectedRow.goodunit}}</span>
                <span>，需合约数量</span>
                <span class="white">{{getNeedContractNum()}}</span>
              </div>
              <div class="yellow">升贴水1100</div>
            </div>
            <div class="line2"
                 v-if="isBaseSpread()">
              <div>点价合约</div>
              <div class="right">
                <div>{{selectedRow.goodscode}}</div>
                <div>{{getDeliveryGoodsPrice()}}</div>
              </div>
            </div>
            <div v-if="isBaseSpread()"
                 class="line3">预估贷款：{{getEstimatedPayment()}}</div>
          </div>

          <a-form-item class="btnCenter mt10">
            <a-button class="listedBtn"
                      :loading="loading"
                      :disabled="loading"
                      @click="submit">提交</a-button>
          </a-form-item>
        </div>
      </a-form>
    </div>
  </Drawer>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import Drawer from '@/common/components/drawer/index.vue';
import { ModalEnum } from '@/common/constants/modalNameEnum';
import { _closeModal } from '@/common/setup/modal/modal';

import UploadImg from '@/common/components/uploadImg/index.vue';
import { getSelectedAccountId } from '@/services/bus/account';

import { BuyOrSell } from '@/common/constants/enumCommon';
import Long from 'long';
import { QueryTradePositionRsp } from '@/services/go/ermcp/order/interface';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { handleCheck, getTableList, handleCalculation } from './setup';
import { DeliveryOrder } from '@/services/proto/warehousetrade';
import { v4 } from 'uuid';
import moment from 'moment';
import { DeliveryOrderReq } from '@/services/proto/warehousetrade/interface';
import { getLongTypeLoginID } from '@/services/bus/login';
import { message } from 'ant-design-vue';

export default defineComponent({
    name: ModalEnum.commodity_contract_summary_settlement,
    components: { Drawer, UploadImg, PlusOutlined, MinusOutlined },
    emits: ['cancel', 'update'],
    props: {
        selectedRow: {
            type: Object as PropType<QueryTradePositionRsp>,
            default: {},
        },
        buyOrSell: {
            type: Number as PropType<BuyOrSell>,
            default: BuyOrSell.buy,
        },
    },
    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        const loading = ref<boolean>(false);
        const { goodsid } = props.selectedRow;
        // 合约交收可点选仓单
        const { tableList } = getTableList(goodsid);
        // check 是否选中逻辑
        const { checked, selected, deliveryGoods, checkGroupChange, isChecked, checkboxChange, isBaseSpread } = handleCheck();
        // 各种计算
        const { getStepValue, getCanSettlementNum, getNeedContractNum, getEstimatedPayment, XQty, PQty, getDeliveryGoodsPrice, increase, decrease, selctedNum } = handleCalculation(props.selectedRow);

        function submit() {
            if (!selected.value) {
                message.warn('请选择合约');
                return;
            }
            if (!selected.value.num) {
                message.warn('请输入选择数量');
                return;
            }

            if (deliveryGoods.value) {
                loading.value = true;
                console.log(deliveryGoods.value);
                const param: DeliveryOrderReq = {
                    ClientSerialNo: v4(), // 客户端流水号
                    ClientOrderTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'), // 客户端委托时间
                    ClientType: 4, // 终端类型
                    // goodsID: goodsid,
                    // marketid,
                    AccountID: getSelectedAccountId(),
                    XGoodsID: goodsid,
                    DeliveryGoodsID: deliveryGoods.value.deliverygoodsid,
                    XQty: Long.fromNumber(XQty()),
                    PQty: Long.fromNumber(PQty()),
                    OperateType: 0,
                    OrderSrc: 0,
                    OperatorID: Number(getLongTypeLoginID()),
                    DeliveryQty: selected.value.num,
                    DeliveryOrderDetail: {
                        AccountID: getSelectedAccountId(),
                        Qty: selected.value.num,
                        LadingBillID: Long.fromNumber(selected.value.ladingbillid),
                        WRFactorTypeID: Long.fromNumber(selected.value.wrfactortypeid),
                        SubNum: selected.value.subnum,
                    },
                };
                if (isBaseSpread()) {
                    param.PGoodsID = deliveryGoods.value.pgoodsid;
                }
                console.log('param', param);
                DeliveryOrder(param)
                    .then((res) => {
                        message.success('提交成功');
                    })
                    .catch((err) => {
                        console.log('err', err);
                    })
                    .finally(() => {
                        loading.value = false;
                    });
            } else {
                message.warn('未找到对应的交割商品');
            }
        }
        return {
            visible,
            cancel,
            submit,
            tableList,
            loading,
            checkGroupChange,
            checkboxChange,
            checked,
            isChecked,
            isBaseSpread,
            getStepValue,
            getCanSettlementNum,
            getNeedContractNum,
            getEstimatedPayment,
            getDeliveryGoodsPrice,
            increase,
            decrease,
            selctedNum,
        };
    },
});
</script>

<style lang="less" scoped>
.c_c_s_s {
    background: @m-black40;
    width: 100%;
    height: 100%;
    position: relative;
    .formBar {
        padding: 0;
        height: calc(100% - 172px);
        background: @m-black41;
        .formtop {
            width: 100%;
            padding: 0 20px;
            .flex;
            flex-direction: column;
            .firstTitle {
                width: calc(100% + 40px);
                height: 40px;
                line-height: 40px;
                margin-left: -20px;
                padding: 0 20px;
                font-size: 14px;
                color: @m-white6;
                border-bottom: 1px solid @m-black42;
            }
            .secondLine {
                width: 100%;
                height: 40px;
                line-height: 40px;
                display: inline-flex;
                > div {
                    flex: 1;
                    font-size: 14px;
                    color: @m-grey1;
                }
                .left {
                    text-align: left;
                }
                .middle {
                    text-align: center;
                }
                .right {
                    text-align: right;
                }
            }
            .lineBar {
                width: 100%;
                min-height: 100px;
                padding-left: 15px;
                padding-right: 10px;
                background: @m-blue19;
                margin-bottom: 10px;
                .rounded-corners(5px);
                .line1 {
                    display: inline-flex;
                    width: 100%;
                    height: 40px;
                    line-height: 40px;
                    font-size: 16px;
                    color: @m-white6;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    border-bottom: 1px solid @m-blue20;
                    > div {
                        align-self: center;
                        align-items: center;
                    }
                    .name {
                        margin-left: 10px;
                    }
                }
                .line2 {
                    width: 100%;
                    padding: 12px 0 14px 0;
                    display: inline-flex;
                    > div {
                        flex: 2;
                    }
                    .left {
                        .flex;
                        flex-direction: column;
                        max-width: 40%;
                        > div {
                            width: 100%;
                            height: 17px;
                            line-height: 17px;
                            color: @m-white6;
                            font-size: 14px;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                        }
                    }
                    .middle {
                        flex: 1;
                        display: inline-flex;
                        justify-content: space-between;
                        padding: 0 10px;
                        font-size: 16px;
                        color: @m-white6;
                        line-height: 34px;
                    }
                    .right {
                        .inputNumberBlock {
                            float: right;
                            display: block;
                            width: 130px;
                            position: relative;
                            .anticon {
                                color: @m-blue15;
                                font-size: 15px;
                                z-index: 2;
                                line-height: 34px;
                                cursor: pointer;
                            }
                            .anticon-minus {
                                .position(absolute, 0, auto, 0, 10px);
                            }
                            .anticon-plus {
                                .position(absolute, 0, 10px, 0, auto);
                            }
                        }
                        .disabled {
                            .anticon {
                                color: @m-grey51;
                            }
                        }
                    }
                }
            }
        }
    }
    .fixedBtns {
        padding-top: 0;
        left: 0;
        right: 0;
    }
    .formbottom {
        width: 100%;
        .flex;
        flex-direction: column;
        background: @m-black40;
        padding: 0 18px 0 20px;
        .line1 {
            width: 100%;
            padding: 0 12px 0 16px;
            height: 36px;
            line-height: 36px;
            display: inline-flex;
            justify-content: space-between;
            color: @m-grey1;
            font-size: 14px;
        }
        .line2 {
            width: 100%;
            height: 35px;
            line-height: 34px;
            padding-left: 15px;
            padding-right: 10px;
            background: @m-black43;
            .rounded-corners(5px);
            font-size: 14px;
            color: @m-grey1;
            display: inline-flex;
            justify-content: space-between;
            > div {
                align-self: baseline;
                align-items: baseline;
            }
            .right {
                display: inline-flex;
                color: @m-yellow6;
                div:last-child {
                    font-size: 16px;
                    margin-left: 2px;
                }
            }
        }
        .line3 {
            margin-top: 16px;
            width: 100%;
            height: 15px;
            line-height: 15px;
            font-size: 14px;
            text-align: right;
            color: @m-white6;
        }
    }
}
</style>;
