<template>
  <div class="bottomRight">
    <dv-border-box-13>
      <div class="chartsBox">
        <div class="chartItem">
          <nav>
            <p class="left">科室手术量统计(前五)</p>
            <div class="right">
              <p class="active">周</p>
              <p>月</p>
            </div>
          </nav>
          <dv-charts :option="option"></dv-charts>
        </div>
      </div>
    </dv-border-box-13>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['骨科', '心胸外科', '普通外科', '神经外科', '整形外科'],
          axisLabel: {
            style: {
              stroke: '#fff',
              fontSize: 14,
              fontWeight: 'normal',
              fontFamily: 'Microsoft YaHei',
            },
          },
        },
        yAxis: {
          type: 'value',
          data: 'value',
          max: '1%',
          axisLabel: {
            style: {
              stroke: '#fff',
              fontSize: 14,
              fontWeight: 'normal',
              fontFamily: 'Microsoft YaHei',
            },
          },
        },
        series: [
          {
            type: 'bar',
            data: [200, 150, 120, 80, 70],
            barWidth: '40%',
            label: {
              show: true,
              position: 'top',
              style: {
                stroke: '#fff',
                fontSize: 14,
                fontWeight: 'normal',
                fontFamily: 'Microsoft YaHei',
              },
            },
            gradient: {
              color: ['#83bff6', '#188df0', '#188df0'],
            },
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.bottomRight {
  flex-basis: 28%;
  .chartsBox {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    padding-top: 1vh;
    box-sizing: border-box;
    .chartItem {
      width: 100%;
      height: 100%;
      flex-shrink: 0;
      padding: 2vh;
      box-sizing: border-box;
      nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .right {
          display: flex;
          .active,
          p:hover {
            color: #87ceeb;
            border: 1px solid #87ceeb;
          }
          p {
            margin-right: 1.5vh;
            cursor: pointer;
            border: 1px solid #fff;
            font-size: 1.6vh;
            width: 2.6vh;
            height: 2.6vh;
            line-height: 2.6vh;
            text-align: center;
          }
        }
        p {
          font-size: 2.4vh;
        }
      }
    }
  }
}
</style>
