<template>
  <div class="content">
    <el-row :gutter="10" class="padding-bottom">
      <el-col :span="24">
        <el-button type="primary" @click="formOption.show = true">新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column header-align="center" align="center" prop="brandName" label="品牌名称" width="180" />
      <el-table-column header-align="center" align="center" prop="brandLogo" label="Logo">
        <template #default="scope">
          <el-image
            :src="scope.row.brandLogo" :preview-src-list="[ scope.row.brandLogo ]"
            style="width: 100px;height: 100px"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" label="相关操作" header-align="center">
        <template #default="scope">
          <el-button style="margin-right: 10px" type="warning" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="query.page" :page-sizes="tableOptions.pageSizes" :page-size="query.pageSize"
      :layout="tableOptions.layout" :total="tableOptions.total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <Form v-model="formOption.show" :item="formOption.item" @confirm="getList" @cancel="getList" />
  </div>
</template>

<script>
import { getBrandAll, deleteBrand } from '@/api/renovation'
import Form from './form'
export default {
  name: 'Brand',
  components: { Form },
  data() {
    return {
      list: [],
      query: {
        page: 1,
        pageSize: 10
      },
      tableOptions: {
        total: 0,
        layout: 'total, sizes, prev, pager, next, jumper',
        pageSizes: [10, 30, 50, 100, 200]
      },
      formOption: {
        show: false,
        item: null
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      const { data } = await getBrandAll(this.query)
      this.loading = false
      this.list = data.list
      this.tableOptions.total = data.total
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.getList()
    },
    handleUpdate(item) {
      this.formOption.item = item
      this.formOption.show = true
    },
    async handleDelete(item) {
      this.loading = true
      await deleteBrand(item)
      this.loading = false
      this.$message.success('删除成功')
      this.getList()
    }
  }
}
</script>

<style
  lang="scss"
  scoped
>
.content {
	padding: 30px;
}

.padding-bottom {
	padding-bottom: 30px;
}
</style>
