<!--使用量统计-->
<template>
  <div class="dosageStatistics">
    <div class="title-box-max-box">
      <div class="title-left-box">
        <p></p>
        <p>使用量TOP6</p>
      </div>
      <div class="title-right-box">
        <p @click="goPage">查看更多 <i class="el-icon-d-arrow-right"></i></p>
      </div>
    </div>
    <div id="eCharts-dosage">
      <div class="for-dosage-box" v-for="(item,index) in dataList" :key="index">
        <p>{{index+1}}</p>
        <p>{{item.name}}-{{item.describe}}</p>
        <p :class="item.control == 2?'borderColorA':'borderColorB'">{{item.control == 2?'非管控':'管控'}}</p>
        <p>{{item.category}}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { chemicalIndexChemicalGroup, chemicalIndexUseTotalCount } from '@/api/chemicalManage'

  export default {
    name: 'dosageStatistics',
    data () {
      return {
        dataList:[
          { data1:'化学品名称化学品名称 - 111g(100ml)', data2:'1', data3:'普通危化品'},
          { data1:'化学品名称化学品名称 - 1111111111111111111g', data2:'1', data3:'普通化学品'},
          { data1:'化学品名称化学品名称 - 111g', data2:'2', data3:'易制毒'},
          { data1:'化学品名称化学品名称 - 111g', data2:'2', data3:'易制爆'},
          { data1:'化学品名称化学品名称 - 111g', data2:'1', data3:'剧毒'},
          { data1:'化学品名称化学品名称 - 111g', data2:'2', data3:'剧毒'},
        ],
      }
    },
    created(){
        this.chemicalIndexUseTotalCount();
    },
    mounted(){

    },
    methods:{
      //页面跳转
      goPage(){
        this.$router.push({ path: '/chemicalManage/useLedger'});
      },
      chemicalIndexUseTotalCount(){
        let self=this;
        let list=[];
        chemicalIndexUseTotalCount().then(response => {
           this.$set(this, 'dataList',response.data)
        });
      },
    },
  }
</script>
<style scoped lang="scss">
  .dosageStatistics{
    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
    border-radius: 10px;
    width:500px;
    height:346px;
    .title-box-max-box{
      display: flex;
      padding:24px 22px;
      .title-left-box{
        display: flex;
        flex:1;
        p:nth-child(1){
          width:4px;
          height:18px;
          margin-right:11px;
          background: #0183FA;
        }
        p:nth-child(2){
          color:#333;
          font-size:18px;
          line-height:18px;
        }
      }
      .title-right-box{
        p{
          font-size:14px;
          line-height:18px;
          color:#666666;
          cursor: pointer;
        }
      }
    }
    #eCharts-dosage{
      width:500px;
      height:279px;
      .for-dosage-box{
        display: flex;
        padding:10px 20px;
        p:nth-child(1){
          width:20px;
          height:20px;
          margin:2px 0;
          text-align: center;
          line-height:20px;
          color:#fff;
          background: #0183FA;
          border-radius:4px;
          font-size:12px;
        }
        p:nth-child(2){
          color:#333;
          font-size:16px;
          line-height:24px;
          flex:1;
          margin-left:8px;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        p:nth-child(3){
          width:50px;
          text-align: center;
          font-size:12px;
          line-height:22px;
          border-radius:4px;
          margin:0 15px;
        }
        p:nth-child(4){
          width:85px;
          padding:0 5px;
          text-align: center;
          font-size:12px;
          line-height:24px;
          color:#009DFF;
          background: rgba(0,157,255,0.2);
          border-radius:4px;
          display:block;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        .borderColorA{
          color:#0183FA;
          border:1px solid #0183FA;
        }
        .borderColorB{
          color:#FC7F1A;
          border:1px solid #FC7F1A;
        }
      }
    }
  }
</style>
