<!--
    * @FileDescription: 品牌管理
    * @Author: kahu
    * @Date: 2022/8/29
    * @LastEditors: kahu
    * @LastEditTime: 2022/8/29
-->
<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="content">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>商品管理</span>   <span style="padding:0 5px;">></span>  <span style="color:#000000e6">品牌管理</span></div>
      </div>
      <el-row :gutter="10" class="padding-bottom">
        <el-col :span="24">
          <el-button style="background-color: #3F9B6A;color: #fff" @click="formOption.show = true">新增</el-button>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="list"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
      >
        <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 v-slot="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 v-slot="scope">
            <div class="tableBtn greens" @click="handleUpdate(scope.row)">修改</div>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="handleDelete(scope.row)"
            >
              <div slot="reference" class="tableBtn greens">删除</div>
            </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>
  </div>
</template>

<script>
import { getBrandAll, deleteBrand } from '@/api/renovation';
import Form from './form'
export default {
  name: 'Brand',
  components: { Form },
  data () {
    return {
      list: [],
      query: {
        page: 0,
        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: 0  20px 20px 20px;
  min-height: calc(100vh - 50px - 20px);
  background-color: #Fff;
}
.padding-bottom{
  padding-bottom: 30px;
}
.tableBtn {
       display: inline-block;
       margin-right: 10px;
     }

   .greens {
       color: #3F9B6A ;
     }
     ::v-deep .buttonHover:hover{
       color:#3f9b6a !important;
       border-color: #c5e1d2 !important;
       background-color: #ecf5f0 !important;
       outline: none;
     }
     ::v-deep .el-pagination__total {
         position: absolute;
         left: 10px;
       }
</style>
