<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
        v-if="canEdit"
        type="primary"
        plain
        @click="edit"
      >
        编辑
      </el-button>
      <el-button
        v-if="canDelete"
        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: () => {}
    }
  },
  data() {
    return {
      userType: this.$store.getters.userType
    }
  },
  computed: {
    formatData() {
      return [
        {
          label: '商品名称',
          value: this.item.commodity_name
        },
        {
          label: '订单编号',
          value: this.item.order_number
        },
        {
          label: '数量',
          value: this.item.commodity_number
        },
        {
          label: '客户名称',
          value: this.item.consumer_name
        },
        {
          label: '订单状态',
          value: this.item.orderStatus
        }
      ]
    },
    canEdit() {
      const status = this.item.status
      // 收款状态下不可编辑
      if (status === 'RECEIPT') {
        return false
      }
      const userPermission = status === 'DELIVER_GOODS' || status === 'CREATE'
      if (this.userType === 2) {
        // 运营
        return !userPermission
      } else if (this.userType === 5) {
        // 客户在创建和收货状态下可以编辑，其他状态只有运营可以编辑
        return userPermission
      }
      return false
    },
    canDelete() {
      // 只有运营可以删除订单
      return this.userType === 2
    }
  },
  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>
