<template>
  <el-dialog
    class="screen-dialog"
    title="Vibration Pipe Sinking and Stone Crushing Pile Information"
    :visible.sync="open"
    :modal="false"
    append-to-body
    :destroy-on-close="true"
    :before-close="closeDialog"
  >
    <div class="dialog-content">
      <el-descriptions :column="2">
        <el-descriptions-item label="Pile Number">{{ realtimeIndex.holeNum }}</el-descriptions-item>
        <el-descriptions-item label="Status">
          <dict-tag size="small" :options="dict.type.pile_hole_status" :value="realtimeIndex.consStatus"/>
        </el-descriptions-item>
        <el-descriptions-item label="Machine Number">
          {{
            realtimeIndex.pileMachineInfo && realtimeIndex.pileMachineInfo.machineNum
          }}
        </el-descriptions-item>
        <el-descriptions-item label="Final Vertical Deviation (%)">
          {{ realtimeIndex.verticalDeviation }}
        </el-descriptions-item>
        <el-descriptions-item label="Design Depth (m)">40</el-descriptions-item>
        <el-descriptions-item label="Actual Depth (m)">{{ realtimeIndex.depth }}</el-descriptions-item>
        <el-descriptions-item label="Delivery length (m)">{{ realtimeIndex.sprayVolume }}</el-descriptions-item>
        <el-descriptions-item label="Discharge pressure value">{{ realtimeIndex.sprayPressure }}</el-descriptions-item>
        <el-descriptions-item label="Start Time">{{ realtimeIndex.startTime || '--' }}</el-descriptions-item>
        <el-descriptions-item label="End Time">{{ realtimeIndex.endTime || '--' }}</el-descriptions-item>
      </el-descriptions>
      <div class="machine-realtime-container">
        <div class="realtime-title">
          Real-time Depth and Current Value Data
        </div>
        <div class="realtime-chart">
          <line-chart-block v-if="loaded" :optCfg="lineOpt"/>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import LineChartBlock from "@/components/charts/LineChartBlock.vue";
import {listPileHoleHisIndex, pileHoleRealtimeIndex} from "@/api/cons/pileHoleInfo";

export default {
  components: {LineChartBlock},
  props: {},
  dicts: ['pile_hole_status'],
  data() {
    return {
      open: false,
      loaded: false,
      realtimeIndex: {},
      lineOpt: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#505765'
            }
          }
        },
        legend: {
          data: ['Current', 'Rainfall'],
          left: '0',
          textStyle: {
            color: '#fefefe'
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: false},
            axisLabel: {
              color: '#fefefe'
            },
            data: [].map(function (str) {
              return str.replace(' ', '\n');
            })
          }
        ],
        yAxis: [
          {
            name: 'Current(A)',
            type: 'value',
            splitLine: false,
            nameTextStyle: {
              color: '#fefefe'
            },
            axisLabel: {
              color: '#fefefe'
            }
          },
          {
            name: 'Injection pressure(MPa)',
            type: 'value',
            splitLine: false,
            nameTextStyle: {
              color: '#fefefe'
            },
            axisLabel: {
              color: '#fefefe'
            }
          }
        ],
        series: []
      }
    };
  },
  methods: {
    showDialog(pileHolleInfo) {
      this.open = true
      pileHoleRealtimeIndex(pileHolleInfo.id).then(response => {
        this.realtimeIndex = response.data
      })
      listPileHoleHisIndex({
        id: 3,
      }).then(response => {
        if (response.data && response.data.length > 0) {
          const {data} = response
          const current = {
            name: 'Current',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: []
          }

          const prassure = {
            name: 'Injection pressure',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            emphasis: {
              focus: 'series'
            },
            data: []
          }

          const dateTime = []
          data.forEach(item => {
            const {current: elecCurrent, sprayPressure, recordTime} = item
            current.data.push(elecCurrent)
            prassure.data.push(sprayPressure)
            dateTime.push(recordTime)
          })
          this.lineOpt.xAxis[0].data = dateTime.map(function (str) {
            return str.replace(' ', '\n');
          })
          this.lineOpt.series = [current, prassure]
          this.loaded = true
        }
      })
    },

    closeDialog() {
      this.open = false
      this.loaded = false
    },
  },
};
</script>
<style lang="scss" src="./index.scss" scoped/>
