<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="classification-page">
      <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>
      <div class="toolbar">
        <el-button style="background-color: #3F9B6A;color: #fff" @click="addBar">添加一级类别</el-button>
      </div>
      <el-table
        :data="tableData"
        row-key="id"
       :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        :tree-props="{ children: 'childs' }"
      >
        <el-table-column prop="classifyName" label="商品类别" />
        <el-table-column prop="status" label="操作">
          <template slot-scope="scope">
            <div class="tableBtn greens" @click="checkRow(scope.row)">查看</div>
            <div class="tableBtn greens" @click="updateRow(scope.row)">编辑</div>
            <div class="tableBtn greens" @click="deleteRow(scope.row)">删除</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total"
		  background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <edit-dialog
        ref="edit"
        :dialog-visible="dialog.isVisible"
        :type="dialog.type"
        @close="editClose"
        @success="getProductCategory"
      />
    </div>
  </div>
</template>
<script>
import {
  commdityClassGetAll,
  commdityClassDelete
} from '@/api/renovation'
import EditDialog from './Edit'
export default {
  components: {
    EditDialog
  },
  data() {
    return {
      dialogVisible: false,
      formParams: {
        page: 1,
        pageSize: 10
      },
      total: 1,
      tableData: [],
      currentPage: 1,
      dialog: {
        type: 'add',
        isVisible: false
      }
    }
  },
  created() {
    this.getProductCategory()
    this.getAll(this.formParams)
  },
  methods: {
    handleSizeChange(val) {
      this.formParams.pageSize = val
      this.getAll(this.formParams)
    },
    handleCurrentChange(val) {
      this.formParams.page = val
      this.getAll(this.formParams)
    },
    fetch(config) {
      const { limit, page } = config
      this.formParams.pageIndex = page || 1
      this.formParams.pageSize = limit || 10
      this.getProductCategory()
    },
    addBar() {
      this.dialog = {
        type: 'add',
        isVisible: true
      }
      this.$refs.edit.setParams({ treeData: [] })
    },
    editClose() {
      this.dialog.isVisible = false
    },
    // 编辑
    updateRow(row) {
      const id = row.classifyId
      this.dialog = {
        type: 'edit',
        isVisible: true
      }
      this.$refs.edit.setParams({
        id: id
      })
    },
    // 查看
    checkRow(row) {
      const id = row.classifyId
      this.dialog = {
        type: 'check',
        isVisible: true
      }
      this.$refs.edit.setParams({
        id
      })
    },
    // 删除
    async deleteRow(row) {
      this.$confirm('此操作将永久删除该类别, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          commdityClassDelete({ oneClassifyId: row.classifyId }).then(res => {
            if (res.code === '') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
            this.getAll(this.formParams)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    async getProductCategory() {
      this.getAll(this.formParams)
    },
    async getAll(formParams) {
      const res = await commdityClassGetAll(formParams)
      this.tableData = res.data.list
      this.total = res.data.total
    }
  }
}
</script>
<style lang="scss" scoped>
@import url("../../../styles/elDialog.scss");

.classification-page {
  padding: 0  20px 20px 20px;
  min-height: calc(100vh - 50px - 20px);
  background-color: #Fff;
  .toolbar {
    margin-bottom: 15px;

  }
}
  .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>
