<template>
  <div class="device-status">
    <navigation-name :msg="msg"/>

    <div v-if="collectEntityList && collectEntityList.length > 0">
      <jg-button-group :collect-entity-list="collectEntityList" @onTabChange="onTabChange"/>
    </div>

    <div v-if="collectEntityList && collectEntityList.length > 0" class="charts-outer">
      <div class="charts-inner">
        <jg-chart _height="150px" :option="optionToday"/>
        <div class="chart-right-text">
          <div>
            <div>运行占比</div>
            <div class="chart-right-text-rate">{{ durations.day.run }}%</div>
          </div>
          <div>
            <div>停机占比</div>
            <div class="chart-right-text-rate">{{ durations.day.stop }}%</div>
          </div>
          <div>
            <div>运行时长</div>
            <div class="chart-right-text-rate">{{ durations.day.duration }}</div>
          </div>
        </div>
      </div>
      <div class="charts-inner">
        <jg-chart _height="150px" :option="optionWeek"/>
        <div class="chart-right-text">
          <div>
            <div>运行占比</div>
            <div class="chart-right-text-rate">{{ durations.week.run }}%</div>
          </div>
          <div>
            <div>停机占比</div>
            <div class="chart-right-text-rate">{{ durations.week.stop }}%</div>
          </div>
          <div>
            <div>运行时长</div>
            <div class="chart-right-text-rate">{{ durations.week.duration }}</div>
          </div>
        </div>
      </div>
      <div class="charts-inner">
        <jg-chart _height="150px" :option="optionMonth"/>
        <div class="chart-right-text">
          <div>
            <div>运行占比</div>
            <div class="chart-right-text-rate">{{ durations.month.run }}%</div>
          </div>
          <div>
            <div>停机占比</div>
            <div class="chart-right-text-rate">{{ durations.month.stop }}%</div>
          </div>
          <div>
            <div>运行时长</div>
            <div class="chart-right-text-rate">{{ durations.month.duration }}</div>
          </div>
        </div>
      </div>
    </div>

    <div style="margin: 16px 0 8px 0">
      <el-form :inline="true" :model="formData">
        <el-form-item label="选择查询时间">
          <el-date-picker
            v-model="formData.dateRange"
            type="datetimerange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            popper-class="history-date-picker"
            :append-to-body="false"
            :picker-options="pickerOptions"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="fetchTableData">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      :header-cell-style="{
        background: '#BFBFBF',
        boxShadow: 'inset grey 0px -1px',
        color: '#333333',
        borderColor: '#eaeaea',
        fontSize: '20px',
      }"
      :cell-style="{
        borderColor: '#919191',
        fontSize: '20px',
        backgroundColor: '#ebebeb',
        fontWeight: '500',
        height: '40px',
      }"
      row-key="id"
      border
      stripe
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="80"
      />
      <el-table-column
        prop="startTime"
        label="启动时间"
        align="center"
      />
      <el-table-column
        prop="endTime"
        label="停机时间"
        align="center"
      />
      <el-table-column
        prop="durationStr"
        align="right"
        label="运行时长"/>
    </el-table>
    <div style="display: flex;justify-content: flex-end;margin-top: 8px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginationOption.currentPage"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="paginationOption.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="paginationOption.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import NavigationName from '@/components/NavigationName'
import moment from 'moment'
import JgButtonGroup from '@/components/JgButtonGroup'

import { findEntityByAcqId } from '@/api/CollectEntity'
import { findDuration, findDeviceRunRecord } from '@/api/DeviceRunRecord'

import JgChart from '@/components/JgChart'
import { mapState } from 'vuex'

export default {
  name: 'DeviceStatus',
  components: {
    JgChart,
    JgButtonGroup,
    NavigationName
  },
  data() {
    return {
      msg: '设备运行状态查看',
      tableLoading: false,
      tableData: [],
      formData: {
        dateRange: [
          // moment().subtract(1, 'days').valueOf(),
          // moment().valueOf()
        ],
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一小时',
          onClick(picker) {
            picker.$emit('pick', [moment().subtract(1, 'hours'), moment()])
          }
        }, {
          text: '最近六小时',
          onClick(picker) {
            picker.$emit('pick', [moment().subtract(6, 'hours'), moment()])
          }
        }, {
          text: '最近24小时',
          onClick(picker) {
            picker.$emit('pick', [moment().subtract(24, 'hours'), moment()])
          }
        }]
      },
      paginationOption: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      collectEntityList: [],
      collectEntityId: '',
      optionToday: {
        title: {
          text: '今日运行统计',
          left: 'left',
          top: 'top',
          textStyle: {
            fontSize: 20
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['60%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 25,
                name: '停机时长',
                itemStyle: {
                  color: '#999999'
                }
              },
              {
                value: 75,
                name: '运行时长',
                itemStyle: {
                  color: '#fa8b71',
                }
              },
            ]
          }
        ]
      },
      optionWeek: {
        title: {
          text: '本周运行统计',
          left: 'left',
          top: 'top',
          textStyle: {
            fontSize: 20
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['60%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 25,
                name: '停机时长',
                itemStyle: {
                  color: '#999999'
                }
              },
              {
                value: 75,
                name: '运行时长',
                itemStyle: {
                  color: '#71fac8',
                }
              },
            ]
          }
        ]
      },
      optionMonth: {
        title: {
          text: '本月运行统计',
          left: 'left',
          top: 'top',
          textStyle: {
            fontSize: 20
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['60%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 25,
                name: '停机时长',
                itemStyle: {
                  color: '#999999'
                }
              },
              {
                value: 75,
                name: '运行时长',
                itemStyle: {
                  color: '#a171fa',
                }
              },
            ]
          }
        ]
      },
      durations: {
        day: {
          run: 0,
          stop: 0,
          duration: ''
        },
        week: {
          run: 0,
          stop: 0,
          duration: ''
        },
        month: {
          run: 0,
          stop: 0,
          duration: ''
        },
      },
    }
  },
  computed: {
    ...mapState({
      acquisitionStationId: state => state.company.acquisitionStationId,
    }),
  },
  mounted() {
    this.getCollectEntity()
  },
  watch: {
    collectEntityId: {
      handler() {
        this.fetchDuration()
        this.paginationOption.currentPage = 1
        this.fetchTableData()
      },
    },
  },
  methods: {
    getCollectEntity() {
      const params = {
        acquisitionStationId: this.acquisitionStationId
      }
      findEntityByAcqId(params).then(res => {
        if (res && res.code === '200') {
          this.collectEntityList = res.data.filter(e => e.isShow)
          this.collectEntityId = this.collectEntityList[0].id
        } else {
          this.$message.error(res.message)
        }
      }).catch(reason => {
        console.error(reason)
      })
    },
    fetchDuration() {
      findDuration({ collectEntityId: this.collectEntityId }).then(res => {
        console.log('findDuration =>', res.data)
        if (res && res.code === '200') {
          const today = this.optionToday.series
          today[0].data[0].value = res.data.day.stopDuration
          today[0].data[1].value = res.data.day.runDuration
          this.optionToday.series = today
          this.durations.day.run = Math.round(res.data.day.runDurationRate * 100)
          this.durations.day.stop = Math.round(res.data.day.stopDurationRate * 100)
          this.durations.day.duration = res.data.day.duration

          const week = this.optionWeek.series
          week[0].data[0].value = res.data.week.stopDuration
          week[0].data[1].value = res.data.week.runDuration
          this.optionWeek.series = week
          this.durations.week.run = Math.round(res.data.week.runDurationRate * 100)
          this.durations.week.stop = Math.round(res.data.week.stopDurationRate * 100)
          this.durations.week.duration = res.data.week.duration

          const month = this.optionMonth.series
          month[0].data[0].value = res.data.month.stopDuration
          month[0].data[1].value = res.data.month.runDuration
          this.optionMonth.series = month
          this.durations.month.run = Math.round(res.data.month.runDurationRate * 100)
          this.durations.month.stop = Math.round(res.data.month.stopDurationRate * 100)
          this.durations.month.duration = res.data.month.duration
        } else {
          this.$message.error(res.message)
        }
      })
      this.formData.dateRange = [
          // moment().subtract(1, 'days').valueOf(),
          // moment().valueOf()
      ]
    },
    fetchTableData() {
      findDeviceRunRecord({
        collectEntityId: this.collectEntityId,
        startTime: this.formData.dateRange && this.formData.dateRange.length > 0 && this.formData.dateRange[0].valueOf() || null,
        endTime: this.formData.dateRange && this.formData.dateRange.length > 0 && this.formData.dateRange[1].valueOf() || null,
        current: this.paginationOption.currentPage,
        pageSize: this.paginationOption.pageSize,
      }).then(res => {
        console.log('findDeviceRunRecord =>', res.data)
        if (res && res.code === '200') {
          this.tableData = res.data.records
          this.paginationOption.total = Number(res.data.total)
        }
      })
    },
    onTabChange(collectEntityId) {
      this.collectEntityId = collectEntityId
    },
    handleSizeChange(val) {
      this.paginationOption.pageSize = val
      this.paginationOption.currentPage = 1
      this.fetchTableData()
    },
    handleCurrentChange(val) {
      this.paginationOption.currentPage = val
      this.fetchTableData()
    },
  },
}
</script>

<style lang="less" scoped>
  .device-status {
    height: 100%;
    padding: 0 40px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    position: relative;

    /deep/ .el-form-item {
      margin-bottom: 0;
    }

    /deep/ .el-input__inner {
      background-color: #ebebeb;
      box-shadow: inset 0.1rem 0.1rem 0.1rem #AAA7A7, inset -0.1rem -0.1rem 0.1rem #FFFFFF;
      border: none;
      font-size: 16px;
      color: #333333;
    }

    .el-table, .el-table__expanded-cell {
      background-color: transparent;
    }

    .el-button {
      color: #333333;
      border: none;
      background-color: #EBEBEB;
      box-shadow: 0.05rem 0.1rem 0.1rem #AAA7A7, -0.05rem -0.1rem 0.1rem #FFFFFF;
    }

    .el-button:active {
      color: #ffffff !important;
      border: none;
      background-color: #A20D13;
      box-shadow: inset 0.1rem 0.1rem 0.2rem #6E090C, inset -0.1rem -0.1rem 0.2rem #c7494d;
    }

    .el-button:focus, .el-button:hover {
      color: inherit;
      border-color: transparent;
    }

    /deep/ .el-select-dropdown__item.selected {
      font-weight: normal;
      color: #FFFFFF;
      background-color: #A20D13;
      border-radius: 5px;
      box-shadow: inset 0.2rem 0.2rem 0.5rem #6E090C, inset -0.2rem -0.2rem 0.5rem #C71016;
    }

    /deep/ .history-date-picker {
      left: 10% !important;
      background-color: #EBEBEB;
      box-shadow: 0.05rem 0.05rem 0.1rem #AAA7A7, -0.05rem -0.05rem 0.1rem #FFFFFF;

      .el-picker-panel__sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 110px;
        border-right: 1px solid #e4e4e4;
        box-sizing: border-box;
        padding-top: 6px;
        background-color: transparent;
        overflow: auto;
      }

      .today {
        div {
          span {
            color: #A20D13;
            font-weight: bolder;
          }
        }
      }

      .start-date, .end-date {
        div {
          span {
            color: #A20D13;
            font-weight: bolder;
            background-color: #EBEBEB;
            box-shadow: 0.05rem 0.05rem 0.1rem #AAA7A7, -0.05rem -0.05rem 0.1rem #FFFFFF;
          }
        }
      }

      .el-picker-panel__footer {
        border-top: 1px solid #e4e4e4;
        padding: 4px;
        text-align: right;
        background-color: #ebebeb;
        position: relative;
        font-size: 0;
      }

      .el-picker-panel__shortcut {
        display: block;
        width: 90%;
        border: 0;
        border-radius: 5px;
        background-color: transparent;
        line-height: 28px;
        font-size: 14px;
        color: #606266;
        padding-left: 12px;
        text-align: left;
        outline: 0;
        cursor: pointer;
        margin: 8px 5px;
        box-shadow: 0.1rem 0.1rem 0.1rem #aaa7a7, -0.1rem -0.1rem 0.1rem #ffffff;
      }

      .el-button--text {
        color: #A20D13;
      }

      .el-button--default {
        color: #FFF;
        background-color: #A20D13;
      }

      .el-button.is-plain:focus, .el-button.is-plain:hover {
        border-color: transparent;
        color: #FFF;
      }
    }

    /deep/ .popper__arrow {
      display: none;
    }

    /deep/ .el-range-editor .el-range-input {
      line-height: 1;
      background-color: transparent;
    }

    /deep/ .el-date-editor .el-range__icon {
      color: inherit;
    }

    /deep/ .el-pagination {
      .btn-prev {
        background: inherit !important;
        background-color: #EBEBEB;
        box-shadow: 0.05rem 0.1rem 0.1rem #AAA7A7, -0.05rem -0.1rem 0.1rem #FFFFFF;
      }

      .btn-next {
        background-color: #EBEBEB;
        box-shadow: 0.05rem 0.1rem 0.1rem #AAA7A7, -0.05rem -0.1rem 0.1rem #FFFFFF;
      }

      /*
            .btn-prev:active, .btn-next:active {
              color: #FFF;
              border: none;
              background-color: #A20D13 !important;
              box-shadow: inset 0.1rem 0.1rem 0.2rem #6E090C, inset -0.1rem -0.1rem 0.2rem #c7494d;
            }*/

      button:hover {
        color: #c7494d;
      }

      .el-pager {
        li {
          padding: 0 4px;
          font-size: 13px;
          min-width: 35.5px;
          height: 28px;
          line-height: 28px;
          box-sizing: border-box;
          text-align: center;
          background-color: #EBEBEB;
          box-shadow: 0.05rem 0.1rem 0.1rem #AAA7A7, -0.05rem -0.1rem 0.1rem #FFFFFF;
        }

        li.active, li:hover {
          color: #c7494d;
          cursor: default;
        }
      }
    }

    /deep/ .jg-select {
      padding: 10px;
      background-color: #ebebeb;
      box-shadow: 0.1rem 0.1rem 0.1rem #AAA7A7, -0.1rem -0.1rem 0.1rem #FFFFFF;

      .el-select-dropdown__item {
        box-shadow: 0.1rem 0.1rem 0.1rem #AAA7A7, -0.1rem -0.1rem 0.1rem #FFFFFF;
        margin: 8px 3px;
        border-radius: 5px;
      }
    }

    /deep/ .el-select-dropdown__item.selected {
      font-weight: normal;
      color: #FFFFFF;
      background-color: #A20D13;
      border-radius: 5px;
      box-shadow: inset 0.2rem 0.2rem 0.5rem #6E090C, inset -0.2rem -0.2rem 0.5rem #C71016;
    }

    /deep/ .popper__arrow {
      display: none;
    }

    .charts-outer {
      border-radius: 10px;
      box-shadow: 0.2rem 0.2rem 0.2rem #aaa7a7, -0.1rem -0.1rem 0.2rem #FFFFFF;
      display: flex;
      /*flex-wrap: wrap;*/
      justify-content: space-around;
      padding: 16px;

      .charts-inner {
        width: 100%;
        border-radius: 10px;
        box-shadow: inset 0.2rem 0.2rem 0.2rem #aaa7a7, inset -0.1rem -0.1rem 0.2rem #FFFFFF;
        padding: 8px;
        margin-left: 16px;
        display: flex;
      }

      .charts-inner:first-child {
        margin-left: 0;
      }

      .chart-right-text {
        width: 100%;
        font-size: 16px;
        color: #666666;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
        margin-left: 32px;

        .chart-right-text-rate {
          margin-top: 8px;
          font-size: 20px;
          font-weight: bolder;
        }
      }
    }
  }
</style>
