<template>
  <div
    v-loading="loading"
    class="content"
    element-loading-text="拼命加载中"
  >
    <div class="left">
      <div class="info">
        <div class="info-text title text">库存信息统计</div>
        <div class="info-item">
          <div @click="$router.push('/reagent/report/storeinfo')"><img src="@/assets/4-报表统计/store_info_overview.png" alt=""></div>
          <div @click="$router.push('/reagent/report/warehousinginfo')"><img src="@/assets/4-报表统计/store_info_search.png" alt=""></div>
          <div @click="$router.push('/reagent/report/reagentinfo')"><img src="@/assets/4-报表统计/试剂信息详情.png" alt=""></div>
        </div>
      </div>
      <div class="use-info">
        <div class="title text">试剂使用统计</div>
        <div class="use-info-content">
          <div class="user-info-text" @click="$router.push('/reagent/report/usefrequencyinfo')">
            <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/使用频率.png"></div>
            <div class="title text" style="color:#FF9B02 ">使用频率</div>
            <div class="use-count">{{ use_avg_info.avg_use_number }}</div>
            <div class="use-info-total">平均使用频率(次/种)</div>
            <div><svg-icon icon-class="皇冠" /> 使用最高频试剂：{{ use_avg_info.max_name }}</div>
            <div><svg-icon icon-class="手" /> 单个试剂最高频次：已使用{{ use_avg_info.max_number }}次</div>
          </div>
          <div class="user-info-text" @click="$router.push('/reagent/report/recordinfo/store')">
            <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/入库记录.png"></div>
            <div class="title text" style="color:#409EFF ">入库记录</div>
            <div class="use-count">{{ recordStock.count_number }}</div>
            <div class="use-info-total">入库历史记录(条)</div>
            <div><i class="el-icon-time" /> {{ recordStock.date_time }}</div>
            <div><svg-icon icon-class="cup" /> {{ recordStock.name }}</div>
          </div>
          <div class="user-info-text" @click="$router.push('/reagent/report/recordinfo/collect')">
            <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/领用记录.png"></div>
            <div class="title text" style="color: #1ADCE9">领用记录</div>
            <div class="use-count">{{ recordCollect.count_number }}</div>
            <div class="use-info-total">领用历史记录(条)</div>
            <div><i class="el-icon-time" /> {{ recordCollect.date_time }}</div>
            <div><svg-icon icon-class="cup" />{{ recordCollect.name }}</div>
          </div>
          <div class="user-info-text" @click="$router.push('/reagent/report/recordinfo/sendback')">
            <div class="user-info-img" style="float: right"><img src="@/assets/4-报表统计/归还记录.png"></div>
            <div class="title text" style="color: #5DDC1D">归还记录</div>
            <div class="use-count">{{ recordConsume.count_number }}</div>
            <div class="use-info-total">归还历史记录(条)</div>
            <div><i class="el-icon-time" /> {{ recordConsume.date_time }}</div>
            <div><svg-icon icon-class="cup" />{{ recordConsume.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="consume-title title text">试剂消耗用量</div>
      <div class="consume">
        <el-card class="box-card">
          <div slot="header" class="clearfix" @click="$router.push('/reagent/report/inventoryconsuminfo')">
            <span class="text">试剂库存消耗</span>
            <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" />
          </div>
          <div class="count text">{{ pdc }}</div>
          <div class="desc">截至目前试剂入库总量</div>
          <div style="display: flex;line-height: 30px;text-align: center">
            <div :style="instock"><span>{{ instock.width }}</span></div>
            <div :style="lending"><span>{{ lending.width }}</span></div>
            <div :style="consume"><span>{{ consume.width }}</span></div>
          </div>
          <div class="data-count">
            <div :style="{borderBottom:'4px solid '+ instock.background}">
              <span>在库量</span>
              <span :style="{color:instock.background,float:'right'}">{{ instock.count }}</span>
            </div>
            <div :style="{borderBottom:'4px solid '+ lending.background}">
              <span>借出量</span>
              <span :style="{color:lending.background,float:'right'}">{{ lending.count }}</span>
            </div>
            <div :style="{borderBottom:'4px solid '+ consume.background}">
              <span>消耗量</span>
              <span :style="{color:consume.background,float:'right'}">{{ consume.count }}</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="consume">
        <el-card class="box-card">
          <div slot="header" class="clearfix" @click="$router.push('/reagent/report/reagentconsuminfo')">
            <span class="text">试剂用量消耗</span>
            <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" />
          </div>
          <div id="mychart" />
        </el-card>
      </div>
      <div class="consume">
        <el-card class="box-card">
          <div slot="header" class="clearfix" @click="$router.push('/reagent/report/userconsuminfo')">
            <span class="text">人员用量消耗</span>
            <i style="float: right; padding: 3px 0" class="el-icon-arrow-right" />
          </div>
          <div v-for="(user,index) in userData" :key="user.create_user_id" class="user-item">
            <el-avatar :size="50" :src="user.avatar_url || 'https://t7.baidu.com/it/u=2006997523,200382512&fm=193&f=GIF'" />
            <div class="order">top{{ index+1 }}</div>
            <div class="name">{{ user.create_user_name||"程小红" }}</div>
            <div class="count">{{ user.count_number }}</div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { report_home } from '@/api/reagent/report'

export default {
  name: 'Report',
  data() {
    return {
      pdc: null,
      myChart: null,
      loading: false,
      pageData: null,
      instock: {
        'background': '#409EFF',
        'width': '',
        'count': 0
      },
      lending: {
        'background': '#5DDC1D',
        'width': '',
        'count': 0
      },
      consume: {
        'background': '#FF9B02',
        'width': '',
        'count': 0
      },
      recordStock: {
        count_number: 0
      },
      recordCollect: {
        count_number: 0
      },
      recordConsume: {
        count_number: 0
      },
      use_avg_info: {

      },
      userData: []
    }
  },
  created() {
    this.loading = true
    report_home().then(res => {
      this.pageData = res.data
      this.initDataFunc()
      this.initChart()
    }).finally(() => (this.loading = false))
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.myChart.resize()
    })
  },
  methods: {
    initDataFunc() {
      const { drug_stock_expend, drug_use_type_data, user_use_expend, use_avg_info } = this.pageData
      this.use_avg_info = use_avg_info
      this.pdc = drug_stock_expend.count_number
      this.userData = user_use_expend
      const instock = drug_stock_expend.data.find(item => item.status === 1)
      const lending = drug_stock_expend.data.find(item => item.status === 2)
      const consume = drug_stock_expend.data.find(item => item.status === 3)
      this.instock.count = instock.count_number
      this.instock.width = instock.ratio
      this.lending.count = lending.count_number
      this.lending.width = lending.ratio
      this.consume.count = consume.count_number
      this.consume.width = consume.ratio
      this.recordStock = drug_use_type_data.find(item => item.record_type === 1)
      this.recordCollect = drug_use_type_data.find(item => item.record_type === 2)
      this.recordConsume = drug_use_type_data.find(item => item.record_type === 3)
    },
    initChart() {
      this.myChart = this.$echarts.init(
        document.getElementById('mychart')
      )
      const data = this.pageData.drug_use_expend.map(item => {
        item.value = item.count_num
        return item
      })
      const option = {
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        radius: '50%',
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            label: {
              normal: {
                show: true,
                formatter: '{b}:{d}%'
              }
            },
            data
          }
        ]
      }
      this.myChart.setOption(option)
      window.addEventListener('resize', () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  .left{
    width: 1080px;
    .info{
      .info-item{
        display: flex;
        justify-content: space-between;
        img{
          width: 21.25rem;
        }
      }
    }
    .use-info{
      margin-top: 1rem;
    }
  }
  .right{
    .consume-title{
      margin-left: 1rem;
    }
    .consume{
      margin-bottom: 1rem;
      margin-left: 1rem;
      .box-card{
        width: 33.125rem;
      }
    }
  }
}
.title{
  margin-bottom: 1rem;
}
.text{
  font-size: 1rem;
  font-weight: bold;
  color: #303133
}
.count{
  font-size: 2rem;
  font-weight: bold;
  color: #303133;
}
.desc{
  font-size: 1rem;
  font-weight: 400;
  color: #909399;
  margin-bottom: 1rem;
}
.data-count{
  width: 100%;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  div{
    width: 30%;
  }
}
.user-info-img{
  img{
    width: 3rem;
  }
}
.user-info-text{
  width: 32.5rem;
  background: white;
  padding: 2rem;
  margin-bottom: 2rem;
  div{
    margin-bottom: 0.5rem;
  }
}
.use-info-content{
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
}
.use-info-total{
  font-size: 0.7rem;
  font-weight: bold;
  color: #303133;
  padding-bottom: 1rem;
}
.use-count{
  font-size: 2rem;
  font-weight: bold;
  color: #303133;
}
#mychart{
  width:33rem;
  height: 12.5rem;
}
.user-item{
  display: flex;
  flex-direction:column;
  align-items: center;
  .name{
    font-size: 1rem;
    font-weight: bold;
    color: #303133;
    margin: 0.3rem 0 0.3rem 0;
  }
  .count{
    font-size: 1rem;
    font-weight: 400;
    color: #909399;
  }
}
</style>
