<template>
  <div ref="cockpit-container-quality" class="visual-container">
    <techy-header :head-title="'合肥新能源数字工厂质量管理驾驶舱'" @toggle-full-screen="changeFullScreen" />
    <section class="techy-body">
      <div class="part-1">
        <div>
          <techy-container :title="'离线异常上报'" icon="质量1">
            <div class="table-wrapper fix-table-exception-report">
              <techy-table
                :page="1"
                :limit="20"
                :show-index="false"
                :table-config="qualityTableProps"
                :table-data="qualityDatalist"
              />
            </div>
          </techy-container>
        </div>

        <div class=" fix-table-exception-alert">
          <techy-container :title="'在线异常上报'" icon="质量2">
            <div class="table-wrapper">
              <techy-table
                :page="1"
                :limit="20"
                :show-index="false"
                :table-config="qualityExceptionTableProps"
                :table-data="qualityExceptionDatalist"
              />
            </div>
          </techy-container>
        </div>
      </div>

      <div class="part-2">
        <techy-container :title="'质量缺陷分析'" icon="质量3">
          <div v-if="1" class="quality-analysis__body">
            <!-- 第一行 -->
            <div class="quality-analysis__body__row-1">
              <!-- 第一列 -->
              <div class="grow-8 flex gap-16">
                <div class="grow">
                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
                    <techy-analysis-header>产线缺陷日对比</techy-analysis-header>
                    <div
                      class="absolute top-0 left-0"
                      style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
                    >
                      <new-bar
                        chart-name="realtime-cost-production"
                        :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
                        :data-list="[
                          {
                            topColor: 'rgba(59, 76, 118, 0.2)',
                            bottomColor: '#49FBD6',
                            name: '产线A',
                            data: [163, 184, 110, 22, 96, 74]
                          },
                          {
                            topColor: 'rgba(59, 76, 118, 0.2)',
                            bottomColor: '#31A2FF',
                            name: '产线B',
                            data: [162, 172, 122, 15, 82, 74]
                          }
                        ]"
                      />
                    </div>
                  </techy-box>
                </div>
                <div class="grow">
                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
                    <techy-analysis-header>产线缺陷月对比</techy-analysis-header>
                    <div
                      class="absolute top-0 left-0"
                      style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
                    >
                      <new-bar
                        chart-name="realtime-cost-production"
                        :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
                        unit-name="单位: 千片"
                        :data-list="[
                          {
                            topColor: 'rgba(59, 76, 118, 0.2)',
                            bottomColor: '#49FBD6',
                            name: '产线A',
                            data: [4.12, 5.21, 3.2, 0.96, 2.61, 2.2]
                          },
                          {
                            topColor: 'rgba(59, 76, 118, 0.2)',
                            bottomColor: '#31A2FF',
                            name: '产线B',
                            data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
                          }
                        ]"
                      />
                    </div>
                  </techy-box>
                </div>
              </div>

              <!-- 第二列 -->
              <div class="grow-6 flex gap-16">
                <div class="width-222">
                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
                    <techy-analysis-header :show-top-icon="false">产线缺陷分析</techy-analysis-header>
                    <div style="position: absolute;  top: 0; left:0; width: 100%; height: 100%;">
                      <span
                        style="display: inline-block; font-size: calc(10px * var(--beilv)); color: #fffc; position: absolute; top: calc(48px * var(--beilv)); left: calc(16px * var(--beilv));"
                      >
                        单位: 千片
                      </span>
                      <pl-fault-analysis-pie-chart :data-list="chosenDatalist" />
                    </div>
                    <div class="pl-select">
                      <span
                        :class="{ 'pl-select__active': plMode === 'a' }"
                        @click="
                          plMode = 'a'
                          chosenDatalist = quexianDatalist[0]
                        "
                      >
                        A
                      </span>
                      <span
                        :class="{ 'pl-select__active': plMode === 'b' }"
                        @click="
                          plMode = 'b'
                          chosenDatalist = quexianDatalist[1]
                        "
                      >
                        B
                      </span>
                    </div>
                    <div class="date-select">
                      <span
                        :class="{ 'date-select__active': dateMode === 'day' }"
                        @click="
                          dateMode = 'day'
                          chosenDatalist = quexianDatalist[2]
                        "
                      >
                        日
                      </span>
                      <span
                        :class="{ 'date-select__active': dateMode === 'month' }"
                        @click="
                          dateMode = 'month'
                          chosenDatalist = quexianDatalist[3]
                        "
                      >
                        月
                      </span>
                    </div>
                  </techy-box>
                </div>
                <div class="grow">
                  <techy-box class="" style="padding: calc(16px * var(--beilv));">
                    <techy-analysis-header>产品成品率</techy-analysis-header>
                    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
                      <new-line-stack :data-update-token="dataUpdateToken" />
                    </div>
                    <div class="date-select">
                      <span
                        :class="{ 'date-select__active': dateMode2 === 'day' }"
                        @click="
                          dateMode2 = 'day'
                          dataUpdateToken = '' + Math.random()
                        "
                      >
                        日
                      </span>
                      <span
                        :class="{ 'date-select__active': dateMode2 === 'month' }"
                        @click="
                          dateMode2 = 'month'
                          dataUpdateToken = '' + Math.random()
                        "
                      >
                        月
                      </span>
                    </div>
                  </techy-box>
                </div>
              </div>
            </div>
            <!-- end 第一行 -->

            <!-- 第二行 -->
            <div class="quality-analysis__body__row-2">
              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
                <techy-analysis-header>产线A工序质量分析(日)</techy-analysis-header>
                <div class="grow grid gap-16-8 column-2 row-5">
                  <techy-analysis-bar
                    v-for="(item, index) in qualityAnalysisDatalist"
                    :key="index"
                    :name="item.name"
                    :amount="item.amount"
                    color="blue"
                  />
                </div>
              </techy-box>
              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
                <techy-analysis-header>产线A工序质量分析(月)</techy-analysis-header>
                <div class="grow grid gap-16-8 column-2 row-5">
                  <techy-analysis-bar
                    v-for="(item, index) in qualityAnalysisDatalistMonth"
                    :key="index"
                    :name="item.name"
                    :amount="item.amount"
                    color="blue"
                  />
                </div>
              </techy-box>
              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
                <techy-analysis-header>产线B工序质量分析(日)</techy-analysis-header>
                <div class="grow grid gap-16-8 column-2 row-5">
                  <techy-analysis-bar
                    v-for="(item, index) in qualityAnalysisDatalistB"
                    :key="index"
                    :name="item.name"
                    :amount="item.amount"
                    color="orange"
                  />
                </div>
              </techy-box>
              <techy-box style="padding: calc(16px * var(--beilv));" class="flex flex-col">
                <techy-analysis-header>产线B工序质量分析(月)</techy-analysis-header>
                <div class="grow grid gap-16-8 column-2 row-5">
                  <techy-analysis-bar
                    v-for="(item, index) in qualityAnalysisDatalistMonthB"
                    :key="index"
                    :name="item.name"
                    :amount="item.amount"
                    color="orange"
                  />
                </div>
              </techy-box>
            </div>
          </div>
        </techy-container>
      </div>
    </section>
  </div>
</template>

<script>
import TechyContainer from './components/TechyContainer.vue'
import TechyHeader from './components/TechyHeader.vue'
import TechyBox from './components/TechyBox.vue'
import TechyTable from './components/TechyTable.vue'
import TechyAnalysisBar from './components/TechyAnalysisBar.vue'
import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
// import FaultCategoryChart from './components/charts/FaultCategoryChart.vue'
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
import { mapGetters } from 'vuex'
import screenfull from 'screenfull'
import NewBar from './components/charts/newBar.vue'
import NewLineStack from './components/charts/newLineStack.vue'

import { qualityDatalist, qualityTableProps, qualityExceptionDatalist, qualityExceptionTableProps } from './mockData'

export default {
  name: 'QualityManagerHome',
  components: {
    TechyHeader,
    TechyContainer,
    TechyBox,
    TechyAnalysisBar,
    TechyAnalysisHeader,
    TechyTable,
    // FaultCategoryChart,
    PlFaultAnalysisPieChart,
    NewBar,
    NewLineStack
  },
  data() {
    const quexianDatalist = [
      [
        { value: 4.34, name: '破片' },
        { value: 3.4, name: '崩边' },
        { value: 4.1, name: '脏污' },
        { value: 2.4, name: '划擦伤' },
        { value: 0.23, name: '崩孔' },
        { value: 2.14, name: '其他' }
      ],
      [
        { value: 4.17, name: '破片' },
        { value: 3.6, name: '崩边' },
        { value: 4, name: '脏污' },
        { value: 2.2, name: '划擦伤' },
        { value: 0.2, name: '崩孔' },
        { value: 1.9, name: '其他' }
      ],
      [
        { value: 3.33, name: '破片' },
        { value: 3, name: '崩边' },
        { value: 4.3, name: '脏污' },
        { value: 2.1, name: '划擦伤' },
        { value: 1, name: '崩孔' },
        { value: 1.8, name: '其他' }
      ],
      [
        { value: 2.7, name: '破片' },
        { value: 1.56, name: '崩边' },
        { value: 2.3, name: '脏污' },
        { value: 1.2, name: '划擦伤' },
        { value: 0.23, name: '崩孔' },
        { value: 2, name: '其他' }
      ]
    ]

    return {
      dataUpdateToken: 'xx-token',
      plMode: 'a',
      dateMode: 'month',
      dateMode2: 'month',
      qualityTableProps,
      qualityDatalist,
      qualityExceptionDatalist,
      qualityExceptionTableProps,
      qualityAnalysisDatalist: [
        { name: '上片', amount: 22 },
        { name: '钢化', amount: 2 },
        { name: '磨边', amount: 221 },
        { name: '下片', amount: 27 },
        { name: '丝印', amount: 93 },
        { name: '包装', amount: 3 },
        { name: '打孔', amount: 31 },
        { name: '清洗', amount: 2 },
        { name: '镀膜', amount: 95 },
        { name: '其他', amount: 171 }
      ],
      qualityAnalysisDatalistMonth: [
        { name: '上片', amount: 665 },
        { name: '钢化', amount: 56 },
        { name: '磨边', amount: 6541 },
        { name: '下片', amount: 820 },
        { name: '丝印', amount: 2790 },
        { name: '包装', amount: 83 },
        { name: '打孔', amount: 964 },
        { name: '清洗', amount: 61 },
        { name: '镀膜', amount: 2470 },
        { name: '其他', amount: 4959 }
      ],
      qualityAnalysisDatalistB: [
        { name: '上片', amount: 16 },
        { name: '钢化', amount: 4 },
        { name: '磨边', amount: 201 },
        { name: '下片', amount: 21 },
        { name: '丝印', amount: 100 },
        { name: '包装', amount: 1 },
        { name: '打孔', amount: 27 },
        { name: '清洗', amount: 2 },
        { name: '镀膜', amount: 93 },
        { name: '其他', amount: 163 }
      ],
      qualityAnalysisDatalistMonthB: [
        { name: '上片', amount: 698 },
        { name: '钢化', amount: 49 },
        { name: '磨边', amount: 6321 },
        { name: '下片', amount: 799 },
        { name: '丝印', amount: 2782 },
        { name: '包装', amount: 72 },
        { name: '打孔', amount: 992 },
        { name: '清洗', amount: 63 },
        { name: '镀膜', amount: 2510 },
        { name: '其他', amount: 4920 }
      ],
      quexianDatalist,
      chosenDatalist: quexianDatalist[0]
    }
  },
  computed: {
    ...mapGetters(['sidebar'])
  },
  methods: {
    changeFullScreen() {
      if (!screenfull.enabled) {
        this.$message({
          message: 'you browser can not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle(this.$refs['cockpit-container-quality'])
    }
  }
}
</script>

<style scoped>
::-webkit-scrollbar {
  width: calc(8px * var(--beilv));
}

::-webkit-scrollbar-track {
  background-color: #14243f;
  border-radius: 0;
}

::-webkit-scrollbar-button {
  width: calc(8px * var(--beilv));
  height: calc(8px * var(--beilv));
  background: #5bc4bf9f;
  position: relative;
}

::-webkit-scrollbar-thumb {
  border-radius: calc(8px * var(--beilv));
  background: #5bc4bf9f;
}

.fix-table-exception-alert >>> .el-table td .cell {
  width: 75% !important;
  margin: auto;
  text-align: left;
}
.fix-table-exception-report >>> .el-table td .cell {
  width: 70% !important;
  margin: auto;
  text-align: left;
}

.visual-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: url('./assets/bg.png') no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

.techy-body {
  flex: 1 0;
  height: 65vh;
  width: 100%;
  padding: calc(24px * var(--beilv));
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--beilv));
}

.table-wrapper {
  height: calc(100% - 3vh);
  overflow: auto;
}

.grid {
  display: grid;
}

.gap-16-8 {
  gap: calc(12px * var(--beilv)) calc(8px * var(--beilv));
}

.column-2 {
  grid-template-columns: 1fr 1fr;
}

.row-5 {
  grid-template-rows: repeat(5, calc(24px * var(--beilv)));
}

.part-1 {
  display: flex;
  gap: calc(16px * var(--beilv));
  flex: 1;
  height: calc(263px * var(--beilv));
}

.part-1 > div {
  width: 30px;
  flex: 1 1;
}

.part-2 {
  flex: 0;
  height: calc(542px * var(--beilv));
}

.quality-analysis__body {
  height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--beilv));
}

.quality-analysis__body__row-1 {
  height: calc(216px * var(--beilv));
  /* overflow: hidden; */
  overflow: initial;
  display: flex;
  gap: calc(16px * var(--beilv));
}

.quality-analysis__body__row-2 {
  /* height: calc(100%); */
  /* height: 200px;  */
  /* flex: 1.5 1.5; */
  overflow: hidden;
  display: flex;
  gap: calc(16px * var(--beilv));
  font-size: 0.65vw;
}

.quality-analysis__body__row-2 > .techy-box {
  flex: 1 1;
}

.quality-analysis__body__row-2__body {
  /* height: calc(100% - 128px); */
  overflow: hidden;
  background-color: #99302a;
}
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.grow {
  flex-grow: 1;
}

.grow-6 {
  flex-grow: 6;
}

.grow-8 {
  flex-grow: 8;
}

.grow-10 {
  flex-grow: 10;
}

.mb-20 {
  margin-bottom: 20px;
}

.mr-16 {
  margin-right: 16px;
}

.gap-16 {
  gap: calc(16px * var(--beilv));
}

.pl-select,
.date-select {
  position: absolute;
  top: calc(16px * var(--beilv));
  right: calc(10px * var(--beilv));
  border-radius: calc(2px * var(--beilv));
  overflow: hidden;
  display: flex;
  cursor: pointer;
}

.pl-select {
  right: unset;
  left: calc(10px * var(--beilv));
}

.pl-select span,
.date-select span {
  display: inline-block;
  width: calc(40px * var(--beilv));
  text-align: center;
  font-size: calc(12px * var(--beilv));
  line-height: calc(18px * var(--beilv));
  color: white;
  background-color: #31878c94;
}

.pl-select span.pl-select__active,
.date-select span.date-select__active {
  background-color: #42bbb7;
}

.width-222 {
  width: calc(375px * var(--beilv));
}
</style>
