<template>
  <a-page-header
    :title="title"
    :style="{ padding: screenWidth > 480 ? '16px 24px' : '0' }"
    @back="() => $router.go(-1)"
  >
    <a-spin :spinning="spinning">
      <a-card
        :bordered="false"
        :body-style="{ paddingTop: '5px' }"
        v-if="isShow"
      >
        <a-tabs v-model:active-key="active" @change="onChange">
          <a-tab-pane tab="基本信息" key="base">
            <AssetsInfo
              :data="form"
              :logo="logo"
              :assets-qrcode="assetsQrcode"
              @done="reload"
            />
          </a-tab-pane>
          <a-tab-pane
            tab="成员管理"
            key="users"
            v-if="hasRole('superAdmin') || hasRole('admin')"
          >
            <AssetsUsers :assets-id="assetsId" :data="form" @done="reload" />
          </a-tab-pane>
        </a-tabs>
      </a-card>
      <a-card v-else :bordered="false">
        <div style="max-width: 960px; margin: 0 auto">
          <a-result
            status="error"
            title="无查看权限"
            sub-title="请先添加为项目成员"
          >
            <template #extra>
              <a-space size="middle">
                <a-button type="primary" @click="openUrl('/assets/server')"
                  >返回</a-button
                >
              </a-space>
            </template>
          </a-result>
        </div>
      </a-card>
    </a-spin>
  </a-page-header>
</template>

<script lang="ts" setup>
  import { ref, unref, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import AssetsInfo from './components/assets-info.vue';
  import AssetsUsers from './components/assets-users.vue';
  import { getAssets } from '@/api/oa/assets';
  import useFormData from '@/utils/use-form-data';
  import { Assets } from '@/api/oa/assets/model';
  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
  import { hasRole } from '@/utils/permission';
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import { openUrl } from '@/utils/common';
  import { pageAssetsUser } from '@/api/oa/assets/user';

  const { currentRoute } = useRouter();
  // 当前选项卡
  const active = ref('base');
  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { screenWidth } = storeToRefs(themeStore);
  const title = ref('项目名称');
  const spinning = ref(true);
  const isShow = ref(true);
  const logo = ref<any[]>([]);
  const assetsId = ref<number>(0);
  const assetsQrcode = ref<any[]>([]);
  const images = ref<ItemType[]>([]);

  // 服务器信息
  const { form, assignFields, resetFields } = useFormData<Assets>({
    type: "服务器",
    code: "",
    createTime: "",
    endTime: "",
    name: "",
    brand: undefined,
    account: "",
    password: "",
    panelAccount: "",
    panelPassword: "",
    panel: "",
    financeAmount: 0,
    financeYears: 0,
    financeRenew: 0,
    customerId: undefined,
    customerName: "",
    companyName: "",
    financeCustomerName: "",
    financeCustomerContact: "",
    financeCustomerPhone: "",
    brandAccount: "",
    brandPassword: "",
    btSign: "",
    openPort: "",
    configuration: "",
    comments: "",
    root: "root",
    sortNumber: 100,
    status: "0",
    assetsId: 0,
    visibility: "private",
    userList: [],
    userId: undefined,
    // 成员管理
    users: [],
  });

  const onChange = () => {
    reload();
  };

  /**
   * 加载数据
   */
  const reload = () => {
    resetFields();
    // 加载项目详情
    getAssets(assetsId.value)
      .then((data) => {
        console.log(data)
        assignFields(data);
        if (data.code) {
          title.value = data.code;
          // 修改页签标题
          setPageTabTitle(data.code);
        }
        isShow.value = true;
        spinning.value = false;
      })
      .catch((err) => {
        console.log(err)
        isShow.value = false;
        spinning.value = false;
      });
    // 加载项目成员
    pageAssetsUser({ assetsId: assetsId.value }).then((res) => {
      if (res?.list) {
        form.users = res.list;
      }
    });
  };

  watch(
    currentRoute,
    (route) => {
      const { params } = unref(route);
      const { id } = params;
      if (id) {
        assetsId.value = Number(id);
      }
      reload();
    },
    { immediate: true }
  );
</script>

<script lang="ts">
  export default {
    name: 'AssetsDetail'
  };
</script>
