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

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

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