<template>
  <view class="signature">
    <uni-section title="签名信息"
                 type="line">
      <view class="wrapper">
        <view class="base-item"
              v-for="(item,index) in list"
              :unlined="true"
              :hover="false"
              :arrow="false"
              :key="index">
          <image class="tui-classify-img"
                 :src="item.src" />
          <view class="label"> {{ item.label }} </view>
        </view>
      </view>
    </uni-section>
  </view>
</template>
<script>
export default {
  props: ["data"],
  data() {
    return {
      labelMap: {
        feeder_signature: "送料人",
        receiver_signature: "收料人",
        monitor_signature: "监收人",
      },
      list: [],
    };
  },
  created() {
    this.list = Object.keys(this.data)
      .filter((key) => key in this.labelMap)
      .map((key) => ({
        label: this.labelMap[key],
        src: this.data[key],
      }));
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
.signature {
  ::v-deep .uni-section {
    margin: 0 !important;
  }
  .wrapper {
    padding: 0 20rpx;
    padding-bottom: 20rpx;
    display: flex;
    gap: 20rpx;
    text-align: center;

    .base-item {
      flex-grow: 1;
      border: 1px solid #eee;
      display: flex;
      flex-direction: column;
      align-items: stretch;

      uni-image {
        display: block;
        width: 100%;
        height: 100rpx;
        aspect-ratio: 700 / 330;
      }

      .label {
        box-sizing: border-box;
        width: 100%;
        border: 1px solid #eee;
        padding: 10rpx;
      }
    }
  }
}
</style>
