<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="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>
      <div class="box">
        <div class="title">辖区急救车辆总数排行</div>
        <EchartsBar
          :dataList="carCountList"
          :areaList="areaList"
          title="车辆"
        />
      </div>
      <div class="box mb">
        <div class="title">辖区站点总数排行</div>
        <EchartsBar
          :dataList="siteCountList"
          :areaList="areaList"
          title="站点"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { queryEmergencyResource } 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: [],
      siteCountList: [],
      vechieSpecialList: [],
      vechieTypeList: [],
      vechieType: [],
      vechieSpecialPurpose: []
    }
  },
  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, siteCountList, vechieSpecialList, vechieTypeList } = res.respData
          this.carCountList = carCountList || []
          this.siteCountList = siteCountList || []
          this.vechieSpecialList = vechieSpecialList || []
          this.vechieTypeList = vechieTypeList || []
        } else {
          this.$message.error(res.content)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.carStatistics {
  .main-page-body {
    background-color: transparent !important;
    display: block;
    .top-main {
      position: relative;
      .box {
        width: calc(50% - 12px);
        .title {
          padding: 16px 32px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.06);
          font-weight: 500;
        }
        &:last-child {
          position: absolute;
          top: 0;
          right: 1px;
        }
      }
    }
    .box {
      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>
