<template>
  <div>
    <span class="product-name" @click="showDetail = true">
      {{ product.productName ? product.productName : '--' }}
    </span>
    <el-dialog v-model="showDetail" @close="showDetail = false" :title="product.name" width="400px" v-if="product" append-to-body>
      <div>
        <p><strong>ID:</strong> {{ product.productId }}</p>
        <p><strong>名称:</strong> {{ product.productName }}</p>
        <p><strong>描述:</strong> {{ product.productCode }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'ProductInfo',
  props: {
    productId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      showDetail: false,
      product: null,
    };
  },
  computed: {
    ...mapState({
      productMap: state => state.category.productMap // 假设vuex中为product模块
    }),
  },
  watch: {
    productId: {
      handler: function(newVal) {
        const res = this.productMap ? this.productMap[this.productId] : null;
        console.log(this.productMap, this.productId, 'productMap', 'productId', res);
        this.product = res;
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.product-name {
  color: #1890ff;
  cursor: pointer;
  text-decoration: underline;
}
</style>
