<!-- 商家订单管理 -->
<template>
    <div class="execution">
        <basic-container>
            <avue-crud ref="crud"
                       :page.sync="page"
                       :data="tableData"
                       :permission="permissionList"
                       :table-loading="tableLoading"
                       :option="tableOption"
                       @on-load="getList"
                       @search-change="searchChange"
                       @refresh-change="refreshChange"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       @row-update="handleUpdate"
                       @row-save="handleSave"
                       @row-del="handleDel">
              <!--  1.行内按钮-->
              <template slot-scope="scope" slot="menu">
                <el-button  type="button" size="small"
                            @click="checkTheDetails(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">详情</el-button>
                <el-button  type="button" size="small"
                            v-if="scope.row.state == 8"
                            @click="viewLogistics(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">查看物流</el-button>
                <el-button type="button" size="small"
                           v-if="scope.row.state == 1"
                           @click="shipsImmediately(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">立即发货</el-button>
                <el-button type="button" size="small"
                           v-if="contains(scope.row)!=-1"
                           @click="handleDel(scope.row)" style="color: #409EFF;margin: 5px;padding: 0px;border: 0px">删除</el-button>
              </template>
            </avue-crud>
        </basic-container>
      <!-- 1.取消订单 -->
      <el-dialog
        title="取消订单" :visible.sync="dialogVisible" width="40%"
        :before-close="handleClose">
        <p>快递单号 :{{this.form.waybillNo}}</p><p></p>
        <div class="block">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp">
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-dialog>

      <!-- 2.查看物流对话框 -->
      <el-dialog
        title="订单物流" :visible.sync="dialogVisible" width="40%"
        :before-close="handleClose">
        <p>快递单号 :{{this.form.waybillNo}}</p><p></p>
        <div class="block">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp">
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-dialog>

      <!-- 3.立即发货对话框 -->
      <el-dialog
        title="订单发货" :visible.sync="dialogVisibleShipsImmediately" width="40%"
        :before-close="handleClose">
        <el-form ref="form" :model="form">
            <el-form-item :initDropDownBox="initDropDownBox" label="请选择快递公司 :" prop="expressCompany" label-width="200px">
              <!-- 下拉 -->
              <el-select v-model="form.expressCompany" size="30px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          <el-form-item  label="请填写快递单号 :" prop="waybillNo" label-width="200px">
            <el-input v-model="form.waybillNo" size="30px"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部 -->
        <span slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="loading" @click="confirmDelivery"
                           style="width: 200px; height: 40px;display:block;margin:0 auto;" >
                  确认发货</el-button>
            </span>
      </el-dialog>

    </div>
</template>

<script>
    import {fetchList,shipsImmediately} from '@/api/mall/merchantMallorder'
    import {tableOption} from '@/const/crud/mall/merchantMallorder'
    import {mapGetters} from 'vuex'
    export default {
        name: 'businessorder',
        data() {
            return {
              paymentVoucher: '',
              activities: [],// 查看物流当前状态
              options:[],// 快递公司下拉
              loading:false,
              form:{
                orderNo:0,
                expressCompany:2,//快递公司
                waybillNo:'',//快递单号
              },
                dialogVisibleShipsImmediately:false,//立即发货对话框
                dialogVisible: false,// 查看物流对话框
                dialogVisibleConfirmPayment:false,// 确认支付对话框
                cancelOrderVue:false,
                nowRow:undefined,
                searchForm: {},
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 0, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                tableOption: tableOption
            }
        },
        // 自定义的组件
        components: {
        },
        computed: {
          initDropDownBox(){
            this.$axios.get("/general/mallExpressCompany/dropDownBox/courierCompany").then(e =>{
              this.options=Object.values(e.data)
            })
          },
          ...mapGetters(['permissions']),
          permissionList() {
              return {
                  addBtn: this.vaildData(this.permissions.admin_mallorder_add, false),
                  delBtn: this.vaildData(this.permissions.admin_mallorder_del, false),
                  editBtn: this.vaildData(this.permissions.admin_mallorder_edit, false)
              };
          }
        },
        methods: {
          contains: function (row) {
            let str=row.state
            let text='1,6,3,5'
            return text.search(str)
          },

          // 立即发货-对话框
          shipsImmediately(row){
            this.form.orderNo=row.orderNo
            this.$axios.get("/admin/merchantMallOrder/isVirtualGoods",{
              params:{orderNo:row.orderNo},
            }).then(response => {
              if(response.data.data){
                this.form.orderNo=row.orderNo
                this.dialogVisibleShipsImmediately = true
              }else {
                  // 虚拟商品 二次确认直接发货
                  this.$confirm('是否确认发货？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(data => {
                    shipsImmediately(this.form).then(r => {
                      this.$message.success('发货成功')
                      this.getList(this.page)
                    }).catch(e =>{
                      console.log('错误', e.message)
                    })
                  })
              }
            }, error => {
              console.log('错误', error.message)
            })

          },
          // 确认发货-提交按钮
          confirmDelivery(){
              shipsImmediately(this.form).then(r => {
                this.dialogVisibleShipsImmediately = false
                this.$message.success('发货成功')
                this.getList(this.page)
                return r.data
              }).catch(e =>{
                console.log('错误', e.message)
              })

          },
          // 关闭对话框-查看物流
          handleClose(done) {done();},
          // 更改完成
          onChangeDone() {
            this.cancelOrderVue =false
            this.refreshChange()
          },
          // 查看物流-对话框
          viewLogistics(row){
            // 1.打开对话框
            this.dialogVisible = true
            this.form.waybillNo=row.waybillNo

             this.activities=[{content: '快递送至【成都市】物流运转中心', timestamp: '2018-04-11'}
                            ,{color: '#0bbd87',content: '快递送至【成都市】物流运转中心', timestamp: '2018-04-11'}
                            ,{content: '快递送至【成都市】物流运转中心', timestamp: '2018-04-11'}]
          },
          // 取消订单
          cancelOrder(row){
            this.cancelOrderVue=true
            this.nowRow=row
          },
          // 查看详情
          checkTheDetails(row){
            this.$router.push('/businessOrder/details?id=' + row.orderNo)
          },
          // 列表查询
          getList(page, params) {
            this.tableLoading = true
            fetchList(Object.assign({
                  current: page.currentPage,
                  size: page.pageSize
              }, params, this.searchForm )).then(response => {
                  this.tableData = response.data.data.records
                  this.page.total = response.data.data.total
                  this.tableLoading = false
              }).catch(() => {
                  this.tableLoading=false
              })
          },
          // 删除
          handleDel: function (row, index) {
              this.$confirm('是否确认删除？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(function () {
                  return delObj(row.orderNo)
              }).then(data => {
                  this.$message.success('删除成功')
                  this.getList(this.page)
              })
          },
          // 批量删除
          handleDelBatch() {
              if (this.$refs.crud.tableSelect.length === 0) {
                  this.$message.error('请选择项进行删除')
                  return false
              }
              let ids = []
              for (const row of this.$refs.crud.tableSelect) {
                  ids.push(row.id)
              }

              this.$confirm('是否确认删除？', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(function () {
                  return delObj(ids)
              }).then(data => {
                  this.$notify.success('删除成功')
                  this.$refs.crud.toggleSelection();
                  this.refreshChange();
              })
          },
          // 更新
          handleUpdate: function (row, index, done,loading) {
              putObj(row).then(data => {
                  this.$message.success('修改成功')
                  done()
                  this.getList(this.page)
              }).catch(() => {
                  loading();
              });
          },
          // 保存
          handleSave: function (row, done,loading) {
              addObj(row).then(data => {
                  this.$message.success('添加成功')
                  done()
                  this.getList(this.page)
              }).catch(() => {
                  loading();
              });
          },
          // 每页条数改变事件
          sizeChange(pageSize){
              this.page.pageSize = pageSize
          },
          // 当前页发生改变事件
          currentChange(current){
              this.page.currentPage = current
          },
          // 查询事件
          searchChange(form, done) {
              this.searchForm = form
              // this.page.currentPage = 0
              this.getList(this.page, form)
              done()
          },
          // 刷新事件
          refreshChange() {
              this.getList(this.page)
          },
        }
    }
</script>
