<template>
  <div>
    <a-form layout="inline" class="align-form">
      <a-row :gutter="48">
        <a-col :md="6" :sm="12" style="height: 50px">
          <a-form-item :label="'操作人'" :labelCol="{span: 3, offset: 3}">
            <a-select
              style="width: 120px"
              @change="checkUser"
              :value="searchParams.realName"
              :allowClear="true"
              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 data"
                :key="item.memberId"
                :value="item.realName"
              >
                {{ item.realName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" style="height: 50px">
          <a-form-item label="起始时间：" :labelCol="{span: 3, offset: 3}">
            <a-range-picker
              @change="onChange"
              :value="defaultTime"
              show-time
              style="width:200px"
            />
          </a-form-item>
        </a-col>
        <template v-if="advanced">
          <a-col :md="6" :sm="24" style="height: 50px">
            <a-form-item label="业务主键" prop="OperateKey" :labelCol="{span: 3, offset: 3}">
              <a-input
                placeholder="请输入业务主键"
                v-model="searchParams.OperateKey"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24" style="height: 50px">
            <a-form-item label="业务名字" prop="BizName" :labelCol="{span: 3, offset: 3}">
              <a-input
                placeholder="请输入业务名字"
                v-model="searchParams.BizName"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item label="模块信息" prop="ModuleName" :labelCol="{span: 3, offset: 3}">
              <a-input
                placeholder="请输入模块信息"
                v-model="searchParams.ModuleName"
              />
            </a-form-item>
          </a-col>
        </template>
        <a-col :md="(!advanced && 6) || 24" :sm="24" class="fn-btn-style">
          <div>
            <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 "@/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: {
        Operator: "",
        StartTime: "",
        EndTime: "",
        BizName: "",
        ModuleName: "",
        OperateKey: "",
        realName: ""
      },
      busy: false,
      total: 0, // 总条数
      data: [], // 数据列表
      loading: false,
      noMore: false, // 是否无更多
      Page: 1,
      size: 30,
      defaultTime: [], // 初始日期范围
      advanced: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    };
  },
  created() {
    this.getMemberList(this.Page, this.size);
  },
  methods: {
    // 用户选择
    checkUser(value, option) {
      this.searchParams.Operator = value;
      this.searchParams.realName = value;
    },
    // 获取成员列表
    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);
            }
            resolve(this.data);
          })
          .catch(error => {
            reject();
          });
      });
    },
    // 加载
    handleInfiniteOnLoad() {
      if (this.noMore) {
        return false;
      }
      this.Page++;
      this.getMemberList();
      console.log("加载");
    },
    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 = {
        MemberId: "",
        loginType: ""
      };
      this.defaultTime = [];
      this.$emit("searchTable", this.searchParams);
    }
  }
};
</script>
<style lang="less">
.list-item {
  cursor: pointer;
  &:hover {
    color: #40a9ff;
  }
}
.fn-btn-style{float: right;}
</style>
<style lang="less" scoped src="@/common/components/Commonality/Table/less/tableSearch.less">
