<template>
  <div class="pad" :style="{ 'background-color': background }">
    <div class="title">
      <span style="color:#1890ff;font-weight:bold">{{ getNodeName(node) }}</span>
      <span>
        <el-date-picker
          v-model="timeRange"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
      </span>
      <span><el-button type="primary" @click="search">搜索</el-button></span>
    </div>
    <div v-loading="loading" class="count">
      超时:{{ count }}票
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminOperatenodepad',
  props: {
    loading: { type: Boolean, default: false },
    background: { type: String, default: '#fcfcfc' },
    node: { type: String },
    count: { type: Number },
    icon: { type: String, default: 'el-icon-edit' }
  },
  data() {
    return {
      timeRange: [this.getTimeByNumber(7), this.getTimeByNumber(1)],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },

  mounted() {},
  methods: {
    getTimeByNumber(num) {
      const tempTime = new Date()
      tempTime.setTime(tempTime.getTime() - 3600 * 1000 * 24 * num)
      return tempTime
    },
    getNodeName(node) {
      if (node == 'RecScn') return '称重-装箱'
      if (node == 'ScnOut') return '装箱-出库'
      if (node == 'OutDpt') return '出库-离港'
      if (node == 'ArrClr') return '到达-清关'
      if (node == 'ClrOln') return '清关-上网'
      if (node == 'OlnSgn') return '上网-签收'
    },

    search() {
      const from = this.timeRange[0]
      const to = this.timeRange[1]
      const node = this.node
      this.$emit('search', node, from, to)
    }
  }
}
</script>

<style lang="scss" scoped>
.pad {
  border: 1px solid #ececec;
  border-radius: 5px;
  .title {
    font-size: 18px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0px;
  }

  .count {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    vertical-align: middle;
  }
}
</style>
