<template>
  <div class="app-container">
    <el-form :inline="true" size="small" class="dark-el-input dark-el-button">
      <el-form-item label="场站名称">
        <el-select v-model="stationCode" placeholder="请选择" style="width: 255px" popper-class="cpp-popper">
          <el-option
            v-for="item in stationList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="使用状态">
        <el-select v-model="overhualStatus" placeholder="请选择" style="width: 255px" popper-class="cpp-popper"
                   clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search"
                   @click="queryByStationCode">查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search"
                   @click="showAllRecords">检修记录
        </el-button>
      </el-form-item>
    </el-form>
    <div style="padding-top: 10px">
      <vxe-table
        ref="xTable"
        align="center"
        class="mytable-style"
        auto-resize
        border
        resizable
        export-config
        highlight-current-row
        show-overflow
        max-height="700"
        :data="tableData">
        <vxe-table-column field="stationCode" title="场站名称" :formatter="codeChangeName"></vxe-table-column>
        <vxe-table-column field="name" title="检修名称"></vxe-table-column>
        <vxe-table-column field="description" title="描述"></vxe-table-column>
        <vxe-table-column field="startTime" :formatter="formatDateTime" title="开始时间"></vxe-table-column>
        <vxe-table-column field="endTime" :formatter="formatDateTime" title="结束时间"></vxe-table-column>
        <vxe-table-column field="overhaulCapacity" title="检修容量（MW）"></vxe-table-column>
        <vxe-table-column field="status" title="状态" :formatter="statusFormatter"></vxe-table-column>
        <vxe-table-column field="" title="使用详情">
          <template v-slot="{ row }">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-chat-dot-round"
              title="使用详情"
              @click="showRecords(row)">使用详情
            </el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
        background
        :loading="loading"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :total="total"
        @page-change="handlePageChange"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
      </vxe-pager>
    </div>
    <el-dialog :title="title" :visible.sync="showDetails" :close-on-click-modal="false" width="1000px" height="600px" :append-to-body="true">
      <div class="dark-el-dialog">
      <el-table
          element-loading-background="rgba(8, 61, 92,1)"
          border
          max-height="300px"
          v-loading="loading"
          :data="tableDataDetails.slice((currentPage-1)*pageSize,currentPage*pageSize)">
          <el-table-column prop="stationCode" align="center" label="场站名称" :formatter="codeChangeName"></el-table-column>
          <el-table-column prop="name" align="center" label="检修名称" ></el-table-column>
          <el-table-column prop="forecastModel" align="center" label="预测模型"></el-table-column>
          <el-table-column prop="forecastType" align="center" label="使用数据类型"></el-table-column>
          <el-table-column prop="createTime" align="center" label="使用时间">
            <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="details" align="center" label="使用详情"  :show-overflow-tooltip="true" ></el-table-column>
        </el-table>
        <pagination v-show="totalDetails>0" :total="totalDetails" :page.sync="currentPage" :limit.sync="pageSize" />
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="showAll" :close-on-click-modal="false" width="1000px" height="600px" :append-to-body="true">
      <div class="dark-el-dialog">
        <el-form :inline="true" size="small" class="dark-el-input dark-el-button">
          <el-form-item label="使用时间">
            <el-date-picker
              :clearable="false"
              v-model="dateTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              popper-class="cpp-popper"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" style="margin-left: 5px" icon="el-icon-search"
                       @click="queryRecords">查询
            </el-button>
          </el-form-item>
        </el-form>
        <el-table
          element-loading-background="rgba(8, 61, 92,1)"
          border
          max-height="500px"
          v-loading="loading"
          :data="tableDataRecords.slice((currentPage-1)*pageSize,currentPage*pageSize)">
          <el-table-column prop="stationCode" align="center" label="场站名称" :formatter="codeChangeName"></el-table-column>
          <el-table-column prop="name" align="center" label="检修名称" ></el-table-column>
          <el-table-column prop="overPlanCapacity" align="center" label="检修容量（MW）" ></el-table-column>
          <el-table-column prop="forecastModel" align="center" label="预测模型"></el-table-column>
          <el-table-column prop="forecastType"  align="center" label="使用数据类型"></el-table-column>
          <el-table-column prop="details"  align="center" label="详情"></el-table-column>
          <el-table-column prop="createTime" align="center" label="使用时间">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="block flex" style="justify-content: end">
          <el-pagination
            popper-class="cpp-popper"
            @size-change="handleSizeChangeRecords"
            @current-change="handleCurrentChangeRecords"
            :current-page="currentRecords"
            :page-size="pageSize"
            :page-sizes="[10, 15, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRecords">
          </el-pagination>
        </div>
      </div>
    </el-dialog>

  </div>
</template>


<script>
export default {
  name: 'overhaulPlan',
  data() {
    return {
      dateTime: [new Date(new Date().toLocaleDateString()).getTime(), new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1],
      options: [{
        value: 1,
        label: '使用中'
      }, {
        value: 2,
        label: '已废弃'
      }],
      overhualStatus: null,
      form: {
        stationCode: '',
        name: '',
        startTime: '',
        endTime: '',
        overhaulCapacity: '',
        maintenanceQuantity: '',
        status: 1,
        isUse: false,
        mcTime: '',
      },
      title: "",
      // 是否显示弹出层
      open: false,
      showDetails: false,
      total: 0,
      totalDetails: 0,
      totalRecords: 0,
      pageSize: 10,
      currentPage: 1,
      currentRecords: 1,
      stationList: [],
      stationCode: '',
      stationName: undefined,
      tableData: [],
      tableDataDetails: [],
      tableDataRecords: [],
      loading: false,
      capacity: null,
      showAll: false,
    }
  },
  created() {
    this.getStationCode()
  },
  mounted() {

  },
  computed: {},
  methods: {
    handlePageChange({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.queryByStationCode();
    },
    handleSizeChangeRecords(val) {
      this.pageSize = val
      this.queryRecords()
    },
    handleCurrentChangeRecords(val) {
     this.currentPage = val
      this.queryRecords()

    },
    //日期转换器
    formatDateTime(cellValue) {
      if (cellValue.cellValue == null) {
        return ''
      }
      const date = new Date(cellValue.cellValue)
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()
      const h = " " + (date.getHours() < 10 ? '0' : '') + date.getHours() + ':'
      const m = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes() + ':'
      const s = (date.getSeconds() < 10 ? '0' : '') + date.getSeconds()
      return Y + M + D + h + m + s
    },
    // 状态转换
    statusFormatter(cellValue) {
      return cellValue.cellValue === 1 ? '使用中' : '已废弃'
    },
    useFormatter(cellValue) {
      return cellValue.cellValue === 0 ? '否' : '是'
    },
    getStationCode() {
      this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
        if (this.stationList.length > 0) {
          this.stationCode = this.stationList[0].value
          this.queryByStationCode()
        } else {
          this.queryByStationCode()
        }
      })
    },
    queryByStationCode() {
      this.loading = true
      const param = {
        "currentPage": this.currentPage,
        "pageSize": this.pageSize,
        "stationCode": this.stationCode,
        "status": this.overhualStatus
      }
      this.$axios.get('/overhaulplan/stationCode', {params: param}).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    codeChangeName(row) {
      var codeList = this.stationList
      for (let i = 0; i < codeList.length; i++) {
        if (row.cellValue == codeList[i].value) {
          return codeList[i].label
        }
        if (row.stationCode == codeList[i].value) {
          return codeList[i].label
        }
      }
    },
    showRecords(row) {
      this.showDetails = true
      this.title = '使用记录详情'
      this.loading = true
      const param = {
        "opId":row.id
      }
      this.$axios.get('/overhaulPlanRecords/findByOpId', {params: param}).then(response => {
        this.tableDataDetails = response.data
        this.totalDetails  = this.tableDataDetails.length
        this.loading = false
      })
    },
    showAllRecords(){
      this.showAll = true
      this.title = '使用记录'
    },
    queryRecords(){
      this.loading = true
      let startTime = Math.round(this.dateTime[0])
      let endTime = Math.round(this.dateTime[1])
      const param = {
        "stationCode": this.stationCode,
        "startTime": startTime,
        "endTime": endTime,
      }
      this.$axios.get('overhaulPlanRecords/findByStationCodeAndCreatTimeBetween',{params: param}).then(response =>{
        this.tableDataRecords = response.data
        this.totalRecords = this.tableDataRecords.length
      })
      this.loading = false

    }
  }
}
</script>
