<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="orderno">
                        <Input type="text" style="width:250px" v-model="searchData.orderno" placeholder="订单号">
                        </Input>
                    </Form-item>
                    <Form-item>
                        <Date-picker type="datetimerange" placeholder="创建时间" style="width: 300px" @on-change="timechange"></Date-picker>
                    </Form-item>
                    <Form-item prop="status">
                        <Select v-model="searchData.status" style="width:150px" placeholder="状态">
                            <Option value="">全部</Option>
                            <Option value="0">{{ $t('status_0') }}</Option>
                            <Option value="1">{{ $t('status_1') }}</Option>
                            <Option value="2">{{ $t('status_2') }}</Option>
                            <Option value="-1">{{ $t('status_error_1') }}</Option>
                        </Select>
                    </Form-item>
                    <Form-item prop="status_delivery">
                        <Select v-model="searchData.status_delivery" style="width:150px" placeholder="配送状态">
                            <Option value="">全部</Option>
                            <Option value="0">{{ $t('status_delivery_0') }}</Option>
                            <Option value="1">{{ $t('status_delivery_1') }}</Option>
                            <Option value="2">{{ $t('status_delivery_2') }}</Option>
                        </Select>
                    </Form-item>
                    <Form-item>
                        <Button type="primary" @click="search">搜索</Button>
                    </Form-item>
                </Form>
            </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="showdetail" title="订单详细" width="1000">
            <div class="title1"> {{ detailinfo.orderno }}</div>
            <Row :gutter="10" class="title_body">
                <Col span="8">中心名称：{{detailinfo.name_center}}</Col>
                <Col span="8">订购份数：{{detailinfo.quantity}}</Col>
                <Col span="8">价格：{{detailinfo.money}}</Col>
                <Col span="8">
                    <span class="my_tab1_primary">状态</span>：
                    <span v-if="detailinfo.status>=0">{{$t('status_' + detailinfo.status)}}</span>
                    <span v-else>{{$t('status_error' + Math.abs(detailinfo.status))}}</span>
                </Col>
                <Col span="8">
                    <span class="my_tab1_primary">配送状态</span>：
                    {{$t("status_delivery_"+detailinfo.status_delivery)}}
                </Col>
                <Col span="8">创建时间：{{detailinfo.createtime}}</Col>
                <Col span="8">支付时间：{{detailinfo.paytime}}</Col>
                <Col span="8">到货时间：{{detailinfo.deliverytime}}</Col>
                <Col span="24">备注：{{detailinfo.remark}}</Col>
                <Col span="24">
                    菜品：
                    <span v-for="item in detailinfo.detail" :key="item.id" style="margin-right: 10px;">{{item.name_cook}}</span>
                </Col>
            </Row>
            <div class="title1">收货人</div>
            <Row :gutter="10" class="title_body">
                <Col span="6">收货地址：{{detailinfo.receiver_address}}</Col>
                <Col span="6">收货人姓名：{{detailinfo.receiver_username}}</Col>
                <Col span="6">收货人手机号：{{detailinfo.receiver_phone}}</Col>
            </Row>
            <div slot="footer">
            </div>
        </Modal>
    </div>
</template>
<script>
import { getmealorderlist } from '@/api/data'
export default {
  data () {
    var self = this
    return {
      searchData: {
        name_center: '',
        orderno: '',
        createtime: [],
        status_delivery: ''
      },
      detailinfo: [],
      showdetail: false,
      column: [
        {
          title: 'ID',
          key: 'id',
          width: 70
        },
        {
          title: '中心名',
          key: 'name_center',
          width: 200
        },
        {
          title: '订单号',
          key: 'orderno'
          // width: 70
        },
        {
          title: '订购份数',
          key: 'quantity'
        },
        {
          title: '价格',
          key: 'money'
        },
        {
          title: '状态',
          key: 'status',
          width: 100,
          render: function (h, params) {
            let status = params.row.status
            let statusstr = ''
            if (status >= 0) {
              statusstr = self.$t('status_' + params.row.status)
            } else {
              statusstr = self.$t('status_error' + Math.abs(status))
            }
            var div = h('div', {}, statusstr)
            return div
          }
        },
        {
          title: '配送状态',
          key: 'status_delivery',
          width: 100,
          render: function (h, params) {
            let status = params.row.status_delivery
            let statusstr = self.$t('status_delivery_' + status)
            var div = h('div', {}, statusstr)
            return div
          }
        },
        {
          title: '创建时间',
          key: 'createtime',
          width: 150
        },
        {
          title: '支付时间',
          key: 'paytime',
          width: 150
        },
        {
          title: '操作',
          key: 'option',
          align: 'left',
          width: 150,
          render: function (h, params) {
            var btn1 = h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click: (data) => {
                  self.detailinfo = params.row
                  self.showdetail = true
                }
              }
            }, '详细')
            var btns = []
            btns.push(btn1)
            return btns
          }
        }
      ],
      list: [],
      pagedata: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOpts: [10, 50, 100]
      }
    }
  },
  methods: {
    timechange (value) {
      this.searchData.createtime = value
    },
    search () {
      this.pagedata.current = 1
      this.getList()
    },
    getList () {
      this.searchData.page = this.pagedata.current
      this.searchData.size = this.pagedata.pageSize
      getmealorderlist(this.searchData).then(res => {
        const data = res.data
        console.log(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()
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
