<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <div>
      <el-table
        v-loading="!formData.relatedGroupProductsList || !formData.relatedGroupProductsList.length"
        height="60vh" element-loading-text="暂无关联分组产品" :data="formData.relatedGroupProductsList"
        v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
      >
        <el-table-column align="center" min-width="80" prop="productId" label="产品ID" show-overflow-tooltip />
        <el-table-column align="center" width="100" label="产品主图" prop="image">
          <template slot-scope="{ row }">
            <el-image
              v-if="row.image" lazy :src="common.seamingImgUrl(row.image)"
              style="width:40px; height:40px" fit="cover"
              :preview-src-list="[ common.seamingImgUrl(row.image) ]"
            />
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="150" prop="productName" label="产品名称" show-overflow-tooltip />
        <el-table-column align="center" min-width="100" prop="originalPrice" label="价格" show-overflow-tooltip />
        <el-table-column align="center" min-width="100" prop="stockNumber" label="库存" show-overflow-tooltip />
        <el-table-column align="center" min-width="100" label="状态" prop="shelveState">
          <template slot-scope="{ row }">
            <span v-if="row.shelveState === 1">上架</span>
            <span v-else-if="row.shelveState === 0">下架</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="handleClose">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>

export default {
  name: 'RelatedGroupProducts',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '920px',
        title: '关联分组产品'
      },
      visible: false,
      formData: {
        relatedGroupProductsList: []
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = []) {
      this.formData.relatedGroupProductsList = params
      this.visible = true
      this.$forceUpdate()
      // this.$refs.formData && this.$refs.formData.resetFields()
    },
    handleSubmit() {
    }
  }
}
</script>

<style lang="scss" scoped>
.small-padding {
	.cell {
		padding-left: 5px;
		padding-right: 5px;
	}
}

.fixed-width {
	.el-button--mini {
		padding: 7px 10px;
	}
}
</style>
