<template>
  <div class="dashboard-editor-container home">
    <el-card class="row-space">
      <template #header>
        <span>今日统计</span>
      </template>
      <el-row :gutter="20" align="middle">
        <el-col :span="18">
          <el-row :gutter="5" class="row-space" justify="space-evenly">
            <el-col :span="intStatColWidth0 + intStatColWidth1">
              <span class=" statistic-row-cell statistic-column-head">{{ strStatQATitle }}</span>
            </el-col>
            <el-col :span="intStatColWidth1 + intStatColWidth2">
              <span class=" statistic-row-cell statistic-column-head">{{ strStatInstoreTitle }}</span>
            </el-col>
            <el-col :span="intStatColWidth1 + intStatColWidth2">
              <span class=" statistic-row-cell statistic-column-head">{{ strStatOutstoreTitle }}</span>
            </el-col>
            <el-col :span="intStatColWidth1 + intStatColWidth2">
              <span class=" statistic-row-cell statistic-column-head">{{ strStatAssembleTitle }}</span>
            </el-col>
            <el-col :span="intStatColWidth1 + intStatColWidth2">
              <span class=" statistic-row-cell statistic-column-head">{{ strStatWorkTitle }}</span>
            </el-col>
            <el-col :span="intStatColWidth2 + intStatColWidth3"></el-col>
          </el-row>
          <el-row :gutter="5" class="row-space" justify="space-evenly">
            <el-col :span="intStatColWidth0" :pull="1">
              <span class=" statistic-row-cell">今日</span>
            </el-col>
            <el-col :span="intStatColWidth1">
              <span class=" statistic-row-cell statistic-row-data">{{ DailyStatistics.qa_key }}</span>
            </el-col>
            <el-col :span="intStatColWidth2">
              <span class="than-yesterday" :class="ThanYesterday.qa < 0 ? 'green' : 'red'"
                v-show="ThanYesterday.qa != Infinity && ThanYesterday.qa != 'NaN'">
                {{ ThanYesterday.qa < 0 ? ThanYesterday.qa * (-1) : ThanYesterday.qa }}% <el-icon
                  v-if="ThanYesterday.qa < 0">
                  <CaretBottom />
                  </el-icon>
                  <el-icon v-if="ThanYesterday.qa > 0">
                    <CaretTop />
                  </el-icon>
              </span></el-col>

            <el-col :span="intStatColWidth1">
              <span class=" statistic-row-cell statistic-row-data">{{ DailyStatistics.in_key }}</span>
            </el-col>
            <el-col :span="intStatColWidth2">
              <span class="than-yesterday" :class="ThanYesterday.in < 0 ? 'green' : 'red'"
                v-show="ThanYesterday.in != Infinity && ThanYesterday.in != 'NaN'">
                {{ ThanYesterday.in < 0 ? ThanYesterday.in * (-1) : ThanYesterday.in }}% <el-icon
                  v-if="ThanYesterday.in < 0">
                  <CaretBottom />
                  </el-icon>
                  <el-icon v-if="ThanYesterday.in > 0">
                    <CaretTop />
                  </el-icon>
              </span></el-col>

            <el-col :span="intStatColWidth1">
              <span class=" statistic-row-cell statistic-row-data">{{ DailyStatistics.out_key }}</span>
            </el-col>
            <el-col :span="intStatColWidth2">
              <span class="than-yesterday" :class="ThanYesterday.out < 0 ? 'green' : 'red'"
                v-show="ThanYesterday.out != Infinity && ThanYesterday.out != 'NaN'">
                {{ ThanYesterday.out < 0 ? ThanYesterday.out * (-1) : ThanYesterday.out }}% <el-icon
                  v-if="ThanYesterday.out < 0">
                  <CaretBottom />
                  </el-icon>
                  <el-icon v-if="ThanYesterday.out > 0">
                    <CaretTop />
                  </el-icon>
              </span></el-col>

            <el-col :span="intStatColWidth1">
              <span class=" statistic-row-cell statistic-row-data">{{ DailyStatistics.ass_key }}</span>
            </el-col>
            <el-col :span="intStatColWidth2">
              <span class="than-yesterday" :class="ThanYesterday.ass < 0 ? 'green' : 'red'"
                v-show="ThanYesterday.ass != Infinity && ThanYesterday.ass != 'NaN'">
                {{ ThanYesterday.ass < 0 ? ThanYesterday.ass * (-1) : ThanYesterday.ass }}% <el-icon
                  v-if="ThanYesterday.ass < 0">
                  <CaretBottom />
                  </el-icon>
                  <el-icon v-if="ThanYesterday.ass > 0">
                    <CaretTop />
                  </el-icon>
              </span></el-col>

            <el-col :span="intStatColWidth1">
              <span class=" statistic-row-cell statistic-row-data">{{ totalUnkey }}</span>
            </el-col>
            <el-col :span="intStatColWidth2 + intStatColWidth3">
              <span class="than-yesterday " :class="ThanYesterday.totalUnkey < 0 ? 'green' : 'red'"
                v-show="ThanYesterday.totalUnkey != Infinity && ThanYesterday.totalUnkey != 'NaN'">
                {{ ThanYesterday.totalUnkey < 0 ? ThanYesterday.totalUnkey * (-1) : ThanYesterday.totalUnkey }}% <el-icon
                  v-if="ThanYesterday.totalUnkey < 0">
                  <CaretBottom />
                  </el-icon>
                  <el-icon v-if="ThanYesterday.totalUnkey > 0">
                    <CaretTop />
                  </el-icon>
              </span></el-col>
          </el-row>
          <el-row :gutter="5" class="row-space" justify="space-evenly">
            <el-col :span="intStatColWidth0" :pull="1">
              <span class=" statistic-row-cell">昨日</span>
            </el-col>
            <el-col :span="intStatColWidth1">
              <span class=" statistic-row-cell">{{ YesterdayStatistics.qa_key }}</span>
            </el-col>
            <el-col :span="intStatColWidth2"></el-col>
            <el-col :span="intStatColWidth1">
              <span class=" statistic-row-cell">{{ YesterdayStatistics.in_key }}</span>
            </el-col>
            <el-col :span="intStatColWidth2"></el-col>
            <el-col :span="intStatColWidth1">
              <span class=" statistic-row-cell">{{ YesterdayStatistics.out_key }}</span>
            </el-col>
            <el-col :span="intStatColWidth2"></el-col>
            <el-col :span="intStatColWidth1">
              <span class=" statistic-row-cell">{{ YesterdayStatistics.ass_key }}</span>
            </el-col>
            <el-col :span="intStatColWidth2"></el-col>
            <el-col :span="intStatColWidth1">
              <span class=" statistic-row-cell">{{ yesterdayTotalUnkey }}</span>
            </el-col>
            <el-col :span="intStatColWidth2 + intStatColWidth3"></el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <bar-chart height="250px" />
        </el-col>
      </el-row>
    </el-card>
    <el-card class="row-space">
      <template #header>
        <span>合格率</span>
        <el-radio-group class="card-button" v-model="statisticQaScope" :change="GetAllPercentOfPass()">
          <el-radio-button label="当日"></el-radio-button>
          <el-radio-button label="当月"></el-radio-button>
          <el-radio-button label="当年"></el-radio-button>
        </el-radio-group>
      </template>
      <el-row :gutter="10">
        <el-col :span="8">
          <Piechart2Data Title="外协关键件合格率" Label1="合格" Label2="不合格" :Data="POPData0" />
        </el-col>
        <el-col :span="8">
          <Piechart2Data Title="外购关键件合格率" Label1="合格" Label2="不合格" :Data="POPData1" />
        </el-col>
        <el-col :span="8">
          <Piechart2Data Title="所有来料合格率" Label1="合格" Label2="不合格" :Data="POPData2" />
        </el-col>
      </el-row>
    </el-card>
    <el-card class="row-space">
      <template #header>
        <span>物料库存</span>
      </template>
      <el-row :gutter="10">
        <el-col :span="12">
          <Piechart2Data Title="物料类别占比" Label1="外协件" Label2="外购件" :Data="groupByCategory" />
        </el-col>
        <el-col :span="12">
          <Piechart2Data Title="关键件占比" Label1="关键件" Label2="非关键件" :Data="groupByKey" />
        </el-col>
      </el-row>
    </el-card>
    <el-card class="row-space" style="max-height: 400px;">
      <template #header>
        <span>日志</span>
        <el-button text class="card-button-ico">
          <router-link to="/system/log/operlog">
            <el-icon>
              <MoreFilled />
            </el-icon>
          </router-link>
        </el-button>
      </template>
      <el-table v-loading="loading" border :data="list">
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column label="用户" align="center" prop="operName" />
        <el-table-column label="IP地址" align="center" prop="operIp" :show-overflow-tooltip="true" />
        <el-table-column label="系统模块" align="center" prop="title" :show-overflow-tooltip="true" />
        <el-table-column label="操作状态" align="center" prop="status">
          <template #default="{ row }">
            <dict-tag :options="statusOptions" :value="row.status"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作日期" align="center" prop="operTime">
          <template #default="scope">
            <span>{{ scope.row.operTime }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- <el-row :gutter="10" class="row-space">
      <el-col :md="24" :lg="8" :xl="8">
        <el-card shadow="hover" class="card">
          <template #header>
            <span>时间段作业效率</span>
          </template>
          <line-chart :chart-data="lineChartData" :key="dataType" />
        </el-card>

      </el-col>
    </el-row> -->
  </div>
</template>

<script setup name="index">
import { provide, computed } from 'vue'
import LineChart from './dashboard/LineChart'
import Piechart2Data from './dashboard/PieChart_2Data'
import PieChartKey from './dashboard/PieChart_key'
import PieChartCategory from './dashboard/PieChart_category'
import BarChart from './dashboard/BarChart'

import useUserStore from '@/store/modules/user'
import useSocketStore from '@/store/modules/socket'

import logoL from '@/assets/logo/logo-L.png'

import { list as listOperLog } from '@/api/monitor/operlog'

import {
  GetQaCount, YGetQaCount,
  GetInCount, YGetInCount,
  GetOutCount, YGetOutCount,
  GetAssCount, YGetAssCount,
  GetKeyProportion, GetCategoryProportion
} from '@/api/business/index.js'
import { GetPercentOfPass } from '@/api/business/qainspectrecord.js'

const strStatQA = '关键件质检数统计：'
const strStatInstore = '关键件入库数统计：'
const strStatOutstore = '关键件出库数统计：'
const strStatAssemble = '关键件装配数统计：'
const strStatWork = '非关键件作业数统计：'

const strStatQATitle = '关键件质检'
const strStatInstoreTitle = '关键件入库'
const strStatOutstoreTitle = '关键件出库'
const strStatAssembleTitle = '关键件装配'
const strStatWorkTitle = '非关键件作业'

const intStatColWidth0 = 3 //×1
const intStatColWidth1 = 2 //×5
const intStatColWidth2 = 2 //×5
const intStatColWidth3 = 1 //×1

const { proxy } = getCurrentInstance()

// 每日作业数
const DailyStatistics = reactive({
  qa: 0,
  qa_key: 0,
  in: 0,
  in_key: 0,
  out: 0,
  out_key: 0,
  ass: 0,
  ass_key: 0,
})
provide('DailyStatistics', DailyStatistics)
// 昨日作业数
const YesterdayStatistics = reactive({
  qa: 0,
  qa_key: 0,
  in: 0,
  in_key: 0,
  out: 0,
  out_key: 0,
  ass: 0,
  ass_key: 0,
})
// 非关键件一共作业数
const totalUnkey = computed(() => { return DailyStatistics.qa + DailyStatistics.in + DailyStatistics.out + DailyStatistics.ass })
const yesterdayTotalUnkey = computed(() => { return YesterdayStatistics.qa + YesterdayStatistics.in + YesterdayStatistics.out + YesterdayStatistics.ass })

const ThanYesterday = reactive({
  qa: computed(() => { return ((DailyStatistics.qa_key / YesterdayStatistics.qa_key - 1) * 100).toFixed(2) }),
  in: computed(() => { return ((DailyStatistics.in_key / YesterdayStatistics.in_key - 1) * 100).toFixed(2) }),
  out: computed(() => { return ((DailyStatistics.out_key / YesterdayStatistics.out_key - 1) * 100).toFixed(2) }),
  ass: computed(() => { return ((DailyStatistics.ass_key / YesterdayStatistics.ass_key - 1) * 100).toFixed(2) }),
  totalUnkey: computed(() => { return ((totalUnkey.value / yesterdayTotalUnkey.value - 1) * 100).toFixed(2) }),
})
const statisticQaScope = ref('当月')
// 合格率 d0合格，d1不合格
const POPData0 = reactive({ d0: 0, d1: 0 })
const POPData1 = reactive({ d0: 0, d1: 0 })
const POPData2 = reactive({ d0: 0, d1: 0 })
// 关键件占比
const groupByKey = reactive({
  d0: 0,//关键件
  d1: 0,//非关键件
})
provide('groupByKey', groupByKey)
//物料类别占比
const groupByCategory = reactive({
  d0: 0,//外协件
  d1: 0,//外购件
})
provide('groupByCategory', groupByCategory)

const queryParams = ref({
  pageNum: 1,
  pageSize: 8,
  title: undefined,
  operName: undefined,
  businessType: undefined,
  status: undefined,
  operParam: undefined
})
const POPParams = ref({
  category: undefined,
  keyFlag: undefined,
  beginTime: undefined,
  endTime: undefined
})
// 遮罩层
const loading = ref(true)
// 操作日志数据
const list = ref([])
// 日期范围
const dateRange = ref([])
/** 查询操作日志 */
function getList() {
  loading.value = true
  listOperLog(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
    loading.value = false
    if (response.code == 200) {
      list.value = response.data.result
    } else {
      list.value = []
    }
  })
}
function getStatistics() {
  GetQaCount().then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].keyFlag) {
          DailyStatistics.qa_key = response.data[i]["sumQty"]
        }
        else {
          DailyStatistics.qa = response.data[i]["sumQty"]
        }
      }
    }
  })
  GetInCount().then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].keyFlag) {
          DailyStatistics.in_key = response.data[i]["sumQty"]
        }
        else {
          DailyStatistics.in = response.data[i]["sumQty"]
        }
      }
    }
  })
  GetOutCount().then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].keyFlag) {
          DailyStatistics.out_key = response.data[i]["sumQty"]
        }
        else {
          DailyStatistics.out = response.data[i]["sumQty"]
        }
      }
    }
  })
  GetAssCount().then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].keyFlag) {
          DailyStatistics.ass_key = response.data[i]["sumQty"]
        }
        else {
          DailyStatistics.ass = response.data[i]["sumQty"]
        }
      }
    }
  })
  YGetQaCount().then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].keyFlag) {
          YesterdayStatistics.qa_key = response.data[i]["sumQty"]
        }
        else {
          YesterdayStatistics.qa = response.data[i]["sumQty"]
        }
      }
    }
  })
  YGetInCount().then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].keyFlag) {
          YesterdayStatistics.in_key = response.data[i]["sumQty"]
        }
        else {
          YesterdayStatistics.in = response.data[i]["sumQty"]
        }
      }
    }
  })
  YGetOutCount().then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].keyFlag) {
          YesterdayStatistics.out_key = response.data[i]["sumQty"]
        }
        else {
          YesterdayStatistics.out = response.data[i]["sumQty"]
        }
      }
    }
  })
  YGetAssCount().then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].keyFlag) {
          YesterdayStatistics.ass_key = response.data[i]["sumQty"]
        }
        else {
          YesterdayStatistics.ass = response.data[i]["sumQty"]
        }
      }
    }
  })
  GetKeyProportion().then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].keyFlag) {
          groupByKey.d0 = response.data[i]["sumQty"]
        }
        else {
          groupByKey.d1 = response.data[i]["sumQty"]
        }
      }
    }
  })
  GetCategoryProportion().then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].category == "外协件") {
          groupByCategory.d0 = response.data[i]["sumQty"]
        }
        else if (response.data[i].category == "外购件") {
          groupByCategory.d1 = response.data[i]["sumQty"]
        }
      }
    }
  })
}
function GetAllPercentOfPass() {
  const timeScope = reactive({
    beginTime: undefined,
    endTime: undefined
  })
  let date = new Date()
  let thisYear = date.getFullYear()
  let thisMonth = date.getMonth()
  let today = date.getDate()

  if (statisticQaScope.value == "当日") {
    timeScope.beginTime = new Date(thisYear, thisMonth, today, 0, 0, 0)
    timeScope.endTime = new Date(thisYear, thisMonth, today, 23, 59, 59)
    // console.log('当日', date, timeScope, thisYear, thisMonth, today,)
  }
  if (statisticQaScope.value == "当月") {
    var firstDay = new Date(thisYear, thisMonth, 1) // 取当年当月中的第一天
    var lastDay = new Date(thisYear, thisMonth, new Date(firstDay.getTime() - 1000 * 60 * 60 * 24).getDate(), 23, 59, 59) // 获取当月最后一天日期
    timeScope.beginTime = firstDay
    timeScope.endTime = lastDay
    // console.log('当月', timeScope)
  }
  if (statisticQaScope.value == "当年") {
    timeScope.beginTime = new Date(thisYear, 1, 1, 0, 0, 0)
    timeScope.endTime = new Date(thisYear, 12, 31, 23, 59, 59)
    // console.log('当年')
  }
  GetPercentOfPass({ category: '外协件', keyFlag: true, beginTime: timeScope.beginTime, endTime: timeScope.endTime }).then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].checkResult == "OK") {
          POPData0.d0 = response.data[i]["qty"]
        }
        else if (response.data[i].checkResult == "NG") {
          POPData0.d1 = response.data[i]["qty"]
        }
      }
      if (response.data.length < 1) {
        POPData0.d0 = 0
        POPData0.d1 = 0
      }
    }
  })
  GetPercentOfPass({ category: '外购件', keyFlag: true, beginTime: timeScope.beginTime, endTime: timeScope.endTime }).then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].checkResult == "OK") {
          POPData1.d0 = response.data[i]["qty"]
        }
        else if (response.data[i].checkResult == "NG") {
          POPData1.d1 = response.data[i]["qty"]
        }
      }
      if (response.data.length < 1) {
        POPData1.d0 = 0
        POPData1.d1 = 0
      }
    }
  })
  GetPercentOfPass({ keyFlag: true, beginTime: timeScope.beginTime, endTime: timeScope.endTime }).then((response) => {
    if (response.code == 200) {
      // console.log(response.data)
      for (var i = 0; i < response.data.length; i++) {
        if (response.data[i].checkResult == "OK") {
          POPData2.d0 = response.data[i]["qty"]
        }
        else if (response.data[i].checkResult == "NG") {
          POPData2.d1 = response.data[i]["qty"]
        }
      }
      if (response.data.length < 1) {
        POPData2.d0 = 0
        POPData2.d1 = 0
      }
    }
  })
}
getStatistics()
GetAllPercentOfPass()

// 系统状态字典
const statusOptions = ref([])
proxy.getDicts('sys_common_status').then((response) => {
  statusOptions.value = response.data
})
// 操作类型字典
const businessTypeOptions = ref([])
proxy.getDicts('sys_oper_type').then((response) => {
  businessTypeOptions.value = response.data
})
getList()
</script>

<style lang="scss" scoped>
.home {
  overflow: hidden;

  .home-card-more {
    float: right;
    padding: 3px 0;
    font-size: 13px;
  }

  .statistics-span {
    display: flex;
    align-items: center;
    justify-content: right;
    font-size: 16px;
    margin: 5px 0px;
  }

  .row-space {
    margin-bottom: 20px;
  }

  .user-item {
    height: 198px;
    display: flex;
    align-items: center;

    .user-item-left {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .user-item-right {
      flex: 1;
      padding: 15px;

      .right-title {
        font-size: 20px;
      }

      .right-l-v {
        font-size: 13px;
        display: flex;

        .right-label {
          color: gray;
          width: 75px;
        }

        .right-value {
          flex: 1;
        }
      }
    }
  }

  .info {
    height: 189px;

    // overflow-y: scroll;
    .info-scroll {
      height: 100%;
      overflow: auto;

      .info-ul {
        list-style: none;
        padding: 0;

        .info-item {
          display: flex;
          font-size: 13px;
          color: gray;
          height: 28px;
          line-height: 28px;

          &:hover {
            color: var(--color-primary);
            cursor: pointer;
          }

          .info-item-left {
            flex: 1;
            flex-shrink: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }

          .info-item-right {
            width: 140px;
            text-align: right;
            padding-right: 10px;
          }
        }
      }
    }
  }
}

.dashboard-editor-container {
  background-color: var(--base-bg-main);
  position: relative;

  .chart-wrapper {
    background: var(--base-bg-main);
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.statistic-row-cell {
  float: right;
}

.statistic-row-data {
  font-size: 30px;
  font-weight: bold;
}

.statistic-column-head {
  // font-size: 15px;
}

.el-statistic {
  --el-statistic-content-font-size: 32px;
}

.statistic-card {
  height: 100%;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-card-templete {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.than-yesterday {
  font-size: 15px;
  line-height: 35px;
}

.than-yesterday-label {
  font-size: 12px;
  margin-left: 15px;
}

.green {
  color: var(--el-color-success);
}

.red {
  color: var(--el-color-error);
}

.card {
  height: 400px;
}

.card-button-ico {
  float: right;
  width: 25px;
  height: 25px;
}

.card-button {
  margin-left: 10px;
  float: right;
}
</style>
