<template>
  <view class="passes">
    <view class="item"
          v-for="(item, index) in items"
          :key="index">
      <text>{{ item.name }}</text>
      <tui-icon v-if="(item.pass === null) | (item.pass === undefined)"
                name="circle"
                :size="20"></tui-icon>
      <tui-icon v-else-if="item.pass"
                name="circle-selected"
                color="#19be6b"
                :size="20"></tui-icon>
      <tui-icon v-else
                name="close"
                color="tomato"
                :size="20"></tui-icon>
      <text v-if="index !== items.length - 1">|</text>
    </view>
  </view>
</template>
<script>
export default {
  props: ["engineering_pass", "lab_pass", "mixing_station_pass"],
  data() {
    return {
      items: [
        {
          name: "工程部",
          pass: this.engineering_pass,
        },
        {
          name: "实验室",
          pass: this.lab_pass,
        },
        {
          name: "拌合站",
          pass: this.mixing_station_pass,
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.passes {
  display: flex;
  gap: 20rpx;
  .item {
    display: flex;
    gap: 20rpx;
    align-items: center;
  }
  text {
    font-size: 24rpx;
    color: #333;
  }
}
</style>
