<template>
    <!-- 修改套利 -->
  <a-modal class="commonModal add-arbitrage"
           title="修改"
           v-model:visible="visible"
           @cancel="cancel"
           centered
           :maskClosable="false"
           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">
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="业务类型"
                       name="">
            <span class="white">套利</span>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="现货品种"
                       class="checkboxGroupItem"
                       name="">
            <a-checkbox-group class="commonCheckboxGroup">
              <a-row>
                <a-col>
                  <a-checkbox value="A">钢管</a-checkbox>
                </a-col>
                <a-col>
                  <a-checkbox value="B">铁矿石</a-checkbox>
                </a-col>
                <a-col>
                  <a-checkbox value="C">大豆</a-checkbox>
                </a-col>
                <a-col>
                  <a-checkbox value="D">玉米</a-checkbox>
                </a-col>
                <a-col>
                  <a-checkbox value="E">棉花</a-checkbox>
                </a-col>
                <a-col>
                  <a-checkbox value="F">铜板</a-checkbox>
                </a-col>
              </a-row>
              <a-row>
                <a-col>
                  <a-checkbox value="G">铜块</a-checkbox>
                </a-col>
                <a-col>
                  <a-checkbox value="H">螺纹钢</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="期货账户"
                       class="checkboxGroupItem"
                       name="">
            <a-checkbox-group class="commonCheckboxGroup autoWidth">
              <a-row>
                <a-col :span="12">
                  <a-checkbox value="A">期货母账户/25000000010</a-checkbox>
                </a-col>
                <a-col :span="12">
                  <a-checkbox value="B">铜套保专用账户/25000000011</a-checkbox>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-checkbox value="C">银套保专用账户/25000000012</a-checkbox>
                </a-col>
                <a-col :span="12">
                  <a-checkbox value="D">铁矿石套保专用账户/25000000013</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { closeModal } from '@/common/setup/modal/index';
import { initData } from '@/common/methods/index';
import { defineComponent, ref, reactive, toRaw, UnwrapRef } from 'vue';
import { AllEnums } from '@/services/go/commonService/interface';
import { RuleObject, ValidateErrorEntity } from 'ant-design-vue/es/form/interface';

export default defineComponent({
    name: 'add-custom',
    components: {},
    setup() {
        // 控制关闭弹窗
        const { visible, cancel } = closeModal('account_info_business_btn_modify');
        // 证件类型
        // const cardTypeList = ref<AllEnums[]>(getCardType());
        // // 表单
        // const formRef = ref();
        // const formState: UnwrapRef<FormState> = reactive(initFormState());
        // const rules = {
        //     userinfotype: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
        //     customername: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        //     nickname: [{ required: true, message: '请输入企业简称', trigger: 'blur' }],
        //     cardtype: [{ required: true, message: '请选择证件类型', trigger: 'change' }],
        // };
        // // 下单方法
        // const { loading, applyAction } = handleApply();
        // function isPersonal(): boolean {
        //     return formState.userinfotype === '1';
        // }
        // function submit() {
        //     formRef.value
        //         .validate()
        //         .then(() => {
        //             const param = toRaw(formState);
        //             applyAction(param);
        //             console.log('values', formState);
        //         })
        //         .catch((error: ValidateErrorEntity<FormState>) => {
        //             console.log('error', error);
        //         });
        // }
        return {
            // formState,
            // rules,
            // formRef,
            // cardTypeList,
            // isPersonal,
            visible,
            cancel,
            // submit,
            // loading,
        };
    },
});
</script>

<style lang="less">
.add-arbitrage {
    .ant-checkbox-group.commonCheckboxGroup .ant-checkbox-wrapper {
        width: 100px;
        span + span {
            margin-right: 0;
        }
    }
    .ant-checkbox-group.autoWidth {
        width: 520px;
        .ant-checkbox-wrapper {
            width: auto;
        }
    }
    .checkboxGroupItem {
        .ant-row {
            margin-bottom: 10px;
        }
    }
}
</style
>;