<template>
  <div class="main-page carStatistics">
    <div class="main-page-header">
      <p class="title">救护车统计</p>
      <el-form
        :inline="true"
        :model="searchForm"
        ref="searchForm"
        size="small"
      >
        <el-form-item
          prop="area"
          label="辖区"
        >
          <el-select
            v-model="searchForm.area"
            placeholder="请选择辖区"
            style="width: 100%"
            :clearable="true"
          >
            <el-option
              label="全部"
              value=""
            />
            <el-option
              v-for="item in areaList"
              :label="item.name"
              :key="item.id"
              :value="item.val"
            />
          </el-select>
        </el-form-item>
        <div class="btns">
          <el-button
            type="primary"
            size="small"
            @click="exportFile(4)"
          >导出饼图</el-button>
          <el-button
            type="primary"
            size="small"
            @click="exportFile(5)"
          >导出柱状图</el-button>
          <el-button
            type="primary"
            size="small"
            @click="getData"
          >查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="main-page-body">
      <div class="top-main">
        <div class="box">
          <div class="title">
            车辆特殊用途占比
          </div>
          <EchartsPie
            :dataList="vechieSpecialList"
            :colorList="vechieSpecialPurpose"
          />
        </div>
        <div class="box">
          <div class="title">
            车辆类型占比
          </div>
          <EchartsPie
            :dataList="vechieTypeList"
            :colorList="vechieType"
          />
        </div>
        <div class="box">
          <div class="title">
            医疗机构与非医疗机构占比
          </div>
          <EchartsPie
            :dataList="unitTypeList"
            :colorList="unitTypeColor"
          />
        </div>
      </div>
      <div class="box mb">
        <div class="title">救护车总数排行(总数：{{ getCount(allCarList) }})</div>
        <EchartsBar
          :dataList="allCarList"
          :areaList="areaList"
          title="车辆"
        />
      </div>
      <div class="box">
        <div class="title">院前急救车总数排行(总数：{{ getCount(carCountList) }})</div>
        <EchartsBar
          :dataList="carCountList"
          :areaList="areaList"
          title="车辆"
        />
      </div>
      <div class="box mb">
        <div class="title">非院前急救车总数排行(总数：{{ getCount(unCarCountList) }})</div>
        <EchartsBar
          :dataList="unCarCountList"
          :areaList="areaList"
          title="车辆"
        />
      </div>
      <div class="box mb">
        <div class="title">急救中心急救车总数排行(总数：{{ getCount(allCenterList) }})</div>
        <EchartsBar
          :dataList="allCenterList"
          :areaList="areaList"
          title="车辆"
        />
      </div>
      <div class="box mb">
        <div class="title">非急救转运车总数排行(总数：{{ getCount(noPreTransList) }})</div>
        <EchartsBar
          :dataList="noPreTransList"
          :areaList="areaList"
          title="车辆"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { queryEmergencyResource, exportEmergencyResources } from '@/api/common'
import { getDic } from '../../util/dict'
import EchartsPie from './components/echartsPie.vue'
import EchartsBar from './components/echartsBar.vue'
export default {
  name: 'siteStatistics',
  components: {
    EchartsBar,
    EchartsPie
  },
  data() {
    return {
      searchForm: {
        area: ''
      },
      areaList: [],
      carCountList: [],
      unCarCountList: [],
      vechieSpecialList: [],
      vechieTypeList: [],
      vechieType: [],
      unitTypeList: [],
      vechieSpecialPurpose: [],
      unitTypeColor: [
        {
          color: "#80F1A8",
          name: "公立医疗"
        },
        {
          color: "#49734E",
          name: "民营医疗"
        },
        {
          color: "#D8B43E",
          name: "非医疗机构"
        }
      ],
      allCarList: [],
      noPreTransList: [],
      allCenterList: []
    }
  },
  mounted() {
    // 获取字典
    getDic(['area', 'vechie_type', 'vechie_special_purpose']).then(res => {
      this.areaList = res.area
      this.vechieType = res.vechie_type
      this.vechieSpecialPurpose = res.vechie_special_purpose
    })
    this.getData()
  },
  methods: {
    getData() {
      queryEmergencyResource(this.searchForm).then(res => {
        if (res.msg == 201) {
          const { carCountList, unCarCountList, vechieSpecialList, vechieTypeList, unitTypeList, allCarList, noPreTransList, allCenterList } = res.respData
          this.carCountList = carCountList || []
          this.unCarCountList = unCarCountList || []
          this.vechieSpecialList = vechieSpecialList || []
          this.vechieTypeList = vechieTypeList || []
          this.unitTypeList = unitTypeList || []
          this.allCarList = allCarList || []
          this.noPreTransList = noPreTransList || []
          this.allCenterList = allCenterList || []
        } else {
          this.$message.error(res.content)
        }
      })
    },
    exportFile(exportType) {
      const params = {
        ...this.searchForm,
        exportType: exportType
      }
      exportEmergencyResources(params).then(res => {
        if (res.msg === 201) {
          window.open(res.respData)
        } else {
          this.$message.error(res.content)
        }
      })
    },
    getCount(list) {
      let count = 0
      if (Array.isArray(list) && list.length > 0) {
        count = list.reduce((a, b) => {
          return a + b.value
        }, 0)
      }
      return count
    }
  }
}
</script>
<style lang="scss" scoped>
.carStatistics {
  .main-page-body {
    background-color: transparent !important;
    display: block;
    .top-main {
      min-width: 1300px;
      position: relative;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      .box {
        min-width: auto;
        flex: 1;
        margin-right: 20px;
        .title {
          padding: 16px 32px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
          font-weight: 500;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
    .box {
      min-width: 1300px;
      background: #ffffff;
      margin-bottom: 24px;
      .title {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.87);
        padding: 24px 36px;
        font-weight: 500;
      }
      &.mb {
        margin-bottom: 0;
      }
    }
  }
}
</style>
