<template>
  <t-card :bordered="false">
    <div class="form-step-container">
      <t-form
        ref="form"
        :data="formData"
        :label-width="80"
        @submit="onSubmit"
        :style="{ marginBottom: '30px' }"
      >
        <t-row>
          <t-col :span="8">
            <t-row :gutter="[16, 24]">
              <t-col :flex="2">
                <t-form-item label="会员姓名" name="nikename">
                  <t-input
                    v-model="formData.nikename"
                    class="form-item-content"
                    type="search"
                    placeholder="请输入会员姓名"
                    :style="{ minWidth: '134px' }"
                  />
                </t-form-item>
              </t-col>

              <t-col :flex="2">
                <t-form-item label="手机号" name="phone">
                  <t-input
                    v-model="formData.phone"
                    class="form-item-content"
                    placeholder="请输入手机号"
                    :style="{ minWidth: '134px' }"
                  />
                </t-form-item>
              </t-col>
              <t-col :flex="3">
                <t-form-item label="职务" name="phone">
                  <t-select v-model="formData.position_id" style="width: 200px">
                    <t-option label="全部" value="" />
                    <t-option v-for="(item,index) in positionList" :label="item.position_name" :value="item.id" />
                  </t-select>
                </t-form-item>
              </t-col>
              <t-col :flex="3">
                <t-form-item label="区域" name="phone">
                  <t-select v-model="formData.region_id" style="width: 200px">
                    <t-option label="全部" value="" />
                    <t-option v-for="(item,index) in region_list" :label="item.region_name" :value="item.id" />
                  </t-select>
                </t-form-item>
              </t-col>
            </t-row>
          </t-col>
          <t-col :span="2" class="operation-container">
            <t-button theme="primary" type="submit" :style="{ marginLeft: '8px' }"> 查询</t-button>
          </t-col>
          <t-col :span="2" style="text-align: right">
            <t-button @click="()=>$router.push('/user/user_add')"> 新增会员</t-button>
          </t-col>
        </t-row>
      </t-form>
      <t-tabs v-model="tabIndex" @change="tabIndexChange">
        <t-tab-panel :value="1" label="正式会员" :destroyOnHide="false"></t-tab-panel>
        <t-tab-panel :value="0" label="待审核" :destroyOnHide="false"></t-tab-panel>
        <t-tab-panel :value="2" label="已拒绝" :destroyOnHide="false"></t-tab-panel>
      </t-tabs>
      <t-table
        rowKey="index"
        :data="list"
        :columns="columns"
        :stripe="false"
        :bordered="false"
        :hover="true"
        size="large"
        table-layout="auto"
        cellEmptyContent="-" c
      >
        <template #photo_image="{ row }">
          <img v-if="row.photo_image" :src="$store.state.user.apiUrl+row.photo_image" style="width: 50px;height: 50px">
        </template>
        <template #gender="{ row }">
          {{row.gender==1?"男":"女"}}
        </template>
        <template #if_xianshi="{ row }">
          <t-tag theme="primary" v-if="row.if_xianshi==0">待审核</t-tag>
          <t-tag theme="success" v-if="row.if_xianshi==1">正式会员</t-tag>
          <t-tag theme="danger" v-if="row.if_xianshi==2">申请已被拒绝</t-tag>
        </template>
        <template #select="{ row }">
          <t-space size="24px">
            <t-button theme="default" v-if="row.if_xianshi==1" @click="openUrl(row.member_id)">详细信息</t-button>
            <t-button theme="default" v-if="row.if_xianshi==0" @click="openUrl(row.member_id)">审核</t-button>
            <t-button @click="()=>$router.push('/user/user_edit?id='+row.member_id)">编辑</t-button>
            <t-popconfirm content="确认要删除吗？" @confirm="del(row)">
              <t-button theme="warning">删除</t-button>
            </t-popconfirm>
          </t-space>
        </template>
      </t-table>
      <div style="margin-top: 30px">
        <t-pagination
          :total="total"
          :page-size="size"
          @current-change="onCurrentChange"
          :showPageSize="false"
        ></t-pagination>
      </div>
    </div>
  </t-card>
</template>
<script lang="ts">
import store from "@/store";

export default {
  data() {
    return {
      association:{},
      list:[],
      tabIndex:1,
      columns:[
        { colKey: 'member_id', title: '会员ID'},
        { colKey: 'photo_image', title: '形象照'},
        { colKey: 'nikename', title: '会员姓名'},
        { colKey: 'position_name', title: '职位'},
        { colKey: 'region_name', title: '区域'},
        { colKey: 'phone', title: '手机号'},
        { colKey: 'nation', title: '民族'},
        { colKey: 'if_xianshi', title: '状态'},
        { colKey: 'select', title: '操作',width: 200},
      ],
      total:0,
      page:1,
      size:10,
      formData:{
        position_id:'',
        region_id:'',
        nikename: '',
        phone: ''
      },
      positionList:[],
      region_list:[],
    }
  },
  mounted() {
    if(typeof (this.$store.state.user.association)=='object'){
      this.association=this.$store.state.user.association;
    }else{
      this.association=JSON.parse(this.$store.state.user.association);
    }
    this.getList();
    this.getPositionList();
    this.getRegion();
  },
  methods: {
    getRegion() {
      this.$request
        .post("/region")
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.region_list = res.data;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getPositionList() {
      this.$request
        .post("/position")
        .then((res) => {
          console.log(res);
          this.positionList = res.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    tabIndexChange(d){
      console.log(d);
      this.page=1;
      this.total=0;
      this.list=[];
      this.getList();
    },
    del(row){
        this.$request
          .post("/member/del",{member_id:row.member_id})
          .then( (res) => {
            console.log(res);
            if (res.code==1){
              this.$message.success(res.msg);
            }else{
              this.$message.error(res.msg);
            }
            this.getList();
          })
          .catch((e) => {
            console.log(e);
          });
    },
    onCurrentChange(d){
      this.page=d;
      this.getList();
    },
    openUrl(member_id){
      this.$router.push('/user/user_info?id='+member_id);
    },
    getList() {
      this.formData.page=this.page;
      this.formData.size=this.size;
      this.formData.if_xianshi=this.tabIndex;
      this.$request
        .post("/member",this.formData)
        .then( (res) => {
          console.log(res);
          this.list=res.data.ret;
          this.total=res.data.count;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    onSubmit(){
      this.page=1;
      this.list=[];
      this.getList();
    },
  }
}
</script>
<style scoped lang="less">

</style>
