<template>
  <div class="tablesearch">
   

      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item :label="'项目'">
              <a-select placeholder="请选择项目" v-model="searchParams.AdevrtGamePlate">
                <a-select-option :value="10019">ludo </a-select-option>
                <a-select-option value="okey" :disabled="true">okey </a-select-option>
                <a-select-option value="baloot" :disabled="true">baloot</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item :label="'位置'">
              <a-select placeholder="请选择项目" v-model="searchParams.AdvertPosition"  :style="{ width: '150px' }">
                <a-select-option :value="1">大厅 </a-select-option>
                <a-select-option :value="2">Events </a-select-option>
                <a-select-option :value="3">ChatRoom </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="8" :sm="24">
              <a-form-item :label="'设备类型：'">
                <a-radio-group v-model="searchParams.DeviceType">
                  <a-radio :value="1"> IOS </a-radio>
                  <a-radio :value="2"> Android </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item :label="'版本号：'">
                <a-input
                  placeholder="请输入版本号"
                  v-model="searchParams.Version"
                  :style="{ width: '150px' }"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item :label="'语言：'">
                <a-radio-group v-model="searchParams.Language">
                  <a-radio :value="1"> 英语 </a-radio>
                  <a-radio :value="2"> 阿语 </a-radio>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item :label="'广告状态：'">
                <a-select
                  placeholder="请选择广告状态"
                  v-model="searchParams.Status"
                  :style="{ width: '80px' }"
                >
                  <a-select-option :value="0">启用 </a-select-option>
                  <a-select-option :value="1">禁用 </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="(!advanced && 8) || 24" :sm="24">
            <div class="funBtn">
              <a-button type="primary" @click="searchTable" class="search-btn"
                >查询</a-button
              >
              <a-button type="defalut" @click="resetSearchTable">重置</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? "收起" : "展开" }}
                <a-icon :type="advanced ? 'up' : 'down'" />
              </a>
            </div>
          </a-col>
        </a-row>
      </a-form>
  </div>
</template>

<script>
// import moment from "moment";

export default {
  data() {
    return {
      searchParams: {
        AdevrtGamePlate: 10019,
        AdvertPosition: "",
        Language: "",
        DeviceType: "",
        Status: "",
        Version: "",
      },
      advanced: false,
    };
  },
  methods: {
    // moment,
    onChange(dates, dateStrings) {
      // console.log("From: ", dates[0], ", to: ", dates[1]);
      // console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
      this.searchParams.startDate = dateStrings[0];
      this.searchParams.endDate = dateStrings[1];
    },

    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
    searchTable() {
      console.log(this.searchParams);
      this.$emit("searchTable", this.searchParams);
    },
    resetSearchTable() {
      this.searchParams = {
        AdevrtGamePlate: 10019,
        AdvertPosition: "",
        Language: "",
        DeviceType: "",
        Status: "",
        Version: "",
      };
      this.$emit("searchTable", this.searchParams);
    },
  },
};
</script>

<style lang="less"  >
@import url('./tableSearch.less');
</style>
