<template>
  <!-- 修改交易员 -->
  <a-modal class="commonModal add-traders"
           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="12">
          <a-form-item label="所属用户"
                       name="">
            <span class="white">{{firstBtnData.rolename}}</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="账户名称"
                       name="accountname">
            <a-input class="dialogInput"
                     style="width: 200px"
                     v-model:value="formState.accountname"
                     placeholder="请输入账户名称" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="登录账号"
                       name="logincode">
            <a-input class="dialogInput"
                     readonly
                     style="width: 200px"
                     v-model:value="formState.logincode"
                     placeholder="请输入登录账号" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="手机号码"
                       name="mobile">
            <a-input class="dialogInput"
                     v-model:value="formState.mobile"
                     style="width: 200px"
                     placeholder="请输入手机号码" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="授权期货账户"
                       class="checkboxGroupItem"
                       name="logintaaccounts">
            <a-checkbox-group class="commonCheckboxGroup"
                              v-model:value="formState.logintaaccounts">
              <a-row>
                <a-col :span="12"
                       v-for="(item, index) in filerAccount()"
                       :key="index"
                       :class="[index > 1 ? 'mt10' : '']">
                  <a-checkbox :value="item.accountid">{{item.accountname}}/{{item.accountid}}
                  </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 { defineComponent, ref, PropType, watchEffect } from 'vue';
import { ErmcpLoginUser, ErmcpLoginUserEx, ErmcpTaAccount } from '@/services/go/ermcp/account/interface';
import { LoginaccountOperateReq, LoginTaaccount } from '@/services/proto/accountinfo/interface';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { loginAccountOperate } from '@/services/proto/accountinfo';
import { handleBusinessForm } from '../setup';
import { mergeTwoObj } from '@/utils/objHandle';
import { validateAction } from '@/common/setup/form';
import { BusinessFormState } from '../interface';

export default defineComponent({
    name: 'account_info_trade_btn_child_modify',
    props: {
        firstBtnData: {
            type: Object as PropType<ErmcpLoginUserEx>,
            default: {},
        },
        selectedData: {
            type: Object as PropType<ErmcpLoginUser>,
            default: {},
        },
        tableList: {
            type: Array as PropType<ErmcpLoginUserEx[]>,
            default: [],
        },
        accountList: {
            default: [],
            type: Object as PropType<ErmcpTaAccount[]>,
        },
    },
    setup(props, context) {
        // 控制关闭弹窗
        const { visible, cancel } = closeModal('account_info_trade_btn_child_modify');
        const loading = ref<boolean>(false);
        const { rules, formState, formRef } = handleBusinessForm();
        function filerAccount() {
            return props.accountList.filter((e) => e.relateduserid === props.firstBtnData.roleid);
        }
        watchEffect(() => {
            if (visible.value && props.selectedData) {
                const { selectedData } = props;
                mergeTwoObj(formState, selectedData);
                formState.logintaaccounts = selectedData.acclist?.map((e) => e.accountid);
                formState.accountname = selectedData.loginname;
            }
        });
        function submit() {
            validateAction<BusinessFormState>(formRef, formState).then((res) => {
                const reqParam: LoginaccountOperateReq = {
                    operatetype: 2, // uint32 操作类型-1:新增 2:修改 3:新增管理员 4:修改管理员 5:锁定 6:解锁 7:注销 8:恢复 9:重置密码 10:新增登录帐号 11:停用用户 12：恢复用户 13:修改用户信息
                    logincode: res.logincode, // string 登录账号
                    accountname: res.accountname, // string 账户名称
                    password: res.password, // string 登录密码（明文）
                    mobile: res.mobile, // string 手机号码（明文）
                    roleids: [24], // uint64 账号角色
                    userid: +props.selectedData.userid,
                    loginid: +props.selectedData.loginid,
                    logintaaccounts: res.logintaaccounts.map((res) => {
                        const taAccount: LoginTaaccount = {
                            accountid: res,
                        };
                        return taAccount;
                    }), // LoginTaaccount 期货账户（勾选交易员必填）
                };
                requestResultLoadingAndInfo(loginAccountOperate, reqParam, loading, ['修改交易员成功', '修改交易员失败:']).then(() => {
                    cancel();
                    context.emit('refresh');
                });
            });
        }
        return {
            formState,
            rules,
            formRef,
            visible,
            cancel,
            submit,
            loading,
            filerAccount,
        };
    },
});
</script>

<style lang="less">
.add-traders {
}
</style
>;