<template>
  <div class="container">
    <h2>GECA联盟理事及医院名单</h2>
    <div v-for="row in list" :key="row.label">
      <div class="sub_title">
        {{ row.label }}
      </div>
      <div class="content">
        <span v-for="item in row.items" :key="item">{{ item }}</span>
      </div>
    </div>
    <div style="padding-left: 48px">
      <img src="@/assets/img/Home/trustee.png" alt="" />
    </div>
    <div class="sub_title">CEGA联盟医院名单</div>
    <el-table :data="tableData" :span-method="objectSpanMethod" border>
      <el-table-column width="60" type="index">
        <template #header>
          <div>序号</div>
        </template>
      </el-table-column>
      <el-table-column prop="s" label="省份/直辖市" min-width="160px">
      </el-table-column>
      <el-table-column prop="n" label="医院名称" align="left" min-width="340px">
      </el-table-column>
      <el-table-column
        prop="a"
        label="授牌医院"
        min-width="110px"
        class-name="mark"
      >
      </el-table-column>
      <el-table-column
        prop="t"
        label="填报数据医院"
        min-width="140px"
        class-name="mark"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import tableData from "./tpl"
export default {
  data() {
    return {
      list: [
        {
          label: "名誉理事长",
          items: [
            "白书忠",
            "程书钧",
            "樊代明",
            "赫捷",
            "林东昕",
            "沈洪兵",
            "沈祖尧",
            "王陇德",
            "于金明",
            "詹启敏",
            "张雁灵",
            "郑树",
          ],
        },
        {
          label: "顾问",
          items: [
            "姜庆五",
            "陆星华",
            "夏玉亭",
            "游苏宁",
            "于中麟",
            "袁媛",
            "张齐联",
            "张子琪",
          ],
        },
        {
          label: "副理事长",
          items: [
            "曹志强",
            "曾强",
            "陈刚",
            "陈广域",
            "陈昱湖",
            "陈薇娜",
            "陈卫昌",
            "丁俊峰",
            "房静远",
            "冯佶",
            "高峰",
            "郭学刚",
            "何纳",
            "吉朋松",
            "季加孚",
            "金震东",
            "兰平",
            "李少辉",
            "李挺",
            "李汛",
            "李延青",
            "廖专",
            "令孤恩强",
            "刘峰",
            "刘小梅",
            "吕宾",
            "马进",
            "唐承薇",
            "王贵齐",
            "王磊",
            "王立东",
            "邬堂春",
            "吴开春",
            "徐国良",
            "杨爱明",
            "杨嘉林",
            "杨民",
            "杨云生",
            "姚俊杰",
            "张澍田",
            "张晓华",
            "周丽雅",
            "邹晓平",
          ],
        },
        {
          label: "秘书长",
          items: ["杜奕奇"],
        },
        {
          label: "常务副秘书长",
          items: ["柏愚", "蔡全才", "王洛伟"],
        },
        {
          label: "副秘书长",
          items: [
            "柴宁莉",
            "常佳",
            "董莉君",
            "冀明",
            "李方",
            "李锐",
            "钱朝斌",
            "颜杰",
            "姚方",
            "尹畅",
            "张磊",
          ],
        },
        {
          label: "秘书",
          items: [
            "陈丽竹",
            "崔勇",
            "杜寒",
            "郝阳帆",
            "胡良皞",
            "胡亚琴",
            "王天骄",
            "吴萍",
            "辛磊",
            "徐美玲",
            "张辉",
            "张颖",
          ],
        },
        {
          label: "常务理事",
        },
      ],
      tableData,
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (row.span) {
          return {
            rowspan: row.span,
            colspan: 1,
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          }
        }
      }
    },
  },
  mounted() {},
  watch: {},
}
</script>
<style lang="scss" scoped>
.container {
  padding: 30px 10px;
  ::v-deep .el-table {
    margin-top: 20px;
    margin-left: 20px;
    width: 820px;
    font-size: 16px;
    td.mark .cell {
      font-weight: bold;
      color: #4e68ff;
    }
    td.is-left {
      text-align: left;
    }
  }
  h2 {
    font-weight: bold;
    font-size: 28px;
    text-align: center;
    height: 36px;
    font-size: 32px;
    font-family: AlibabaPuHuiTiB;
    letter-spacing: 3px;
    margin-bottom: 50px;
    color: #4e68ff;
    line-height: 36px;
  }
  .sub_title {
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    margin: 10px 20px;
    padding-left: 15px;
    letter-spacing: 2px;
    position: relative;
    &::before {
      content: " ";
      border-left: 4px solid #4e68ff;
      position: absolute;
      height: 18px;
      top: 4px;
      left: 0;
    }
  }
  .content {
    width: 800px;
    font-size: 16px;
    font-family: AlibabaPuHuiTiR;
    color: #333333;
    line-height: 35px;
    padding-left: 50px;
    padding-bottom: 10px;
    span {
      display: inline-block;
      width: 65px;
      margin-right: 50px;
      text-align: justify;
      text-align-last: justify;
    }
  }
}
</style>