<template>
  <div class="order_detail">
    <el-row :gutter="20">
      <el-col :md="24" class="order_detail_body">
        <el-card shadow="hover">
          <!-- <el-col :md="3">
            <div class="round_img">
              <img :src="avatar" alt="头像">
            </div>
          </el-col>-->
          <el-col :md="21">
            <h1 class="title">
              <svg-icon class="title_icon" icon-class="hongqi" />会员信息
            </h1>
            <!-- <p class="title_sub"><span class="green">{{ name }}</span> {{ createtime }}</p> -->
            <p class="title_sub">
              <span class="green">{{ name }}</span> 足力健
            </p>
            <!-- <p class="title_sub">催单次数：<span class="red">10</span>次 | 工单状态： <span class="done">已完成</span></p> -->
          </el-col>
          <el-col :md="24" class="order_detail_content">
            <el-col :md="6" class="order_detail_item">客户姓名：{{ name }}</el-col>
            <el-col :md="6" class="order_detail_item">客户性别：{{ sex }}</el-col>
            <el-col :md="6" class="order_detail_item">客户年龄：{{ age }}</el-col>
            <el-col :md="6" class="order_detail_item">手机号码1：{{ mobile1 }}</el-col>
            <el-col :md="6" class="order_detail_item">手机号码2：{{ mobile2 }}</el-col>
            <el-col :md="6" class="order_detail_item">联系方式：{{ phone }}</el-col>
            <el-col :md="6" class="order_detail_item">会员标签：{{ type }}</el-col>
            <el-col :md="6" class="order_detail_item">会员生日：{{ birthday }}</el-col>
            <el-col :md="6" class="order_detail_item">省份：{{ province }}</el-col>
            <el-col :md="6" class="order_detail_item">市：{{ city }}</el-col>
            <el-col :md="6" class="order_detail_item">县区：{{ area }}</el-col>
            <el-col :md="6" class="order_detail_item">乡镇：{{ town }}</el-col>
            <el-col :md="6" class="order_detail_item">详细地址：{{ address }}</el-col>
            <el-col :md="6" class="order_detail_item">备用地址：{{ address1 }}</el-col>
            <el-col :md="6" class="order_detail_item">邮编：{{ postcode }}</el-col>
            <el-col :md="6" class="order_detail_item">鞋码：{{ shoesize }}</el-col>
            <el-col :md="6" class="order_detail_item">会员积分：{{ score }}</el-col>
            <el-col :md="6" class="order_detail_item">推荐人：{{ recommender }}</el-col>
            <el-col :md="6" class="order_detail_item">累计消费金额：{{ money }}</el-col>
            <el-col :md="6" class="order_detail_item">累计积分：{{ totalscore }}</el-col>
            <!-- <el-col :md="18" :offset="6">
              <el-button type="primary" size="mini" plain>打标签</el-button>
              <el-button type="primary" size="mini" plain>赠送优惠券</el-button>
              <el-button type="primary" size="mini" plain>群发短信</el-button>
              <el-button type="primary" size="mini" plain>付费会员延期</el-button>
              <el-button type="primary" size="mini" plain>会员等级</el-button>
              <el-button type="primary" size="mini" plain>档案合并</el-button>
              <el-button type="primary" size="mini" plain>档案拆分</el-button>
            </el-col>-->
          </el-col>
        </el-card>
      </el-col>

      <!-- <el-col :md="12">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span>工单动态</span>
          </div>
          <div class="order_steps">
            <el-steps :active="0" :space="100" direction="vertical" process-status="success">
              <el-step title="已完成" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
              <el-step title="已转派" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
              <el-step title="已创建" description="2018-10-23 10:30:20 这是一段很长很长很长的描述性文字"/>
            </el-steps>
          </div>
        </el-card>
      </el-col>-->
      <!-- <el-col :md="24">
        <el-card shadow="hover" class="order_record">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="催单记录(2)" name="first">
              <div class="tab_body">
                催单记录
              </div>
            </el-tab-pane>
            <el-tab-pane label="录音记录(3)" name="second">
              <div class="tab_body">
                录音记录
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>-->
    </el-row>
  </div>
</template>

<script>
import { getMemberInfo } from '@/api/memberManagement/memberList'
import { mapGetters } from 'vuex'
import { filterContent } from '@/utils'

export default {
  name: 'Detail',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      activeName: 'first',
      name: '', // 姓名
      phone: '', // 固定电话
      sex: '', // 性别
      age: '', // 年龄
      mobile1: '', // 手机号码1
      mobile2: '', // 手机号码2
      type: '', // 会员类型
      address: '', // 地址
      address1: '', // 地址
      postcode: '', // 邮编
      shoesize: '', // 鞋码
      regtime: '', // 会员日期
      birthday: '', // 会员生日
      score: '', // 会员积分
      recommender: '', // 推荐人
      money: '', // 累计消费金额
      totalscore: '', // 累计积分
      province: '', // 省
      city: '', // 市
      area: '', // 县
      town: '', // 乡
    }
  },
  computed: {
    ...mapGetters([
      'avatar'
    ])
  },
  created () {
    if (this.rowid) {
      this.getDetail(this.rowid)
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 详情
    getDetail (rid) {
      getMemberInfo(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.name = res.F_Name // 姓名
          this.sex = res.F_Sex // 性别
          this.age = res.F_Age // 年龄
          this.mobile1 = res.F_Mobile // 手机号码1
          this.mobile2 = res.F_Mobile1 // 手机号码2
          this.phone = res.F_Phone // 固定电话
          this.type = res.F_Label // 会员标签
          this.address = res.F_Address // 详细地址
          this.address1 = res.F_Address1 // 备用地址
          this.postcode = res.F_Postcode // 邮编
          this.shoesize = res.F_ShoeSize // 鞋码
          this.regtime = res.F_RegTime // 会员日期
          this.birthday = res.Birthday // 会员生日
          this.score = res.F_Score // 会员积分
          this.recommender = res.F_Recommender // 推荐人
          this.money = res.F_Money // 累计消费金额  
          this.totalscore = res.F_TotalScore // 累计积分
          this.province = res.F_Province // 省
          this.city = res.F_City // 市
          this.area = res.F_Area // 县
          this.town = res.F_Town // 乡
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.order_detail {
  .el-col {
    margin-bottom: 20px;
  }
  .el-icon-time {
    color: #d81e06;
  }
  .el-card__header {
    padding-top: 14px;
    padding-bottom: 14px;
    background-color: #f5f5f6;
  }
  .order_file {
    .el-card__body {
      padding: 22px 0 0 0;
      text-align: center;
    }
  }
  .order_steps {
    .el-step__icon-inner {
      display: none;
    }
  }
  .order_record {
    .el-card__body {
      padding: 0;
    }
    .el-tabs__header {
      padding: 0px 20px;
      background-color: #f5f5f6;
      .el-tabs__item {
        font-size: 16px;
        height: 47px;
        line-height: 47px;
      }
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.order_detail {
  .order_detail_body {
    margin-bottom: 20px;
    .round_img {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      overflow: hidden;
      margin: 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      font-size: 20px;
      .title_icon {
        color: #d81e06;
        font-size: 16px;
        margin-right: 20px;
      }
    }
    .title_sub {
      font-size: 14px;
      color: #666666;
    }
    .order_detail_content {
      background-color: #f5f5f6;
      padding-top: 20px;
      color: #4c4c4c;
      font-size: 14px;
      .order_detail_item {
        margin-bottom: 10px;
        .order_content {
          margin-top: 10px;
        }
        .order_file {
          position: relative;
          cursor: pointer;
          .img_mask {
            display: none;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: rgba(0, 0, 0, 0.3);
            width: 100%;
            height: 22px;
            text-align: right;
            z-index: 1;
            i {
              font-size: 20px;
              line-height: 22px;
              display: inline-block;
              margin-right: 15px;
              color: #fff;
            }
          }
          p {
            margin-top: 5px;
            padding-left: 14px;
            padding-right: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .file_icon {
            height: 68px;
            line-height: 68px;
            font-size: 68px;
            color: #409eff;
          }
        }
        .order_file:hover .img_mask {
          display: block;
        }
      }
    }
  }
  .green {
    color: #00c1de;
  }
  .done {
    color: #198120;
  }
  .red {
    color: #d81e06;
  }
  .yellow {
    color: #e6a23c;
  }
  .order_steps {
    // height: 240px;
    .el-step__icon-inner {
      display: none;
    }
  }

  .tab_body {
    padding: 0 20px 20px 20px;
  }
}
</style>
