<template>
  <div class="order_detail">
    <el-row :gutter="20">
      <el-col :md="24" class="order_detail_body">
        <el-card shadow="hover">
          <el-col :md="24">
            <h1 class="title"><svg-icon class="title_icon" icon-class="hongqi" />{{ pro_name }}</h1>
            <p class="title_sub">
              <span class="green pr15">{{ createuser }}</span>
              <span class="pr15">河南足力健老人鞋</span>{{ createtime }}
            </p>
            <p class="title_sub">
              授权类型：<span class="red pr15">{{ auth_type }}</span>
              交换机类型：<span class="done pr15">{{ oem_name }}</span>
              是否到期：
              <el-tag :type="isend | isendTypeFilter" size="mini" disable-transitions>
                {{ isend | isendFilter }}
              </el-tag>
            </p>
          </el-col>
          <el-col :md="24" class="order_detail_content">
            <el-col :md="6" class="order_detail_item">
              授权到期时间：{{ authendtime }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              软授权码：{{ auth_code }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              授权数量：{{ auth_num }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              项目进度：{{ pro_progress }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              销售负责人：{{ sale_manager }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              项目实施人：{{ pro_executor }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              产品负责人：{{ product_manager }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              财务负责人：{{ finance_manager }}
            </el-col>
            <el-col :md="6" class="order_detail_item">
              总经理：{{ general_manager }}
            </el-col>
            <el-col :md="24" class="order_detail_item">
              情况备注：
              <div class="order_content" v-html="content"/>
            </el-col>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { filterContent } from '@/utils'
import { getAuth } from '@/api/authorization/authorList'

export default {
  name: 'DetailAuth',
  filters: {
    isendFilter(status) {
      const statusMap = {
        0: '未到期',
        1: '到期'
      }
      return statusMap[status]
    },
    isendTypeFilter(status) {
      const statusMap = {
        0: 'success',
        1: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      pro_name: '',
      auth_type: '',
      oem_name: '',
      authendtime: '',
      auth_code: '',
      auth_num: '',
      pro_progress: '',
      sale_manager: '',
      pro_executor: '',
      product_manager: '',
      finance_manager: '',
      general_manager: '',
      isend: '',
      content: '',
      createuser: '',
      createtime: ''
    }
  },
  created() {
    if (this.rowid) {
      this.getDetail(this.rowid)
    }
  },
  methods: {
    // 详情
    getDetail(rid) {
      getAuth(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          if (res) {
            this.pro_name = res.pro_name // 项目名称
            this.createuser = res.createuser + '-' + res.createusername // 创建人
            this.createtime = res.createtime // 创建时间
            this.auth_type = res.auth_type // 授权类型
            this.oem_name = res.oem_name // 交换机类型
            this.authendtime = res.authendtime // 授权到期时间
            this.auth_code = res.auth_code // 软授权码
            this.auth_num = res.auth_num // 授权数量
            this.pro_progress = res.pro_progress // 项目进度
            this.sale_manager = res.sale_manager // 销售负责人
            this.pro_executor = res.pro_executor // 项目实施人
            this.product_manager = res.product_manager // 产品负责人
            this.finance_manager = res.finance_manager // 财务负责人
            this.general_manager = res.general_manager // 总经理
            this.isend = res.isend // 是否到期
            this.content = filterContent.content(res.content)// 情况备注
          }
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
	.order_detail{
    .pr15{
      padding-right: 15px;
    }
		.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>
