<!--
 * @Date: 2022-08-08 10:08:58
 * @LastEditors: JinxChen
 * @LastEditTime: 2022-08-08 16:11:42
 * @FilePath: \TelpoUserManageAdmin\src\views\message-manage\main\wechat-fans\index.vue
 * @description: 公众号粉丝
-->
<template>
    <div class="home-container">
      <!-- 顶部内容 -->
      <div class="top-container">
        <!-- <TopMenu :buttonList="buttonList"/> -->
        <span >会员类型：</span>
        <el-radio-group v-model="searchParams.radioValue" @change="onRadio">
          <el-radio :label="item.label" v-for="(item, index) in radioArray" :key="index">{{item.value}}</el-radio>
        </el-radio-group>
        <!-- 选择省份 -->
        <el-select v-model="searchParams.selectValue" filterable placeholder="请选择省份" class="select"  @change="onSelect">
          <el-option
            v-for="(item, index) in provinceOptions"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!-- 搜索 -->
        <el-input :placeholder="placeholder" v-model="searchParams.inputValue" class="search-input"/>
        <el-button icon="el-icon-search" @click="onSearch" type="primary" class="search-btn">搜索</el-button>
      </div>
      <TTable
          :tableData="dataList"
          :columns="columns"
        ></TTable>
        <!-- 分页 -->
        <pagination
          v-show="total > 0"
          ref="pages"
          :total="total"
          :page.sync="page"
          :limit.sync="limit"
        />
    </div>
</template>

<script>
/* import TopMenu from "@/components/TopMenu/index"; */
import TTable from "@/components/TTable/TTable";
import Pagination from "@/components/Pagination";
export default {
  name: 'add-articles',
  /* components: { TopMenu }, */
  components: { TTable, Pagination },
  data(){
   return {
     // 头部按钮，例子：  {name: '添加', type: 'primary', icon: 'el-icon-circle-plus', click: () => { this.AddDialog();}}
     buttonList: [],
     //搜索的参数
     searchParams: {
        radioValue: 0,
        selectValue: '全部省份',
        inputValue: ''
     },
    //  单选框数组
     radioArray: [
       { label: 0, value: '全部' },
       { label: 1, value: '访客' },
       { label: 2, value: '粉丝' },
       { label: 3, value: '会员' },
     ],
    //  省份
    provinceOptions: [
      { label: '全部省份', value: '全部省份' },
      { label: '北京', value: '北京' },
      { label: '上海', value: '上海' },
      { label: '广东', value: '广东' },
      { label: '深圳', value: '深圳' },
    ],
    // placeholder
    placeholder: '请输入姓名，昵称或者手机号码搜索',
    // 表格数据
    dataList: [
      { nickName: 'wqwr', userName: 'wwfq', phone: '18277426712', area: '广东省', cardNumber: '11', wxAccount: '18277426712', antAccount: '18277426712' },
      { nickName: 'wqwr', userName: 'wwfq', phone: '18277426712', area: '广东省', cardNumber: '11', wxAccount: '18277426712', antAccount: '18277426712' },
      { nickName: 'wqwr', userName: 'wwfq', phone: '18277426712', area: '广东省', cardNumber: '11', wxAccount: '18277426712', antAccount: '18277426712' },
    ],
    // 表格columns
    columns: [
      { prop: "nickName", title: "昵称", fixed: 'left' },
      { prop: "userName", title: "姓名"},
      { prop: "phone", title: "手机号码" },
      { prop: "area", title: "地区" },
      { prop: "cardNumber", title: "卡号" },
      { prop: "wxAccount", title: "微信账号" },
      { prop: "antAccount", title: "支付宝账号" },

    ],
    // 表格总条据
    total: 1,
    // 第几页
    page: 1,
    // 多少条
    limit: 10,
   }
  },
  mounted() {},
  created() {},
  methods: {
    // 选中的radio发生变化
    onRadio(value) {
      if(value) {
        this.searchParams.radioValue = value;
      }
    },
    // 选中的select发生变化
    onSelect(value) {
      if(value) {
        this.searchParams.selectValue = value;
        console.log(this.searchParams.selectValue);
      }
    },
    // 搜索
    onSearch() {
      console.log("searchParams", this.searchParams);
    },
    // 获取表格数据
    getList() {

    }
  }
}
</script>

<style scoped lang="scss">
  .select {
    padding-left: 20px;
    width: 250px
  }
  .search-input {
    width: 350px;
    margin-left: 20px;
  }
  .search-btn {
    margin-left: 20px;
    width: 100px;
  }
</style>
