
<template>
  <div class="memberDetail app-container">

    <div class="member-info">
        <div class="user-info">
            <div class="icon"></div>
            <div class="info">
                <div class="name">夏微 XXIAWEI</div>
                <div class="desc">套餐情况：10元套餐（剩余 29 天）</div>
            </div>
        </div>
        <div class="contact">
            <div class="item">
                <div class="label">用户ID:</div>
                <div class="value">P00158</div>
            </div>
             <div class="item">
                <div class="label">姓名:</div>
                <div class="value">孔蕤颖</div>
            </div>
             <div class="item">
                <div class="label">身份证号:</div>
                <div class="value">500106199812023543</div>
            </div>
             <div class="item">
                <div class="label">手机号:</div>
                <div class="value">13896000944</div>
            </div>
             <div class="item">
                <div class="label">累计消费金额:</div>
                <div class="value">2015 元</div>
            </div>
        </div>
    </div>

     <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用券明细" name="q">
         <div class="search">
      <div>
        <el-input
          v-model="query.userName"
          size="small"
          placeholder="请输入优惠券编码或名称"
          class="item-width-200 "
        ></el-input>
        <el-select
          v-model="query.address"
          size="small"
          clearable
          class="item-width-200 ml10"
          placeholder="请选择优惠券类型"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    
    </div>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="优惠券编码"
        prop="name"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="shopName"
        align="center"
        label="优惠券名称"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="优惠券类型"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="优惠内容"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="领取时间"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="使用时间"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        prop="status"
        label="核销方式"
        show-overflow-tooltip
      >
      </el-table-column>
       <el-table-column
        align="center"
        prop="status"
        label="使用店铺"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="query.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
    </el-tab-pane>
    <el-tab-pane label="消费明细" name="w">
         <div class="search">
      <div>
        <el-input
          v-model="query.userName"
          size="small"
          placeholder="请输入优惠券编码或名称"
          class="item-width-200 "
        ></el-input>
        <el-select
          v-model="query.address"
          size="small"
          clearable
          class="item-width-200 ml10"
          placeholder="请选择优惠券类型"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    
    </div>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      border
      v-loading="loading"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        label="店铺"
        prop="name"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="shopName"
        align="center"
        label="时间"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="支付方式"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        align="center"
        label="订单金额"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="实际支付金额"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="是否使用优惠券"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="query.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>

    </el-tab-pane>
  </el-tabs>
    
  </div>
</template>
  
  <script>
  import {debounce} from '@/utils/index'
export default {
  name: "memberDetail",
  data() {
    return {
      activeName:'q',
      tableData: [
        {
          id: 1,
          name: "张三",
          shopName: "中石油",
          status: 1,
          createTime: "2023-05-23 16:56",
          IDnumber: 41166554551223445,
          phone: 13789459456,
        },
        {
          id: 2,
          name: "李四",
          shopName: "山姆会员店",
          status: 1,
          createTime: "2023-05-23 16:56",
          IDnumber: 41166554551223445,
          phone: 13949455678,
        },
        {
          id: 3,
          name: "万强",
          shopName: "烤匠",
          status: 1,
          createTime: "2023-05-23 16:56",
          IDnumber: 41166554551223445,
          phone: 13948956745,
        },
        {
          id: 4,
          name: "李丹",
          shopName: "中石油",
          status: 1,
          createTime: "2023-05-23 16:56",
          IDnumber: 41166554551223445,
          phone: 15678394945,
        },
      ],
      options: [
        {
          value: "0",
          label: "全部套餐",
        },
        {
          value: "1",
          label: "立减券",
        },
        {
          value: "2",
          label: "折扣券",
        },
        {
          value: "3",
          label: "满减券",
        },
      ],
     
      loading: false,
      query: {
        type: "0",
        phone: "",
        shopName: "",
        address: "0",
        page: 1,
        pageSize: 10,
      },
      title: "",
      total: 0,
    };
  },
  watch: {
    query: {
      handler: debounce(function(val) {
        
        console.log(1);
      }),
      deep:true
    },
    activeName(val){
        this.query.page = 1
        this.loading = true;
    setTimeout(() => {
      this.loading = false;
    }, 1500);
    }
  },
  methods: {
  
    handleClick(val){
        // console.log(val);
        // this.activeName = val
        // this.query.page = 1
    },
    handleSizeChange(val) {
      this.query.page = 1;
      this.query.pageSize = val;
    },
    handleCurrentChange(val) {
      this.query.page = val;
    },
  },
  created() {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
    }, 1500);
  },
};
</script>
  
<style lang="scss" scoped>
.memberDetail {
    .member-info{
        .user-info{
            display: flex;
            align-items: center;
             .icon{
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background: #ccc;
            }
            .info{
                margin-left: 15px;
                .name{
                    font-size: 14px;
                }
                .desc{
                    font-size: 12px;
                    color: #ccc;
                    margin-top: 10px;
                }
            }
        }
        .contact{
            border-radius: 4px;
            padding: 25px;
            display: flex;
            flex-wrap: wrap;
            background: #f1f1f1;
            margin-top: 20px;
            margin-bottom: 20px;
            font-size: 12px;
            .item{
                width: 33%;
                margin-bottom: 15px;
                display: flex;
                align-items: center;
                .label{
                    white-space: nowrap;
                }
                .value{
                    margin-left: 10px;
                }
            }
        }
    }
   .search {
    justify-content: space-between;
    .add-btn {
      // margin-right: 20px;
    }
  }
}
</style>
  