<template>
  <div class="currentorder">
    <person-title>当前位置 :: 接单大厅 >> <em>订单列表</em></person-title>
    <div class="currentorder-cont">
      <div class="findOrder-search">
        <el-form :inline="true" :model="findOrderForm" class="user-findOrder">
          <el-form-item label="查询条件">
            <el-select v-model="findOrderForm.condition" placeholder="选择查询条件">
              <el-option label=" " value="1"></el-option>
              <el-option label="姓名" value="name"></el-option>
              <el-option label="电话" value="phone"></el-option>
              <el-option label="快递公司" value="company"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入">
            <el-input v-model="findOrderForm.answers" placeholder="查询条件"></el-input>
          </el-form-item>
          <el-button type="primary" v-on:click="queryData()">查询</el-button>
        </el-form>
      </div>
      <el-table
        :data="OrderData"
        class="userOrderList"
        :default-sort="{prop: 'createTime', order: 'descending'}"
        style="width: 100%">
        <div class="emptyTip" slot="empty">
          已经没有订单了.休息一下吧
        </div>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left"
                     inline class="userTable demo-table-expand">
              <el-form-item label="订单号 :">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="收货人姓名 :">
                <span>{{props.row.name}}</span>
              </el-form-item>
              <el-form-item label="电话 :">
                <span>{{props.row.phone}}</span>
              </el-form-item>
              <el-form-item label="快递大小 :">
                <span>{{ props.row.typeDesc }}</span>
              </el-form-item>
              <el-form-item label="快递公司 :">
                <span>{{ props.row.company}}</span>
              </el-form-item>
              <el-form-item label="取货码 :">
                <span>{{props.row.number}}</span>
              </el-form-item>
              <el-form-item label="公寓 :">
                <span>{{props.row.flats}}</span>
              </el-form-item>
              <el-form-item label="寝室号 :">
                <span>{{props.row.hostel}}</span>
              </el-form-item>
              <el-form-item label="发布时间 :">
                <span>{{ props.row.createTime }}</span>
              </el-form-item>
              <el-form-item label="备注 :">
                <span>{{ props.row.decs }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          v-for="item in titleList"
          :key='item.id'
          :sortable='item.sortable'
          :label="item.columnTitle"
          :prop="item.prop">
        </el-table-column>
        <el-table-column>
          <template slot="header" slot-scope="scope">操作
          </template>
          <template slot-scope="scope">
            <template v-if="scope.row.status==1">
              <el-button
                size="mini"
                class="btn-cancel"
                type='success'
                key='Cancel'
                v-on:click="getOrder(scope.row.id)"
              >接受此单
              </el-button>
              <!-- handleSuccess(scope.$index, scope.row) -->
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageination-oder">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="4"
        :page-sizes="[10, 50, 80, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalOrder">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {getCourierLst, getTack} from '../../../api/order'
  import {formData} from '../../../unit/formDate'

  export default {
    data () {
      return {
        findOrderForm: {
          condition: '',
          answers: ''
        },
        OrderData: null,
        selectData: {
          page: 1,
          size: 10,
          flats: '',
          name: '',
          phone: '',
          company: '',
          starttime: '',
          endtime: '',
          type: '',
          status: '',
        },
        totalOrder: 0,
        showPagination: true,
        listType: {
          noCompBtn: true
        },
        titleList: [
          {id: 1, columnTitle: '订单号', prop: 'id'},
          {id: 2, columnTitle: '姓名', prop: 'name'},
          {id: 2, columnTitle: '公寓号', prop: 'flats'},
        ]
      }
    },
    created () {
      this.getUserOrder()
    },
    methods: {
      queryData(){
        var data = this.findOrderForm
        this.selectData.company=''
        this.selectData.phone=''
        this.selectData.name=''
        this.selectData.name=''
        if (data.condition == 'flats'){
        }else if (data.condition == 'name'){
          this.selectData.name=data.answers
        }else if (data.condition == 'name'){
          this.selectData.name=data.answers
        }else if (data.condition == 'phone'){
          this.selectData.phone=data.answers
        }else if (data.condition == 'company'){
          this.selectData.company=data.answers
        }
        this.getUserOrder()
      },
      getUserOrder () {
        let loading = this.$loading({lock: true, text: '玩命加载中...'})
        getCourierLst(this.selectData).then((res) => {
          setTimeout(loading.close(),1000)
          var data = res.data
          if (data.success) {
            this.OrderData = []
            var list = data.data.list
            for (let i = 0; i < list.length; i++) {
              var dataitem = list[i]
              dataitem.lastTime = formData(list[i].lastTime, 'yyyy-MM-dd hh:mm:ss')
              dataitem.createTime = formData(list[i].createTime, 'yyyy-MM-dd hh:mm:ss')
              this.OrderData.push(dataitem)
            }
            this.totalOrder = data.data.count
          }else {
            this.$message({
              type: 'info',
              message: data.msg
            })
          }
        })
      },
      getOrder (id) {
        let data = {
          id: id
        }
        getTack(data).then((res) => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: res.data.msg
            })
            this.getUserOrder()
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
      },
      handleSizeChange (val) {
        this.selectData.size = val
        this.getUserOrder()
      },
      handleCurrentChange (val) {
        this.selectData.page = val
        this.getUserOrder()
      },
    }
  }
</script>

<style lang='scss'>
  .userOrderList {
    .el-message {
      top: 5rem;
    }

    .el-button {
      width: 4.2rem;
      height: 1.5rem;
      line-height: 1.5rem;
      padding: 0;

      span {
        font-size: 0.6rem;
      }
    }

    //交易操作
    .btn-cancel {
      margin-right: 0.2rem;
      margin-bottom: 0.3rem;
    }

    .btn-success {
      /*background-color: #409eff;*/
      /*color: #fff;*/

      &:hover {
        /*background-color: lighten(#409eff, 5%);*/
      }
    }

    // 当前订单没有数据时候
    .emptyTip a {
      color: rgb(226, 137, 137);

      &:hover {
        color: rgb(214, 29, 29);
      }
    }

    .el-button + .el-button {
      margin-left: 0;
    }

    // 展开详情后文本 的span
    .horder .el-form-item__content span,
    .currentorder .el-form-item__content span {
      margin-right: 0.5rem;
    }

    .demo-table-expand {
      font-size: 0;
    }

    .demo-table-expand label {
      width: 6.2rem;
      color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }

  .el-button {
    margin: 0 auto;
  }
  .findOrder-search{
    padding-top: 1rem;
  }
</style>
