<template>
  <section class="app-container" v-loading="loading">
    <section class="header">
      <section class="back" @click="goBack()">
        <el-icon size="20"><Back /></el-icon>
        企业详情
      </section>
    </section>
    <el-descriptions border>
      <template #title>
        <section class="des-title">
          <span>基本信息</span>
          <el-button icon="edit" circle size="small" type="primary" plain />
        </section>
      </template>
      <el-descriptions-item label="企业名称">
        <section class="row">
          <DictTag :options="enterprise_type" :value="detail.info.type" />
          <span>{{ detail.info.enterprisesName }}</span>
        </section>
      </el-descriptions-item>
      <el-descriptions-item label="注册号">{{
        detail.info.registrationNumber
      }}</el-descriptions-item>
      <el-descriptions-item label="所属区域">
        <DictTag :options="sys_region" :value="detail.info.region" />
      </el-descriptions-item>
      <el-descriptions-item label="地址">
        {{ detail.info.address }}
      </el-descriptions-item>
      <el-descriptions-item label="环保负责人">
        <el-tag v-if="detail.info.contactName"
          >{{ detail.info.contactName }},{{
            detail.info.environmentalContactPhone
          }}</el-tag
        >
      </el-descriptions-item>
      <el-descriptions-item label="成立时间">
        {{ customFormatDate(detail.info.establishmentDate, "YYYY年M月D日") }}
      </el-descriptions-item>

    </el-descriptions>

	  <el-descriptions  style="margin-top: 20px" direction="vertical">
		  <template #title>
			  <section class="des-title">
				  <span>图文介绍</span>
				  <el-button icon="edit" circle size="small" type="primary" plain />
			  </section>
		  </template>
		  <el-descriptions-item label-align="center" :rowspan="3" align="center">
			  <section v-html="detail.info.introduction"></section>
		  </el-descriptions-item>
	  </el-descriptions>
  </section>
</template>

<script setup>
import { getEnterprises } from "@/api/system/enterprises/enterprises";
import DictTag from "@/components/DictTag/index.vue";
import { customFormatDate } from "@/utils";
const { proxy } = getCurrentInstance();

const { enterprise_type, sys_region } = proxy.useDict(
  "enterprise_type",
  "sys_region",
);
const route = useRoute();
//企业信息
const detail = ref({
  info: {},
});
const router = useRouter();
const loading = ref(false);
function init() {
  loading.value = true;
  getEnterprises(route.query.id).then((res) => {
    detail.value.info = res.data;
    loading.value = false;
  });
}

function goBack() {
  router.go(-1);
}

init();
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  border-bottom: 1px dashed var(--el-color-primary);
  color: var(--el-color-primary);
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 20px;
  justify-content: space-between;
  .back {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

.des-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.row {
  display: flex;
  gap: 10px;
}
</style>
