<template>
  <div style="background-color: #f5f7f9">
    <div class="cardBox">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div class="cardHead">
                <span>个人项目量</span>
                <el-tooltip class="item" effect="dark" content="说明" placement="top">
                  <i style="float: right; font-size: 15px;margin-top: 3px;cursor: pointer" class="el-icon-warning" />
                </el-tooltip>
              </div>
              <div class="cardBody" style="padding-bottom: 20px;">
                <span style="font-size: 30px;color: #000000;">{{ personalData.taskTotal }}</span><br>
                <span>周同比 {{ personalData.weekOnWeek }}</span><span class="el-icon-caret-top" /><br>
                <span>日同比 {{ personalData.dayOnDay }}</span><span class="el-icon-caret-bottom" /><br>
              </div>
              <div class="cardFooter" style="border-top: 1px solid gray;padding-top: 10px;">
                <span>待检项目量 {{ personalData.noTestNum }}</span>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-card class="box-card" style="position: relative">
              <div class="cardHead">
                <span>个人报检量</span>
                <el-tooltip class="item" effect="dark" content="说明" placement="top">
                  <i style="float: right; font-size: 15px;margin-top: 3px;cursor: pointer" class="el-icon-warning" />
                </el-tooltip>
              </div>
              <div class="cardBody" style="padding-bottom: 0px;">
                <div id="waveImg" style="width: 100%;height: 100px;" />
              </div>
              <div style="position: absolute;left: 20px;top: 35px;;">
                <span style="color: #000000;font-size: 30px">{{ personalData.inspectionTotal }}</span>
              </div>
              <div class="cardFooter" style="border-top: 1px solid gray;padding-top: 10px;">
                <span>今日报检量 {{ personalData.inspectionDayNum }}</span>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-card class="box-card" style="position: relative">
              <div class="cardHead">
                <span>个人收样量</span>
                <el-tooltip class="item" effect="dark" content="说明" placement="top">
                  <i style="float: right; font-size: 15px;margin-top: 3px; cursor: pointer" class="el-icon-warning" />
                </el-tooltip>
              </div>
              <div class="cardBody" style="padding-bottom: 0px;">
                <div id="histogram" style="width: 100%;height: 100px;" />
              </div>
              <div style="position: absolute;left: 20px;top: 35px;;">
                <span style="color: #000000;font-size: 30px">{{ personalData.receiveTotal }}</span>
              </div>
              <div class="cardFooter" style="border-top: 1px solid gray;padding-top: 10px;">
                <span>今日收样量 {{ personalData.receiveDayNum }}</span>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" />
        </el-col>
      </el-row>
    </div>
    <div class="tabBox clearfix" style="position: relative;background-color: white;margin-bottom: 20px;margin-top: 20px;">
      <el-tabs v-model="activeName">
        <el-tab-pane label="不合格项目" name="first">
          <div class="saleBox" style="padding-left: 20px;float: left;">
            <p style="font-size: 14px;">
              {{ range }}不合格数量
            </p>
            <div id="saleImg" style="width: 660px;height: 260px;" />
          </div>
          <div class="shopBox" style="float: left;margin-left: 40px;">
            <p style="font-size: 14px;">
              {{ range }} 物料报检量排行榜
            </p>
            <div class="shopName">
              <ul class="shopNameList">
                <li v-for="(item,index) in sampleList" :key="index" style="text-align: center;margin-bottom: 10px;">
                  <span class="serial" style="float: left;">{{ index+1 }}</span>
                  <span style="float: left;font-size: 14px;width: 200px;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;名称：{{ item.name }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  <span style="font-size: 14px;">报检数量：{{ item.number }}</span>
                </li>
              </ul>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="物料报检量" name="second">
          <div class="salesTrendBox" style="padding-left: 20px;float: left;">
            <p style="font-size: 14px;">
              报检数量
            </p>
            <div id="salesTrendImg" style="width: 660px;height: 260px;" />
          </div>
          <div class="shopBox" style="float: left;">
            <p style="font-size: 14px;">
              物料报检量排行榜
            </p>
            <div class="shopName">
              <ul class="shopNameList">
                <li v-for="(item,index) in sampleList" :key="index" style="text-align: center;margin-bottom: 10px;">
                  <span class="serial" style="float: left;">{{ index+1 }}</span>
                  <span style="float: left;font-size: 14px;width: 200px;text-align: left">&nbsp;&nbsp;&nbsp;&nbsp;名称：{{ item.name }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  <span style="font-size: 14px;">报检数量：{{ item.number }}</span>
                </li>
              </ul>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="timeBox" style="float: right;position: absolute;right: 0px;top: 0px;">
        <div style="float: left;line-height: 34px;">
          <a :class="{actived:pitch=='_rangeDayChange'}" @click="_rangeDayChange">今日</a>
          <a :class="{actived:pitch=='_rangeWeekChange'}" @click="_rangeWeekChange">本周</a>
          <a :class="{actived:pitch=='_rangeMonthChange'}" @click="_rangeMonthChange">本月</a>
          <a :class="{actived:pitch=='_rangeYearChange'}" @click="_rangeYearChange">本年</a>
          <!--          <a-->
          <!--            v-for="(item,index) in date"-->
          <!--            :key="index"-->
          <!--            href="#"-->
          <!--            style="margin-right: 10px;"-->
          <!--            :class="{actived:pitch==index}"-->
          <!--            @click="Gather(index)"-->
          <!--          >{{ item }}</a>-->
        </div>
        <div class="calendar" style="overflow: hidden">
          <div class="block">
            <!--            <el-date-picker-->
            <!--              v-model="dateValue"-->
            <!--              type="daterange"-->
            <!--              -->
            <!--              start-placeholder="开始日期"-->
            <!--              end-placeholder="结束日期"-->
            <!--              range-separator="至"-->
            <!--              style="width: 300px;margin-left: 20px;"-->
            <!--              @change="dateChange()"-->
            <!--            />-->
            <el-date-picker
              v-model="dateValue"
              class="databox"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="dateChange()"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="visitNum">
      <el-card class="box-card" style="height: 100%">
        <div slot="header" class="clearfix">
          <span>报检量项目量统计</span>
        </div>
        <div class="clearfix">
          <div style="float: left;width: 30%;text-align: center">
            <p style="font-size: 14px; color: rgba(0, 0, 0, 0.45)">
              今日报检量
            </p>
            <p style="font-size: 24px;">
              {{ sampleItemNum.daySample }}
            </p>
            <i />
          </div>
          <div style="float: left;width: 40%;text-align: center">
            <p style="font-size: 14px; color: rgba(0, 0, 0, 0.45)">
              今日项目量
            </p>
            <p style="font-size: 24px;">
              {{ sampleItemNum.dayItem }}
            </p>
            <i />
          </div>
          <div style="float: left;width: 30%;text-align: center">
            <p style="font-size: 14px; color: rgba(0, 0, 0, 0.45)">
              总报检量
            </p>
            <p style="font-size: 24px;">
              {{ sampleItemNum.totalSample }}
            </p>
            <i />
          </div>
        </div>
        <div id="visitImg" style="width: 100%;height: 350px;" />
      </el-card>
    </div>
    <div class="footer">
      <div style="text-align: center">
        <p>LIMS首页</p>
      </div>
    </div>
    <!--<a @click="_change(language[0])">-->
    <!--例子点击此处【{{ language[0].name }}】-->
    <!--</a>-->
    <!--<h3 style="color: red">-->
    <!--dom节点===={{ $t('home.title') }}-->
    <!--</h3>-->
    <!--<h3 style="color: blue">-->
    <!--动态赋值====={{ introduction }}-->
    <!--</h3>-->
    <!--<a @click="_submit">提交</a>-->
    <!--<a @click="_goto">跳转</a>-->
  </div>
</template>
<script>
import { drugStatistics } from '../api'
import {
  test,
  waveImg,
  histogram,
  saleImg,
  salesTrendImg,
  visitImg
} from '../api/homePage'

export default {
  data() {
    return {
      value: '',
      dateValue: '',
      value2: '',
      range: '本月',
      activeName: 'first',
      queryRange: {
        day: undefined,
        week: undefined,
        month: 'month',
        year: undefined,
        beginDate: undefined,
        endDate: undefined
      },
      date: ['今天', '本周', '本月', '本年'],
      clickName: [
        '_rangeDayChange',
        '_rangeWeekChange',
        '_rangeMonthChange',
        '_rangeYearChange'
      ],
      pitch: '_rangeDayChange',
      personalData: [],
      itemNotOk: [],
      sampleItemNum: {},
      sampleList: [
        // { name: '胖大海', number: 700 },
        // { name: '39感冒灵', number: 670 },
        // { name: '三七', number: 410 },
        // { name: '丁香', number: 400 },
        // { name: '人血白蛋白成品', number: 300 },
        // { name: '人血白蛋白原液', number: 296 }
      ]
    }
  },
  mounted() {
    this._getData()
    this._getSampleRank()
    this._getItemFail()
    this._getSampleItemNum()
    test()
  },
  beforeDestroy() {
    // this.myChart.clear()
  },
  methods: {
    dateChange() {
      console.log('时间组件被点击')
      if (this.dateValue === null) {
        this._rangeMonthChange()
      } else {
        this.beginDate = this.dateValue[0]
        this.endDate = this.dateValue[1]
        console.log((this.range = this.beginDate + '至' + this.endDate))
        this.queryRange = {
          day: undefined,
          week: undefined,
          month: undefined,
          year: undefined,
          beginDate: this.beginDate,
          endDate: this.endDate
        }
        this._getItemFail()
        this._getSampleRank()
      }
    },
    Gather(index) {
      this.pitch = index
    },
    _getData: async function() {
      const result = await drugStatistics.getPersonalData({})
      if (result) {
        this.personalData = result
        if (result.listSeven) {
          waveImg(result.listSeven)
        }
        if (result.listSevenReceive) {
          histogram(result.listSevenReceive)
        }
      }
    },
    _getSampleRank: async function() {
      const result = await drugStatistics.getSampleRank(this.queryRange)
      if (result) {
        console.log('_getSampleRank', result)
        this.sampleList = result
        salesTrendImg(result)
      }
    },
    _getItemFail: async function() {
      const result = await drugStatistics.getItemFail(this.queryRange)
      if (result) {
        console.log('getItemFail', result)
        this.itemNotOk = result
        saleImg(result)
      }
    },
    _getSampleItemNum: async function() {
      const result = await drugStatistics.getSampleItemNum(this.queryRange)
      if (result) {
        this.sampleItemNum = result
        visitImg(result)
      }
    },
    _rangeDayChange(data) {
      this.pitch = '_rangeDayChange'
      this.dateValue = ''
      this.range = '今日'
      this.queryRange = {
        day: 'day',
        week: undefined,
        month: undefined,
        year: undefined,
        beginDate: undefined,
        endDate: undefined
      }
      this._getItemFail()
      this._getSampleRank()
    },
    _rangeWeekChange(data) {
      this.pitch = '_rangeWeekChange'
      this.dateValue = ''
      this.range = '本周'
      this.queryRange = {
        day: undefined,
        week: 'week',
        month: undefined,
        year: undefined,
        beginDate: undefined,
        endDate: undefined
      }
      this._getItemFail()
      this._getSampleRank()
    },
    _rangeMonthChange(data) {
      this.pitch = '_rangeMonthChange'
      this.dateValue = ''
      this.range = '本月'
      this.queryRange = {
        day: undefined,
        week: undefined,
        month: 'month',
        year: undefined,
        beginDate: undefined,
        endDate: undefined
      }
      this._getItemFail()
      this._getSampleRank()
    },
    _rangeYearChange(data) {
      this.pitch = '_rangeYearChange'
      this.dateValue = ''
      this.range = '本年'
      this.queryRange = {
        day: undefined,
        week: undefined,
        month: undefined,
        year: 'year',
        beginDate: undefined,
        endDate: undefined
      }
      this._getItemFail()
      this._getSampleRank()
    }
  }
}
</script>
<style scoped>
.actived {
  color: red !important;
}
.serial {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #f5f5f5;
  line-height: 30px;
  border: 0px solid black;
  border-radius: 48px;
  margin-right: 3px;
  color: white;
}
.databox {
  margin-left: 20px;
}
.el-date-editor .el-range-separator {
  width: 100px !important;
}
.shopNameList li:nth-child(-n + 3) .serial {
  background-color: #3398db;
}
/*.el-row {*/
/*  margin-bottom: 20px;*/
/*}*/
/*.el-col {*/
/*  border-radius: 4px;*/
/*}*/
/*.bg-purple-dark {*/
/*  background: #99a9bf;*/
/*}*/
.bg-purple {
  background: #d3dce6;
}
/*.bg-purple-light {*/
/*  background: #e5e9f2;*/
/*}*/
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: #f5f7f9;
}
/*.row-bg {*/
/*  padding: 10px 0;*/
/*  background-color: #f9fafc;*/
/*}*/
</style>
<style>
.databox .el-range-separator {
  padding: 0px;
}
</style>
<!--<script>-->
<!--import global from '../api/config'-->
<!--export default {-->
<!--data() {-->
<!--return {-->
<!--language: [{ name: '中文', value: 'cn' }],-->
<!--introduction: ''-->
<!--}-->
<!--},-->
<!--mounted() {-->
<!--this._isEnCn()-->
<!--this.introduction = this.$t('home.introduction')-->
<!--},-->
<!--methods: {-->
<!--_goto() {-->
<!--this.$router.push('/flowform')-->
<!--},-->
<!--_submit() {-->
<!--console.log('国际化=====', this.$t('home.introduction'))-->
<!--},-->
<!--_isEnCn() {-->
<!--const lang = global.getLang()-->
<!--this.$i18n.locale = lang-->
<!--if (lang === 'cn') {-->
<!--// 中文-->
<!--this.language[0].name = 'English'-->
<!--this.language[0].value = 'en'-->
<!--} else {-->
<!--// 英文-->
<!--this.language[0].name = '中文'-->
<!--this.language[0].value = 'cn'-->
<!--}-->
<!--},-->
<!--// 切换-->
<!--_change(data) {-->
<!--switch (data.value) {-->
<!--case 'cn':-->
<!--this.language[0].name = 'English'-->
<!--this.language[0].value = 'en'-->
<!--this._setLang('cn')-->
<!--break-->
<!--case 'en':-->
<!--this.language[0].name = '中文'-->
<!--this.language[0].value = 'cn'-->
<!--this._setLang('en')-->
<!--break-->
<!--}-->
<!--},-->
<!--_setLang(data) {-->
<!--global.setLang(data)-->
<!--location.reload()-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
