<style>
    .table-tools{
        text-align: left;
        padding: 0.5em;
        background: #dcdee2;
    }
</style>
<template>
    <div>
        <Row type="flex" justify="center" align="middle">
            <Col span="24">
                <Form ref="searchForm" :model="searchData" inline>
                    <Form-item prop="name_center">
                        <Input type="text" style="width:250px" v-model="searchData.name_center" placeholder="配送中心">
                        </Input>
                    </Form-item>
                    <Form-item prop="name_meal">
                        <Input type="text" style="width:250px" v-model="searchData.name_meal" placeholder="套餐名">
                        </Input>
                    </Form-item>
                     <Form-item prop="is_active">
                         <Select v-model="searchData.is_active" style="width:200px" placeholder="状态">
                           <Option value="">全部</Option>
                            <Option value="0">{{ $t('isactive_0') }}</Option>
                            <Option value="1">{{ $t('isactive_1') }}</Option>
                        </Select>
                    </Form-item>
                    <Form-item>
                        <Button type="primary" @click="search">搜索</Button>
                    </Form-item>
                </Form>
            </Col>
            <Col span="24" class="table-tools">
                <Button type="info" @click="newinfo">添加</Button>
            </Col>
            <Col span="24">
                <Table :columns="column" :data="list" ></Table>
                <Page :total="pagedata.total" size="small" :current="pagedata.current" :page-size="pagedata.pageSize" :page-size-opts="pagedata.pageSizeOpts"
                    @on-change="pageChange" @on-page-size-change="sizeChange"
                show-elevator show-sizer show-total></Page>
            </Col>
        </Row>
    </div>
</template>
<script>
import { getmeallist, updatemealisactive } from '@/api/data'
export default {
  name: 'meallist',
  data () {
    var self = this
    return {
      list: [],
      column: [
        {
          title: 'ID',
          key: 'id',
          width: 70
        },
        {
          title: '中心名',
          key: 'name_center',
          width: 200
        },
        {
          title: '套餐名',
          key: 'name_meal'
          // width: 70
        },
        {
          title: '价格',
          key: 'price',
          width: 70
        },
        {
          title: '状态',
          key: 'is_active',
          width: 70,
          render: function (h, params) {
            const usestr = self.$t('isactive_' + params.row.is_active)
            var div = h('div', {}, usestr)
            return div
          }
        },
        {
          title: '创建时间',
          key: 'createtime',
          width: 150
        },
        {
          title: '操作',
          key: 'option',
          align: 'left',
          width: 200,
          render: function (h, params) {
            var btn1 = h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: (data) => {
                  // 编辑
                  self.$router.push({ path: 'editcooks', query: params.row })
                }
              }
            }, '菜谱更新')
            var btn2 = h('Button', {
              props: {
                type: 'warning',
                size: 'small'
              },
              on: {
                click: (data) => {
                  self.updateisactive(params.row.id, 0)
                }
              }
            }, '禁用')
            var btn3 = h('Button', {
              props: {
                type: 'text',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: (data) => {
                  self.$router.push({ path: 'editmeal', query: { id: params.row.id } })
                }
              }
            }, '编辑')
            var btns = []
            if (params.row.is_active === 1) {
              btns.push(btn1)
              btns.push(btn3)
              btns.push(btn2)
            }
            return btns
          }
        }
      ],
      searchData: {
        name_center: '',
        is_active: '',
        name_meal: ''
      },
      pagedata: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOpts: [10, 50, 100]
      },
      updateisrightData: {
        userid: 0,
        wname: '',
        node: ''
      }
    }
  },
  methods: {
    search () {
      this.pagedata.current = 1
      this.getList()
    },
    getList () {
      this.searchData.page = this.pagedata.current
      this.searchData.size = this.pagedata.pageSize
      getmeallist(this.searchData).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
          this.list = []
          this.pagedata.total = 0
          this.pagedata.current = 1
        } else {
          const usedata = data.data
          this.pagedata.total = usedata.count
          this.list = usedata.list
        }
      })
    },
    pageChange (current) {
      this.pagedata.current = current
      this.getList()
    },
    sizeChange (pageSize) {
      this.pagedata.pageSize = pageSize
      this.pagedata.current = 1
      this.getList()
    },
    updateisactive (id, is_active) {
      var data = { id, is_active }
      console.log(data)
      updatemealisactive(data).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.getList()
        }
      })
    },
    newinfo () {
      this.$router.push({ path: 'editmeal' })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
