<template>
  <tui-card class="card-item"
            :image="img"
            :title="{ text: applicationData.type_name, color: 'rgb(81, 121, 239)' }"
            :tag="{ text: applicationData.number, color: 'rgb(81, 121, 239)', size: 28 }"
            @click="$emit('click')">
    <template v-slot:body>
      <view class="tui-default">
        <view class="body">
          <view class="item">
            部位:
            <span> {{ applicationData.usedpart_full_name }} </span>
          </view>
          <view class="item">
            <span>材料规格：{{ applicationData.material_name }}</span>
            <span style="margin-left: 20px;">申请数量：{{ applicationData.apply_quantity }}</span>
          </view>
        </view>
      </view>
      <image v-if="applicationData.is_signed"
             class="pass"
             src="/static/images/sxlq/applyPass.png"
             mode=""></image>
    </template>
    <template v-slot:footer>
      <view class="tui-default">
        <Passes v-bind="applicationData" />
      </view>
    </template>
  </tui-card>
</template>
<script>
import Passes from "../../../common/bases/passes/Passes.vue";
export default {
  components: { Passes },
  props: ["applicationData"],
  data() {
    return {
      img: {
        url: "/static/images/sxlq/star.png",
        width: 38,
        height: 38,
        circle: true,
      },
    };
  },
};
</script>
<style lang="scss" scoped>
.tui-default {
  padding: 20rpx 30rpx;
}

.card-item {
  width: 100%;
  height: 450rpx;
  position: relative;

  .pass {
    position: absolute;
    bottom: 50rpx;
    right: 50rpx;
    width: 100rpx;
    height: 100rpx;
  }
}

.body {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: flex-start;
  // height: 200rpx;
}

.tui-card {
  margin: 20rpx 0;
}
</style>
