<template>
  <div>
    <div ref="lxHeader">
      <lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="服务项目">
        <div slot="content"></div>
        <slot>
          <div>
<!--            <Input placeholder="关键字搜索" style="width: 200px; margin-right: 10px"/>-->
<!--            <Button style="margin-left: 10px" type="primary" @click="select.page = 1,getSku()">查询</Button>-->
            <Button style="margin-left: 10px" type="primary" @click="$refs['addSku'].type = 'add',$refs['addSku'].isShow = true">新建服务</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :total="total"
      :list="list"
      :table-item="table"
      @editor="editor"
      @delete="destroy"
      @pageSizeChange="e => select.page_size = e"
      @pageIndexChange="e => {select.page = e;getSku()}"></xy-table>

    <add-sku ref="addSku" :skuType="types" @refresh="getSku"></add-sku>
  </div>
</template>

<script>
import {getList,destroy} from '@/api/sku'
import {getList as getTypes} from '@/api/skuCategory'
import {parseTime} from "@/utils"

import addSku from "@/views/product/skuComponent/addSku"

export default {
  components:{
    addSku
  },
  data() {
    return {
      select:{
        page:1,
        page_size:10
      },
      types:[],

      total:0,
      list:[],
      table:[
        {
          type:'index',
          width:40,
        },
        {
          prop:'name',
          label:'名称',
          minWidth:200,
          align:'left'
        },
        {
          prop:'category.name',
          label:'所属分类',
          minWidth:200,
          align:'left'
        },
        {
          label:'服务时长(分钟)',
          prop:'time_lenth',
          width: 160
        },
        {
          prop:'sortnumber',
          label:'排序',
          width:120
        },
        {
          prop:'created_at',
          label:'创建信息',
          width: 200,
          formatter:(cell,data,value)=>{
            return parseTime(new Date(value),'{y}-{m}-{d}')
          }
        }
      ]
    }
  },
  methods: {
    async getTypes(){
      const res = await getTypes({},false)
      this.types = res.data
    },

    async getSku(){
      const res = await getList(this.select)
      this.total = res.total
      this.list = res.data
      console.log(this.list)
    },

    editor(row){
      this.$refs['addSku'].type = 'editor'
      this.$refs['addSku'].id = row.id
      this.$refs['addSku'].isShow = true
    },
    destroy(row){
      destroy(row.id).then(res => {
        this.$successMessage('destroy','服务项目')
        this.getSku()
      })
    }
  },
  mounted() {
    this.getTypes()
    this.getSku()
  }
}
</script>

<style scoped lang="scss">
</style>
