<template>
    <!-- 修改现货品种 -->
    <a-modal
        class="commonModal addSpotVariety"
        title="修改现货品种"
        v-if="visible"
        v-model:visible="visible"
        centered
        :maskClosable="false"
        @cancel="cancel"
        width="890px"
    >
        <template #footer>
            <a-button key="submit" type="primary" :loading="loading" @click="submit">完成</a-button>
        </template>
        <a-form class="inlineForm" ref="formRef" :model="formState" :rules="rules">
            <fieldset class="formFieldSet">
                <legend>基本信息</legend>
                <a-row :gutter="24">
                    <a-col :span="12">
                        <a-form-item label="现货品种名称" name="deliverygoodsname">
                            <a-input
                                class="dialogInput"
                                v-model:value="formState.deliverygoodsname"
                                style="width: 200px"
                                placeholder="请输入现货品种名称"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="现货品种代码" name="deliverygoodscode">
                            <a-input
                                class="dialogInput"
                                readonly
                                style="width: 200px"
                                v-model:value="formState.deliverygoodscode"
                                placeholder="请输入现货品种代码"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="单位" name="unitid">
                            <a-select
                                class="inlineFormSelect"
                                style="width: 200px"
                                v-model:value="formState.unitid"
                                placeholder="请选择单位"
                            >
                                <a-select-option
                                    v-for="item in unitList"
                                    :value="item.enumitemname"
                                    :key="item.autoid"
                                >{{ item.enumdicname }}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="备注" name="remark">
                            <a-input
                                class="dialogInput"
                                v-model:value="formState.remark"
                                style="width: 588px"
                                placeholder="请输入备注"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
            </fieldset>
            <fieldset class="formFieldSet">
                <legend>商品信息</legend>
                <a-row :gutter="24" class="dialogRowTitle">
                    <a-col :span="6">
                        <span>
                            <span class="red">*</span>
                            商品
                        </span>
                    </a-col>
                    <a-col :span="6">
                        <span>
                            <span class="red">*</span>
                            单位
                        </span>
                    </a-col>
                    <a-col :span="6">
                        <span>
                            <span class="red">*</span>
                            标仓系数
                        </span>
                    </a-col>
                    <a-col :span="6">
                        <span>操作</span>
                    </a-col>
                    <template
                        v-for="(domain, index) in formState.gldwrstandards"
                        :key="domain.index + 'domain'"
                    >
                        <a-col :span="6">
                            <a-form-item
                                :name="['gldwrstandards',index, 'wrstandardname', ]"
                                :rules="rules.gldwrstandards.wrstandardname"
                            >
                                <a-input
                                    class="dialogInput"
                                    v-model:value="domain.wrstandardname"
                                    placeholder="请输入商品"
                                ></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item
                                :name="['gldwrstandards',index,'unitid' ]"
                                :rules="rules.gldwrstandards.unitid"
                            >
                                <a-select
                                    class="inlineFormSelect"
                                    v-model:value="domain.unitid"
                                    placeholder="请选择单位"
                                >
                                    <a-select-option
                                        v-for="item in unitList"
                                        :value="item.enumitemname"
                                        :key="item.autoid"
                                    >{{ item.enumdicname }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item
                                :name="['gldwrstandards',index,'convertfactor']"
                                :rules="rules.gldwrstandards.convertfactor"
                            >
                                <a-input-number
                                    class="dialogInput"
                                    style="width: 200px"
                                    :min="0"
                                    v-model:value="domain.convertfactor"
                                    placeholder="请输入标仓系数"
                                ></a-input-number>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" class="tc">
                            <a-button
                                class="plusBtn"
                                @click="deleteOne('gldwrstandards', index)"
                                v-if="index > 0"
                            >
                                <template #icon>
                                    <MinusOutlined />
                                </template>
                            </a-button>
                            <a-button class="minusBtn" @click="addOne('gldwrstandards')">
                                <template #icon>
                                    <PlusOutlined />
                                </template>
                            </a-button>
                        </a-col>
                    </template>
                </a-row>
            </fieldset>
            <fieldset class="formFieldSet">
                <legend>品牌信息</legend>
                <a-row :gutter="24" class="dialogRowTitle dialogRowTitle2">
                    <a-col :span="12">
                        <span>
                            <span class="red">*</span>
                            品牌
                        </span>
                    </a-col>
                    <a-col :span="12">
                        <span>操作</span>
                    </a-col>
                    <template
                        v-for="(domain, index) in formState.glddgfactoryItems"
                        :key="domain.index + 'domain'"
                    >
                        <a-col :span="12">
                            <a-form-item
                                :name="['glddgfactoryItems',index,'dgfactoryitemvalue']"
                                :rules="rules.glddgfactoryItems.dgfactoryitemvalue"
                            >
                                <a-input
                                    class="dialogInput"
                                    v-model:value="domain.dgfactoryitemvalue"
                                    placeholder="请输入品牌"
                                ></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-button
                                class="plusBtn"
                                @click="deleteOne('glddgfactoryItems', index)"
                                v-if="index > 0"
                            >
                                <template #icon>
                                    <MinusOutlined />
                                </template>
                            </a-button>
                            <a-button class="minusBtn" @click="addOne('glddgfactoryItems')">
                                <template #icon>
                                    <PlusOutlined />
                                </template>
                            </a-button>
                        </a-col>
                    </template>
                </a-row>
            </fieldset>
            <fieldset class="formFieldSet">
                <legend>套保品种信息</legend>
                <a-row :gutter="24" class="dialogRowTitle">
                    <a-col :span="6">
                        <span>
                            <span class="red">*</span>
                            套保品种
                        </span>
                    </a-col>
                    <a-col :span="6">
                        <span>
                            <span class="red">*</span>
                            单位
                        </span>
                    </a-col>
                    <a-col :span="6">
                        <span>
                            <span class="red">*</span>
                            套保系数
                        </span>
                    </a-col>
                    <a-col :span="6">
                        <span>操作</span>
                    </a-col>
                    <template
                        v-for="(domain, index) in formState.wrsconvertdetails"
                        :key="domain.index + 'domain'"
                    >
                        <a-col :span="6">
                            <a-form-item
                                :name="['wrsconvertdetails',index,'middlegoodsid']"
                                :rules="rules.wrsconvertdetails.middlegoodsid"
                            >
                                <a-select
                                    class="inlineFormSelect"
                                    @change="middleChange(domain.middlegoodsid, domain)"
                                    v-model:value="domain.middlegoodsid"
                                    placeholder="请选择套保品种"
                                >
                                    <a-select-option
                                        v-for="item in goodsGroup"
                                        :value="item.goodsgroupid"
                                        :key="item.goodsgroupid"
                                    >{{ item.goodsgroupname }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item :name="['wrsconvertdetails', index, 'unitidName']">
                                <a-input
                                    class="dialogInput"
                                    readonly
                                    v-model:value="domain.unitidName"
                                    placeholder="选择套保品种后自动填入"
                                ></a-input>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6">
                            <a-form-item
                                :name="['wrsconvertdetails', index, 'convertratio']"
                                :rules="rules.wrsconvertdetails.convertratio"
                            >
                                <a-input-number
                                    class="dialogInput"
                                    style="width: 200px"
                                    :min="0"
                                    v-model:value="domain.convertratio"
                                    placeholder="请输入套保系数"
                                ></a-input-number>
                            </a-form-item>
                        </a-col>
                        <a-col :span="6" class="tc">
                            <a-button
                                class="plusBtn"
                                @click="deleteOne('wrsconvertdetails', index)"
                                v-if="index > 0"
                            >
                                <template #icon>
                                    <MinusOutlined />
                                </template>
                            </a-button>
                            <a-button class="minusBtn" @click="addOne('wrsconvertdetails')">
                                <template #icon>
                                    <PlusOutlined />
                                </template>
                            </a-button>
                        </a-col>
                    </template>
                </a-row>
            </fieldset>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watchEffect } from 'vue';
import { closeModal } from '@/common/setup/modal/index';
import { initData } from '@/common/methods/index';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
import { handleFromState, handleGoodsGroup } from './setup';
import { RuleObject } from 'ant-design-vue/es/form/interface';
import { FormState, WRSConvertDetailEx } from './interface';
import { validateCommon } from '@/common/setup/validate';
import { initDG } from '../../list/spot-variety/setup';
import { ErmcpDeliveryGoodsDetailEx } from '@/services/go/ermcp/goodsInfo/interface';
import { mergeTwoObj } from '@/utils/objHandle';
import { getGoodsUnitEnumList } from '@/common/constants/enumsList';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { addDeliveryGoodsApply } from '@/services/proto/delivery';
import { DeliveryGoodsApplyReq } from '@/services/proto/delivery/interface';
import { validateAction } from '@/common/setup/form';

interface Obj {
    [props: string]: any;
}

/**
 * 检验单位
 */
const validateUnit = async (rule: RuleObject, value: number) => {
    return validateCommon(value, '请选择单位');
};

/**
 *
 */
const valideteWR = async (rule: RuleObject, value: number) => {
    return validateCommon(value, '请选择商品');
};

export default defineComponent({
    name: 'modify-custom',
    props: {
        selctedDeliveryGoods: {
            default: initDG,
            type: Object as PropType<ErmcpDeliveryGoodsDetailEx>,
        },
    },
    components: {
        PlusOutlined,
        MinusOutlined,
    },
    setup(props, context) {
        // 控制关闭弹窗
        const { visible, cancel } = closeModal('goods_info_spot_normal_modify');
        // 下单方法
        const loading = ref<boolean>(false);

        // 单位列表
        const unitList = getGoodsUnitEnumList();

        // 表单
        const formRef = ref();
        const { formState, addOne, deleteOne } = handleFromState();
        const rules = {
            deliverygoodsname: [{ required: true, message: '请输入现货品种名称', trigger: 'blur' }],
            // unitid: [{ required: true, message: '请选择单位', trigger: 'change' }],
            unitid: [{ required: true, validator: validateUnit, trigger: 'change' }],
            gldwrstandards: {
                unitid: { required: true, validator: validateUnit, trigger: 'change' },
                wrstandardname: { required: true, message: '请输入商品', trigger: 'blur' },
                convertfactor: { required: true, message: '请输入标仓系数', trigger: 'blur', type: 'number' },
            },
            glddgfactoryItems: {
                dgfactoryitemvalue: { required: true, message: '请输入品牌', trigger: 'blur' },
            },
            wrsconvertdetails: {
                middlegoodsid: { required: true, validator: valideteWR, trigger: 'change' },
                convertratio: { required: true, message: '请输入套保系数', trigger: 'blur', type: 'number' },
            },
        };

        function submit() {
            validateAction<FormState>(formRef, formState).then((param) => {
                const unitid = param.unitid === undefined ? 0 : param.unitid;
                const reqParam: DeliveryGoodsApplyReq = {
                    deliverygoodsid: param.deliverygoodsid,
                    unitid: unitid,
                    deliverygoodsname: param.deliverygoodsname,
                    deliverygoodscode: param.deliverygoodscode,
                    type: 2,
                    remark: param.remark,
                    gldwrstandards: param.gldwrstandards.map((value) => {
                        const gldunitid = value.unitid === undefined ? 0 : value.unitid;
                        const convertfactors: any = value.convertfactor === null ? 0 : value.convertfactor;
                        return {
                            wrstandardid: value.wrstandardid,
                            wrstandardname: value.wrstandardname,
                            unitid: gldunitid,
                            convertfactor: (convertfactors as string) ? Number(convertfactors) : convertfactors,
                        };
                    }),
                    glddgfactoryItems: param.glddgfactoryItems,
                    wrsconvertdetails: param.wrsconvertdetails.map((value) => {
                        const middlegoodsid = value.middlegoodsid === undefined ? 0 : value.middlegoodsid;
                        const convertratio: any = value.convertratio === null ? 0 : value.convertratio;
                        const wrsunitid = value.unitid === null ? 0 : value.unitid;
                        return {
                            middlegoodsid: middlegoodsid,
                            convertratio: convertratio ? Number(convertratio) : convertratio,
                            unitid: wrsunitid,
                        };
                    }),
                };
                requestResultLoadingAndInfo(addDeliveryGoodsApply, reqParam, loading, ['修改现货品种成功', '修改现货品种失败:']).then(() => {
                    cancel();
                    context.emit('refresh');
                });
            });
        }

        const { goodsGroup, getGoodsGroup } = handleGoodsGroup();

        /**
         * 切换套保品种时候，获取对应的单位
         */
        function middleChange(id: number, value: WRSConvertDetailEx) {
            const obj = goodsGroup.value.find((e) => e.goodsgroupid === id);
            if (obj) {
                value.unitidName = obj.enumdicname;
                value.unitid = obj.goodunitid;
            }
        }

        watchEffect(() => {
            if (props.selctedDeliveryGoods.data.deliverygoodsname) {
                const { data, gblist, gmlist, mgList } = props.selctedDeliveryGoods;
                mergeTwoObj(formState, props.selctedDeliveryGoods);
                mergeTwoObj(formState, data);
                // 单位
                formState.unitid = data.goodsunitid;
                // 品类
                formState.gldwrstandards = gmlist.map((e) => {
                    const { wrstandardid, wrstandardname, convertfactor, unitid } = e;
                    return { wrstandardid, wrstandardname, convertfactor: convertfactor, unitid };
                });
                // 品牌
                formState.glddgfactoryItems = gblist.map((e) => {
                    const { brandid, brandname } = e;
                    return { dgfactoryitemid: brandid, dgfactoryitemvalue: brandname };
                });
                // 套保信息
                formState.wrsconvertdetails = mgList.map((e) => {
                    const { goodsgroupid, goodsunitid, enumdicname } = e.mg;
                    return {
                        middlegoodsid: goodsgroupid,
                        unitid: goodsunitid,
                        unitidName: enumdicname,
                        convertratio: e.convertratio,
                    };
                });
            }
        });
        initData(() => {
            getGoodsGroup();
        });
        return {
            visible,
            cancel,
            formRef,
            formState,
            addOne,
            deleteOne,
            rules,
            unitList,
            goodsGroup,
            middleChange,
            submit,
            loading,
            maskClosableFlag: false,
        };
    },
});
</script>

<style lang="less">
.addSpotVariety {
    width: 100%;
    height: 100%;
    // padding: 30px;
    .ant-form.inlineForm .ant-row.ant-form-item .ant-form-item-label {
        width: 120px !important;
    }

    .upload {
        display: inline-flex;

        .ant-btn.uploadBtn {
            width: 60px;
            height: 30px;
            background: @m-blue0;
            border: 0;
            padding: 0;
            text-align: center;
            font-size: 14px;
            color: @m-white0;
            .rounded-corners(3px);

            &:hover {
                background: @m-blue0-hover;
                color: @m-white0-hover;
            }
        }

        .look {
            color: @m-blue0;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
        }
    }

    .red {
        color: @m-red1;
    }

    .ant-btn.minusBtn,
    .ant-btn.plusBtn {
        width: 26px;
        height: 26px;
        .inlineflex;
        justify-content: center;
        background: @m-blue0;
        .rounded-corners(3px);
        border: 0;

        .anticon {
            font-size: 12px;
            color: @m-white0;
            align-self: center;
            align-items: center;
        }

        &:hover,
        &:focus {
            background: @m-blue0-hover;

            .anticon {
                color: @m-white0-hover;
            }
        }
    }

    .ant-btn.plusBtn {
        margin-right: 10px;
        background: transparent;
        border: 1px solid #3a87f7;

        .anticon {
            color: @m-blue0;
        }
    }

    .dialogTable {
        .ant-table {
            .ant-table-content {
                .ant-table-body {
                    table {
                        tr {
                            td {
                                padding: 0;

                                .ant-input.dialogInput {
                                    height: 34px;
                                    line-height: 34px;
                                    border: 0;
                                    border-radius: 0;
                                }

                                .dialogSelect.ant-select-single {
                                    float: left;
                                    margin-right: 0;

                                    .ant-select-selector {
                                        padding: 0 10px;
                                        height: 34px;
                                        background: @m-grey21;
                                        border: 0;
                                        border-radius: 0;

                                        .ant-select-selection-placeholder {
                                            color: @m-grey10;
                                            text-align: left;
                                        }
                                    }

                                    .ant-select-arrow {
                                        color: @m-blue0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .ant-form.inlineForm {
        .ant-row.dialogRowTitle {
            .ant-col {
                .ant-row.ant-form-item {
                    .ant-col.ant-form-item-control-wrapper {
                        width: 100%;

                        .ant-form-item-control {
                            .ant-form-item-children {
                                .ant-input.dialogInput {
                                    border-radius: 0;
                                    margin-top: 1px;
                                    // margin-left: -1px;
                                    // width: calc(100% + 2px);
                                }

                                .ant-select.inlineFormSelect {
                                    margin-top: 1px;

                                    .ant-select-selector {
                                        text-align: left;
                                    }
                                }
                            }
                        }

                        .ant-form-item-control.has-error {
                            text-align: left;

                            .ant-form-item-children {
                                .ant-input.dialogInput {
                                    background: @m-grey21;
                                }
                            }

                            .ant-form-explain {
                                color: @m-red1;
                            }
                        }
                    }
                }
            }

            .ant-col {
                text-align: center;
            }
        }

        .ant-row.dialogRowTitle2 {
            .ant-col:nth-child(3),
            .ant-col:nth-child(4) {
                border-top: 1px solid @m-grey20;
            }
        }
    }
}
</style
>;
