<template>
  <div>
    <el-row :gutter="20" class="detail">

      <el-col :xs="24" :lg="8" :sm="12">
        <label>名称:</label> <span>{{ info.name }}</span>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <label>地区:</label> <span>{{ [info.province, info.city, info.area].join(' / ') }}</span>
      </el-col>

      <el-col :span=24>
        <label>详细地址:</label> <span>{{ info.address }}</span>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <label>在校人数:</label> <span>{{ info.person_num }}</span>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <label>负责人:</label> <span>{{ info.bind_user_id }}</span>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <label>是否有饿了么校内站:</label> <span>{{ info.is_eleme_in_school ? '有' : '无'}}</span>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <label>是否有饿了么校外站:</label> <span>{{ info.is_eleme_out_school ? '有' : '无'}}</span>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <label>是否有美团校内站:</label> <span>{{ info.is_meituan_in_school ? '有' : '无'}}</span>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <label>是否有美团校外站:</label> <span>{{ info.is_meituan_out_school ? '有' : '无'}}</span>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <label>是否能上楼:</label> <span>{{ info.can_go_upstairs ? '不能' : '能'}}</span>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <label>是否合作:</label> <span>{{ info.is_cooperate ? '已合作' : '未合作'}}</span>
      </el-col>

      <el-col :xs="24" :lg="8" :sm="12">
        <label>是否允许骑电动车:</label> <span>{{ info.can_ride ? '不能' : '能'}}</span>
      </el-col>

      <el-col :span=24>
        <label>宿舍分布情况:</label> <span>{{ info.dormitory_distribution }}</span>
      </el-col>

      <el-col :span=24>
        <label>校门口取餐点离宿舍情况:</label> <span>{{ info.qucan_station_distribution }}</span>
      </el-col>

      <el-col :span=24>
        <label>校外商圈情况:</label> <span>{{ info.out_business_description }}</span>
      </el-col>

      <el-col :span=24>
        <label>备注:</label> <span>{{ info.memo }}</span>
      </el-col>

      <el-col v-auth="140200">
        <label>关系人:</label>
        <el-table border :data="info.relations || []" style="width: 100%; margin-top: 10px">
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="position" label="职位"  />
          <el-table-column prop="phone" label="手机号" />
          <el-table-column prop="weixin" label="微信号" />
        </el-table>
      </el-col>

    </el-row>
  </div>
</template>

<script setup lang="ts">
// 初始化表单数据
import {schoolApi} from "@/api/schoolApi";
import {onMounted} from "vue";
import {companyApi} from "@/api/companyApi";

const DefaultData = <Api.School.SchoolInfo>{
  id:0,
  province: '',
  city: '',
  area: '',
  name: '',
  distinct:[],
  address: '',
  person_num: '',
  bind_user_id: 0,
  is_eleme_in_school: 0,
  is_eleme_out_school: 0,
  is_meituan_in_school: 0,
  is_meituan_out_school: 0,
  can_go_upstairs: 0,
  is_cooperate: 0,
  can_ride: 0,
  dormitory_distribution: '',
  qucan_station_distribution: '',
  out_business_description: '',
  memo: '',
  create_date:'',
  update_date:'',
  bind_user_name: '',
  canteens:[],
  relations:[],
}
const info = reactive<Api.School.SchoolInfo>({ ...DefaultData })
onMounted(() => {
  companyApi.info(parseInt(useRoute().query.id as string)).then((res) => {
    Object.assign(info, res)
  })
})
</script>

<style scoped>
.detail {
  padding-top: 20px;
  font-size: 14px;
  .el-col {
    margin-bottom: 30px;
    label {
      font-weight: bold;
      margin-right: 10px;
    }
  }
}
</style>