<template >
    <el-container style="padding:0px;" :style="{height:currentHeight-65+'px'}">
      <el-header style='height:42px;line-height:42px;border: 1px solid rgba(195, 195, 195, 1);background: #f4f4f4;'>
        <span class="title-bold title-left-color">历史指令</span>
        <el-popover placement="bottom" width="150" >
                    <el-button slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)'> 筛选</el-button>
                    <el-checkbox-group v-model="checkList">
                        <el-col :span="24">
                            <el-checkbox v-for="(item,index) in tableHeader" :label="item" :key="index"  >
                               {{item.label}}
                            </el-checkbox>
                        </el-col>
                    </el-checkbox-group>
      </el-popover>
      </el-header>
      <el-main class="box_main">
        <el-card>
            <el-form :inline="true" :model="dataForm" size="mini">
              <el-form-item label="资源点名称:">
                <el-autocomplete class="inline-input" v-model="dataForm.username" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
              </el-form-item>
              <el-form-item label="执行时间:">
                <el-date-picker type="datetime" class="inputWidth" style="width:175px;" v-model="dataForm.startTime" placeholder="选择日期时间" clearable ></el-date-picker>
              </el-form-item>
              <el-form-item label="至">
                <el-date-picker type="datetime" class="inputWidth" style="width:175px;" v-model="dataForm.endTime" placeholder="选择日期时间" clearable ></el-date-picker>
              </el-form-item>
              <el-button @click="getDataList()" type="primary"  size="mini" icon="el-icon-search">查询</el-button>
              <el-button @click="resetClick()" type="primary"  size="mini" icon="el-icon-refresh-right">重置</el-button>
            </el-form>

             <drag-table :data="dataList" :header="checkList" :option="tableOption"  @getDataList="getDataList" v-loading="dataListLoading"  :operationNum="1"  :isShowOperate="true">

                  <el-table-column slot="fixed"  fixed  prop=""  label="序号"  width="80"  header-align="center" align="center" >
                      <template slot-scope="scope">
                         {{scope.$index+(pageIndex - 1) * pageSize + 1}}
                      </template>
                  </el-table-column>

                  <template slot='instruction' slot-scope="scope">
                    <font :title="scope.row.instruction">{{scope.row.instruction}}</font>
                  </template>

                  <template slot='status' slot-scope="scope">
                     <div>{{scope.row.status==1?'正常':'不可用'}}</div>
                  </template>

                   <template slot='result' slot-scope="scope">
                    <div>{{scope.row.result==1?'成功':'失败'}}</div>
                  </template>

                  <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="tabRowClick(scope.row)">详情</el-button>
                  </template>

                </drag-table>
        </el-card>
      </el-main>
      <el-footer class="box_footer">
        <el-pagination @size-change="sizeChangeHandle" background @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper" ></el-pagination>
      </el-footer>
      <query-detail v-if='queryDetailVisible' ref='queryDetail'></query-detail>
    </el-container>

</template>

<script>
import QueryDetail from './query-detail'
import dragTable from '../../components/tab'
export default {
  data() {
    return {
      checkList: [], //筛选数据
       tableHeader: [
        { label: '指令ID', prop: 'instruction', slot: true },
        { label: '资源点名称', prop: 'resourceName' },
        { label: '资源点类型', prop: 'type' },
        { label: '资源点状态', prop: 'status', slot: true },
        { label: '资源点动作', prop: 'actionName' },
        { label: '线路站点', prop: 'lineStationName' },
        { label: '执行人', prop: 'createUser' },
        { label: '执行完成时间', prop: 'createTime' },
        { label: '执行结果', prop: 'result', slot: true }
      ],
      tableOption: {
        border: false, //是否边框
        maxHeight: 500 //高度
      },
      queryDetailVisible: true,
      dataForm: {
        stationId: localStorage.getItem('stationId'),
        subCode: '02',
        username: '',
        operation: '',
        startTime: '',
        endTime: ''
      },
      dialogDataForm: {
        operation: '1'
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      state1: '',
      restaurants: [],
      sort: '',
      order: ''
    }
  },
  components: {
    QueryDetail, dragTable
  },
  computed: {
    currentHeight() {
      return this.$store.state.d2admin.currentHeight.height
    }
  },
  watch: {
    totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex) {
          this.pageIndex = pages || 1
          this.getDataList()//获取表格数据的方法
      }
    }
  },
  created() {
    this.pageIndex = 1
    this.getStationList()
    this.getDataList()
    this.checkList = [...this.tableHeader]
  },
  methods: {
    resetClick() {
      this.dataForm = {
        stationId: localStorage.getItem('stationId'),
        subCode: '02',
        username: '',
        operation: '',
        startTime: '',
        endTime: ''
      }
      this.restaurants = []
      this.pageIndex = 1
      this.getDataList()
      this.getStationList()
    },
    tabRowClick(res) {
      this.$refs.queryDetail.init(JSON.parse(JSON.stringify(res)))
    },
    querySearch(queryString, cb) {
      let restaurants = this.restaurants
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect() {

    },
    // 获取数据列表
    getDataList(sort, order) {
      if (new Date(this.dataForm.startTime).getTime() > new Date(this.dataForm.endTime).getTime()) {
        this.$message.warning('开始时间不能大于结束时间')
        return false
      }
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrlEq('/orGate/list'),
        method: 'post',
        data: {
          stationId: this.dataForm.stationId,
          page: this.pageIndex,
          rows: this.pageSize,
          startTime: this.formatTime(this.dataForm.startTime, 'yyyy-MM-dd hh:mm:ss'),
          endTime: this.formatTime(this.dataForm.endTime, 'yyyy-MM-dd hh:mm:ss'),
          resourceName: this.dataForm.username,
          sort,
          order
        }
      }).then(data => {
        console.log('data', data)
        if (data && data.code === 0) {
          this.dataList = data.page.rows
          this.totalPage = data.page.total
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 获取资源点列表
    getStationList() {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrlEq('/liResource/getAllResourceNameList'),
        method: 'post',
        data: {
          stationId: this.dataForm.stationId,
          subCode: this.dataForm.subCode
        }
      }).then(data => {
        data.list.forEach(res => {
          this.restaurants.push({ value: res })
        })
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    dialogFormVisible() {

    },
    //转化时间
    formatTime(date, format) {
        if (date) {
          date = new Date(date)
          var o = {
              'M+': date.getMonth() + 1, //月份
              'd+': date.getDate(), //日
              'h+': date.getHours(), //小时
              'm+': date.getMinutes(), //分
              's+': date.getSeconds(), //秒
              'q+': Math.floor((date.getMonth() + 3) / 3), //季度
              'S': date.getMilliseconds() //毫秒
          }
          var fmt = format || 'yyyy-MM-dd hh:mm'
          if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
          for (var k in o) {
 if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
}
          return fmt
        } else {
          return ''
        }
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.order = 'desc'
      } else {
        this.order = 'asc'
      }
      if (column.column.columnKey) {
        this.sort = column.column.columnKey
      } else {
        this.sort = column.prop
      }
      this.getDataList()
    }
  }
}
</script>
<style lang='scss'>
.inputWidth {
  width: 130px;
}
.instuctions_header{
  height: 42px;
  background:#EDEEF1;
  border:1px solid rgba(195, 195, 195, 1);
  h1{
    font-size:16px;
    line-height: 42px;
    height: 42px;
    margin: 0;
    font-family:Adobe Heiti Std;
    font-weight:bold;
    color:rgba(51,51,51,1);
    float: left;
  }
  span{
    width:5px;
    height:16px;
    background:rgba(33,172,252,1);
    float: left;
    margin: 13px 10px 0 20px;
  };
}
.instuctions_content{
  padding: 20px;
  background: #fff;
  table{
    th{
      background: #eef8ff !important;
      color: #333333 !important;
    }
  }
}
</style>