<template>
  <div class="bigscreen-bg">
    <div class="main">
      <div class="time">
        <i class="fa fa-fw fa-clock-o"></i>
        <span>2021-06-21 14:18:22</span>
      </div>
      <div class="content">
        <div class="div1 box">
          <Title title="急救站点信息" />

          <dl class="bigTab left">
            <dt>
              <div class="cell_1">序号</div>
              <div class="cell_2">辖区</div>
              <div class="cell_3">急救站点</div>
              <div class="cell_4">站点位置</div>
              <div class="cell_5">车辆数量</div>
              <div class="cell_6">所在医疗机构</div>
            </dt>
            <VueSeamless
              class="seamless-warp"
              :data="siteList"
              :step="3"
            >
              <dd
                v-for="(item, index) in siteList"
                :key="index"
              >
                <div
                  class="cell_1"
                  :title="index + 1"
                >{{index + 1}}</div>
                <div
                  class="cell_2"
                  :title="item.areaName"
                >{{item.areaName}}</div>
                <div
                  class="cell_3"
                  :title="item.siteName"
                >{{item.siteName}}</div>
                <div
                  class="cell_4"
                  :title="item.siteLocation"
                >{{item.siteLocation}}</div>
                <div
                  class="cell_5"
                  :title="item.carCount"
                >{{item.carCount}}</div>
                <div
                  class="cell_6"
                  :title="item.hospitalName"
                >{{item.hospitalName}}</div>
              </dd>
            </VueSeamless>
          </dl>

        </div>
        <div class="div2">
          <div class="top box">
            <Title title="当日急救患者" />
            <div class="bigMsg">
              <div class="row">
                <div class="col">
                  <p class="p1">胸痛中心</p>
                  <p class="p2">{{patientCount.today.chestTotal}}人</p>
                </div>
                <div class="col">
                  <p class="p1">卒中中心</p>
                  <p class="p2">{{patientCount.today.strokeTotal}}人</p>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <p class="p1">创伤中心</p>
                  <p class="p2">{{patientCount.today.traumaTotal}}人</p>
                </div>
                <div class="col">
                  <p class="p1">烧伤中心</p>
                  <p class="p2">{{patientCount.today.burnTotal}}人</p>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom box">
            <Title title="当日急救患者占比" />
            <EchartsPie :patientCount="patientCount.today" />
          </div>
        </div>
        <div class="div3 box">
          <ul class="datalist">
            <li>
              <img
                src="../../assets/images/bigscreen_01.png"
                alt=""
              >
              <p class="p1">胸痛中心</p>
              <p class="p2">{{centerData.chestTotal}} <span>个</span></p>
            </li>
            <li>
              <img
                src="../../assets/images/bigscreen_02.png"
                alt=""
              >
              <p class="p1">卒中中心</p>
              <p class="p2">{{centerData.strokeTotal}} <span>个</span></p>
            </li>
            <li>
              <img
                src="../../assets/images/bigscreen_03.png"
                alt=""
              >
              <p class="p1">创伤中心</p>
              <p class="p2">{{centerData.traumaTotal}} <span>个</span></p>
            </li>
            <li>
              <img
                src="../../assets/images/bigscreen_04.png"
                alt=""
              >
              <p class="p1">烧伤中心</p>
              <p class="p2">{{centerData.burnTotal}} <span>个</span></p>
            </li>
          </ul>
          <EchartsMap :areaCenters="areaCenters" />
        </div>
        <div class="div4">
          <div class="top box">
            <Title title="累计急救患者" />
            <div class="bigMsg">
              <div class="row">
                <div class="col">
                  <p class="p1">胸痛中心</p>
                  <p class="p2">{{patientCount.chestTotal}}人</p>
                </div>
                <div class="col">
                  <p class="p1">卒中中心</p>
                  <p class="p2">{{patientCount.strokeTotal}}人</p>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <p class="p1">创伤中心</p>
                  <p class="p2">{{patientCount.traumaTotal}}人</p>
                </div>
                <div class="col">
                  <p class="p1">烧伤中心</p>
                  <p class="p2">{{patientCount.burnTotal}}人</p>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom box">
            <Title title="累计急救患者占比" />
            <EchartsPie :patientCount="patientCount" />
          </div>
        </div>
        <div class="div5 box">
          <Title title="院前急救接诊量" />
          <dl class="bigTab right">
            <dt>
              <div class="cell_1">序号</div>
              <div class="cell_2">医院名称</div>
              <div class="cell_3">胸痛患者</div>
              <div class="cell_4">卒中患者</div>
              <div class="cell_5">创伤患者</div>
              <div class="cell_6">烧伤患者</div>
              <div class="cell_7">总计</div>
            </dt>
            <VueSeamless
              class="seamless-warp"
              :data="acceptsList"
              :step="5"
            >
              <dd
                v-for="(item, index) in acceptsList"
                :key="index"
              >
                <div
                  class="cell_1"
                  :title="index + 1"
                >{{index + 1}}</div>
                <div
                  class="cell_2"
                  :title="item.hospitalName"
                >{{item.hospitalName}}</div>
                <div
                  class="cell_3"
                  :title="item.chestTotal"
                >{{item.chestTotal}}</div>
                <div
                  class="cell_4"
                  :title="item.strokeTotal"
                >{{item.strokeTotal}}</div>
                <div
                  class="cell_5"
                  :title="item.traumaTotal"
                >{{item.traumaTotal}}</div>
                <div
                  class="cell_6"
                  :title="item.burnTotal"
                >{{item.burnTotal}}</div>
                <div
                  class="cell_7"
                  :title="item.total"
                >{{item.total}}</div>
              </dd>
            </VueSeamless>
          </dl>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from './components/title.vue'
import EchartsPie from './components/echartsPie.vue'
import EchartsMap from './components/echartsMap.vue'
import { siteSummary, patientSummary, admissions, centerSummary } from '@/api/bigscreen'
import VueSeamless from 'vue-seamless-scroll'
export default {
  components: {
    Title,
    EchartsPie,
    EchartsMap,
    VueSeamless
  },
  data() {
    return {
      siteList: [],
      patientCount: {
        today: {}
      },
      centerData: {},
      acceptsList: [],
      areaCenters: [],
      timer: null
    }
  },
  mounted() {
    this.getData()
    this.timer = setInterval(() => {
      this.getData()
    }, 30 * 60 * 1000)
  },
  destroyed() {
    clearTimeout(this.timer)
  },
  methods: {
    getData() {
      console.log('getData')
      siteSummary({
        pageNo: 1,
        pageSize: 0
      }).then(res => {
        this.siteList = res.respData.list
      })
      patientSummary().then(res => {
        this.patientCount = {
          ...res.respData,
          today: res.respData.today || {}
        }
      })
      admissions({
        pageNo: 1,
        pageSize: 0
      }).then(res => {
        this.acceptsList = res.respData.list
      })
      centerSummary().then(res => {
        this.centerData = res.respData
        this.areaCenters = res.respData.areaCenters
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.bigscreen-bg {
  width: 9216px;
  height: 2304px;
  // background: url("../../assets/images/bg.png") 100% 100%;
  background: #333;
  background-size: 100% 100%;
  .main {
    padding-top: 203px;
    .time {
      color: #6f96fe;
      line-height: 60px;
      font-size: 48px;
      height: 60px;
      margin-left: 182px;
      .fa {
        font-size: 60px;
      }
    }
    .content {
      margin-top: 93px;
      display: flex;
      height: 1776px;
      justify-content: center;
      > div {
        height: 100%;
      }
      .div1,
      .div5 {
        width: 1948px;
      }
      .div2,
      .div4 {
        width: 1200px;
        margin: 0 80px;
        .top,
        .bottom {
          height: 848px;
        }
        .bottom {
          margin-top: 80px;
        }
      }
      .div3 {
        width: 2232px;
        .datalist {
          padding-top: 74px;
          display: flex;
          justify-content: center;
          li {
            height: 192px;
            width: 500px;
            padding: 0 10px;
            img {
              float: left;
              height: 192px;
              width: 192px;
              margin-right: 30px;
            }
            .p1 {
              height: 48px;
              font-size: 48px;
              font-weight: 600;
              color: #6f96fe;
              line-height: 48px;
              margin-bottom: 28px;
              padding-top: 10px;
            }
            .p2 {
              height: 96px;
              font-size: 96px;
              color: #ffffff;
              line-height: 96px;
              span {
                font-size: 56px;
              }
            }
          }
        }
      }
      .box {
        box-shadow: inset 0px 0px 48px 0px #6791ff;
        border-radius: 24px;
        border: 3px solid
          linear-gradient(
            225deg,
            rgba(139, 223, 255, 0.1),
            rgba(125, 178, 255, 1),
            rgba(124, 177, 255, 1),
            rgba(140, 227, 255, 0.1)
          )
          3 3;
      }
      .bigTab {
        margin-top: 110px;
        padding: 0 60px;
        .seamless-warp {
          height: 1320px;
          overflow: hidden;
        }
        dt {
          color: #6f96fe;
          line-height: 44px;
          font-weight: bold;
          height: 44px;
          font-size: 44px;
          padding-bottom: 70px;
          border-bottom: 2px solid #7cb1ff;
          margin-bottom: 35px;
        }
        dd {
          height: 110px;
          color: #ffffff;
          font-size: 40px;
          line-height: 110px;
          margin: 0;
        }
        dt,
        dd {
          > div {
            float: left;
            padding: 0 10px;
            box-sizing: border-box;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        &.left {
          .cell_1 {
            width: 120px;
            text-align: center;
          }
          .cell_2 {
            width: 200px;
          }
          .cell_3 {
            width: 250px;
          }
          .cell_4 {
            width: 500px;
          }
          .cell_5 {
            width: 200px;
          }
          .cell_6 {
            width: 500px;
          }
        }
        &.right {
          .cell_1 {
            width: 120px;
            text-align: center;
          }
          .cell_2 {
            width: 500px;
          }
          .cell_3 {
            width: 200px;
          }
          .cell_4 {
            width: 200px;
          }
          .cell_5 {
            width: 200px;
          }
          .cell_6 {
            width: 200px;
          }
          .cell_3 {
            width: 300px;
          }
        }
      }
      .bigMsg {
        .row {
          margin-top: 112px;
          height: 176px;
          display: flex;
          .col {
            width: 599px;
            border-right: 1px solid #2a477a;
            &:last-child {
              border-right: 0;
              border-left: 1px solid #2a477a;
            }
            p {
              text-align: center;
            }
            .p1 {
              height: 56px;
              font-size: 56px;
              font-weight: bold;
              color: #6f96fe;
              line-height: 56px;
            }
            .p2 {
              font-size: 72px;
              font-weight: 600;
              color: #ffffff;
              line-height: 72px;
              margin-top: 40px;
            }
          }
        }
      }
    }
  }
}
</style>