<style>
    .cook_img_div{
        width: 100%;
        text-align: center;
    }
    .cook_img{
        width: 50%;
    }
</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_cook">
                        <Input type="text" style="width:250px" v-model="searchData.name_cook" 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>
        <Modal v-model="showimg" title="菜品名片">
            <img :src="showimg_url" alt="" style="width: 100%">
        </Modal>
        <Modal v-model="cookedit" title="菜品编辑">
            <Form ref="cookfrom" :model="cookformdata" :label-width="100">
                <Form-item prop="name_center" label="配送中心名">
                    <Input type="text" v-model="cookformdata.name_center" placeholder="套餐名">
                    </Input>
                </Form-item>
                <Form-item prop="name_cook" label="菜品名">
                    <Input type="text" v-model="cookformdata.name_cook" placeholder="菜品名">
                    </Input>
                </Form-item>
                <Form-item prop="name_cook" label="菜品图片">
                    <Upload :action="uploadurl"
                        :show-upload-list="false"
                        :on-success="handleSuccess"
                        :format="['jpg','jpeg','png']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :before-upload="handleBeforeUpload"
                        :data="uploaddata"
                    >
                        <Button icon="ios-cloud-upload-outline">上传文件</Button>
                    </Upload>
                </Form-item>
                <div class="cook_img_div" v-show="cookformdata.show_img">
                    <img :src="cookformdata.show_img" class="cook_img"></img>
                </div>
            </Form>
            <div slot="footer">
                <Button type="primary" size="large" long  @click="savecook">保存</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { editcookinfo, getcookslist, updatecookisactive } from '@/api/data'
import config from '@/config'
export default {
  name: 'mealcooklist',
  data () {
    var self = this
    return {
      showimg: false,
      showimg_url: '',
      list: [],
      column: [
        {
          title: 'ID',
          key: 'id',
          width: 70
        },
        {
          title: '中心名',
          key: 'name_center',
          width: 200
        },
        {
          title: '菜品名',
          key: 'name_cook'
        },
        {
          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: 'show_img',
          width: 200,
          render: function (h, params) {
            const show_image = params.row.show_img
            var div = h('div', [])
            if (show_image && show_image.length > 0) {
              var img = h('img', {
                style: {
                  'margin-top': '10px',
                  'margin-bottom': '10px',
                  'border-radius': '4px',
                  width: '80px',
                  height: '50px',
                  cursor: 'pointer'
                },
                attrs: {
                  'src': show_image
                },
                on: {
                  click: (e) => {
                    console.log(e.target.currentSrc)
                    var src = e.target.currentSrc
                    self.showuserimg(src)
                  }
                }
              })
              div = h('div', [
                img
              ])
            }
            return div
          }
        },
        {
          title: '操作',
          key: 'option',
          align: 'left',
          width: 200,
          render: function (h, params) {
            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.editinfo(params.row)
                }
              }
            }, '编辑')
            var btns = []
            if (params.row.is_active === 1) {
              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]
      },
      cookformdata: {
        id: 0,
        name_center: '',
        name_cook: '',
        show_img: ''
      },
      cookedit: false,
      uploadList: [],
      baseusrl: '',
      uploaddata: {
        dir: 'meal',
        filename: ''
      }
    }
  },
  computed: {
    uploadurl: function () {
      return this.baseusrl + '/api/fileoper/uploadfilebydir'
    }
  },
  methods: {
    showuserimg (url) {
      this.showimg_url = url
      this.showimg = true
    },
    search () {
      this.pagedata.current = 1
      this.getList()
    },
    getList () {
      this.searchData.page = this.pagedata.current
      this.searchData.size = this.pagedata.pageSize
      getcookslist(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 }
      updatecookisactive(data).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.getList()
        }
      })
    },
    editinfo (data) {
      this.cookformdata = {
        id: data.id,
        name_center: data.name_center,
        name_cook: data.name_cook,
        show_img: data.show_img
      }
      this.cookedit = true
    },
    newinfo () {
      this.cookformdata = {
        id: 0,
        name_center: '',
        name_cook: '',
        show_img: ''
      }
      this.cookedit = true
    },
    handleSuccess (res, file) {
      if (res.code == 200) {
        this.cookformdata.show_img = res.resultData
      }
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg、jpeg、png 格式的图片。'
      })
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: '超出文件大小限制',
        desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
      })
    },
    handleBeforeUpload () {
      this.uploaddata.filename = this.cookformdata.name_cook
      const check = this.uploadList.length < 1
      if (!check) {
        this.$Notice.warning({
          title: '最多只能上传 1 张图片。'
        })
      }
      return check
    },
    savecook () {
      this.cookedit = false
      var cookinfo = this.cookformdata
      editcookinfo(cookinfo).then(res => {
        const data = res.data
        if (data.code !== 200) {
          this.$Message.error(data.msg)
        } else {
          this.getList()
        }
      })
    }
  },
  mounted () {
    this.getList()
    this.baseusrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
  }
}
</script>
