<template>
  <div>
    <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">查询</Button>
              <Button style="margin-left: 10px" type="primary"
                      @click="$refs['addProduct'].type = 'add',$refs['addProduct'].isShow = true">新建产品
              </Button>
            </div>
          </slot>
        </lx-header>
      </div>
    </div>

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

    <add-product ref="addProduct" :product-sku="productSku" :product-type="productType"></add-product>
  </div>
</template>

<script>
import {getList,destroy} from '@/api/product'
import {getparameter} from '@/api/system/dictionary'
import {getList as getTypes} from '@/api/productType'
import {getList as getSku} from '@/api/sku'

import addProduct from "@/views/product/productComponent/addProduct";

export default {
  components: {
    addProduct
  },
  data() {
    return {
      select:{
        page:1,
        page_size:10
      },
      productType: [],
      productSku: [],

      total:0,
      list: [],
      table: [
        {
          prop:'name',
          label:'名称',
          width:200,
          fixed:'left',
          align:'left'
        },
        {
          prop:'product_type.name',
          label:'业务板块',
          width: 160
        },
        {
          prop:'cycle',
          label:'服务周期',
          width: 160
        },
        {
          prop:'purchase_price',
          label:'采购单价',
          align:'right',
          width: 200
        },
        {
          prop:'nurse_price',
          label:'护工服务单价',
          align:'right',
          width:200
        },
        {
          prop:'time_lenth',
          label:'单次时长',
          width: 160
        },
        {
          prop:'',
          label:'服务菜单明细',
          minWidth:220
        }
      ]
    }
  },
  methods: {
    async getList() {
      const res = await getList(this.select)
      this.list = res.data
      this.total = res.total
      console.log(this.list)
    },
    async getProductType() {
      const res = await getTypes({page_size: 999},false)
      this.productType = res.data
    },
    async getProductSku() {
      const res = await getSku({page:1,page_size:999},false)
      this.productSku = res.data
    },

    editor(row){
      this.$refs['addProduct'].type = 'editor'
      this.$refs['addProduct'].id = row.id
      this.$refs['addProduct'].isShow = true
    },
    destroy(row){
      destroy(row.id).then(res => {
        this.$successMessage('destroy','订单')
        this.getList()
      })
    }
  },
  mounted() {
    this.getList()
    this.getProductType()
    this.getProductSku()
  }
}
</script>

<style lang="scss" scoped>

</style>
