<template>
  <div class="custom_info_page">
    <h2>客户信息</h2>

    <div class="custom_info">
      <div class="info_item">
        <img :src="memberBaseInfo.headimg" alt="" />
      </div>
      <div class="info_item">
        <ul>
          <li v-for="(item, index) in infoList" :key="index">
            <p>
              <span>{{ item.name }} : </span>
              <span>{{ item.value }}</span>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="custom_tag">
      <h2>客户标签</h2>
      <p v-for="(item, index) in tagList" :key="index">{{ item.tagName }}</p>
      <p @click="addTag">贴标签</p>
    </div>
    <div class="custom_data">
      <h2 style="float:left">余额明细</h2>
      <p style="float: left;margin-top: 28px;font-size: 12px;font-weight: 700;margin-left: 10px;">(明细字体红色为支出，绿色为收入，黑色则为修改)</p>
      <div class="data_list">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="createTime" label="日期" align="center">
          </el-table-column>
          <el-table-column prop="title" label="标题" align="center"> </el-table-column>
          <el-table-column  label="剩余(元)" align="center">
            <template slot-scope="scope">
              <span>{{'￥'}}{{scope.row.balance}}</span>
            </template>
          </el-table-column >
          <el-table-column label="消费商户" align="center">
            <template slot-scope="scope" >
              <span>{{scope.row.tenantName}}</span>
            </template>
          </el-table-column>
          <el-table-column  label='明细(元)' align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.pm == 0" style="color:red">
              -{{scope.row.number}}  
              </span>
              <span v-if="scope.row.pm == 1" style="color:#11b95c">
              +{{scope.row.number}}  
              </span>
              <span v-if="scope.row.pm == 2" style="color:#303133">
              {{scope.row.number}}  
              </span>    
            </template>  
          </el-table-column>
        </el-table>
        <!-- <p><span>下 单 数: <font>{{ customData.orderCount }}</font></span> 支付成功数: <font>{{ customData.payOrderCount }}</font></p>
        <p><span>售后次数: <font>{{ customData.returnCount }}</font></span> 售后单数: <font>{{ customData.returnOrderCount }}</font></p> -->
      </div>
       <el-pagination
       style="margin-top:20px"
       background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Number(totals)">
    </el-pagination>
      <!-- <div class="tab_list">
        <p v-for="(item,index) in tabList" :key="index" :class="[{'active': componentName === item.componentName}]" @click="changeTab(item)">
          {{ item.tabName }}
        </p>
      </div> -->
      <!-- <div class="component_content">
        <component :is="componentName" />
      </div> -->
     
    </div>
    <!-- <labels v-if="dialog.visible" :dialog="dialog" @close="close" @confirm="confirm" /> -->
  </div>
</template>

<script>
import order from './component/order/index'
import comment from './component/comment/index'
import addressInfo from './component/address/index'
import consumption from './component/consumption/index'
// import Pagination from '@/components/Pagination'
import Member from '@/api/Member'
// import labels from './component/label/index'
export default {
  components: {
    // Pagination,
    // order,
    // comment,
    // addressInfo,
    // labels,
    // consumption
  },
  data() {
    return {
      totals:null,
      currentPage4: 1,
       formParams: {
        size: 10,
        current: 1,
        model: {
         mid:0
        }
      },
      tableData: [],
      infoList: [
        { name: '用户昵称', value: '', fields: 'nickname' },
        { name: '手 机 号', value: '', fields: 'phone' },
        { name: '性  别', value: '', fields: 'sex' },
        { name: '注册时间', value: '', fields: 'createTime' },
        { name: '生   日', value: '', fields: 'birth' },
      ],
      tagList: [],
      tabList: [
        { tabName: 'TA的订单', componentName: 'order' },
        { tabName: 'TA的评论', componentName: 'comment' },
        { tabName: 'TA的收货地址', componentName: 'addressInfo' },
        { tabName: 'TA的消费记录', componentName: 'consumption' },
      ],
      componentName: 'order',
      customData: {},
      memberBaseInfo: {},
      dialog: {},
    }
  },
  created() {
    this.getMemberInfo()
    this.getCustomData()
    this.getMemberBillDetials()
  },
  methods: {

     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.formParams.size = val
        
        this.getMemberBillDetials()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.formParams.current = val
        this.getMemberBillDetials()
      },

    async getMemberBillDetials(){
      this.formParams.model.mid = this.$route.query.id
      // console.log(this.formParams,'消费数据')
      const res = await Member.getMemberBillDetials(this.formParams)
      this.tableData = res.data.data.records
      this.totals = res.data.data.total
      console.log(res,'小飞鼠')
    },
     fetch() {
      this.getMemberBillDetials()
    },
    async getMemberInfo() {
      const res = await Member.getMemberInfo(this.$route.query.id)
      const resData = res.data
      if (resData.code === 0) {
        const t = resData.data
        this.tagList = t.memberTagList
        this.memberBaseInfo = t.memberBaseInfo
        this.getInfoList(t.memberBaseInfo || {})
      }
    },
    async getCustomData() {
      const res = await Member.getCustomData(this.$route.query.id)
      const resData = res.data
      if (resData.code === 0) {
        this.customData = resData.data
      }
    },
    // 获取客户信息
    getInfoList(ob) {
      const _ = this
      _.infoList.map((item) => {
        item.value = ob[item.fields] || ''
        if (item.fields === 'sex') {
          item.value = item.value === '1' ? '男' : '女'
        }
      })
    },
    // 贴标签
    addTag() {
      this.dialog = {
        title: '选择标签',
        visible: true,
        id: this.$route.query.id,
      }
    },
    confirm(ids) {
      const params = {
        mid: this.$route.query.id,
        tagIds: ids,
      }
      const _ = this
      Member.addTag(params).then((res) => {
        if (res.data.code === 0) {
          _.$message.success('操作成功')
          _.getMemberInfo()
          _.close()
        }
      })
    },
    close() {
      this.dialog = {}
    },
    changeTab(item) {
      this.componentName = item.componentName
    },
  },
}
</script>

<style lang='less' scoped>
h2 {
  font-size: 24px;
  font-weight: 500;
  position: relative;
  &::before {
    content: '';
    height: 24px;
    width: 4px;
    background-color: #3a68f2;
    position: absolute;
    left: -10px;
    top: 2px;
    display: block;
  }
}
.custom_info_page {
  margin-top: 20px;
  padding: 20px 100px;
  background-color: #fff;
  min-height: 500px;

  .custom_info {
    overflow: hidden;
    margin-bottom: 30px;
    .info_item {
      float: left;
      &:nth-child(1) {
        height: 180px;
        width: 100px;
        img {
          width: 100px;
          height: 100px;
          border-radius: 50px;
          text-align: center;
          margin-top: 40px;
        }
      }
      &:nth-child(2) {
        width: 50%;
        ul {
          overflow: hidden;
          list-style: none;
          li {
            float: left;
            p {
              font-size: 16px;
              color: #333;
              span:nth-child(2) {
                color: #666;
              }
            }
            &:nth-child(odd) {
              width: 30%;
            }
            &:nth-child(even) {
              width: 70%;
            }
          }
        }
      }
    }
  }

  .custom_tag {
    margin-bottom: 30px;
    p {
      display: inline-block;
      background-color: #d8e1fc;
      font-size: 16px;
      color: #333;
      text-align: center;
      margin-right: 20px;
      border-radius: 4px;
      padding: 8px 15px;
      &:last-child {
        background-color: #fff;
        color: #3a68f2;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  .custom_data {
    .data_list {
      p {
        font-size: 16px;
        font {
          color: #666;
        }
        span {
          display: inline-block;
          width: 200px;
        }
      }
    }
    .tab_list {
      overflow: hidden;
      p {
        float: left;
        padding: 0 50px;
        font-size: 16px;
        border: 1px #e0e5eb solid;
        box-sizing: border-box;
        color: #999999;
        height: 48px;
        line-height: 48px;
        &:nth-child(-n + 2) {
          border-right: 0;
        }
        &:nth-child(1) {
          border-radius: 4px 0 0 4px;
        }
        &:nth-child(3) {
          border-radius: 0 4px 4px 0;
        }
        &:hover {
          cursor: pointer;
        }
      }
      .active {
        background-color: #3a68f2;
        color: #fff;
        border: 0;
      }
    }
  }
}
</style>
