<template>
  <div class="charge-box">
    <div class="charge-tools">
      <el-form :inline="true" :model="queryParams">
        <el-form-item label="日志范围：" style="margin-left: 35px">
          <el-select 
            multiple
            v-model="robotValue" 
            clearable 
            placeholder="请选择"
            @change="changeSelect"
            collapse-tags
            @remove-tag="removeTag"
          >
            <el-option label="全选" value="全选" @click.native="selectAll"></el-option>
            <el-option
              v-for="item in logOptions"
              :key="item.alarmCode"
              :label="item.alarmName"
              :value="item.alarmCode"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="时间范围:" style="margin-left: 50px">
          <el-date-picker
            v-model="dateTime"
            class="times"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="serch actve" @click="handleQuery">查询</el-button>
          <el-button type="primary" class="serch" @click="resetForm">重置</el-button>
        </el-form-item>

      </el-form>
    </div>

    <div class="charge-table">
      <div class="charge-table-top">
        <el-button type="primary" class="daochu" @click="chargeExport">导出结果</el-button>
      </div>
      <div class="charge-table-bottom">
        <el-table
          :data="datalist"
          :header-cell-style="{
            background: '#1d283e',
            borderColor: '#2f3c86',
            height: '36px',
            lineHeight: '36px',
            color:'white',
            fontSize: '15px',
          }"
          stripe
          fit
          :height="tableheight"
          style="width: 100%"
          :default-sort="{prop: 'chargerId', order: 'descending'}"
          @selection-change="handleSelectionChange"
        >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <af-table-column
          prop="time"
          label="发生时间"
          fixed
          width="140">
        </af-table-column>
        <af-table-column
          prop="plcTag"
          label="日志编号"
          fixed
          width="120">
        </af-table-column>
        <af-table-column v-for="log in logOptions" :key="log.alarmCode" :label="log.alarmName">
          <template slot-scope="scope">
            {{ scope.row.time }}
          </template>
        </af-table-column>

          <!-- <el-table-column label="时段明细" width="100" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" class="handle" size="small" @click="chargeShow(scope.row.interval)">明细</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <div class="pageblock">
        <el-pagination
          :current-page="queryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!--时段明细弹窗-->
    <div class="rolemanage chargeshow">
      <el-dialog
        title="充电明细"
        :visible.sync="dialogChargeVisible"
        :destroy-on-close="true"
      >
        <div class="charge-table-bottom">
          <el-table
            :data="chargeShowList"
            :header-cell-style="{
              background: '#1d283e',
              borderColor: '#2f3c86',
              height: '36px',
              lineHeight: '36px',
              color:'white',
              fontSize: '16px',
            }"
            stripe
            fit
            :height="tableheight-80"
            style="width: 100%"
          >
            <el-table-column
              prop="index"
              label="序号"
            />
            <el-table-column
              prop="startTime"
              label="开始时间段"
            />
            <el-table-column
              prop="endTime"
              label="结束时间段"
            />
            <el-table-column
              prop="chargePower"
              label="充电量kWh"
            />
          </el-table>
        </div>
        <div slot="footer" class="dialog-footer" />
      </el-dialog>
    </div>
    <!--时段明细弹窗结束-->
  </div>
</template>

<script>
import './log.scss'
import { chargeList, chargeExport, getChargeCode } from '@/api/records'
import { logModel,robotList } from '@/api/log'
import serverUrl from '../../../vue.config.js'
export default {
  name: 'Robot',
  components: {},
  data() {
    return {
      // 查询时间数组
      dateTime: '',
      // 充电机ID下拉列表
      chargerArr: null,
      // 数据列表
      datalist: [],
      // 查询参数
      queryParams: {
        page: 1, // 当前页
        pageSize: 10, // 每页条数
        chargerId: undefined, 
        chgSn: undefined, // 电池编号
        chgBeginTime: undefined,
        chgEndTime: undefined,
        orderByField: undefined, // 排序字段
        orderByWays: 'desc'// 排序方式
      },
      total: 0, // 总条数，
      tableheight: 0, // 表格高度设置
      dialogChargeVisible: false, // 弹窗显示
      chargeShowList: [],// 充电机明细弹窗列表
      checked: false,
      indeterminate: false,
      robotValue:'',
      logOptions: [],
      multipleSelection:[]
    }
  },
  watch: {
    tableheight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.heightTimer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val
        this.heightTimer = true
        setTimeout(function() {
          this.heightTimer = false
        }, 400)
      }
    }
  },
  mounted() {
    this.getChargeCode()
    this.onLoadHeight()
    this.changeWindow()
    this.getLogModel()
    this.getrobotList()
  },
  methods: {
    /* 设置初始视窗高度*/
    onLoadHeight() {
      this.$nextTick(() => {
        this.tableheight = document.body.clientHeight - 460
      })
    },
    /* 设置窗口变化高度*/
    changeWindow() {
      window.onresize = () => {
        return (() => {
          this.tableheight = document.body.clientHeight - 460
        })()
      }
    },
    selectAll() {
      if (this.robotValue.length < this.logOptions.length) {
        this.robotValue = [];
        this.logOptions.map((item) => {
          this.robotValue.push(item.value);
        });
        this.robotValue.unshift("全选");
      } else {
        this.robotValue = [];
      }
      this.$emit("SelectedData", this.robotValue);
    },
    changeSelect(val) {
      if (!val.includes("全选") && val.length === this.logOptions.length) {
        this.robotValue.unshift("全选");
      } else if (val.includes("全选") && val.length - 1 < this.logOptions.length) {
        this.robotValue = this.robotValue.filter((item) => {
          return item !== "全选";
        });
      }
      this.$emit("SelectedData", this.robotValue);
    },
    removeTag(val) {
      if (val === "全选") {
        this.robotValue = [];
      }
      this.$emit("SelectedData", this.robotValue);
    },
    //列表选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //获取机器人日志列表
    getrobotList(){
      const params={}
      robotList(params).then( res =>{
        console.log(res)
        this.datalist= res.data
      })
    },
    //获取日志数据字典
    getLogModel(){
      logModel().then( res =>{
        this.logOptions= res.data
      })
    },
    // 充电明细弹窗显示
    chargeShow(list) {
      this.dialogChargeVisible = true
      this.chargeShowList = list
    },
    // 获取充电机ID
    getChargeCode() {
      getChargeCode().then(res => {
        this.chargerArr = res.data
      })
    },
    /** 分页下一页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
    },
    /** 分页选择页数 */
    handleCurrentChange(val) {
      this.queryParams.page = val
    },
    // 搜索
    handleQuery() {
      if (this.dateTime) {
        this.queryParams.chgBeginTime = this.$moment(this.dateTime[0]).format('YYYY-MM-DD HH:mm:ss')
        this.queryParams.chgEndTime = this.$moment(this.dateTime[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      console.log(this.queryParams)
    },
    // 搜索重置
    resetForm() {
      this.queryParams.chgBeginTime = undefined
      this.queryParams.chgEndTime = undefined
      this.queryParams.chargerId = undefined
      this.queryParams.chgSn = undefined
    },
    // 导出结果
    chargeExport() {
      this.$confirm('确认导出结果？', '导出结果', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(async() => {
          const res = await chargeExport(this.queryParams)
          const execlUrl=serverUrl.devServer.proxy['/api'].target+'/excel/'+res.data
          window.open(execlUrl,'_blank')
        })
      .catch(err => { console.error(err) })
    }
  }
}
</script>
