<template>
  <div class="mlt">
    <div>
      <el-form :inline="true" class="orderform" size="mini">
        <el-row>
          <el-form-item>
            <el-input v-model="tag" style="width: 250px" placeholder="请输入手机号码" class="search_tag" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="btn_search()"><i class="el-icon-search"/> 查询</el-button>
            <el-button @click="btn_clear()"><i class="el-icon-remove-outline"/> 重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :highlight-current-row="true"
        border>
        <el-table-column
          prop="id"
          label="编号"/>
        <el-table-column
          prop="submitDate"
          label="订单日期"/>
        <el-table-column
          :formatter="formatStatus"
          prop="isPayment"
          label="已付款给供应商"/>
        <el-table-column
          :formatter="formatStatus"
          prop="isReceivables"
          label="已收到客户款"/>
        <el-table-column
          :formatter="formatStatus"
          prop="isSend"
          label="已发货给客户"/>
        <el-table-column
          prop="courierCompany"
          label="快递公司"/>
        <el-table-column
          prop="courierNumber"
          label="快递单号"/>
        <el-table-column
          prop="customerAddress.address"
          label="收货地址"/>
        <el-table-column
          prop="customer.name"
          label="客户"/>
        <el-table-column
          prop="freight"
          label="运费"/>
        <el-table-column
          prop="costPrice"
          label="成本价"/>
        <el-table-column
          prop="salesPrice"
          label="销售总价"/>
        <el-table-column
          prop="profit"
          label="利润"/>
        <el-table-column
          prop="userName"
          label="创建者"/>
        <el-table-column
          prop="createTime"
          label="创建时间"/>
        <el-table-column
          :formatter="formatDeliveryType"
          prop="deliveryType"
          label="送货方式"/>
        <el-table-column
          :formatter="formatPayWay"
          prop="payWay"
          label="付款方式"/>
        <el-table-column
          prop="realReceive"
          label="实收金额"/>
        <el-table-column
          prop="discounts"
          label="优惠金额"/>
        <el-table-column
          prop="debt"
          label="欠款金额"/>
        <el-table-column
          prop="salenote"
          label="订单备注"/>
          <!--el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 0" type="text" @click="processOrder(scope.row)">处理订单</el-button>
            <el-button v-if="scope.row.status === 1" type="text" @click="processCancelOrder(scope.row)">取消订单</el-button>
            <el-button v-if="scope.row.status === 1" type="text" @click="processFinishOrder(scope.row)">完成</el-button>
            <el-button type="text" @click="deleteOrder(scope.row)">删除</el-button>
          </template>
        </el-table-column-->
      </el-table>
      <div class="mydiv">
        <el-pagination
          :current-page.sync="pageNo"
          :page-sizes="[10, 50, 100, 300,1000]"
          :page-size="pageSize"
          :total="totalDataNumber"
          layout="sizes,total, prev, pager, next"
          class="table-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>

    </div>
    <el-dialog :visible.sync="chooseDialogVisible" title="订单处理">
      <el-form :model="form" :label-width="formLabelWidth" >
        <el-form-item label="选择定制师">
          <el-select v-model="form.userId" placeholder="请选择">
            <el-option
              v-for="item in users"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="processOrderCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="processOrderSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="chooseCaseDialogVisible" title="订单处理">
      <el-form :model="form" :label-width="formLabelWidth" >
        <el-form-item label="选择案例">
          <el-select v-model="form.caseId" placeholder="请选择">
            <el-option
              v-for="item in cases"
              :key="item.id"
              :label="item.caseTitle"
              :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="processOrderCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="processFinishOrderSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="cancelCaseDialogVisible" title="订单处理">
      <el-form :model="form" :label-width="formLabelWidth" >
        <el-form-item label="取消订单原因">
          <el-input v-model="form.cancelReason" placeholder="请输入取消原因" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="processOrderCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="processCancelOrderSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 点击删除按钮，删除确认框-->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      title="提示"
      width="30%">
      <span>确定删除选择的订单? </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteOrderSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'OrderMngr',
  data() {
    return {
      tag: '',
      allData: [], // 所有前端分页数据
      tableData: [], // 表格数据 仅展示当前页的数据
      pageNo: 1, // 当前页数
      totalDataNumber: 0, // 总记录数
      pageSize: 10,
      formLabelWidth: '150px',
      users: [],
      cases: [],
      form: {
        userId: '',
        caseId: '',
        cancelReason: ''
      },
      chooseDialogVisible: false,
      chooseCaseDialogVisible: false,
      cancelCaseDialogVisible: false,
      deleteDialogVisible: false,
      deleteOrderId: '',
      orderId: ''
    }
  },
  created() {
    this.btn_search()
  },
  methods: {
    btn_search() {
      const vm = this
      axios.get(process.env.BASE_API + '/order/listpage', {
        params: {
          tag: this.tag,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.totalDataNumber = 0
          vm.allData = []
          vm.tableData = []
        } else {
          vm.totalDataNumber = parseInt(obj.data.totalElements)
          if (vm.totalDataNumber > 0) {
            vm.allData = obj.data.content
            vm.tableData = obj.data.content // obj.data.slice(0, vm.pageSize)
          } else {
            vm.allData = []
            vm.tableData = []
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    btn_clear() {
      this.tag = ''
      this.pageNo = 1
      this.btn_search()
    },
    handleCurrentChange() {
      // this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
      this.btn_search()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.btn_search()
      // this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    processOrder(ob) {
      this.orderId = ob.id
      this.chooseDialogVisible = true
    },
    processFinishOrder(ob) {
      this.orderId = ob.id
      this.chooseCaseDialogVisible = true
    },
    processCancelOrder(ob) {
      this.orderId = ob.id
      this.cancelCaseDialogVisible = true
    },
    processOrderCancel() {
      this.chooseDialogVisible = false
      this.chooseCaseDialogVisible = false
      this.cancelCaseDialogVisible = false
    },
    processOrderSubmit() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.orderId)
      params.append('userId', vm.form.userId)
      axios.post(process.env.BASE_API + '/order/assignorder', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message.info(obj.message)
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.chooseDialogVisible = false
    },
    processFinishOrderSubmit() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.orderId)
      params.append('caseId', vm.form.caseId)
      axios.post(process.env.BASE_API + '/order/finishorder', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message.info(obj.message)
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.chooseCaseDialogVisible = false
    },
    processCancelOrderSubmit() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.orderId)
      params.append('cancelReason', vm.form.cancelReason)
      axios.post(process.env.BASE_API + '/order/cancelorder', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message.info(obj.message)
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.cancelCaseDialogVisible = false
    },
    typeFormatter(ob) {
      if (ob.type === undefined) {
        return ''
      } else if (ob.type === 1) {
        return '校园定制'
      } else if (ob.type === 2) {
        return '企业定制'
      } else {
        return '未知'
      }
    },
    formatStatus(ob) {
      if (ob.isPayment === undefined) {
        return ''
      } else if (ob.isPayment === 0) {
        return '否'
      } else if (ob.isPayment === 1) {
        return '是'
      } else if (ob.isReceivables === 0) {
        return '否'
      } else if (ob.isReceivables === 1) {
        return '是'
      } else if (ob.isSend === 0) {
        return '否'
      } else if (ob.isSend === 1) {
        return '是'
      } else {
        return '未知'
      }
    },
    formatDeliveryType(ob) {
      if (ob.isPayment === undefined) {
        return ''
      } else if (ob.isPayment === 1) {
        return '快递'
      } else if (ob.isPayment === 2) {
        return '上门'
      } else if (ob.isReceivables === 3) {
        return '自取'
      } else {
        return ''
      }
    },
    formatPayWay(ob) {
      if (ob.payWay === undefined) {
        return ''
      } else if (ob.payWay === 1) {
        return '现金'
      } else if (ob.payWay === 2) {
        return '刷卡'
      } else if (ob.payWay === 3) {
        return '支付宝'
      } else if (ob.payWay === 4) {
        return '微信'
      } else {
        return ''
      }
    },
    deleteOrder(ob) {
      this.deleteOrderId = ob.id
      this.deleteDialogVisible = true
    },
    deleteOrderSubmit() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', this.deleteOrderId)
      axios.post(process.env.BASE_API + '/order/delete', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message.info(obj.message)
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.deleteDialogVisible = false
    }
  }
}
</script>

<style scoped>
  .mlt {
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
  }
</style>
