<template>
  <a-modal
    centered
    class="equipment-log-modal"
    :footer="null"
    :maskClosable="false"
    :title="modalTit"
    v-model="isShow"
    @cancle="isShow=false"
    :width="1000">
    <!-- 查询条件 -->
    <a-form
      id="logistics-form"
      :form="form"
      ref="form"
      v-bind="formItemLayout">
      <a-row :gutter="48">
        <a-col :span="8">
          <a-form-item label="离线时间" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
            <a-range-picker
              id="equipment-log-time"
              v-model="time"
              :format="dateFormat"
              :placeholder="['开始时间','结束时间']"
              :disabledDate="disabledDate"
              @change="onChange" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-button class="handle-btn serach-btn" id="network-btn-serach" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
        </a-col>
      </a-row>
    </a-form>
    <!-- 掉线记录 -->
    <s-table
      class="sTable"
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
      :scroll="scrollVal"
      bordered></s-table>
  </a-modal>
</template>

<script>
import getDate from '@/libs/getDate.js'
import moment from 'moment'
import { STable } from '@/components'
import { deviceLogList } from '@/api/device'
export default {
  name: 'EquipmentModal',
  components: { STable },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    srcDeviceCode: {
      type: [Number, String],
      default: ''
    }
  },
  computed: {
    modalTit () {
      return this.srcDeviceCode + '-掉线日志'
    }
  },
  data () {
    return {
      scrollVal: { y: 270 }, //  表格y轴超出距离滚动
      isShow: this.openModal, //  是否打开弹框
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: { span: 7 },
        wrapperCol: { span: 17 }
      },
      // 查询参数
      queryParam: {
        beginDate: null, // 开始时间
        endDate: null // 结束时间
      },
      // 将默认当天时间日期回显在时间选择框中
      time: [
        moment(getDate.getRecentday().starttime, this.dateFormat),
        moment(getDate.getRecentday().endtime, this.dateFormat)
      ],
      dateFormat: 'YYYY-MM-DD',
      // 表头
      columns: [
        { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
        { title: '离线时间', dataIndex: 'createDate', width: 200, align: 'center' }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const searchData = Object.assign(parameter, this.queryParam)
        if (this.time && this.time.length) {
          searchData.beginDate = moment(this.time[0]).format('YYYY-MM-DD')
          searchData.endDate = moment(this.time[1]).format('YYYY-MM-DD')
        } else {
          searchData.beginDate = ''
          searchData.endDate = ''
        }
        searchData.srcDeviceCode = this.srcDeviceCode
        searchData.onlineFlag = 0
        return deviceLogList(searchData).then(res => {
          if (res.status == 200) {
            const no = (res.data.pageNo - 1) * res.data.pageSize
            for (let i = 0; i < res.data.list.length; i++) {
              const _item = res.data.list[i]
              _item.no = no + i + 1
              _item.status = _item.status + '' === '1'
            }
            return res.data
          }
        })
      }
    }
  },
  methods: {
    moment,
    // 不可选日期
    disabledDate (date, dateStrings) {
      return date && date.valueOf() > Date.now()
    },
    // 离线时间change
    onChange (dates, dateStrings) {
      if ((dates, dateStrings)) {
        this.queryParam.beginDate = dateStrings[0]
        this.queryParam.endDate = dateStrings[1]
      }
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      }
    },
    srcDeviceCode (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.queryParam.beginDate = getDate.getRecentday().starttime
        this.queryParam.endDate = getDate.getRecentday().endtime
        this.time = [
          moment(getDate.getRecentday().starttime, this.dateFormat),
          moment(getDate.getRecentday().endtime, this.dateFormat)
        ]
        const _this = this
        setTimeout(() => {
          _this.$refs.table.refresh(true)
        }, 100)
      }
    }
  }
}
</script>

<style lang="less">
  .equipment-log-modal{
    .serach-btn{
      margin-top: 4px;
    }
    .sTable{
      .ant-table{
        height: 325px;
      }
    }
  }
</style>
