<template>
  <el-dialog
    append-to-body
    v-loading.fullscreen.lock="fullscreenLoading"
    title="充电桩管理"
    :visible.sync="dialogVisible"
    destroy-on-close
    width="1200px"
    @close="close"
    @open="open"
  >
    <div class="grid-container">
      <el-table
        ref="table2"
        :data="tableDtl"
        style="width: 100%;"
        size="mini"
        :cell-style="cellStyle"
        border
        :highlight-current-row="true"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
      >
        <el-table-column v-if="false" prop="dict_id" label="uuid" align="center" />
        <el-table-column min-width="60" prop="label" label="充电桩名称" align="center" />
        <el-table-column prop="value" label="是否分配车辆(1是0否)" align="center" width="150" />
        <el-table-column min-width="60" prop="para1" label="充电桩站点" align="center" />
        <el-table-column min-width="50" prop="para2" label="当前车号" align="center" />
        <el-table-column min-width="60" prop="use_time" label="充电时长(H)" align="center" :formatter="Myduration" />
        <el-table-column min-width="60" prop="para3" label="充电状态" align="center" />
        <el-table-column prop="update_time" label="修改时间" align="center" />
        <el-table-column prop="update_name" label="修改人" align="center" />
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="danger" size="small">初始化充电桩信息</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
import crudParam, {updateDict} from '@/views/system/param/param'
import { crud } from '@crud/crud'

export default {
  name: 'StationDialog',
  components: { },
  mixins: [crud()],
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      fullscreenLoading: false,
      tableDtl: [],
      form: {
        electric: 0,
        electric2: 0,
        electric_begin: '06:00',
        electric_end: '18:00'
      }
    }
  },
  watch: {
    dialogShow: {
      handler(newValue) {
        this.dialogVisible = newValue
      }
    }
  },
  methods: {
    open() {
      this.queryTableDtl()
    },
    close() {
      this.$emit('update:dialogShow', false)
      this.tableDtl = []
      this.$emit('AddChanged')
    },
    Myduration(row, column) {
      const start = new Date(row.update_time)
      const end = new Date()
      const diffTime = Math.abs(end - start)
      let diffDays = 0
      if (row.para2 && row.para2 !== null) {
        diffDays = Math.ceil(diffTime / (1000 * 60 * 60)) // 转换为H
      }
      return diffDays
    },
    handleClick(row) {
      this.$confirm('此操作将初始化充电桩信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.fullscreenLoading = true
        debugger
        crudParam.initDict(row).then(res => {
          this.$message({
            type: 'success',
            message: '初始化成功!'
          })
          this.fullscreenLoading = false
          this.queryTableDtl()
        }).catch(() => {
          this.fullscreenLoading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'use_time') {
        const start = new Date(row.update_time)
        const end = new Date()
        const diffTime = Math.abs(end - start)
        let diffDays = 0
        if (row.para2 && row.para2 !== null) {
          diffDays = Math.ceil(diffTime / (1000 * 60 * 60)) // 转换为H
        }

        if (diffDays > 0 && diffDays <= 3) {
          return 'background: #13ce66'
        } else if (diffDays > 3) {
          return 'background: red'
        }
      }
    },
    queryTableDtl() {
      crudParam.showDetail2({ 'name': 'station' }).then(res => {
        this.tableDtl = res
      })
    }
  }
}
</script>

<style scoped>
</style>
