<template>
  <div class="currentorder">
    <person-title>当前位置 :: 我的订单 >> <em>所有订单</em></person-title>
    <div class="currentorder-cont">
      <div class="findOrder-search">
        <el-form :inline="true" :model="selectData" class="user-findOrder">
          <el-form-item label="查询条件">
            <el-select v-model="selectData.status" clearable placeholder="选择查询条件">
              <!--              状态1:待取件 2:运输 3:送到 4:收取 前端返回值为-->
              <el-option label="待取件" :value="1"></el-option>
              <el-option label="运输中" :value="2"></el-option>
              <el-option label="待收取" :value="3"></el-option>
              <el-option label="完成" :value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入">
            <el-input v-model="selectData.name" clearable placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="请输入">
            <el-input v-model="selectData.phone" clearable placeholder="电话"></el-input>
          </el-form-item>
          <el-form-item label="请输入">
            <el-input v-model="selectData.company" clearable placeholder="快递公司"></el-input>
          </el-form-item>
          <el-button type="primary" v-on:click="getUserOrder()">查询</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">
          暂时没有订单 , 赶紧去

          <a href="" @click.prevent="handleGotoNewOrde"
          > 发布订单 </a>吧
        </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.decs }}</span>
              </el-form-item>
              <el-form-item>
              </el-form-item>
              <template v-if="props.row.status!=2">
                <el-form-item label="接单人员 :">
                  <span>{{ props.row.courier.username }}</span>
                </el-form-item>
                <el-form-item label="接单人电话 :">
                  <span>{{ props.row.courier.phone }}</span>
                </el-form-item>
                <el-form-item v-if="props.row.status==2" label="接单时间 :">
                  <span>{{ props.row.lastTime }}</span>
                </el-form-item>
                <el-form-item v-if="props.row.status==3" label="送达时间 :">
                  <span>{{ props.row.lastTime }}</span>
                </el-form-item>
                <el-form-item v-if="props.row.status==4" label="收取时间 :">
                  <span>{{ props.row.lastTime }}</span>
                </el-form-item>
              </template>
              <!--              <el-form-item label="发布时间 :">-->
              <!--                <span>{{ props.row.createTime }}</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
          prop="status"
          label="快递状态"
          filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status==1">待取件
            </el-tag>
            <el-tag
              type="warning" v-if="scope.row.status==2"
            >运输中
            </el-tag>
            <el-tag
              type="danger" v-if="scope.row.status==3"
              disable-transitions>待收取
            </el-tag>
            <el-tag
              type="success" v-if="scope.row.status==4"
              disable-transitions>完成
            </el-tag>
          </template>
        </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='danger'
                key='Cancel'
                v-on:click="cancel(scope.row.id)"
              >取消订单
              </el-button>
              <!-- handleSuccess(scope.$index, scope.row) -->
            </template>
            <template v-if="scope.row.status==3">
              <el-button
                size="mini"
                key='Delete'
                v-on:click="chargeOrder(scope.row.id)"
              >确认收货
              </el-button>
            </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 {getSelfOrderLst, cancelO, charge} 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: 3, columnTitle: '发布时间', prop: 'createTime'}
      ]
    }
  },
  created () {
    this.getUserOrder()
  },
  methods: {
    chargeOrder (id) {
      this.$confirm(`是否确认送达,完成订单?`,
        '确认送达', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
        let formData = {
          id: id
        }
        charge(formData).then((res) => {
          console.log(res)
          let resData = res.data
          if (resData.success) {
            this.$message({
              type: 'success',
              message: '订单完成'
            })
            this.getUserOrder()
          } else {
            this.$message({
              type: 'error',
              message: resData.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    cancel (id) {
      let data = {
        orderid: id
      }
      cancelO(data).then((res) => {
        let data = res.data
        console.log(data)
        if (data.success) {
          this.$message({
            type: 'success',
            message: data.msg
          })
          setTimeout(this.getUserOrder, 500)
        } else {
          this.$message({
            type: 'error',
            message: data.msg
          })
        }
      })
    },
    getUserOrder () {
      let loading = this.$loading({lock: true, text: '玩命加载中...'})
      getSelfOrderLst(this.selectData).then((res) => {
        var data = res.data
        loading.close()
        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
          })
        }
      }).catch(function () {
        loading.close()
      })
    },
    updateHandler () {
      this.OrderData = {...this.OrderData}
    },
    handleCancel (data) {
      // 如果已接单接不可以取消
      this.$confirm('此操作将取消订单, 是否继续?',
        '取消订单', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
        // let loading = this.$loading({lock:true,text:'正在取消订单...'});
        // axios.get(`/users/cancelCurrentOrder?orderId=${data.orderId}`).then(response=>{
        //     let res = response.data;
        //     loading.close();
        //     if(res.status=='0'){
        //         this.$message({
        //             type: 'success',
        //             message: '取消成功!'
        //         });
        //         let mode = this.totalOrder % this.selectData.size;
        //         if(mode ===1){ //判断是否当页最后一条
        //             this.selectData.page --;
        //         }
        //         this.getUserOrder();
        //     }else{
        //         this.$message({
        //             type: 'error',
        //             message:res.msg
        //         });
        //     }
        // }).catch(err=>{
        //     console.log(err);
        // });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    handleCompleted (orderData) {
      // 完成订单
      this.$confirm(`是否确认送达,完成订单?`,
        '支付订单', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
        // let loading = this.$loading({lock:true,text:'正在完成订单...'});
        // axios.post(`/users/completedCurrentOrder`,orderData).then(response=>{
        //     let res = response.data;
        //     loading.close();
        //     if(res.status=='0'){
        //         this.$message({
        //             type: 'success',
        //             message: '收货成功!'
        //         });
        //         let mode = this.totalOrder % this.selectData.size;
        //         if(mode ===1){ //判断是否当页最后一条
        //             this.selectData.page --;
        //         }
        //         this.getUserOrder();
        //     }else{
        //         this.$message({
        //             type: 'error',
        //             message:res.msg
        //         });
        //     }
        // }).catch(err=>{
        //     console.log(err);
        // });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    handleSizeChange (val) {
      this.selectData.size = val
      this.getUserOrder()
    },
    handleCurrentChange (val) {
      this.selectData.page = val
      this.getUserOrder()
    }
  }
}
</script>

<style lang='scss'>

.pageination-oder{  //订单页中的分页样式
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  //margin-top: 1rem;
  bottom: -3rem;
}

.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>
