<template>
  <el-dialog :visible.sync="visible" v-bind="modalOptions" append-to-body>
    <div>
      <div>
        <el-table
          v-loading="productListLoading" height="60vh" element-loading-text="正在查询中。。。" :data="productDataList"
          v-bind="{ stripe: true, size: 'small', border: true, fit: true, highlightCurrentRow: true }"
        >
          <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 prop="productName" label="产品名称" />
          <el-table-column prop="productId" label="产品id" />
          <el-table-column prop="price" label="售价(元)" />
          <el-table-column prop="originalPrice" label="原价(元)" />
          <el-table-column prop="stockNumber" label="库存(件)" />
          <el-table-column prop="volume" label="累计销量(件)" />
          <el-table-column label="上架状态">
            <template slot-scope="scope">
              <span v-if="scope.row.shelveState == 1">上架</span>
              <span v-if="scope.row.shelveState == 0">下架</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-pagination
          :current-page="productListQuery.page" :page-sizes="[10, 20, 50, 100]"
          :page-size="productListQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="productTotal"
          @size-change="(val) => ((productListQuery.pageSize = val) && getActivityProductList())"
          @current-change="(val) => ((productListQuery.page = val) && getActivityProductList())"
        />
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="handleClose">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { activeGetProducts } from '@/api/active'

export default {
  name: 'ActivityProducts',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '920px',
        title: '店铺的活动产品'
      },
      visible: false,
      formData: {
        signId: ''
      },
      productDataList: [],
      productTotal: 0,
      productListLoading: true,
      productListQuery: {
        signId: '',
        page: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    async initList() {
      this.productListQuery = { signId: this.formData.signId || '', page: 1, pageSize: 10 }
      this.getActivityProductList()
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      this.initList()
      if (params.signId) {
        // this.getInfo(params.signId)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await xxx({ id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          signId: res.data.signId || ''
        })
      } finally {
        loading.close()
      }
    },
    handleSubmit() {
    },

    async getActivityProductList() {
      this.productListLoading = true
      try {
        const res = await activeGetProducts(this.productListQuery)
        this.productDataList = res.data.list
        this.productTotal = res.data.total
      } finally {
        this.productListLoading = false
      }
    }
  }
}
</script>

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

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