<template>
  <div class="detail-container"
       v-loading="tableLoading">
    <el-card shadow="never" style="margin-top: 10px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">当前订单状态：{{ ['待支付', '已支付', '全部退款', '部分退款', '已取消'][order.order_status] }}</span>
        <div class="operate-button-container">
          <el-button size="mini"
                     @click="$router.go(-1)">返回
          </el-button>
          <el-button size="mini"
                     type="primary"
                     :disabled="!([1,3].findIndex(item => item === order.order_status) > -1) || order.order_pay_type === 3"
                     v-permission="'business_oms_detail_refund'"
                     @click="refundDialogVisible = true">退款
          </el-button>
        </div>
      </div>
      <div style="margin-top: 20px">
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="3" class="table-cell-title">订单ID</el-col>
          <el-col :span="7" class="table-cell-title">下单时间</el-col>
          <el-col :span="7" class="table-cell-title">支付方式</el-col>
          <el-col :span="7" class="table-cell-title">支付时间</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="table-cell">{{ $route.query.id }}</el-col>
          <el-col :span="7" class="table-cell">{{ order.created_at }}</el-col>
          <el-col :span="7" class="table-cell">{{ ['', '微信', '支付宝', '现场支付'][order.order_pay_type] }}</el-col>
          <el-col :span="7" class="table-cell">{{ order.order_pay_time }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="table-cell-title">桌号</el-col>
          <el-col :span="7" class="table-cell-title">下单用户</el-col>
          <el-col :span="7" class="table-cell-title">下单手机号</el-col>
          <el-col :span="7" class="table-cell-title"
                  style="background: transparent; color: transparent;border-bottom: none;">其它
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="table-cell">{{ order.place_number }}</el-col>
          <el-col :span="7" class="table-cell">{{ order.user_name }}</el-col>
          <el-col :span="7" class="table-cell">{{ order.user_phone }}</el-col>
          <el-col :span="7" class="table-cell"></el-col>
        </el-row>
      </div>
      <div style="margin-top: 20px">
        <span class="font-small">商品信息</span>
      </div>
      <el-table
        ref="orderItemTable"
        :data="order.products"
        style="width: 100%;margin-top: 20px"
        border>
        <el-table-column label="商品图片"
                         width="120"
                         align="center">
          <template slot-scope="scope">
            <img :src="scope.row.product_img_url"
                 alt=""
                 style="height: 80px">
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="product_name"></el-table-column>
        <el-table-column label="商品sku" prop="product_sku"></el-table-column>
        <el-table-column label="出单位置">
          <template slot-scope="scope">
            <p>{{ ['', '厨房', '柜台'][scope.row.product_place] }}</p>
          </template>
        </el-table-column>
        <el-table-column label="商品附加">
          <template slot-scope="scope">
            <el-tag v-for="(item, index) in scope.row.product_attach.split(',')"
                    :key="index">{{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="数量" prop="product_num"></el-table-column>
        <el-table-column label="商品单价（元）">
          <template slot-scope="scope">
            <p>{{ scope.row.product_unit_price | fen2Yuan }}</p>
          </template>
        </el-table-column>
        <el-table-column label="商品总价格（元）">
          <template slot-scope="scope">
            <p>{{ scope.row.product_price | fen2Yuan }}</p>
          </template>
        </el-table-column>
        <el-table-column label="退款金额（元）">
          <template slot-scope="scope">
            <p>{{ scope.row.product_refund_price | fen2Yuan }}</p>
          </template>
        </el-table-column>
        <el-table-column label="商品状态" fixed="right">
          <template slot-scope="scope">
            <p>{{ ['待支付', '已支付', '全部退款', '部分退款', '已取消'][scope.row.product_status] }}</p>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 60px">
        <span class="font-small">费用信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">合计</el-col>
          <el-col :span="5" class="table-cell-title">退款金额</el-col>
          <el-col :span="5" class="table-cell-title">优惠券</el-col>
          <el-col :span="5" class="table-cell-title">预付款金额</el-col>
          <el-col :span="5" class="table-cell-title">实付金额</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">￥{{ order.order_price | fen2Yuan }}</el-col>
          <el-col :span="5" class="table-cell">-￥{{ order.order_refund_price | fen2Yuan }}</el-col>
          <el-col :span="5" class="table-cell">-￥{{ order.order_coupon_price | fen2Yuan }}</el-col>
          <el-col :span="5" class="table-cell">￥{{ order.order_prepare_price | fen2Yuan }}</el-col>
          <el-col :span="5" class="table-cell">￥{{ order.order_pay_price | fen2Yuan }}</el-col>
        </el-row>
      </div>
    </el-card>
    <el-dialog title="退款"
               :visible.sync="refundDialogVisible"
               width="60%">
      <el-form
        ref="form"
        :model="form"
        class="mt-10">
        <el-form-item label="退款类型:">
          <el-select
            v-model="form.refund_type"
            @change="handleChange"
            style="width: 60%;">
            <el-option label="部分退款" :value="1"></el-option>
            <el-option label="整单退款" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="退款金额:">
          <el-input
            v-model="form.refund_price"
            @input="form.refund_price=form.refund_price.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
            placeholder="请输入退款金额"
            clearable
            style="width: 60%;"></el-input>
        </el-form-item>
        <el-form-item label="退款商品选择:" v-show="form.refund_type === 1">
          <el-table
            ref="multipleTable"
            :data="order.products"
            tooltip-effect="dark"
            style="width: 100%"
            height="300"
            @selection-change="handleSelectionChange">
            <el-table-column :selectable="handleSelectable" type="selection" width="55"></el-table-column>
            <el-table-column label="商品名称" prop="product_name"></el-table-column>
            <el-table-column label="商品sku" prop="product_sku"></el-table-column>
            <el-table-column label="商品附加" prop="product_attach"></el-table-column>
            <el-table-column label="数量" prop="product_num"></el-table-column>
            <el-table-column label="商品总价格（元）">
              <template slot-scope="scope">
                <p>{{ scope.row.product_price | fen2Yuan }}</p>
              </template>
            </el-table-column>
            <el-table-column label="退款金额（元）">
              <template slot-scope="scope">
                <p>{{ scope.row.product_refund_price | fen2Yuan }}</p>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="退款备注:">
          <el-input
            type="textarea"
            v-model="form.refund_remark"
            placeholder="请输入退款备注"
            rows="6" style="width: 60%;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refundDialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="booLock" @click="funRefund">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { yuan2Fen } from '@/utils'

export default {
  name: 'orderDetail',
  data () {
    return {
      id: null,
      order: {},
      tableLoading: true,
      refundDialogVisible: false,
      form: {
        refund_type: 0,
        refund_price: '',
        product_ids: [],
        refund_remark: ''
      },
      booLock: false
    }
  },
  methods: {
    handleChange (val) {
      if (val === 0) {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange (val) {
      this.$set(this.form, 'product_ids', val)
    },
    // 获取订单详情
    async fetchOrderDetail () {
      const { code, data } = await this.$fetch('/v1/user/order/detail', {
        id: this.$route.query.id
      }, 'get')
      this.tableLoading = false
      if (code === 200) {
        this.order = data
      }
    },
    // 退款
    async funRefund () {
      this.booLock = true
      let product_ids = this.order.products.map(item => item.id)
      if (this.form.refund_type) {
        product_ids = this.form.product_ids.map(item => item.id)
      }
      const { code } = await this.$fetch('/v1/user/order/refund', {
        id: this.$route.query.id,
        ...this.form,
        product_ids,
        refund_price: yuan2Fen(this.form.refund_price)
      })
      this.booLock = false
      if (code === 200) {
        this.$message.success('退款成功')
        this.fetchOrderDetail()
        this.refundDialogVisible = false
      }
    },
    // 表格：某项是否可选择
    handleSelectable (row, index) {
      // product_status: 商品状态(0待支付1已支付2全部退款3部分退款4已取消)
      return [1, 3].findIndex(item => item === row.product_status) > -1
    }
  },
  created () {
    this.fetchOrderDetail()
  }
}
</script>
<style scoped>
.detail-container {
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.font-small {
  font-weight: bold;
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>
