<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">
            <AppInfo
              :data="form"
              :appField="appField"
              :logo="logo"
              :app-qrcode="appQrcode"
              @done="reload"
            />
          </a-tab-pane>
          <!--          <a-tab-pane tab="当前项目" key="profile" />-->
        </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('/oa/app/index')"
                  >返回</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 AppInfo from './components/app-info.vue';
  import useFormData from '@/utils/use-form-data';
  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
  import { hasRole } from '@/utils/permission';
  import { setPageTabTitle } from '@/utils/page-tab-util';
  import { getTowerEquipment } from '@/api/tower/equipment';
  import { TowerEquipment } from '@/api/tower/equipment/model';
  import { openUrl } from '@/utils/common';

  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 equipmentId = ref<number>(0);
  const appQrcode = ref<any[]>([]);
  const images = ref<ItemType[]>([]);
  const appField = ref<TowerEquipment[]>();

  // 应用信息
  const { form, assignFields, resetFields } = useFormData<TowerEquipment>({
    equipmentId: undefined,
    name: undefined,
    model: undefined,
    equipmentNo: undefined,
    factoryNo: undefined,
    factoryDate: undefined,
    manufactor: undefined,
    lifeYear: undefined,
    surplusYear: undefined,
    scrapDate: undefined,
    beianNo: undefined,
    licenceNo: undefined,
    company: undefined,
    organization: undefined,
    warehouse: undefined,
    source: undefined,
    filingNo: undefined,
    machineNo: undefined,
    maxLiftingHeight: undefined,
    armLength: undefined,
    isOutOrg: undefined,
    buyDate: undefined,
    currentLocation: undefined,
    designHeight: undefined,
    height: undefined,
    ratedLoad: undefined,
    files: undefined,
    file1: undefined,
    file2: undefined,
    file3: undefined,
    file4: undefined,
    file5: undefined,
    file6: undefined,
    file7: undefined,
    users: undefined,
    status: undefined,
    comments: undefined,
    userId: undefined,
    deleted: undefined,
    tenantId: undefined,
    createTime: undefined,
    maxRatedLoad: undefined,
    securityStatus: undefined,
    projectName: undefined,
    competentDepartment: undefined,
    projectList: undefined
  });

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

  /**
   * 加载数据
   */
  const reload = () => {
    resetFields();
    logo.value = [];
    appQrcode.value = [];
    images.value = [];
    appField.value = [];
    // 加载项目详情
    getTowerEquipment(equipmentId.value)
      .then((data) => {
        assignFields(data);
        if (data.name) {
          title.value = data.name;
          // 修改页签标题
          setPageTabTitle(data.name);
        }
        // if (data.appIcon) {
        //   logo.value.push({
        //     uid: data.appId,
        //     url: data.appIcon,
        //     status: 'done'
        //   });
        // }
        // if (data.appQrcode) {
        //   appQrcode.value.push({
        //     uid: data.appId,
        //     url: data.appQrcode,
        //     status: 'done'
        //   });
        // }
        // if (data.images) {
        //   const arr = JSON.parse(data.images);
        //   arr.map((d, i) => {
        //     images.value.push({
        //       uid: d.uid,
        //       url: d.url,
        //       status: 'done'
        //     });
        //   });
        // }
        isShow.value = true;
        spinning.value = false;
      })
      .catch((err) => {
        isShow.value = false;
        spinning.value = false;
      });
  };

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

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