<template>
  <div class="single">
    <el-form ref="searchFrom" :model="searchFrom" label-width="80px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="分类名称">
            <el-input v-model="searchFrom.category_name" placeholder="名称"
                      size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="单品名称">
            <el-input v-model="searchFrom.name" placeholder="名称"
                      size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" plain size="small" @click="initPage">
              搜索
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="8">
          <el-form-item>
            <el-button type="success" plain size="small" @click="onAdd" v-if="!$store.state.readonly">
              添加单品
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      :default-sort = "{prop: 'num', order: 'descending'}"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="id">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="category_name"
        label="分类">
      </el-table-column>
      <el-table-column
        prop="num"
        sortable
        label="库存">
      </el-table-column>
      <el-table-column
        width="200"
        v-if="!$store.state.readonly"
        label="操作">
        <template slot-scope="scope">
          <el-button size="mini" plain type="warning" @click="edit(scope.row)">
            编辑
          </el-button>
          <el-button size="mini" plain type="danger" @click="delthat(scope.row)" v-if="$store.state.deletePermission">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <dialog-com :dialogObj="dialogObj"  @changeShow="changeShow" @reflash="initPage"/>
  </div>
</template>

<script>
  import {getSingleListApi,delSingleApi} from "../../service/api";
  import page from '../framework/page'
  import dialogCom from './dialog'
  export default {
    name: "index",
    components:{
      page,
      dialogCom
    },
    data(){
      return {
        total:0,
        nowPage:1,
        limit: 10,
        searchFrom: {
          name:''
        },
        tableData:[],
        dialogObj:{
          type:0,
          show:false,
          id:''
        },
      }
    },
    created(){
      this.initPage()
    },
    methods:{
      initPage(){
        let json = {
          limit: this.limit,
          page: this.nowPage
        }
        if (this.searchFrom.name) {
            json.name = this.searchFrom.name
        }
        if (this.searchFrom.category_name) {
          json.category_name = this.searchFrom.category_name
        }
        getSingleListApi(json).then(res=>{
          this.tableData = res.list;
          this.total = res.total
        })
      },
      onPageChange(val){
        this.nowPage = val
        this.initPage()
      },
      onSizeChange(val){
        this.nowPage = 1
        this.limit = val
        this.initPage()
      },
      changeShow() {

      },
      delthat(data){
        this.$confirm('此操作将删除该单品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delSingleApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          });
          this.initPage()
        });
      },
      onAdd(){
        this.dialogObj = {
          type: 0,
          show: true,
        }
      },
      edit(data) {
        this.dialogObj = {
          type: 1,
          show: true,
          id: data.id
        }
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .single{
    .main-block
  }
</style>