<template>
  <div class="tablesearch">
    <a-form layout="inline">
      <a-row :align="'middle'" :justify="'space-between'" :type="'flex'">
        <a-col :md="8" :sm="24">
          <a-form-item :label="'成员'">
            <a-select
              style="width: 120px"
              @change="checkUser"
              :value="searchParams.realName"
              showSearch
              :allowClear="true"
            >
              <!-- <div slot="dropdownRender" slot-scope="menu">
                <v-nodes :vnodes="menu" />
                <a-divider style="margin: 4px 0;" />
                <div
                  style="padding: 4px 8px; cursor: pointer;"
                  @mousedown="e => e.preventDefault()"
                  @click="handleInfiniteOnLoad"
                >
                  {{ noMore ? "No More" : "More" }}
                </div>
              </div> -->
              <a-select-option
                v-for="item in data"
                :key="item.memberId"
                :value="item.realName"
              >
                {{ item.realName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-form-item label="起始时间：">
          <a-range-picker @change="onChange" :value="defaultTime" />
        </a-form-item>
        <!--   <template v-if="advanced">
        <a-form-item :label="'登录方式'">
          <a-radio-group v-model="searchParams.loginType">
            <a-radio> 全部 </a-radio>
            <a-radio :value="1"> 本地账号 </a-radio>
            <a-radio :value="2"> 域账号 </a-radio>
          </a-radio-group>
        </a-form-item>
      </template> -->
        <div>
          <a-button type="primary" @click="searchTable" class="mgr20">
            查询
          </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-row>
    </a-form>
  </div>
</template>

<script>
import "@/common/components/Commonality/Table/less/tableSearch.less";
import { getServiceList } from "@/baseConfigComponents/api/member.js";
export default {
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  data() {
    return {
      searchParams: {
        MemberId: "",
        loginType: "",
        StartTime: "",
        EndTime: "",
        realName: ""
      },
      total: 0, // 总条数
      data: [], // 数据列表
      loading: false,
      noMore: false, // 是否无更多
      Page: 1,
      size: 30,
      defaultTime: [], // 初始日期范围
      advanced: false
    };
  },
  created() {
    this.getMemberList(this.Page, this.size);
  },
  methods: {
    checkUser(value, option) {
      this.searchParams.realName = value;
      if (option) this.searchParams.MemberId = option.key;
      else this.searchParams.MemberId = "";
    },
    // 获取成员列表
    getMemberList(page, size, params) {
      console.log({ Page: page, Size: size, ...params });
      return new Promise((resolve, reject) => {
        getServiceList({ Page: page, Size: 500, ...params })
          .then(res => {
            page++;
            this.data = this.data.concat(res.data.data);
            if (res.data.haveNextPage) {
              this.getMemberList(page, size, params);
            }
            resolve(this.data);
          })
          .catch(error => {
            reject();
          });
      });
    },
    // 加载
    handleInfiniteOnLoad() {
      if (this.noMore) {
        return false;
      }
      this.Page++;
      this.getMemberList();
      console.log("加载");
    },
    // moment,
    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
    searchTable() {
      this.$emit("searchTable", this.searchParams);
    },
    onChange(date, dateString) {
      this.defaultTime = dateString;
      this.searchParams.StartTime = dateString[0];
      this.searchParams.EndTime = dateString[1];
      console.log(this.searchParams);
    },
    resetSearchTable() {
      this.searchParams = {
        MemberId: "",
        loginType: "",
        realName: ""
      };
      this.defaultTime = [];
      this.$emit("searchTable", this.searchParams);
    }
  }
};
</script>
