<template>
  <el-dialog :close-on-click-modal="false" title="配销产品" :visible.sync="explosiveProductsSubsidiaryVisible" width="30%" :before-close="handleBeforeClose">
    <div class="explosive-productsSubsidiary-container">
      <div class="header" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px">
        <h4 style="font-size: 18px; font-weight: bold">配销产品列表</h4>
        <el-button size="mini" @click="handleAdd()" type="primary">新增配销产品 +</el-button>
      </div>

      <el-table v-loading="refreshLoading" border :data="hotGoodsDetail.subsidiaryList" :style="{ width: '100%' }">
        <el-table-column align="center" prop="subsidiaryName" label="配销产品名称" />
        <el-table-column align="center" prop="subsidiaryPrice" label="配销产品价格" />
        <el-table-column prop="subsidiaryImage" label="爆品图片" align="center">
          <template slot-scope="scope">
            <el-image :preview-src-list="[scope.row.subsidiaryImage]" style="width: 80px; height: 80px; border-radius: 10px;e" :src="scope.row.subsidiaryImage"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleAdd(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加单个配销产品 -->
    <AddExplosiveProductsSubsidiary @refresh="handleRefresh" ref="addExplosiveProductsSubsidiaryRef"></AddExplosiveProductsSubsidiary>
  </el-dialog>
</template>

<script>
import AddExplosiveProductsSubsidiary from './AddExplosiveProductsSubsidiary.vue'
import { getHotGoodsList, deleteExplosiveProductsSubsidiary } from '@/api/active/active_hot'

export default {
  components: { AddExplosiveProductsSubsidiary },
  data() {
    return {
      explosiveProductsSubsidiaryVisible: false,
      explosiveProductsSubsidiaryData: [],
      hotGoodsDetail: {},
      refreshLoading: false,
      pQueryInfo: {},
      isRefreshTable: false // 是否需要刷新外部表格
    }
  },

  watch: {
    explosiveProductsSubsidiaryVisible(value) {
      if (!value) {
        this.$emit('refresh')
      }
    }
  },

  methods: {
    handleBeforeClose(done) {
      done()
    },

    open(row, pQueryInfo) {
      if (!row.id) {
        return this.$message.warning('爆品ID为空')
      }
      this.pQueryInfo = pQueryInfo
      this.hotGoodsDetail = row
      this.explosiveProductsSubsidiaryVisible = true
    },

    // 添加配销产品
    handleAdd(item = null) {
      this.$refs.addExplosiveProductsSubsidiaryRef.open({
        pid: this.hotGoodsDetail.id,
        item
      })
    },

    // 刷新列表
    async handleRefresh() {
      this.refreshLoading = true
      this.isRefreshTable = true // 标记需要刷新外部表格
      try {
        const res = await getHotGoodsList(this.pQueryInfo)
        if (res.code === '200') {
          const list = res.data.list
          const currentData = list.find((item) => item.id === this.hotGoodsDetail.id)
          if (currentData) {
            this.hotGoodsDetail = currentData
          }
        }
      } finally {
        this.refreshLoading = false
      }
    },

    // 删除
    handleDelete(row) {
      this.$confirm(`是否删除【${row.subsidiaryName}】这件配销产品?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await deleteExplosiveProductsSubsidiary({ subsidiaryId: row.id })
          if (res.code == '200') {
            this.$message.success('删除成功')
            this.handleRefresh()
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped></style>
