<template>
  <!-- 工程部审批回复信息，5+个地方复用 -->
  <view class="approval"
        style="padding-left: 40rpx;">
    <tui-list-cell :unlined="true"
                   :hover="false"
                   :arrow="false">
      <view class="base-item"
            style="margin-top: 20rpx;">
        <view class="label"> 审批数量 </view>
        <view class="content"> {{ approvalInfo && approvalInfo.quantity }} </view>
      </view>
    </tui-list-cell>
    <tui-list-cell :unlined="true"
                   :hover="false"
                   :arrow="false">
      <view class="base-item"
            style="margin-top: 20rpx">
        <view class="label"> 审批意见 </view>
        <view class="content"> {{ approvalInfo && approvalInfo.opinion }} </view>
      </view>
    </tui-list-cell>
    <tui-list-cell :unlined="true"
                   :hover="false"
                   :arrow="false">
      <view class="base-item"
            style="margin-top: 20rpx">
        <view class="label"> 审批人 </view>
        <view class="content"> {{ approvalInfo && approvalInfo.approver_info.name }} </view>
      </view>
    </tui-list-cell>
    <tui-list-cell :unlined="true"
                   :hover="false"
                   :arrow="false">
      <view class="base-item"
            style="margin-top: 20rpx">
        <view class="label"> 审批时间 </view>
        <view class="content"> {{ approvalInfo && approvalInfo.create_time }} </view>
      </view>
    </tui-list-cell>
    <image v-if="approvalInfo.opinion === '同意'"
           class="pass"
           src="/static/images/sxlq/applyPass.png"
           mode=""></image>
  </view>
</template>
<script>
export default {
  props: ["approvalInfo"],
};
</script>
<style lang="scss" scoped>
.approval {
  position: relative;
  .pass {
    position: absolute;
    top: 50rpx;
    right: 50rpx;
    width: 100rpx;
    height: 100rpx;
  }
}

::v-deep .tui-list-cell {
  // height: 60rpx;
  padding-top: 0rpx !important;
  padding-bottom: 0rpx !important;
}
::v-deep .base-item {
  display: flex;
  height: 100%;

  .label {
    display: inline-block;
    width: 25vw;
    font-size: 30rpx;
  }
  .content {
    display: inline-block;
    width: 45vw;
    // margin-left: 50rpx;
    font-size: 30rpx;
  }
}
</style>
