<template>
  <div class="details">
   <el-row>
     <el-col :span="24">
       <div class="content">
         <el-row>
           <el-col :span="9">
             <p class="title">单位信息</p>
             <p class="search">
                <span class="value">
                    <span>单位名称：</span>
                    <el-input v-model="data.name" size="medium" :disabled="true"></el-input>
                </span>
             </p>
             <p class="search">
                <span class="value">
                    <span>单位地址：</span>
                    <el-input v-model="data.address" size="medium" :disabled="true"></el-input>
                </span>
             </p>
             <p class="search">
                <span class="value">
                    <span>联系方式：</span>
                    <el-input v-model="data.number" size="medium" :disabled="true"></el-input>
                </span>
             </p>
           </el-col>
           <el-col :span="5">
             <p class="search">
               <span class="status">
                 <span>单位类别：</span>
               <img src="../person/img/click.png" style="width: 21px;height: 21px;">
               <span>{{typeChange(data.type)}}</span>
               </span>
             </p>
             <p class="search">
              <span class="status">
                 <span>是否准入：</span>
               <img src="../person/img/click.png" style="width: 21px;height: 21px;">
               <span>{{statusChange(data.status)}}</span>
              </span>
             </p>
           </el-col>
           <el-col :span="4">
             <p class="search">
               <span class="button">相关项目</span>
             </p>
             <p class="search">
               <span class="button">相关人员</span>
             </p>
             <p class="search">
               <span class="button">相关评价</span>
             </p>
           </el-col>
         </el-row>
       </div>
     </el-col>
   </el-row>
  </div>
</template>

<script>
export default {
    name: 'details',
    data () {
        return {
            data: {},
            type: {}
        }
    },
    mounted() {
        let val = this.$store.getters.getSidebar;
        if (val[val.length - 1].path !== 'companyDetails') {
            val.push(
                {
                    name: '单位信息',
                    path: 'companyDetails'
                }
            )
            this.$store.commit('changeSidebar', val);
        }
        this.data = this.$route.params.value;
        this.type = this.$route.params.type;
    },
    methods: {
        // 单位类别转换
        typeChange(val) {
            return this.type[String(val)];
        },
        // 准入状态转换
        statusChange(val) {
            return val === 1 ? '是': '否'
        }
    }
}
</script>

<style scoped>
  .details{
    background: #ebf0f8;
    width: 100%;
  }
  .details .content{
    margin: 40px;
    height: 841px;
    background: #fff;
    overflow: hidden;
  }
  .details .content .title{
    padding: 30px 0 0 60px;
    font-size: 20px;
    color: #233b6e;
  }
  .details .content .search{
    position: relative;
    margin-top: 36px;
    padding: 0px 0px 0px 70px;
    height: 36px;
    width: 100%;
  }
  .details .content .value{
    width: 410px;
    display: flex;
    font-size: 18px;
    color: #666;
  }
  .details .content .status>span{
    vertical-align: bottom;
  }
  .details .content .value>span{
    width: 150px;
    display: inline-block;
    line-height: 34px;
    text-align: right;
  }
  .details .content .button{
    display: inline-block;
    width: 100px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    background: #4877e6;
    cursor: pointer;
    margin-left: 55px;
    border-radius: 2px;
    color: #fff;
    font-size: 18px;
  }
  .details .content .button:hover{
    background: rgba(72,119,230,.6);
  }
  .details>>>.el-input--medium .el-input__inner{
    font-size: 18px;
    color: #333;
    font-family: 'Regular';
  }
  .status{
    display: flex;
    font-size: 18px;
    color: #666;
  }
  .details>>>.el-col-9{
    width: 49.5%;
  }
  .details>>>.el-col-5{
    margin-top: 57px;
  }
  .details>>>.el-col-4{
    margin-top: 49px;
  }
  .button{
    display: inline-block;
    width: 100px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    background: #4877e6;
    cursor: pointer;
    margin-left: 100px;
    border-radius: 2px;
    color: #fff;
    font-size: 18px;
  }
</style>