<template>
  <div class="SearchForm">
    <div class="tableTop" ref="tableTop">   
      <el-form :inline="true" class="searchForms searchCommon">   
        <el-form-item label="选择主机" v-if="showSelect">
          <el-select v-model="hostname" placeholder="请选择" @change="selectGet">
            <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 label="规则名称" v-if="showDelete">
          <el-input v-model="rulename" placeholder="请输入规则名称" @keyup.enter.native="serchEnterHandle"></el-input> 
        </el-form-item>
        <el-form-item v-if="showDelete">     
          <el-button type="primary" icon="search" :loading="isQuery" @click="searchRule" size="small">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            v-for="(item, index) in timeBtnArr" 
            :key="item.name"
            @click="handleTimeBtnClick(item, index)" 
            :class="{isClick:changeTimeColor === index}"
            size="small"       
            class="btn">
            {{ item.name }}       
          </el-button>
        </el-form-item>
        <!--  搜索查询 -->
        <el-form-item>
          <el-date-picker
          v-model="value5"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="dateTimeChange"
          :picker-options="pickerOptions2"
          range-separator="  至  "
          :default-time="['00:00:00','00:00:00']"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchHandler" size="small">查询</el-button> 
        </el-form-item>
        <el-form-item v-if="showDelete">
          <el-button type="info" @click="deleteHandler" size="small" style="margin-left:50px">清空</el-button>
        </el-form-item>
      </el-form>   
    </div>
  </div>
</template>

<script >
import Api from '@/api/index.js'

export default {
  name: 'searchForm',
  props: {
    showSelect: {
      type: Boolean,
      default: false
      },
    showDelete: {
      type: Boolean,
      default: true
      }
  },
  data() {
    return { 
      isQuery: false,
      hostname: '',
      options: [],
      rulename: '',
      timeBtnArr: [{
          flag: '1h',
          name: '1小时',
          round: '15s'
        }, {
          flag: '6h',
          name: '6小时',
          round: '60s'
        }, {
          flag: '12h',
          name: '12小时',
          round: '60s'
        }, {
          flag: '1d',
          name: '1天',
          round: '900s'
        }, {
          flag: '3d',
          name: '3天',
          round: '900s'
        }, {
          flag: '7d',
          name: '7天',
          round: '900s'
        }, {
          flag: '14d',
          name: '14天',
          round: '1800s'
      }],
      temp: [{
        flag: '',
        round: ''
      }],
      pickerOptions2: {
        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])
        }
        }],
        disabledDate: (time) => {   
            let curDate = (new Date()).getTime()
            let one = 30 * 24 * 3600 * 1000
            let oneMonths = curDate - one
            return time.getTime() > Date.now() || time.getTime() < oneMonths
        }
      },
      startEndDate: [],
      value5: [],
      changeTimeColor: -1
    }
  },
  created() {
    this.getServersItem()
  },
  methods: {
     // 获取主机名称
    getServersItem() {
      Api.getServersItem()
      .then(data => {
        let datas = data.data
        if (data.status === 0) {
          this.options = data.data
          this.hostname = this.options[0].value
        } else {
          this.$message({
            type: 'warning',
            message: '获取数据失败！'
          })
        }
      }).catch(res => {
        this.$message({
          type: 'error',
          message: '请求数据失败'
        })
      })
    },
     // 下拉框选中事件
    selectGet(value) { // value值
      let obj = {}
      for (var k = 0; k < this.options.length; k++) {
        if (this.options[k].value === value) {
          this.hostid = this.options[k].value       
        }
      }
      // 更新数据为当前主机
      // this.getDisksName()   
      // this.getNetsName()      
      // this.getSelectCpuInfo(this.flag, '', '')
      // this.getSelectMemoryInfo(this.flag, '', '')  
      // this.getSelectDiskInfo(this.flag, '', '', this.diskname)
      // this.getSelectNetInfo(this.flag, '', '', this.netname)
      // this.getSelectTcpInfo(this.flag, '', '')
      this.getSelectProcessInfo(this.flag, '', '')
    },
    serchEnterHandle () {  
      this.searchRule()   
    },
    searchRule() {
      if (this.rulename === undefined || this.rulename === '') {
        this.$message({
        type: 'warning',
        message: '请输入规则名称！'
        })
      } else {
        this.$emit('submit', this.rulename)
      }           
    },
    handleTimeBtnClick (item, index) {
      this.changeTimeColor = index
      this.temp.flag = item.flag
      this.temp.round = item.round
      this.$emit('submit1', this.temp)
    },
    // 选择日期
    dateTimeChange (value) {
      this.startEndDate = value
    },
    searchHandler () { // 点击查询   
    if (this.value5.length === 0 || this.value5.length === null || this.value5.length === undefined) {
        this.$message({
          type: 'warning',
          message: '请选择时间！'
          })
      } else { 
        this.$emit('submit2', this.startEndDate)
        this.changeTimeColor = '-1'  
      }
    },
    deleteHandler() {
      this.$emit('deleteHandler')
      this.value5 = ''
      this.rulename = ''
      this.changeTimeColor = '-1'     
    }
  }
}
</script>

<style lang="scss">
.SearchForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;

  .tableCon {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .tableTop {
    background: #fbfbfb;
    padding: 20px 10px 0px;

    .el-form-item_label {
      height: 32px;
    }
  }
  .btn {
    background-color: #fbfbfb;
  }
  .isClick {
   background-color:rgb(126, 128, 129);
   color: white;
  }
}
</style>
