<template>
  <div class="search-bar">
    <a-row type="flex">
      <a-col flex="190px">
        <a-input placeholder="search..." />
      </a-col>
      <a-col flex="310px" v-if="type=='alarmCenter'">
        <a-form-model-item label="Type">
          <a-select 
            :value="queryParams.types" 
            mode="multiple" 
            :maxTagCount="1" 
            :options="typeOptions" 
            show-arrow 
            @change="onTypeChange"
          >
            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
            <div slot="dropdownRender" slot-scope="menu">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 0;" />
              <div
                style="padding: 4px 12px; cursor: pointer;"
                @mousedown="e => e.preventDefault()"
              >
                <a-checkbox v-model="allVal" @change="handleAllClickBox"><span @click.prevent="handleAllClick">ALL</span></a-checkbox>
              </div>
            </div>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col flex="310px" v-if="type!=='alarmCenter' && type!=='analysisMonitor'">
        <a-form-model-item label="Name">
          <a-select 
            :value="queryParams.names" 
            mode="multiple" 
            placeholder="select..."
            :maxTagCount="1" 
            show-arrow 
            :options="options" 
            @change="onNameChange"
          >
            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
            <div slot="dropdownRender" slot-scope="menu">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 0;" />
              <div
                style="padding: 4px 12px; cursor: pointer;"
                @mousedown="e => e.preventDefault()"
              >
                <a-checkbox v-model="allVal_name" @change="handleAllClickBox_Name"><span @click.prevent="handleAllClick_Name">ALL</span></a-checkbox>
              </div>
            </div>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col flex="270px" v-if="type ==='analysisMonitor'">
        <a-form-model-item label="Station">
          <a-select style="width:180px"
            :value="queryParams.stations" 
            mode="multiple" 
            placeholder="select..."
            :maxTagCount="1" 
            :filter-option="filterOption"
            show-arrow 
            :options="options" 
            @change="onStationChange"
          >
            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
            <div slot="dropdownRender" slot-scope="menu">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 0;" />
              <div
                style="padding: 4px 12px; cursor: pointer;"
                @mousedown="e => e.preventDefault()"
              >
                <a-checkbox v-model="allVal_station" @change="handleAllClickBox_station"><span @click.prevent="handleAllClick_station">ALL</span></a-checkbox>
              </div>
            </div>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col flex="310px" v-if="type ==='analysisMonitor'">
        <a-form-model-item label="Data Sources">
          <a-select style="width:180px"
            :value="queryParams.sources" 
            mode="multiple" 
            placeholder="select..."
            :maxTagCount="1" 
            show-arrow 
            :options="sourceOptions" 
            @change="onSourceChange"
          >
            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
            <div slot="dropdownRender" slot-scope="menu">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 0;" />
              <div
                style="padding: 4px 12px; cursor: pointer;"
                @mousedown="e => e.preventDefault()"
              >
                <a-checkbox v-model="allVal_source" @change="handleAllClickBox_source"><span @click.prevent="handleAllClick_source">ALL</span></a-checkbox>
              </div>
            </div>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col flex="380px">
        <a-form-model-item label="Alarm date">
          <a-range-picker
            dropdownClassName="asd"
            :default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
            @change="onRangeDateChange" 
          />
        </a-form-model-item>
      </a-col>
      <a-col flex="108px">
        <a-button class="search-btn" type="primary" @click="onSearch">
          <img src="@/assets/images/global/search.png" alt="" />
          Search
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import moment from 'moment';
export default {
  props: {
    type: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default:()=>[]
    }
  },
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  data() {
    return {
      allVal: true,
      allVal_name: false,
      allVal_station: false,
      allVal_source: false,
      typeOptions: [
        {
          label: "Server",
          value: "Server"
        },
        {
          label: "Database",
          value: "Database"
        },
        {
          label: "E-MAIL",
          value: "Email"
        },
      ],
      sourceOptions: [
        {
          label: "IDC",
          value: "idc"
        },
        {
          label: "ARMD",
          value: "armd"
        }
      ],
      queryParams: {
        types: ["Server","Database","Email"],
        names: undefined,
        stations: undefined,
        sources: undefined,
        startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
        endDate: dateFormat(new Date(), 'yyyy-MM-dd')
      }
    }
  },
  methods: {
    moment,
    handleAllClickBox(e) {
      this.allVal = e.target.checked
      this.setSelectVal()
    },
    handleAllClick(e) {
      this.allVal = !this.allVal
      this.setSelectVal()
    },
    setSelectVal() {
      if (this.allVal) {
        this.queryParams.types = this.typeOptions.map(item => item.value)
      } else {
        this.queryParams.types = []
      }
    },
    handleAllClickBox_Name(e) {
      this.allVal_name = e.target.checked
      this.setSelectVal_name()
    },
    handleAllClick_Name(e) {
      this.allVal_name = !this.allVal_name
      this.setSelectVal_name()
    },
    setSelectVal_name() {
      if (this.allVal_name) {
        this.queryParams.names = this.options.map(item => item.value)
      } else {
        this.queryParams.names = []
      }
    },
    handleAllClickBox_station(e) {
      this.allVal_station = e.target.checked
      this.setSelectVal_station()
    },
    handleAllClick_station(e) {
      this.allVal_station = !this.allVal_station
      this.setSelectVal_station()
    },
    setSelectVal_station() {
      if (this.allVal_station) {
        this.queryParams.stations = this.options.map(item => item.value)
      } else {
        this.queryParams.stations = []
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    handleAllClickBox_source(e) {
      this.allVal_source = e.target.checked
      this.setSelectVal_source()
    },
    handleAllClick_source(e) {
      this.allVal_source = !this.allVal_source
      this.setSelectVal_source()
    },
    setSelectVal_source() {
      if (this.allVal_source) {
        this.queryParams.sources = this.sourceOptions.map(item => item.value)
      } else {
        this.queryParams.sources = []
      }
    },
    onTypeChange(val) {
      this.queryParams.types = val
      let length = this.typeOptions.length
      if (val.length === length) {
        this.allVal = true
      } else {
        this.allVal = false
      }
    },
    onNameChange(val) {
      this.queryParams.names = val
      let length = this.options.length
      if (val.length === length) {
        this.allVal_name = true
      } else {
        this.allVal_name = false
      }
    },
    onStationChange(val) {
      this.queryParams.stations = val
      let length = this.options.length
      if (val.length === length) {
        this.allVal_station = true
      } else {
        this.allVal_station = false
      }
    },
    onSourceChange(val) {
      this.queryParams.sources = val
      let length = this.sourceOptions.length
      if (val.length === length) {
        this.allVal_source = true
      } else {
        this.allVal_source = false
      }
    },
    onRangeDateChange(date, dateString) {
      this.queryParams.startDate = dateString[0]
      this.queryParams.endDate = dateString[1]
    },
    onSearch() {
      this.$emit("search",this.queryParams)
    }
  },
}
</script>

<style lang="less" scoped>
.search-bar{
  height: 50px;
  border-top: 1px solid rgba(13, 235, 201, 0.3);
  border-bottom: 1px solid rgba(13, 235, 201, 0.3);
  margin-left: 20px;
  padding: 8px 10px;
  background: rgba(12, 235, 201, 0.05);
}
.ant-input{
  width: 166px;
}
.ant-select{
  width: 240px;
}
.ant-calendar-picker{
  width: 270px;
}
.search-btn {
  margin-bottom: 10px;
  img {
    width: 16px;
    height: 17px;
    margin-right: 9px;
  }
}
::v-deep {
  .ant-form-item {
    display: flex;
    margin-bottom: 0;
    .ant-form-item-label,.ant-form-item-control {
      line-height: 32px;
      height: 32px;
    }
    .ant-form-item-label {
      flex-shrink: 0;
      margin-right: 10px;
      label {
        font-size: 16px;
        font-family: ArialMT;
        color: #ade6ee;
        &::after {
          display: none;
        }
      }
    }
    .ant-calendar-range-picker-separator{
      color: white;
    }
    .ant-form-item-control-wrapper {
      width: 100%;
      overflow: hidden;
    }
  }
}
.ant-select {
  .ant-select-arrow-icon {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  &-open {
    .ant-select-arrow-icon {
      transform: rotate(180deg);
    }
  }
}
.ant-select-dropdown-content{
  position: relative;
  background: #03353f;
}
</style>