<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"
              v-model="searchParams.MemberId"
              :allowClear="true"
              option-filter-prop="children"

              showSearch
            >
             <!--  <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 data2"
                :key="item.memberId"
              >{{item.realName}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="起始时间：">
            <a-range-picker
              @change="onChange"
              :value="defaultTime"
              style="width:240px"
            />
          </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.loginType">
                <a-radio> 全部 </a-radio>
                <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-radio-group v-model="searchParams.IsSuccess">
                <a-radio> 全部 </a-radio>
                <a-radio :value="1"> 成功 </a-radio>
                <a-radio :value="0"> 失败 </a-radio>
              </a-radio-group>
            </a-form-item></a-col
          >
        </template>
        <a-col
          :md="(!advanced && 6) || 24"
          :sm="24"
          class="fn-btn-style float-r"
        >
          <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-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
// import moment from "moment";
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: {
        realName: "",
        MemberId: "",
        loginType: "",
        StartTime: "",
        EndTime: ""
      },
      total: 0, // 总条数
      data: [], // 数据列表
      data2: [], // 数据列表
      loading: false,
      noMore: false, // 是否无更多
      Page: 1,
      size: 30,
      defaultTime: [], // 初始日期范围
      advanced: false
    };
  },
  created() {
    this.getMemberList(this.Page, this.size);
  },
  methods: {
    // 用户选择
    checkUser(value, option) {
      // console.log(option);
      // console.log(option.componentOptions.children[0].text);
      // this.searchParams.realName=option.componentOptions.children[0].text
      
      // // this.searchParams.realName = value;
      // let user=  this.data2.map(item=>{
      //   console.log(item.realName);
      //   console.log(this.searchParams.realName);
      //   console.log(JSON.parse(JSON.stringify(item.realName)) ==JSON.parse(JSON.stringify(this.searchParams.realName)));
      //   if(item.realName == this.searchParams.realName ){
      //     return item
      //   }
        

      //   })
      // this.searchParams.MemberId =user.MemberId
      // // console.log(user);
      // console.log(this.searchParams.MemberId);

      // // else this.searchParams.MemberId = "";
    },
  /*   getMemberList() {
      this.loading = true;
      getServiceList({ Page: this.Page }).then(res => {
        let { data, totalCount } = res.data;
        this.total = totalCount;
        if (data.length > 0) {
          data.map(item => {
            this.data.push(item);
          });
          if (data.length < 10) this.noMore = true;
        } else {
          this.noMore = true;
        }
        this.loading = false;
      });
    }, */
    // 获取成员列表
    getMemberList(page, 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);
            }else{
              this.data2 = this.data
              console.log(this.data);
            }
            resolve(this.data);
          })
          .catch(error => {
            reject();
          });
      });
    },
    // 加载
    handleInfiniteOnLoad() {
      if (this.noMore) {
        return false;
      }
      this.Page++;
      this.getMemberList();
      console.log("加载");
    },
    // moment,
    toggleAdvanced() {
      this.advanced = !this.advanced;
      this.$emit('heightContent');
    },
    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 = {
        realName: "",
        MemberId: "",
        loginType: "",
        StartTime: "",
        EndTime: ""
      };
      this.defaultTime = [];
      this.$emit("searchTable", this.searchParams);
    }
  }
};
</script>
