<template>
  <div class="CheckDetails basefix">
    <div class="left">
        <el-carousel v-if="datainfo.ImageList.length>0" height="500px">
            <el-carousel-item style="display:flex;align-items:center" v-for="(item,index) in datainfo.ImageList" :key="index">
                <img style="width:100%;" :src="item" alt="">
            </el-carousel-item>
        </el-carousel>
        <img v-else style="width:100%;height:500px;border: 1px solid #ccc;" src="../../../assets/img/Travelslider.png" alt="">
    </div>
    <div class="right overflowY" style="height:500px">
        <div class="baseTitle f12">使用信息</div>
        <div class="desItem">
            <p>使用人</p>
            <p>
              <span v-if="datainfo.EmName && datainfo.EmName!=''">{{datainfo.EmName}}</span>
              <span v-else>无</span>
            </p>
        </div>
        <div class="desItem">
            <p>领取时间</p>
            <p>{{datainfo.GetTime}}</p>
        </div>
        <div class="baseTitle f12">基本信息</div>
        <div class="baseDiv">
            <div class="desItem">
                <p>资产名称</p>
                <p>{{datainfo.Name}}</p>
            </div>
            <div class="desItem">
                <p>资产分类</p>
                <p>
                  <span v-if="datainfo.CategoryName && datainfo.CategoryName!=''">{{datainfo.CategoryName}}</span>
                  <span v-else>无</span>
                </p>
            </div>
            <div class="desItem">
                <p>品牌</p>
                <p>{{datainfo.BrandName}}</p>
            </div>
            <div class="desItem">
                <p>型号</p>
                <p>
                    <span v-if="datainfo.PropertyModel && datainfo.PropertyModel!=''">{{datainfo.PropertyModel}}</span>
                    <span v-else>无</span>
                </p>
            </div>
            <div class="desItem">
                <p>单位</p>
                <p>
                  <span v-if="datainfo.Units && datainfo.Units!=''">{{datainfo.Units}}</span>
                  <span v-else>无</span>
                </p>
            </div>
            <div class="desItem">
                <p>序列号</p>
                <p>
                  <span v-if="datainfo.SerialNumber && datainfo.SerialNumber!=''">{{datainfo.SerialNumber}}</span>
                  <span v-else>无</span>
                </p>
            </div>
            <div class="desItem">
                <p>购置日期</p>
                <p>{{datainfo.BuyDate}}</p>
            </div>
            <div class="desItem">
                <p>购置方式</p>
                <p>{{datainfo.BuyTypeName}}</p>
            </div>
            <div class="desItem">
                <p>金额</p>
                <p>
                  <span v-if="datainfo.Money && datainfo.Money!=''">{{datainfo.Money}}</span>
                  <span v-else>无</span>
                </p>
            </div>
            <div class="desItem">
                <p>使用类型</p>
                <p>{{datainfo.UseStatusName}}</p>
            </div>
            <div class="desItem">
                <p>公司</p>
                <p>
                    <span v-if="datainfo.BranchName && datainfo.BranchName!=''">{{datainfo.BranchName}}</span>
                    <span v-else>无</span>
                </p>
            </div>
            <div class="desItem">
                <p>备注</p>
                <p>
                    <span v-if="datainfo.Remark && datainfo.Remark!=''">{{datainfo.Remark}}</span>
                    <span v-else>无</span>
                </p>
            </div>
            <div class="desItem">
                <p>供应商</p>
                <p>
                  <span v-if="datainfo.SupplierName && datainfo.SupplierName!=''">{{datainfo.SupplierName}}</span>
                  <span v-else>无</span>
                </p>
            </div>
        </div>
        <div class="baseTitle f12">操作记录</div>
        <table class="myTable miniTable" border="0" cellspacing="0" cellpadding="0" >
        <thead>
          <th>类型</th>
          <th>内容</th>
          <th>签名图片</th>
          <th>操作人/时间</th>
        </thead>
        <tbody>
          <tr v-for="(item, index) in OperationList" :key="index">
            <td>{{ item.TypeName }}</td>
            <td>{{ item.Content }}</td>
            <td>
              <img
                v-if="item.SignImage && item.SignImage != ''"
                style="height: 45px;width: 55px;"
                :src="item.SignImage"
                alt=""
              />
              <span class="c99" v-else>-</span>
            </td>
            <td>
              <p>{{ item.CreateBy }}</p>
              <p>{{ item.CreateDate }}</p>
            </td>
          </tr>
          <tr v-show="OperationList.length == 0">
            <td colspan="4" align="center">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <el-pagination
        @current-change="currentChange"
        background
        :page-size="msg.pageSize"
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
        
    </div>
    
  </div>
</template>

<script>
import {getPropertyLogPageList,getPropertyInfo} from "../../../api/administration/AssetsShenpi"
export default {
  name: '',
  data(){
    return{
      msg: {
        pageIndex: 1,
        pageSize: 5,
        PropertyId: ""
      },
      OperationList:[],
      total:0,
      datainfo:{
        ImageList:[],
      },
      PropertyId:'',
    }
  },
  created(){
      
  },
  mounted(){
    
  },
  methods:{
    InitData(id){
        this.PropertyId=id;
        this.msg.PropertyId=id;   
        this.getOperation();
        this.getDataInfo();
    },
    currentChange(val) {
      this.msg.pageIndex = val;
      this.getOperation();
    },
    getOperation() {
      getPropertyLogPageList(this.msg).then((res)=>{
          this.OperationLoad = false;
          if (res.data.resultCode === 1) {
            this.OperationList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Error(res.data.message);
          }
      })
    },
    getDataInfo(){
      getPropertyInfo({Id:this.PropertyId}).then((res)=>{
          this.OperationLoad = false;
          if (res.data.resultCode === 1) {
            this.datainfo = res.data.data;
          } else {
            this.Error(res.data.message);
          }
      })
    },
  },
}
</script>

<style scoped>
.myTable{
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    font-family: "宋体"!important;
}
.myTable thead th{
    color:#A6C6C6;
    padding-left: 20px;
    height: 50px;
    line-height: 50px;
    font-weight:bold;
    text-align: left;
}
.myTable thead tr{
    background:transparent!important;

}
.myTable .hoverSpan1{
    left: -20px;
}
.myTable .hoverSpan2{
    right: -20px;
}
.myTable .commonStyle{
    height:100%;
    background:#fff;
    position: absolute;
    width: 20px;
    top:0;
    display: none;
}
.miniTable tr td{
    padding:6px 0 6px 20px!important;
}
.myTable tr{
    background:#fff;
    border-bottom: 4px solid #F8FAFB;
    cursor: pointer;
}
.noHoverTable tr{
    border-bottom:none!important;
}
.myTable .trNobottom{
    border-top:  4px solid #F8FAFB!important;
    border-bottom:none!important;
}
.myTable tbody tr:hover{
    box-shadow:0px 0 20px 0px rgba(176,176,176,0.2);
    transition: transform .5s ease;  
    /* transform: scaleX(1.02); */
}
.noHoverTable tbody tr:hover{
    box-shadow:0 0 0 transparent!important;
}
.myTable tbody tr:hover .commonStyle{
    display: block;
    transition: transform .5s ease;  
    box-shadow:0px 0px 0px 0px rgba(176,176,176,0.2);

}
.myTable tbody tr:hover td{
    border-radius:0!important;
}
.myTable tbody tr:first-child td:first-child{
    border-radius:20px 0 0 0;
}
.myTable tbody tr:first-child td:last-child{
    border-radius:0 20px 0 0;
}
.myTable tbody tr:last-child td:first-child{
    border-radius:0 0 0 20px;
}
.myTable tbody tr:last-child td:last-child{
    border-radius:0 0 20px 0;
}
.myTable tr td{
    position: relative;
    padding:11px 0 11px 20px;
}
.overflowY{
    overflow-y: scroll;
    height: 100%;
    box-sizing: border-box;
    position: relative;
}
.CheckDetails .baseDiv .desItem:nth-child(3n){
    margin-right:0;
}
.CheckDetails p{
  margin:0;
} 
.CheckDetails .desItem p:first-child{
    margin-bottom: 4px;
}
.CheckDetails .desItem{
    display: inline-block;
    background: #F1F1F1;
    box-sizing: border-box;
    border-radius: 10px;
    width: 200px;
    margin:10px 10px 10px 0;
    padding:6px 10px;
}
.CheckDetails .baseTitle{
    padding:5px 0;
    border-bottom: 1px dashed #ccc;
    margin-bottom:10px
}
.CheckDetails>div{
    float: left;
    font-size: 12px;
}
.CheckDetails .left{
    width:440px;
    box-sizing: border-box;
    padding:25px;
}
.CheckDetails .right{
    width: 680px;
    padding:0 10px 0 15px;
    box-sizing: border-box;
}
</style>
