<template>
  <!-- 交易账号通用详情-->
  <Des :list="desList"
       :slotDesName="'授权期货账户'">
    <a-checkbox-group class="commonCheckboxGroup"
                      v-model:value="logintaaccounts">
      <a-row>
        <a-col :span="12"
               v-for="(item, index) in selectedData.acclist"
               :key="index"
               :class="[index > 1 ? 'mt10' : '']">
          <a-checkbox :value="item.accountid"
                      disabled>
            {{item.accountname}}/{{item.accountid}}
          </a-checkbox>
        </a-col>
      </a-row>
    </a-checkbox-group>
  </Des>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watchEffect } from 'vue';
import { ErmcpLoginUser, ErmcpLoginUserEx } from '@/services/go/ermcp/account/interface';
import { Des, handleDesList } from '@/common/components/commonDes';
import { handleRoles } from '../setup';

export default defineComponent({
    name: 'business-comom-detail',
    components: {
        Des,
    },
    props: {
        firstBtnData: {
            type: Object as PropType<ErmcpLoginUserEx>,
            default: {},
        },
        selectedData: {
            type: Object as PropType<ErmcpLoginUser>,
            default: {},
        },
    },
    setup(props) {
        const { desList, getDesList } = handleDesList();
        // 账户角色
        const logintaaccounts = ref<number[]>([]);
        watchEffect(() => {
            if (props.selectedData) {
                const data = props.selectedData;
                getDesList([
                    { label: '所属用户', value: props.firstBtnData.rolename },
                    { label: '账户名称', value: data.loginname },
                    { label: '登录账号', value: data.logincode },
                    { label: '手机号码', value: data.mobile },
                ]);
                logintaaccounts.value = data.acclist?.map((e) => e.accountid);
            }
        });
        return {
            logintaaccounts,
            desList,
        };
    },
});
</script>

<style lang="less">
</style>;
