<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"></span> 	足力健 </p>
          </el-col>
          <el-col :md="24" class="order_detail_content">
            <el-col :md="6" class="order_detail_item">
              新负责人：{{ tousercode }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              原负责人：{{ fromusercode }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              状态：{{ state }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              消息：{{ notice }}
            </el-col>
          </el-col>
		  <el-col :md="21">
             <p class="title_sub"><span class="green"></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">
              省份：{{ 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">
              邮编：{{ 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>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getFileTranserInfo } 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 {
      tousercode: '', // 新负责人
      fromusercode: '', // 原负责人
      notice: '', // 消息
	  state: '', // 状态
	  name: '', // 姓名
      phone: '', // 联系方式
      sex: '', // 性别
      age: '', // 年龄
      mobile1: '', // 手机号码1
      mobile2: '', // 手机号码2
      type: '', // 会员类型
      address: '', // 地址
      postcode: '', // 邮编
      shoesize: '', // 鞋码
      score: '', // 会员积分
      recommender: '', // 推荐人
      money: '', // 累计消费金额
      totalscore: '', // 累计积分
      province: '', // 省
      city: '', // 市
      area: '', // 县
      town: '', // 乡
    }
  },
  computed: {
    ...mapGetters([
      'avatar'
    ])
  },
  created() {
    if (this.rowid) {
      this.getDetail(this.rowid)
    }
  },
  methods: {
    // 详情
    getDetail(rid) {
      getFileTranserInfo(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const data = response.data.model
          this.tousercode = data.F_ToPerson // 新负责人
          this.fromusercode = data.F_NotifyPerson // 原负责人
		  this.notice = data.F_Notice // 消息
		  const res = response.data.infomodel
          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.postcode = res.F_Postcode // 邮编
          this.shoesize = res.F_ShoeSize // 鞋码
          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 // 乡
          if(data.F_State==0){
            this.state='未读'
          }else if(data.F_State==1){
            this.state='已读但未处理'
          }else if(data.F_State==2){
            this.state='同意转移'
          }else{
            this.state='拒绝'
          }
        }
      })
    }
  },
  beforeDestroy() {
	  this.$parent.getList()
  },
}
</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>
