<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区 即内容区 -->
        <el-card>
            <!-- 搜索与添加区域 使用了ElementUI中Layout布局的row和col -->
            <!-- Row组件提供gutter属性来指定每一栏之间的间隔 默认间隔为 0 -->
            <el-row :gutter="20">
                <el-col :span="8">
                <!-- 输入框进行双向绑定完成搜索功能 而data中queryInfo的query属性就是搜索关键字
                    使用clearable属性即可得到一个可清空的输入框 clear事件在点击由 clearable 属性生成的清空按钮时触发 -->
                <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList">
                    <!-- 只要点了按钮就发起一次查询用户的请求 所以绑定单击事件getUserList -->
                    <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
                </el-input>
                </el-col>
                <el-col :span="4">
                <!-- 点击添加用户 跳转到另一个页面 而不是弹出对话框了 -->
                <el-button type="primary" @click="goAddpage">前往添加商品</el-button>
                </el-col>
            </el-row>
            <!-- 商品列表区 -->
            <el-table :data="goodslist" border stripe>
                <el-table-column label="#" type="index"></el-table-column>
                <!-- 每一列平均分配宽度 但是内容多少不一 手动设置width来调整表格格式 -->
                <el-table-column label="商品名称" prop="goods_name"></el-table-column>
                <el-table-column label="商品价格(元)" prop="goods_price" width="120px"></el-table-column>
                <el-table-column label="商品重量" prop="goods_weight" width="100px"></el-table-column>
                <el-table-column label="创建时间" width="200px">
                    <template slot-scope="scope">
                        {{scope.row.add_time | dateFormat}}
                    </template>
                </el-table-column>
                <!-- 操作这一列要拿到对应id才能进行 比如修改或删除用户 所以要使用作用域插槽 -->
                <!-- 强制添加width=180px可以保证视窗缩小时三个按钮仍在一行显示而不换行 -->
                <el-table-column label="操作" width="180px">
                <template slot-scope="scope">
                    <!-- 编辑和删除按钮 商品修改的功能api有问题  获取到的cate_id是空的所以不做了 -->
                    <!-- <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row)"></el-button> -->
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteGoods(scope.row.goods_id)"></el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页展示区 -->
            <!-- page-sizes是下拉菜单选项数组 page-size当前情况下每页显示多少条 layout用来指定页面需要展示哪些功能组件 -->
            <!-- 相比于之前的分页多了一个background -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
            ></el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
  data() {
    return {
      goodslist: [], // 所有商品列表,
      total: 0, // 商品数据总条数
      queryInfo: {
        query: '',
        pagenum: 1, // 当前页码是多少
        pagesize: 10// 当前每页显示多少条数据
      }
    }
  },
  methods: {
    async getGoodsList() {
      // 获取商品列表显示 在页面created和每次修改pagesize等操作后都要调用 参考API接口文档1.8.1
      const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.goodslist = res.data.goods
      this.total = res.data.total
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getGoodsList()
    },
    // 设置页码值改变事件的函数 改变后也要重新获取数据 因为发送请求时用到了pagenum
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getGoodsList()
    },
    // 删除按钮的绑定事件
    async deleteGoods(id) {
      // 先弹框 让用户进行二次确认 $confirm返回值也是一个Promise
      // 经过async await修饰后 如果用户确认删除 则返回值为字符串'confirm'
      // 经过async await修饰后 如果用户取消删除 则返回值为字符串'cancel'
      const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)// 用catch来捕获前面的所有错误 简略了() {} return
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      // 如果确认删除 参考API接口文档1.3.6
      const { data: res } = await this.$http.delete('goods/' + id)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      // 别忘了删除成功之后刷新用户列表
      this.getGoodsList()
      this.$message.success(res.meta.msg)
    },
    // 点击添加商品按钮的回调
    goAddpage() {
      // 通过编程式路由导航跳转页面
      this.$router.push('/goods/add')
    }
  },
  created() {
    this.getGoodsList()
  }
}
</script>

<style lang="less" scoped>
.el-button--danger {
    margin-left: 55px;
}
</style>