<!-- 商城商品管理 -->
<template>
    <div class="execution">
      <basic-container>
          <avue-crud ref="crud"
                       :page.sync="page"
                       :data="tableData"
                       :permission="permissionList"
                       :table-loading="tableLoading"
                       :option="tableOption"
                       @on-load="getList"
                       @selection-change="onSelectionChange"
                       @search-change="searchChange"
                       @refresh-change="refreshChange"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       @row-update="handleUpdate"
                       @row-save="handleSave"
                       @row-del="handleDel">
              <!--  1.行内按钮-->
              <template slot-scope="scope" slot="menu">
                <el-button  type="button" size="small"
                            @click="lookDetail(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">详情</el-button>
                <el-button  type="button" size="small"
                            @click="handleUpdate(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">编辑</el-button>
                <el-button  type="button" size="small"
                            @click="handleDel(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">删除</el-button>
              </template>
              <!-- 2.表外按钮 -->
              <template slot-scope="scope" slot="menuLeft">
                <div class="layout_h">
                  <el-button
                    type="primary"
                    size="small"
                    @click="add">添加</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    @click="batchIsUpon">上架</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    @click="batchIsNotUpon">下架</el-button>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleDelBatch(scope.row)">删除</el-button>
                </div>
              </template>
            </avue-crud>
      </basic-container>
      <goods_edits  :show="goodsEditVue" :id="id" @close="goodsEditVue=false" @success="onChangeDone" />
    </div>
</template>

<script>
  import {fetchList,addObj,delObj,isUpon, isNotUpon} from '@/api/mall/merchantMallgoods'
  import {tableOption} from '@/const/crud/mall/merchantMallgoods'
  import {mapGetters} from 'vuex'
  export default {
      name: 'businessGoods',
      data() {
          return {
            goodsEditVue:false,
            id:undefined,
            searchForm: {},
            tableData: [],
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 20 // 每页显示多少条
            },
            tableLoading: false,
            tableOption: tableOption
          }
      },
      computed: {
          ...mapGetters(['permissions']),
          permissionList() {
              return {
                  addBtn: this.vaildData(this.permissions.admin_mallgoods_add, false),
                  delBtn: this.vaildData(this.permissions.admin_mallgoods_del, false),
                  editBtn: this.vaildData(this.permissions.admin_mallgoods_edit, false)
              };
          }
      },
      components: {
      'goods_edits': () => import('./goodsEdit/goods_edit_pop'),
      },
      methods: {
        // 更新
        handleUpdate: function (row, index, done,loading) {
          console.log("执行编辑方法")
          this.id=row.id
          console.log("赋值id:"+row.id)
          this.goodsEditVue=true
        },
        // 添加
        add() {
          this.goodsEditVue=true
        },
        // 查看详情
        lookDetail(row) {
            this.$router.push('/businessGoods/details?id=' + row.id)
        },
        onChangeDone() {
          this.refreshChange()
        },
          //   列表查询
        getList(page, params) {
            this.tableLoading = true
            fetchList(Object.assign({
                current: page.currentPage,
                size: page.pageSize
            }, params, this.searchForm )).then(response => {
                this.tableData = response.data.data.records
                this.page.total = response.data.data.total
                this.tableLoading = false
            }).catch(() => {
                this.tableLoading=false
            })
        },
        // 删除
        handleDel: function (row, index) {
            this.$confirm('是否确认删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
                return delObj(row.id)
            }).then(data => {
                this.$message.success('删除成功')
                this.getList(this.page)
            })
        },
        // 选择事件(多选事件)
        onSelectionChange(r) {
          this.selectedData = r
        },
        // 批量 上架
        batchIsUpon() {
          let d = this.selectedData
          if(d == undefined || d.length == 0) {
            this.$message.error('请选择项进行上架')
            return
          }
          let ids = d.map(r => { return r.id }).join(',')
          console.log(ids)
          this.$confirm('请确认是否上架已勾选的商品', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function () {
            return isUpon({ids: ids})
          }).then(data => {
            this.$message.success('删除成功')
            this.getList(this.page)
          })
        },
        // 批量 下架
        batchIsNotUpon() {
          let d = this.selectedData
          if(d == undefined || d.length == 0) {
            this.$message.error('请选择项进行下架')
            return
          }
          let ids = d.map(r => { return r.id }).join(',')
          this.$confirm('请确认是否下架已勾选的商品', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function () {
            return isNotUpon({ids: ids})
          }).then(data => {
            this.$message.success('删除成功')
            this.getList(this.page)
          })
        },
        // 批量删除
        handleDelBatch() {
          let d = this.selectedData
          if(d == undefined || d.length == 0) {
            this.$message.error('请选择项进行删除')
            return
          }
          let ids = d.map(r => { return r.id }).join(',')
          this.$confirm('是否确认删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
              return delObj({ids: ids})
            }).then(data => {
                this.$notify.success('删除成功')
                this.$refs.crud.toggleSelection();
                this.refreshChange();
            })
        },

        // 保存
        handleSave: function (row, done,loading) {
            addObj(row).then(data => {
                this.$message.success('添加成功')
                done()
                this.getList(this.page)
            }).catch(() => {
                loading();
            });
        },
        // 每页条数改变事件
        sizeChange(pageSize){
            this.page.pageSize = pageSize
        },
        // 当前页发生改变事件
        currentChange(current){
            this.page.currentPage = current
        },
        // 查询事件
        searchChange(form, done) {
            this.searchForm = form
            this.page.currentPage = 0
            this.getList(this.page, form)
            done()
        },
        // 刷新事件
        refreshChange() {
            this.getList(this.page)
        },

      }
  }
</script>
