<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <!--<el-input v-model="listQuery.userId" clearable class="filter-item" style="width: 160px;" placeholder="请输入用户ID" />-->
      <el-input
        v-model="listQuery.mobile"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="请输入用户手机"
      />
      <el-input
        v-model="listQuery.orderSn"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="请输入订单编号"
      />
      <el-date-picker
        v-model="listQuery.timeArray"
        type="datetimerange"
        class="filter-item"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
         value-format="yyyy-MM-dd hh:mm:ss"
      />
      <el-select
        v-model="listQuery.orderStatusArray"
        multiple
        style="width: 200px"
        class="filter-item"
        placeholder="请选择订单状态"
      >
        <el-option
          v-for="(key, value) in statusMap"
          :key="key"
          :label="key"
          :value="value"
        />
      </el-select>
 
      <el-button
        v-permission="['POST /admin/order/sourceOrderList']"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >查找</el-button
      >
     
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        align="center"
        label="客户手机"
        prop="customer.tel"
        fixed="left"
      />
      <el-table-column
        align="center"
        label="订单编号"
        width="135"
        prop="orderSn"
      />
      <el-table-column
        align="center"
        label="下单时间"
        min-width="90"
        prop="createTime"
      />
      <el-table-column align="center" label="收货人联系方式" prop="mobile" />
      <!-- <el-table-column
        align="center"
        label="预约时间"
        min-width="150"
        prop="orderDate"
      /> -->
      <el-table-column align="center" label="城市" prop="address">
        <template slot-scope="scope">
          {{ cityFilter(scope.row.address) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="上级合伙人"
        prop="rCustomer.customerName"
      />
      <el-table-column
        align="center"
        label="订单类型"
        prop="orderType"
       >
        <template slot-scope="scope">
          {{  scope.row.orderType==0?'默认下单':'代客下单' }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="订单渠道"
        min-width="90"
        prop="orderChannel"
      >
        <template slot-scope="scope">
          <el-tag type="success">{{
            scope.row.orderChannel | channelsFilter
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="订单状态"
        width="120"
        prop="orderStatus"
      >
        <template slot-scope="scope">
          <el-tag type="success"
            >{{ scope.row.actualPrice > scope.row.refundAmount ? "部分" : ""
            }}{{ scope.row.orderStatus | orderStatusFilter }}</el-tag
          >
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        width="80"
        label="订单金额"
        prop="orderPrice"
      />

      <el-table-column
        align="center"
        width="80"
        label="支付金额"
        prop="actualPrice"
      />
      <el-table-column
        align="center"
        width="80"
        label="已退款金额"
        prop="refundAmount"
      />

      <el-table-column
        align="center"
        label="支付时间"
        min-width="100"
        prop="payTime"
      />

      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding fixed-width"
        fixed="right"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            v-permission="['GET /admin/order/detail']"
            type="primary"
            size="mini"
            @click="handleDetail(scope.row)"
            >详情</el-button
          >
         
          
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 订单详情对话框 -->
    <el-dialog :visible.sync="orderDialogVisible" title="订单详情" width="800">
      <div>
        <el-steps
          :active="
            formatStepStatus(
              orderDetail.order.orderStatus,
              orderDetail.order.commentTime
            )
          "
          finish-status="success"
          align-center
        >
          <el-step
            title="提交订单"
            :description="formatTime(orderDetail.order.addTime)"
          />
          <el-step
            title="支付订单"
            :description="formatTime(orderDetail.order.payTime)"
          />
          <el-step
            title="平台发货"
            :description="formatTime(orderDetail.order.shipTime)"
          />
          <el-step
            title="确认收货"
            :description="formatTime(orderDetail.order.confirmTime)"
          />
          <el-step
            title="完成评价"
            :description="formatTime(orderDetail.order.commentTime)"
          />
        </el-steps>
      </div>
      <el-card shadow="never" style="margin-top: 15px">
        <div class="operate-container">
          <i class="el-icon-warning color-danger" style="margin-left: 20px" />
          <span class="color-danger"
            >当前订单状态：{{
              orderDetail.order.orderStatus | orderStatusFilter
            }}</span
          >
        </div>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">基本信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="6" class="table-cell-title">订单编号</el-col>
            <el-col :span="6" class="table-cell-title">支付编号</el-col>
            <el-col :span="6" class="table-cell-title">用户备注</el-col>
            <el-col :span="6" class="table-cell-title">预约时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="table-cell">{{
              orderDetail.order.orderSn
            }}</el-col>
            <el-col :span="6" class="table-cell">{{
              orderDetail.order.payId
            }}</el-col>
            <el-col :span="6" class="table-cell">{{
              orderDetail.order.message
            }}</el-col>
            <el-col :span="6" class="table-cell">{{
              orderDetail.order.orderDate
            }}</el-col>
          </el-row>
        </div>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">收货人信息</span>
        </div>
        <div class="table-layout">
          <el-row>
            <el-col :span="8" class="table-cell-title">收货人</el-col>
            <el-col :span="8" class="table-cell-title">手机号码</el-col>
            <el-col :span="8" class="table-cell-title">收货地址</el-col>
          </el-row>
          <el-row>
            <el-col :span="8" class="table-cell">{{
              orderDetail.order.consignee
            }}</el-col>
            <el-col :span="8" class="table-cell">{{
              orderDetail.order.mobile
            }}</el-col>
            <el-col :span="8" class="table-cell">{{
              orderDetail.order.address
            }}</el-col>
          </el-row>
        </div>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <span class="font-small">商品信息</span>
        </div>
        <el-table
          :data="orderDetail.orderGoods"
          style="width: 100%;margin-top: 20px"
          border
        >
          <el-table-column label="商品图片" width="120" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.picUrl" style="height: 80px" />
            </template>
          </el-table-column>

          <el-table-column label="商品名称" width="150" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.goodsName }}</p>
              <p>品牌：{{ scope.row.productBrand }}</p>
            </template>
          </el-table-column>

          <el-table-column label="价格/货号" align="center">
            <template slot-scope="scope">
              <p>价格：￥{{ scope.row.price }}</p>
              <p>货号：{{ scope.row.goodsSn }}</p>
            </template>
          </el-table-column>

          <el-table-column label="商品规格" align="center">
            <template slot-scope="scope">
              <p>{{ scope.row.specifications }}</p>
            </template>
          </el-table-column>

          <el-table-column label="数量" align="center">
            <template slot-scope="scope">
              {{ scope.row.number }}
            </template>
          </el-table-column>
          <el-table-column
            style="border-right: 0px"
            label="小计"
            align="center"
          >
            <template slot-scope="scope">
              ￥{{ scope.row.price * scope.row.number }}
            </template>
          </el-table-column>
        </el-table>

        <div style="margin-top: 20px">
          <svg-icon icon-class="marker" style="color: #606266" />
          <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="4" class="table-cell-title">商品总价</el-col>
            <el-col :span="4" class="table-cell-title">快递费用</el-col>
            <el-col :span="4" class="table-cell-title">优惠减免</el-col>
            <el-col :span="4" class="table-cell-title">积分减免</el-col>
            <el-col :span="4" class="table-cell-title">支付时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell">{{
              orderDetail.order.actualPrice
            }}</el-col>
            <el-col :span="4" class="table-cell">{{
              orderDetail.order.goodsPrice
            }}</el-col>
            <el-col :span="4" class="table-cell">{{
              orderDetail.order.freightPrice
            }}</el-col>
            <el-col :span="4" class="table-cell">{{
              orderDetail.order.couponPrice
            }}</el-col>
            <el-col :span="4" class="table-cell">{{
              orderDetail.order.integralPrice
            }}</el-col>
            <el-col :span="4" class="table-cell">{{
              orderDetail.order.payTime
            }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell-title">退款金额</el-col>
            <el-col :span="4" class="table-cell-title">退款类型</el-col>
            <el-col :span="6" class="table-cell-title">退款备注</el-col>
            <el-col :span="4" class="table-cell-title">退款时间</el-col>
            <el-col :span="6" class="table-cell-title">确认收货时间</el-col>
          </el-row>
          <el-row>
            <el-col :span="4" class="table-cell">{{
              orderDetail.order.refundAmount
            }}</el-col>
            <el-col :span="4" class="table-cell">{{
              orderDetail.order.refundType
            }}</el-col>
            <el-col :span="6" class="table-cell">{{
              orderDetail.order.refundContent
            }}</el-col>
            <el-col :span="4" class="table-cell"
              >{{ orderDetail.order.refundTime }}
            </el-col>
            <el-col :span="6" class="table-cell"
              >{{ orderDetail.order.confirmTime }}
            </el-col>
          </el-row>
        </div>

        <div v-if="orderDetail.refundList.length > 0">
          <div style="margin-top: 20px">
            <svg-icon icon-class="marker" style="color: #606266" />
            <span class="font-small">退款详情</span>
          </div>
          <div class="table-layout">
            <el-row>
              <el-col :span="3" class="table-cell-title">订单号</el-col>
              <el-col :span="12" class="table-cell-title">日志</el-col>
              <el-col :span="3" class="table-cell-title">动作</el-col>
              <el-col :span="6" class="table-cell-title">时间</el-col>
            </el-row>
            <el-row
              v-for="(item, index) in orderDetail.refundList"
              :key="index"
            >
              <el-col :span="3" class="table-cell">{{ item.orderId }}</el-col>
              <el-col :span="12" class="table-cell">{{ item.log }}</el-col>

              <el-col :span="3" class="table-cell">{{ item.action }}</el-col>
              <el-col :span="6" class="table-cell">{{
                item.createTime
              }}</el-col>
            </el-row>
          </div>
        </div>
        <div style="float: right;padding-top:10px;padding-bottom: 10px ">
          <el-button type="primary" @click="orderDialogVisible = false"
            >确 认</el-button
          >
          <!--<el-button type="primary" @click="printOrder">打 印</el-button>-->
        </div>
      </el-card>
    </el-dialog>
  
 
  </div>
</template>

<script>
import axios from "axios";
// import areaJson from "../../areaJson";
import { regionData } from 'element-china-area-data'
import {
  detailOrder,
  listOrder,
  listChannel,
  refundOrder,
  deleteOrder,
  shipOrder,
  importOrder,
  editOrder,
  getGoods,
  orderCreate,
  sourceOrderList
} from "@/api/order";
import { allChannel } from "@/api/channel";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { formatDate } from "@/utils/date";
import checkPermission from "@/utils/permission"; // 权限判断函数
import { getToken } from "@/utils/auth";

let vm;

const statusMap = {
  101: "未付款",
  102: "用户取消",
  103: "系统取消",
  201: "已付款",
  202: "申请退款",
  203: "已退款",
  301: "已发货",
  401: "用户收货",
  402: "系统收货"
};
 

export default {
  name: "Order",
  components: { Pagination },
  filters: {
    orderStatusFilter(status) {
      return statusMap[status];
    },
    channelsFilter(value) {
      const rs = vm.channels.filter(item => {
        return item.id === value;
      });
      if (rs != null && rs.length > 0) {
        return rs[0].name;
      }
    }
  },
  data() {
    return {    
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20, 
        mobile: undefined,
        orderSn: undefined,
        timeArray: [],
        orderStatusArray: [],
        sort: "create_time",
        order: "desc", 
      }, 
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      channels: [],
      statusMap, 
      orderDialogVisible: false,
      orderDetail: {
        order: {},
        user: {},
        orderGoods: [],
        refundList: []
      },
  
    
      importForm: {
        channelId: 1,
        file: undefined,
        filename: undefined
      }, 
    
      headers: { "Content-Type": "multipart/form-data" },
    
     areaList: regionData, 


    };
  },
  computed: {},
  beforeCreate() {
    vm = this;
  },
  created() {
    this.getList();
    allChannel().then(res => {
      this.channels = res.data.data;
    });
  },
  methods: {
    checkPermission,
    getList() {
      this.listLoading = true;
      if (this.listQuery.timeArray && this.listQuery.timeArray.length === 2) {
        this.listQuery.start = this.listQuery.timeArray[0];
        this.listQuery.end = this.listQuery.timeArray[1];
      } else {
        this.listQuery.start = null;
        this.listQuery.end = null;
      }

      sourceOrderList(this.listQuery)
        .then(response => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    cityFilter(address) {
      if (address) {
        if (address.indexOf("上海市") >= 0) return "上海市";
        if (address.indexOf("北京市") >= 0) return "北京市";
        if (address.indexOf("南京") >= 0) return "南京市";
        if (address.indexOf("深圳") >= 0) return "深圳市";
        if (address.indexOf("苏州") >= 0) return "苏州市";
        if (address.indexOf("无锡") >= 0) return "无锡市";
         if (address.indexOf("杭州") >= 0) return "杭州市";
        if (address.indexOf("宜昌") >= 0) return "宜昌市";
        if (address.indexOf("青岛") >= 0) return "青岛市";
        if (address.indexOf("成都") >= 0) return "成都市";
        if (address.indexOf("重庆") >= 0) return "重庆市";
        if (address.indexOf("广州") >= 0) return "广州市";
      }
      return "";
    },
    formatTime(time) {
      if (time == null || time === "") {
        return "";
      }
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    formatStepStatus(value, time) {
      if (value === 201) {
        // 待发货
        return 2;
      } else if (value === 301) {
        // 已发货
        return 3;
      } else if (value === 401 || value === 402) {
        // 已完成
        if (time != null && time != "undefined") {
          return 5;
        } else {
          return 4;
        }
      } else {
        // 待付款、已关闭、无限订单
        return 1;
      }
    },
    handleDetail(row) {
      detailOrder(row.id).then(response => {
        this.orderDetail = response.data.data;
      });
      this.orderDialogVisible = true;
    },
   
    printOrder() {
      if (this.$print != undefined) {
        this.$print(this.$refs.print);
        this.orderDialogVisible = false;
      }
    },

       


  }
};
</script>

<style>
.detail-container {
  width: 80%;
  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;
}

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

.table-cell {
  height: 60px;
  line-height: 20px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  white-space: pre-wrap;
  /* 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;
}
.el-table th.gutter {
  display: table-cell !important;
}
.color-danger {
  color: #f56c6c;
  font-size: 18px;
}
.el-dialog .el-cascader{
width:400px;
}
.fixed-width .el-button--mini{
  width:auto;
  min-width:60px;
}
</style>
