<template>
  <div class="tablesearch">
    <a-form layout="inline">
      <a-row :gutter="48">
        <a-col :md="8" :sm="24">
          <a-form-item :label="$t('member.tableSearch.编号')">
            <a-input
              :placeholder="$t('member.tableSearch.请输入编号')"
              v-model="searchParams.No"
              :style="{ width: '150px' }"
            />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item :label="$t('member.tableSearch.状态')">
            <a-radio-group v-model="searchParams.State">
              <a-radio> {{ $t("member.tableSearch.全部") }} </a-radio>
              <a-radio :value="1"> {{ $t("member.tableSearch.正常") }} </a-radio>
              <a-radio :value="2"> {{ $t("member.tableSearch.禁用") }} </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <template v-if="advanced">
          <a-col :md="8" :sm="24">
            <a-form-item :label="$t('member.tableSearch.真实名称')">
              <a-input
                :placeholder="$t('请输入真实名称')"
                v-model="searchParams.RealName"
                :style="{ width: '150px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item :label="$t('member.tableSearch.用户名')">
              <a-input
                :placeholder="$t('请输入用户名')"
                v-model="searchParams.UserName"
                :style="{ width: '150px' }"
              />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item :label="$t('member.tableSearch.账号')">
              <a-radio-group v-model="searchParams.IsCreatedAccount">
                <a-radio> {{ $t("member.tableSearch.全部") }} </a-radio>
                <a-radio :value="1"> {{ $t("member.tableSearch.已创建") }} </a-radio>
                <a-radio :value="0">{{ $t("member.tableSearch.未创建") }} </a-radio>
              </a-radio-group>
            </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">
              {{ $t("查询") }}
            </a-button>
            <a-button type="defalut" @click="resetSearchTable">{{ $t("重置") }}</a-button>
            <a @click="toggleAdvanced" style="margin-left: 8px">
              {{ advanced ? $t("收起") : $t("展开") }}
              <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";
export default {
  data() {
    return {
      searchParams: {
        No: "",
        RealName: "",
        UserName: "",
        State: "",
        IsCreatedAccount: "",
      },
      advanced: false,
    };
  },
  methods: {
    // moment,

    toggleAdvanced() {
      this.advanced = !this.advanced;
    },
    searchTable() {
      this.$emit("searchTable", this.searchParams);
    },
    resetSearchTable() {
      this.searchParams = {
        No: "",
        RealName: "",
        UserName: "",
        State: "",
        IsCreatedAccount: "",
      };
      this.$emit("refresh", this.refresh);
    },
  },
};
</script>
