<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {matteDetail} from "@/http/apis/commonApi.ts";

const route = useRoute()
const router = useRouter()
const id = route.query.id || ''
const detailData = ref({})
onMounted(() => {
  getmatteDetail()
})

async function getmatteDetail() {
  detailData.value = (await matteDetail(id)).data
  document.title = detailData.value.matterName
}

</script>

<template>
  <div class="app-container">
    <table class="mytable" border="1px" cellspacing="0px" cellpadding="10px" bgcolor="#fff">
      <tbody align="center">
      <tr>
        <td colspan="4" class="table-title"> 基本信息</td>
      </tr>
      <tr>
        <td class="table-title">服务内容</td>
        <td colspan="3" class="table-dec">
          {{ detailData.serviceContent }}
        </td>
      </tr>
      <tr>
        <td colspan="4" class="table-title"> 办事信息</td>
      </tr>
      <tr>
        <td class="table-title">服务对象</td>
        <td class="table-dec">{{ detailData.serviceObject || '法人' }}</td>
        <td class="table-title"> 办理渠道</td>
        <td class="table-dec">{{ ['现场窗口申请', '全程网办'][detailData.handleChannel - 1] || '全程网办' }}</td>
      </tr>
      <tr>
        <td class="table-title">办理地点</td>
        <td colspan="3" class="table-dec">{{
            detailData.handleAddress || '柯桥区企业综合服务中心（绍兴市柯桥区齐贤街道纺都路1066号）'
          }}
        </td>
      </tr>
      <tr>
        <td class="table-title">办理时间</td>
        <td colspan="3" class="table-dec"> {{
            detailData.handleTime || '（工作日）上午：8:30-12:00；下午：14:00-17:00'
          }}
        </td>
      </tr>
      <tr>
        <td class="table-title">咨询电话</td>
        <td colspan="3" class="table-dec">{{ detailData.telephone }}</td>
      </tr>

      <tr>
        <td colspan="4" class="table-title"> 收费信息</td>
      </tr>


      <tr>
        <td class="table-title">是否收费</td>
        <td class="table-dec"> {{ detailData.free ? '不收费' : '收费' }}</td>
        <td class="table-title">网上支付</td>
        <td class="table-dec">{{ detailData.onlinePay ? '支持' : '不支持' }}</td>
      </tr>

      <tr>
        <td colspan="4" class="table-title"> 服务信息</td>
      </tr>
      <tr>
        <td class="table-title">行使层级</td>
        <td class="table-dec"> {{ detailData.exerciseLevel || '区县级' }}</td>
        <td class="table-title">实施主体性质</td>
        <td class="table-dec"> {{ ['法定机关', '第三方中介机构'][detailData.implSubjectNature - 1] || '法定机关' }}</td>
      </tr>

      <tr>
        <td class="table-title">服务流程</td>
        <td colspan="3" class="table-dec">{{ detailData.serviceProcess }}</td>
      </tr>
      </tbody>

    </table>

  </div>
</template>

<style lang="less">
.app-container {
  padding-top: 50px;
  background-color: white; /* 设置白色背景 */
  min-height: calc(100vh - 50px);; /* 确保背景覆盖整个视口高度 */
}

.mytable {
  margin-left: 50px;
  margin-right: 50px;
  border-collapse: collapse; /* 确保表格边框合并为单一边框 */
  border: 1px solid #ccc; /* 设置表格边框样式和颜色 */
}


.table-title {
  background: #F2F4FD;

  font-weight: 600;
  font-size: 40px;
  color: #2F313D;
  text-align: center;
  font-style: normal;

  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
}

.table-dec {
  font-weight: 400;
  font-size: 40px;
  color: #2F313D;
}
</style>