<template>
  <!-- 账户角色-->
  <Des :list="desList"
       :slotDesName="'账户角色'">
    <a-checkbox-group class="commonCheckboxGroup"
                      v-model:value="selectedRole">
      <a-row>
        <a-col :span="12"
               v-for="item in roleTypeList"
               :key="item.key">
          <a-checkbox disabled
                      :value="item.key">
            {{item.value}}
          </a-checkbox>
        </a-col>
      </a-row>
    </a-checkbox-group>
  </Des>
</template>

<script lang="ts">
import { defineComponent, PropType, watchEffect } from 'vue';
import { ErmcpLoginUser } 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: {
        selectedData: {
            type: Object as PropType<ErmcpLoginUser>,
            default: {},
        },
    },
    setup(props) {
        const { desList, getDesList } = handleDesList();
        // 账户角色
        const { roleTypeList, selectedRole, getSelectedRole } = handleRoles();
        watchEffect(() => {
            if (props.selectedData.roletype) {
                const data = props.selectedData;
                getDesList([
                    { label: '登录账号', value: data.logincode },
                    { label: '账户名称', value: data.accountname },
                    { label: '手机号码', value: data.mobile },
                ]);
                // 选中的角色
                getSelectedRole(props.selectedData.roletype);
            }
        });
        return {
            roleTypeList,
            selectedRole,
            desList,
        };
    },
});
</script>

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