<!--
 * @Description: 用户标签列表过滤条件组件
 * @Author: wenjing
 * @Date: 2023-05-15 11:30:56
-->
<template>
  <!-- 过滤条件 -->
  <div class="form-style">
    <el-form :model="filterForm" ref="filterForm" size="small" :inline="true">
      <el-form-item label="用户:" prop="nameIdCardNoMobile">
        <el-input v-model="filterForm.nameIdCardNoMobile" placeholder="姓名/手机号/身份证号" style="width:180px"/>
      </el-form-item>
      <el-form-item label="性别:" style="margin-left: 25px;" prop="gender">
        <el-checkbox-group v-model="filterForm.gender">
          <el-checkbox-button v-for="(value, key) in genderMap" 
            :key="key" :label="key" @change="handleSelGender($event, key)">{{ value }}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="年龄范围:" style="margin-left: 25px;">
        <div style="display:flex">
          <el-form-item prop="startAge">
            <el-input v-model="filterForm.startAge" style="width:50px"/>
          </el-form-item>
          <span style="color:#ccc;margin-left:-10px;">--</span>
          <el-form-item prop="endAge">
            <el-input v-model="filterForm.endAge" style="width:50px"/>
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item label="用户标签:" prop="tag" style="margin-left: 25px;">
        <el-select v-model="filterForm.tag" style="width:220px" filterable 
          clearable default-first-option allow-create placeholder="选择或输入标签">
          <el-option v-for="item in tagSet" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
    </el-form>
    <div>
      <el-button icon="el-icon-refresh-left" size="small" @click="handleResetForm">清空</el-button>
      <el-button style="margin-left:15px" icon="el-icon-search" type="primary" 
        size="small" @click="handleSearch">搜索</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name:'UserTagListFilter',
  props: {},

  data() {
    return {
      filterForm: {
        gender: []
      },
      genderMap: [],
      tagSet: []
    }
  },

  methods: {
    //获取查询过滤条件DO
    getAupUserFilterDO() {
      let url = this.commonUrl.URL_GET_AUP_USER_FILTER_DO;
      this.appAxios("GET", url).then(result => {
        if (result == null) return;

        this.genderMap = result.data.genderMap;
        this.tagSet = result.data.tagSet;
      })
    },

    handleSelGender(checked, keyName) {
      if (checked) {
        this.filterForm.gender = [keyName];
      }
    },

    handleResetForm() {
      this.$refs['filterForm'].resetFields();
    },

    handleSearch() {
      let gender = (this.filterForm.gender && this.filterForm.gender.length != 0)
        ? this.filterForm.gender[0] : '';
      let filterData = { ...this.filterForm, 'gender': gender};
      this.$emit("refreshPage", filterData);
    }
  },
  
  mounted() {
    this.getAupUserFilterDO();
  }
}
</script>

<style scoped>
.form-style {
  margin: 25px 40px 0 40px;
  display: flex;
  justify-content: space-between;
}

.table-style {
  margin: 0 40px 0;
  border: 1px solid #EBEEF5;
}

.tag-layout {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.block-style {
  margin: 25px 40px 0;
}
</style>
