<template>
  <div class="home">
    <div class="bj">
      <!-- <img :src="hospitalData.img"/></div> -->
       <img src="../assets/back.webp"/>
       </div>
    <div class="box">
      <div class="bt">
        <h2><img :src="hospitalData.logo"/></h2>
        <h3>
          {{ hospitalData.name }}
          <p>{{ hospitalData.label }}</p>
        </h3>
      </div>
      <div class="bt1">
        <h2 @click="telephone">
          <i><img src="../assets/tel.png"/></i>{{ hospitalData.tel }}
        </h2>
        <h2>
          <i><img src="../assets/dingwei.png"/></i>{{ hospitalData.address }}
        </h2>
      </div>
    </div>

    <div class="box1">
      <div class="bt"><img class="img" src="../assets/label.png">常用服务</div>
      <div class="nr">
        <router-link to="Hospital_ksjs">
          <img src="../assets/in_box1_pic1.png" alt/>
          <p>科室介绍</p>
        </router-link>
        <router-link to="Hospital_zjjs">
          <img src="../assets/in_box1_pic2.png" alt/>
          <p>人员配置</p>
        </router-link>
        <router-link to="Jkzd?type=dt">
          <img src="../assets/in_box1_pic3.png" alt/>
          <p>医院动态</p>
        </router-link>
        <router-link to="Hospital_dh1">
          <img src="../assets/in_box1_pic6.png" alt/>
          <p>医院导航</p>
        </router-link>
      </div>
    </div>
    <div class="box2">
      <h2 class="bt"><img class="img" src="../assets/label.png">本院介绍</h2>
      <!--      <div class="ql-editor">-->
      <!--        <div class="ql-container">-->
      <!--          <div class="ql-editor" v-html="hospitalData.content"></div>-->
      <!--        </div>-->
      <!--      </div>-->

      <div class="ql-snow">
        <div class="ql-editor" v-html="formattedContent"></div>
      </div>

      <!--      <div class="ql-container ql-snow">-->
      <!--        <div class="ql-editor" v-html="hospitalData.content"></div>-->
      <!--      </div>-->
      <!--      <div class="detail" v-html="hospitalData.content"></div>-->
      <!--p class="p1">包头市第八医院建院于1958年，是一所三级综合性医院。1996年通过等级医院评审获得二级甲等综合性医院称号；2001年被确立为包头医学院第四附属医院，承担包头医学院教学实习任务。2004年7月，从呼和浩特铁路局整体分离划归包头市政府管理；2009年11月更名为包头市第八医院，同时保留包头市铁路医院作为医院第二名称，2017年通过等级医院评审获得三级医院称号。</p>
      <p class="p1">医院占地面积4.1万平方米，建筑面积近2.3万平方米。编制病床位315张，经过医院持续不断的建设与发展，实际设置床位已经达到601张。医院现有职工833人，在编职工560人。其中硕士研究生学历 18人，大学本科学历397人。高级职称108人，中级职称158人。</p>
      <p class="p1">医院设有心血管内科、呼吸内科、神经内科、消化内科、内分泌科、老年病科、肾病学科、神经外科、普外科、心胸外科、骨科、泌尿外科、妇科、产科、儿科、新生儿科、眼科、康复科、麻醉科、重症医学科、肛肠科等20个临床科室，以及ICU、CCU、RICU、NCU等重症监护病房；医院开设有门诊、急诊科室20个；设有医学检验科、医学影像科、超声科、药剂科、病理科、供应室、手术室等医技辅助科室7个、健康体检科1个；医院开办分布在市三区的社区卫生服务机构6个，包头医学院校医院1个，正在筹建包头市北梁棚改新区社区卫生服务中心。</p>
      <p class="p1">医院拥有德国西门子Force开源CT、美国通用电气公司高场超导二代光纤1.5T磁共振仪、大型C型臂数字减影血管造影系统、西门子40层螺旋CT机、西部地区首台奥林巴斯最新3D腹腔镜手术及电子胃肠内窥镜系统、美国科医人钬激光碎石系统、GE飞天DR专用摄片机、岛津多功能DR造影系统、飞利浦四维彩超、全自动生化分析仪、血气电解质分析仪、全自动化学发光免疫分析仪、骨科手术C型臂机、纤维支气管镜、关节镜、人工心肺机、CCU监护中心站、32导电生理仪、运动平板、胎儿监护系统、血液透析机、医用高压氧舱等大型医用设备50余台套，以及动脉硬化检测仪、可视化乳腺检查系统、骨密度测量仪及XSC-3000超倍生物显微系统、精神压力测定、法国鹰演全身多功能扫描仪等高端健康管理设备。  </p>
      <p class="p1">医院承担着包头市驻区及呼和浩特铁路局驻包职工、家属的医疗、预防、康复、保健任务。同时承担着对内蒙古医科大学、包头医学院、包头卫校教学基地学生和进修人员的教学任务。是包头市城镇及呼和浩特铁路局职工、居民、生育、工伤医疗保险定点医院、包头市新型农村牧区合作医疗市级定点医院、包头市“120”指挥中心院前急救分站、包头市道路交通事故“绿色通道”医院、包头市全科医师培训基地、中国医师协会神经损伤培训基地、白求恩医学专家委员会临床基地。</p>
      <p class="p1">医院是中南大学湘雅医院、天津环湖医院（脑系科中心医院）神经外科、中国医学科学院阜外心血管病医院、首都医科大学复兴医院妇产医学、北京肿瘤医院微创治疗中心、北京大学第三医院泌尿外科、解放军301总医院医学影像学科等医院的技术协作单位。</p>
      <p class="p1">目前，医院开展的神经外科创伤及颅脑肿瘤手术治疗、普外科、泌尿外科、妇科常规手术及3D腹腔镜微创手术、心内科常规及介入治疗、人工髋关节及膝关节置换术、高龄患者骨科手术、麻醉医学及无痛舒适化诊断治疗等项目，均为自治区和包头市先进水平；儿科心身及发育障碍疾病、新生儿疾病、外科综合创伤救治、无痛群体性事故及突发卫生事件应急抢救等达到了包头市的先进水平。</p>
      <p class="p1">社区卫生服务是医院重点倾力打造的亮点。院属沼潭办事处社区卫生服务中心和青山区幸三社区卫生服务站做为自治区、包头市的标准化社区卫生服务的样板，接待了各地、各级有关部门的参观学习。沼潭办事处社区卫生服务中心被评为首批“自治区甲级社区卫生服务中心”，获“2013年全国示范社区卫生服务中心”荣誉称号，幸三社区卫生服务站荣获自治区“2012年群众满意的医疗卫生机构”称号。</p>
      <p class="p1">近年来，医院被授予“自治区文明单位标兵”、“自治区文明医院”、“全国百姓放心示范医院”“包头市文明单位”、“百姓口碑最佳医院”、“优质服务医院”、“A级诚信品牌单位”和全国“爱婴医院”、包头市对口扶贫工作先进单位、红十字优秀团体会员单位、“健康包头行动”先进集体、包头市急救工作先进单位、包头市社区卫生服务先进单位等荣誉称号，医院连续三年获得“鹿城百姓最满意综合医院品牌”。</p>
      <p class="p1">医院以科学发展观为指导，以建设让“老百姓满意的平价医院”为目标，全面落实各项医改政策，着力进行基础设施建设，持续改进患者就医环境；同时科学整合医疗资源，不断提高医疗质量，加强科研创新水平，规划建设特色专科，真正关注普通平民老百姓的医疗诊治、身心健康需求。经过不懈努力，医院在社会公益、健康教育、卫生应急与对口帮扶、精神文明建设、平安建设等方面取得一定成绩，较快的完成了管理体制、服务意识的转变，呈现出欣欣向荣、稳步发展的新局面，为建立和谐的医患关系贡献力量，为鹿城百姓的心身健康保驾护航。</p-->

    </div>
    <div class="zhichi">杭州九聚科技有限公司 提供开发与技术支持</div>
    <dh/>
  </div>
</template>


<script>
// @ is an alias to /src
import dh from "@/components/nav.vue";
import {apiGetzjyy, apiGetHospitalInfo} from "@/request/api.js";
import {Toast, Dialog} from 'vant';

export default {
  components: {
    dh,
  },
  computed: {
   formattedContent() {
    if (!this.hospitalData?.content) return '';

    return this.hospitalData.content
      .split('&')                     // 按 & 分割
      .map(p => p.trim())             // 去除每段首尾空格
      .filter(p => p)                 // 过滤空段落（如连续 && 或结尾 &）
      .map(p => `<p class="ql-size-large" style="color: black; text-indent: 2em;font-size: 0.5rem;line-break: anywhere;text-align: justify;">${p}</p>`)        // 包裹为 <p> 标签
      .join('');                      // 合并为 HTML 字符串
  },
},

  data() {
    return {
      active: 0,
      title: "",
      flag: false,
      // 医院信息
      hospitalData: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    telephone() {
      Dialog.confirm({
        title: "提示",
        message: "是否拨打医院电话" + this.hospitalData.tel,
        confirmButtonText: "拨打",
      })
          .then(() => {
            // on confirm
            window.location.href = "tel://" + this.hospitalData.tel;
          })
          .catch(() => {
            // on cancel
          });

    },
    // 获取走进医院数据
    getData() {
      /*apiGetzjyy().then(res => {
        this.hospitalData = res.data;
        console.log(res.data)
      });*/
      apiGetHospitalInfo().then((res) => {
          console.log("医院信息：",res.data)
        this.hospitalData = res.data;
    
      });
    },
    onSearch(val) {
      Toast(val);
    },
  },
};
</script>


<style scoped lang="scss">
.bj {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: -1;

  img {
    width: 100%;
    height: 5.5rem;
  }
}

.zhichi {
  text-align: center;
  padding-bottom: 1rem;
  color: #999;
}

.box {
  margin-top: 4.5rem;
  background: #fff;
  border-radius: 0.5rem;
  box-sizing: border-box;
  padding: 0.5rem;
  border-bottom: 0.25rem solid #f5f5f5;

  .bt {
    display: flex;
    align-items: center;

    h2 {
      width: 1.5rem;
      padding-right: 0.5rem;
    }

    h2 img {
      width: 1.5rem;
      height: 1.5rem;
    }

    h3 {
      font-size: 0.5rem;
      color: #333;

      p {
        line-height: 0.5rem;
        border: 0.05rem solid #d62e25;
        border-radius: 0.1rem;
        font-size: 0.375rem;
        color: #d62e25;
        text-align: center;
        margin-top: 0.125rem;
      }
    }
  }

  .bt1 {
    padding-top: 0.125rem;
    padding-left: 0.5rem;

    h2 {
      display: flex;
      align-items: center;
      font-size: 0.375rem;
      color: #333;
      padding: 0.125rem;

      i {
        width: 1rem;

        img {
          width: 0.375rem;
          height: auto;
        }
      }
    }
  }
}

.box1 {

  .nr {
    box-shadow: 0 0 0.125rem #ddd;
    padding: 0.375rem;
    background: #fff;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 0.75rem;
    padding-left: 0.5rem;

    a {
      text-align: center;
      color: #000;

      img {
        width: 1.375rem;
        height: 1.375rem;
      }
    }

    p {
      font-size: 0.275rem;
    }
  }
}

.box1, .box2 {
  padding: 0.25rem;
  border-radius: 0.5rem;

  .img {
    height: 0.3rem;
    padding: 0 0.1rem;
  }

  .bt {
    font-size: 0.375rem;
    font-weight: 600;
    padding-bottom: 0.25rem;
    color: #000;
  }
}

.detail {
  font-size: 0.375rem;
  padding-bottom: 0.25rem;
}

// 自定义Quill样式，替代导入的quill.css文件
.ql-snow .ql-editor {
  font-size: 0.4rem;
  line-height: 1.6;
  padding: 12px 0;
}

.ql-snow .ql-editor p {
  margin: 0 0 12px 0;
}

.ql-snow .ql-editor img {
  max-width: 100%;
  height: auto;
}

.ql-size-large {
  font-size: 1.2em;
}


</style>
