<template>
  <div class="classification-page">
    <div class="toolbar">
      <el-button
        type="success"
        size="mini"
        @click="addBar"
      >添加一级类别</el-button>
    </div>
    <el-table
      :data="tableData.productCategoryList"
      style="width: 100%"
      border
      row-key="id"
      :tree-props="{ children: 'childs' }"
    >
      <el-table-column
        prop="categoryName"
        label="商品类别"
      />
      <el-table-column
        prop="status"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.prevent="checkRow(scope.row)"
          >
            查看
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="updateRow(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="formParams.pageSize"
      :page.sync="formParams.pageIndex"
      :total="Number(tableData.total)"
      @pagination="fetch"
    />
    <edit-dialog
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :type="dialog.type"
      @close="editClose"
      @success="getProductCategory"
    />
  </div>
</template>
<script>
import Classification from '@/api/Classification.js'
import Pagination from '@/components/Pagination'
import EditDialog from './Edit'
export default {
  components: {
    EditDialog,
    Pagination
  },
  data () {
    return {
      dialogVisible: false,
      formParams: {
        pageSize: 10,
        pageIndex: 1
      },
      tableData: {},
      dialog: {
        type: 'add',
        isVisible: false
      }
    }
  },
  created () {
    this.getProductCategory()
  },
  methods: {
    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) {
      console.log(row)
      console.log(12385)
      const { id } = row
      
      this.dialog = {
        type: 'edit',
        isVisible: true
      }
      this.$refs.edit.setParams({
        id: id,
        
      })
    },
    checkRow (row) {
      const { id } = row
      this.dialog = {
        type: 'check',
        isVisible: true
      }
      this.$refs.edit.setParams({
        id
      })
    },
    deleteRow (row) {
      const { id } = row
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      })
        .then(() => {
          this.delete({
            id,
            depth: 1
          })
        })
        .catch(() => { })
    },
    async delete (params) {
      const res = await Classification.deletCategory(params)
      const resData = res.data
      const { code } = resData
      if (code === 0) {
        this.$message({
          message: this.$t('tips.deleteSuccess'),
          type: 'success'
        })
        this.getProductCategory()
      }
    },
    async getProductCategory () {
      
      const res = await Classification.getProductCategory(this.formParams)
      this.tableData = res.data.data
    }
  }
}
</script>
<style lang="scss" scoped>
.classification-page {
  padding: 15px 20px;
  .toolbar {
    margin-bottom: 15px;
    text-align: right;
  }
}
</style>
