<template>
  <div class="order_detail">
    <el-row :gutter="20">
      <el-col :md="24" class="order_detail_body">
        <el-card shadow="hover">
          <el-col :md="21">
            <h1 class="title"><svg-icon class="title_icon" icon-class="hongqi" />限时特惠</h1>
            <p class="title_sub"><span class="green">{{ activityName }}</span> 	足力健 </p>
          </el-col>
          <el-col :md="24" class="order_detail_content">
            <el-col :md="6" class="order_detail_item">
              活动名称：{{ activityName }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              活动时间：{{ activityTime }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              活动描述：{{ activityDescription }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              绑定商品：{{ boundGoods }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              商品活动价格：{{ commodityActivityPrice }}
            </el-col>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getFullMarketingDetail } from '@/api/marketingManagement/fullGiveMarketing'
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',
      ordercode: '', // 工单编号
      activityName: '', //活动名称
      activityTime: '', //活动时间
      activityDescription: '', //活动描述
	  boundGoods: '', //绑定商品
      commodityActivityPrice: '', //商品活动价格
    }
  },
  computed: {
    ...mapGetters([
      'avatar'
    ])
  },
  created() {
    if (this.rowid) {
      this.getDetail(this.rowid)
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 详情
    getDetail(rid) {
      getFullMarketingDetail(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.activityName = res.F_Name;
          this.activityDescription = res.F_Describe;
          this.boundGoods = res.F_Commodity;
          this.commodityActivityPrice = res.F_Money;
          this.activityTime = res.F_StartTime+'-'+res.F_EndTime;
        }
      })
    }
  }
}
</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>
