<template>
  <div class="page_container">
    <div class="bg-breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> 组织管理 </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/system/organization' }"> 组织管理 </el-breadcrumb-item>
        <el-breadcrumb-item> 组织详情 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="page_content apaas_scroll">
      <div class="info_row">
        <div class="title">
          <div><span class="icon_box"></span> 基础信息</div>
          <div class="dashed_line"></div>
        </div>
        <div class="info_content">
          <div class="info_box">
            <bg-info :data="baseInfo"></bg-info>
          </div>
          <div class="org_file info_box">
            <div class="pl-1">组织附件</div>
            <div>
              <div class="file_item pl-1" v-for="(item, index) in fileList" :key="'file_' + index">
                <span><bg-icon style="font-size: 24px" :icon="'#bg-ic-' + formatFile(item)"></bg-icon></span>
                <span class="file_name">{{ downloadFileFormatNew(item) }}</span>
                <span class="fr download_btn">
                  <el-button type="primary" @click="downloadFile(item)"
                    ><bg-icon icon="#bg-ic-to-bottom"></bg-icon>下载</el-button
                  >
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="title">
          <div><span class="icon_box"></span> 业务系统信息</div>
          <div class="dashed_line"></div>
        </div>
        <div class="info_content info_box">
          <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true"> </bg-table>
          <div class="pagination_box">
            <bg-pagination
              :page="filter.page"
              :size="filter.limit"
              :total="tableTotal"
              @change-page="changePage"
              @change-size="changeSize">
            </bg-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, computed, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import { downloadFileFormatNew } from "@/services/helper";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
const route = useRoute();

const baseInfo = reactive([
  {
    name: "机构名称",
    value: "",
    nameWidth: 130,
  },
  {
    name: "组织机构代码",
    value: "",
    nameWidth: 130,
  },
  {
    name: "组织管理员数量",
    value: "",
    nameWidth: 130,
  },
  {
    name: "业务系统数量",
    value: "",
    nameWidth: 130,
  },
  {
    name: "组织描述",
    value: "",
    nameWidth: 130,
  },
]);

const headers = reactive([
  {
    label: "业务系统名称",
    prop: "business_name",
  },
  {
    label: "是否启用",
    prop: "state",
  },
  {
    label: "业务系统账号",
    prop: "system_account",
  },
]);

const tableRows = ref([]);
const fileList = ref([]);
const filter = reactive({
  page: 1,
  limit: 10,
});
const tableTotal = ref(0);

const changeSize = (size) => {
  filter.limit = size;
  changePage(1);
};

const changePage = (page) => {
  filter.page = page;
  getSystemInfo();
};

const downloadFile = (data) => {
  const a = document.createElement("a"); // 创建a标签
  a.setAttribute("download", ""); // download属性
  a.setAttribute("href", data); // href链接
  a.click(); // 自执行点击事件
};

const formatFile = (url) => {
  const file = url.split(".")[1];
  let icon = "";
  if ("docx".indexOf(file) !== -1) {
    icon = "c-file-doc";
  } else if ("xlsx".indexOf(file) !== -1) {
    icon = "c-file-xlsx";
  } else if ("pdf".indexOf(file) !== -1) {
    icon = "c-file-pdf";
  } else if ("txt".indexOf(file) !== -1) {
    icon = "c-file-txt";
  } else if ("zip".indexOf(file) !== -1) {
    icon = "c-file-zip";
  } else if ("jpg,png".indexOf(file) !== -1) {
    icon = "c-file-image";
  } else {
    icon = "txt";
  }
  return icon;
};

const getDetail = () => {
  axios
    .get(`/apaas/system/v5/org/detail?organization_id=${route.query.id}&key_word=&state=&limit=&page=&data_type=1`)
    .then((res) => {
      if (res.data.code == 200) {
        const detail = res.data.data.org_info;
        baseInfo[0].value = detail.name;
        baseInfo[1].value = detail.organization_code;
        baseInfo[2].value = detail.org_admin_number;
        baseInfo[3].value = detail.business_system_number;
        baseInfo[4].value = detail.description;
        fileList.value = detail.attachment ? detail.attachment.split(",") : [];
      } else {
        ElMessage.error(res.data.data);
      }
    });
};

const getSystemInfo = () => {
  console.log(11111111);
  const params = { ...filter, organization_id: route.query.id };
  axios.get(`/apaas/system/v5/org/business/msg`, { params }).then((res) => {
    if (res.data.code == 200) {
      tableRows.value = res.data.data || [];
      tableTotal.value = res.data.total;
    } else {
      ElMessage.error(res.data.data);
    }
  });
};

onBeforeMount(() => {
  if (route.query.id) {
    getDetail();
    getSystemInfo();
  }
});
</script>

<style scoped>
.page_content {
  padding: 15px;
  overflow: auto;
  font-size: 14px;
  color: #202531;
}
.info_content {
  /* display: flex; */
}
.org_file {
  margin-top: 15px;
}
.file_item {
  height: 48px;
  line-height: 48px;
  background-color: #fafafa;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 8px;
}
.file_name {
  padding-left: 10px;
  color: #202531;
}
.download_btn {
  padding-right: 4px;
}
.info_row {
  margin-bottom: 40px;
}
.img_box {
  width: 120px\;;
}
.info_box {
  width: 60%;
}

.title {
  font-size: 18px;
  color: #1a1a1a;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.dashed_line {
  flex: 1;
  height: 1px;
  margin: 0 10px;
  border-bottom: dashed 1px #dadee7;
}

.icon_box {
  display: inline-block;
  width: 4px;
  height: 14px;
  background-color: #3759be;
  border-radius: 2px;
  margin-right: 5px;
}

.pagination_box {
  position: sticky;
  position: -webkit-sticky;
  margin-top: 16px;
  bottom: -15px;
  background-color: #fff;
  z-index: 1024;
  height: 40px;
  line-height: 40px;
  padding-top: 5px;
}
.bg-pagination {
  margin-top: 0px;
}
.info_content :deep() .bg-table .empty_container {
  height: 160px;
  padding-top: 25px;
}
</style>
