<template>
  <PageWrapper content-class="bg-white p-5">
    <div class="m-3 flex">
      <div class="w-170px text-right w-min-170px">用户名 (CLD)：</div>
      <div class="ml-4">{{ info?.username }}</div>
    </div>
    <div class="m-3 flex">
      <div class="w-170px text-right w-min-170px">手机：</div>
      <div class="ml-4">{{ info?.telephone }}</div>
    </div>
    <div class="m-3 flex">
      <div class="w-170px text-right w-min-170px">电话：</div>
      <div class="ml-4">{{ info?.fixedphone }}</div>
    </div>
    <div class="m-3 flex">
      <div class="w-170px text-right w-min-170px">邮箱：</div>
      <div class="ml-4">{{ info?.email }}</div>
    </div>
    <div class="m-3 flex">
      <div class="w-170px text-right w-min-170px">QQ：</div>
      <div class="ml-4">{{ info?.qq }}</div>
    </div>
    <div class="m-3 flex">
      <div class="w-170px text-right w-min-170px">办事处：</div>
      <div class="ml-4">{{ info?.category }}</div>
    </div>
    <div class="m-3 flex">
      <div class="w-170px text-right w-min-170pxt">职位：</div>
      <div class="ml-4">{{ info?.position }}</div>
    </div>
    <div class="m-3 flex" v-if="info">
      <div class="w-170px text-right w-min-170px">登录使用：</div>
      <a-radio-group v-model:value="info.canLogin" @change="onChange" class="ml-4">
        <a-radio-button :value="1">{{ loginPassText }}</a-radio-button>
        <a-radio-button :value="0">{{ loginForbidText }}</a-radio-button>
      </a-radio-group>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { computed, defineComponent, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import { getManagerInfoById, toggleManagerStatus } from '/@/api/sys/manager'
  import { PageWrapper } from '/@/components/Page'
  import { ManagerInfoGetResultModel } from '/@/api/sys/model/managerModel'
  import { Radio } from 'ant-design-vue'
  import { RadioChangeEvent } from 'ant-design-vue/lib/radio'
  import { useMessage } from '/@/hooks/web/useMessage'
  export default defineComponent({
    name: 'ManagerDetail',
    components: {
      PageWrapper,
      ARadioButton: Radio.Button,
      ARadioGroup: Radio.Group
    },
    props: {
      id: {
        type: String as PropType<string>,
        default: ''
      }
    },
    setup() {
      const info = ref<Nullable<ManagerInfoGetResultModel>>(null)
      const route = useRoute()
      const { createMessage } = useMessage()
      const loginPassText = computed(() => (info.value?.canLogin === 1 ? '已开启' : '开启'))
      const loginForbidText = computed(() => (info.value?.canLogin === 0 ? '已禁止' : '禁止'))
      async function fetchManagerInfo(id: string) {
        const data = await getManagerInfoById({ id })
        info.value = data
      }
      watch(
        () => route.params.id,
        async (newId: string) => {
          if (newId) {
            await fetchManagerInfo(newId)
          }
        },
        {
          immediate: true
        }
      )

      async function submitManagerStatus(id: string, status: 0 | 1) {
        await toggleManagerStatus({ id, canLogin: status })
      }

      function onChange(e: RadioChangeEvent) {
        try {
          submitManagerStatus(info.value?.id || '', e.target?.value || 0)
        } finally {
          createMessage.success(`已${e.target?.value === 1 ? '允许' : '禁止'} ${info.value?.username} 登录`)
        }
      }
      return { info, onChange, loginPassText, loginForbidText }
    }
  })
</script>
