<template>
  <el-dialog :title="$t('ding-dan-xiang-qing')" :visible.sync="showDialog" class="common-dialog" width="80%" @close="cancel" destroy-on-close append-to-body>
    <div class="order-detail-container">
      <div class="main-panel" v-if="orderInfo.id">
        <div class="panel">
          <div class="title">{{ $t('ji-chu-xin-xi') }}</div>
          <div class="content">
            <el-row class="row">
              <el-col :span="8">
                <span class="head">{{ $t('ding-dan-hao') }}：</span>
                <span class="control-label">{{ orderInfo.orderSn }}</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('zong-jin-e') }}：</span>
                <span class="control-label">￥{{ orderInfo.amount }}</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('ding-dan-zhuang-tai') }}：</span>
                <span class="control-label normal-status">{{ orderInfo.statusText }}</span>
              </el-col>
            </el-row>
            <el-row class="row">
              <el-col :span="8">
                <span class="head">{{ $t('ding-dan-lei-xing') }}：</span>
                <span class="control-label">{{ orderInfo.typeName }}</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('ding-dan-shi-jian') }}：</span>
                <span class="control-label">{{ orderInfo.createTime }}</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('xia-dan-zhuo-ma') }}：</span>
                <span class="control-label">{{ orderInfo.tableInfo ? orderInfo.tableInfo.code : "-" }}</span>
              </el-col>
            </el-row>
            <el-row class="row">
              <el-col :span="8">
                <span class="head">{{ $t('bei-zhu-xin-xi') }}：</span>
                <span class="control-label">{{ orderInfo.remark ? orderInfo.remark : '-'}}</span>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="panel">
          <div class="title">{{ $t('zhi-fu-xin-xi') }}</div>
          <div class="content">
            <el-row class="row">
              <el-col :span="8">
                <span class="head">{{ $t('zhi-fu-jin-e') }}：</span>
                <span class="control-label">￥{{ orderInfo.payAmount.toFixed(2) }}</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('zhi-fu-zhuang-tai') }}：</span>
                <span class="control-label payed-status" v-if="orderInfo.payStatus == 'B'">{{ getName(payStatusList, orderInfo.payStatus) }}</span>
                <span class="control-label normal-status" v-else>{{ getName(payStatusList, orderInfo.payStatus) }}</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('jian-mian-jin-e') }}：</span>
                <span class="control-label">￥{{ orderInfo.discount.toFixed(2) }}</span>
              </el-col>
            </el-row>
            <el-row class="row">
              <el-col :span="8">
                <span class="head">{{ $t('zhi-fu-fang-shi') }}：</span>
                <span class="control-label">{{ getName(payTypeList, orderInfo.payType) }}</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('zhi-fu-shi-jian') }}：</span>
                <span class="control-label">{{ orderInfo.payTime ? orderInfo.payTime : '-' }}</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('shi-yong-qia-quan') }}：</span>
                <span class="control-label">{{ orderInfo.couponInfo ? '￥' + orderInfo.couponInfo.amount + '（' + orderInfo.couponInfo.name + '）' : '-' }}</span>
              </el-col>
            </el-row>
            <el-row class="row">
              <el-col :span="8">
                <span class="head">{{ $t('shi-yong-ji-fen') }}：</span>
                <span class="control-label">{{ orderInfo.usePoint ? orderInfo.usePoint : 0 }}</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('ji-fen-jin-e') }}：</span>
                <span class="control-label">￥{{ orderInfo.pointAmount.toFixed(2) }}</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('pei-song-fei-yong') }}：</span>
                <span class="control-label">￥{{ orderInfo.deliveryFee.toFixed(2) }}</span>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="panel">
          <div class="title">{{ $t('hui-yuan-xin-xi') }}</div>
          <div class="content">
            <el-row class="row">
              <el-col :span="6">
                <span class="head">{{ $t('hui-yuan-ID') }}：</span>
                <span class="control-label" v-if="orderInfo.userInfo && orderInfo.isVisitor == 'N'">{{ orderInfo.userInfo.id }}</span>
                <span class="control-label" v-else>{{ $t('you-ke') }}</span>
              </el-col>
              <el-col :span="6">
                <span class="head">{{ $t('hui-yuan-hao') }}：</span>
                <span class="control-label" v-if="orderInfo.userInfo && orderInfo.isVisitor == 'N'">{{ orderInfo.userInfo.no }}</span>
                <span class="control-label" v-else>{{ $t('you-ke') }}</span>
              </el-col>
              <el-col :span="6">
                <span class="head">{{ $t('hui-yuan-ming-cheng') }}：</span>
                <span class="control-label" v-if="orderInfo.userInfo && orderInfo.isVisitor == 'N'">{{ orderInfo.userInfo.name }}</span>
                <span class="control-label" v-else>{{ $t('you-ke') }}<span v-if="orderInfo.userInfo">{{ $t('guan-li-yuan') }}{{ orderInfo.userInfo.name }}{{ $t('dai-xia-dan') }}</span></span>
              </el-col>
              <el-col :span="6">
                <span class="head">{{ $t('shou-ji-hao') }}：</span>
                <span class="control-label">{{ orderInfo.userInfo.mobile ? orderInfo.userInfo.mobile : '-' }}</span>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="panel">
          <div class="title">{{ $t('shang-pin-xin-xi') }}</div>
          <div class="content">
            <el-table ref="tables" v-loading="loading" :data="orderInfo.goods">
              <el-table-column :label="$t('shang-pin-ID')" prop="id" width="66"/>
              <el-table-column :label="$t('tu-pian')" align="center" prop="name">
                <template slot-scope="scope">
                  <img class="goods-logo" :src="scope.row.image"/>
                </template>
              </el-table-column>
              <el-table-column :label="$t('ming-cheng')" align="left" prop="name">
                <template slot-scope="scope">
                  <span class="goods-name">{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('gui-ge')" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.specList">
                    <span class="spec-item" v-for="spec in scope.row.specList">{{ spec.specValue }}</span>
                  </span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column :label="$t('jia-ge')" align="center" prop="price" />
              <el-table-column :label="$t('you-hui-jin-e')" align="center" prop="discount" />
              <el-table-column :label="$t('shu-liang')" align="center" prop="num" />
            </el-table>
          </div>
        </div>

        <div class="panel" v-if="orderInfo.type=='goods'">
          <div class="title">{{ $t('pei-song-xin-xi') }}</div>
          <div class="content">
            <el-row class="row">
              <el-col :span="8">
                <span class="head">{{ $t('pei-song-fang-shi') }}：</span>
                <span class="control-label" v-if="orderInfo.orderMode == 'oneself'">{{ $t('men-dian-zi-ti') }}</span>
                <span class="control-label" v-else>{{ $t('wu-liu-pei-song') }}</span>
              </el-col>
              <el-col :span="16" v-if="orderInfo.orderMode == 'oneself'">
                <span class="head">{{ $t('zi-ti-di-zhi') }}：</span>
                <span class="control-label">{{orderInfo.storeInfo.name}} {{orderInfo.storeInfo.phone}} {{orderInfo.storeInfo.address}}</span>
              </el-col>
              <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
                <span class="head">{{ $t('shou-huo-ren') }}：</span>
                <span class="control-label">{{ orderInfo.address.name ? orderInfo.address.name : '--' }}</span>
              </el-col>
              <el-col :span="8" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
                <span class="head">{{ $t('lian-xi-dian-hua') }}：</span>
                <span class="control-label">{{ orderInfo.address.mobile ? orderInfo.address.mobile : '-' }}</span>
              </el-col>
            </el-row>
            <el-row class="row">
              <el-col :span="24" v-if="orderInfo.orderMode == 'express' && orderInfo.address">
                <span class="head">{{ $t('xiang-xi-di-zhi') }}：</span>
                <span class="control-label">{{orderInfo.address.provinceName}}{{orderInfo.address.cityName}}{{orderInfo.address.regionName}}{{orderInfo.address.detail}}</span>
              </el-col>
            </el-row>
          </div>
        </div>

        <div class="panel" v-if="orderInfo.expressInfo">
          <div class="title">{{ $t('wu-liu-xin-xi') }}</div>
          <div class="content">
            <el-row class="row">
              <el-col :span="8">
                <span class="head">{{ $t('wu-liu-gong-si') }}：</span>
                <span class="control-label" v-if="orderInfo.expressInfo.expressCompany">{{ orderInfo.expressInfo.expressCompany }}</span>
                <span class="control-label" v-else>--</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('wu-liu-dan-hao') }}：</span>
                <span class="control-label" v-if="orderInfo.expressInfo.expressNo">{{ orderInfo.expressInfo.expressNo }}</span>
                <span class="control-label" v-else>--</span>
              </el-col>
              <el-col :span="8">
                <span class="head">{{ $t('fa-huo-shi-jian') }}：</span>
                <span class="control-label">{{orderInfo.expressInfo.expressTime}}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getOrderInfo } from "@/api/order";
export default {
  name: "orderDetail",
  props: {
    showDialog:{
      type:[Boolean],
      default:()=>false
    },
    orderId:{
      type:[String],
      default:()=> ''
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      payTypeList: [],
      payStatusList: [],
      orderInfo: { payAmount: 0, discount: 0, pointAmount: 0, userInfo: {} }
    };
  },
  watch: {
    showDialog(value) {
      if (value) {
          this.getOrderInfo(this.orderId);
      }
    }
  },
  methods: {
    // 查询配置
    getOrderInfo(orderId) {
      this.loading = true;
      getOrderInfo(orderId).then(response => {
          this.loading = false;
          this.orderInfo = response.data.orderInfo;
          this.payTypeList = response.data.payTypeList;
          this.payStatusList = response.data.payStatusList;
        }
      ).catch(() => {
         // empty
      });
    },
    // 取消按钮
    cancel() {
      this.$emit('closeDialog');
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
    .main-panel {
         margin: 0px;
         padding: 5px;
        .panel {
            border: solid 1px #cccccc;
            min-height: 100px;
            border-radius: 2px;
            margin-top: 10px;
            .title {
               font-weight: bold;
               margin-top: 10px;
               margin-left: 5px;
               padding-left: 5px;
               color: #333333;
               border-left: 5px solid rgb(254,106,0);
            }
           .content {
              padding: 20px;
              .goods-logo {
                 width: 45px;
                 height: 45px;
                 border: solid 1px #cccccc;
              }
             .spec-item {
                 color: #666666;
                 background: #ffffff;
                 border: #666666 solid 1px;
                 border-radius: 20px;
                 padding: 2px 8px 2px 8px;
                 margin-right: 5px;
             }
              .row {
                min-height: 40px;
                verticle-align: middle;
                display: flex;
                line-height: 40px;
                .payed-status {
                    color: #52c41a;
                    background: #f6ffed;
                    border: #b7eb8f solid 1px;
                    border-radius: 20px;
                    padding: 5px 8px 2px 8px;
                    font-size: 90%;
                }
                .normal-status {
                    color: #666666;
                    background: #ffffff;
                    border: #666666 solid 1px;
                    border-radius: 20px;
                    padding: 5px 8px 2px 8px;
                    font-size: 90%;
                }
              }
              .head {
                 color: rgb(164,164,164);
                 min-width: 120px;
                 text-align: right;
                 display: block;
                 float: left;
              }
             .control-text {
               display: block;
               background: #f5f5f5;
               border-radius: 10px;
               margin-left: 120px;
               margin-top: 5px;
               line-height: 22px;
               padding: 5px 10px 5px 10px;
             }
           }
        }
    }
</style>
