<template>
  <div class="item-container">
    <div
      v-for="(data, index) in formatData"
      :key="index"
      class="item"
    >
      <div class="label">
        {{ data.label }}
      </div>
      <div class="value">
        {{ data.value }}
      </div>
    </div>
    <div class="button-group">
      <el-button
        type="primary"
        plain
        @click="edit"
      >
        编辑
      </el-button>
      <el-button
        v-if="!item.consumer_name"
        type="primary"
        plain
        @click="remove"
      >
        删除
      </el-button>
      <el-button
        type="primary"
        plain
        @click="detail"
      >
        查看详情
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    formatData() {
      return [
        {
          label: '商品名称',
          value: this.item.name
        },
        {
          label: '数量',
          value: this.item.number
        },
        {
          label: '客户名称',
          value: this.item.consumer_name
        }
      ]
    }
  },
  methods: {
    remove() {
      this.$emit('remove')
      console.log('删除')
    },
    edit() {
      this.$emit('edit')
      console.log('编辑')
    },
    detail() {
      this.$emit('detail')
      console.log('查看详情')
    }
  }
}
</script>

<style scoped lang="scss">
.item-container {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 4px;
  margin: 0 0 10px 0;
  .item {
    display: flex;
    align-items: center;
    margin-top: 4px;

    &:first-child {
      margin: 0;
    }

    .label {
      width: 6em;
      color: #737373;
    }

    .value {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .button-group {
    margin-top: 10px;
  }
}
</style>
