<template>
  <div class="order-manage">
    <el-form class="order-filter">
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单搜索">
            <el-input
              filterable
              v-model="listQuery.keywords"
              placeholder="请输入订单编号、手机号、姓名"
              style="width: 60%"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下单时间" label-width="130px">
            <el-date-picker
              v-model="times"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="商品类型">
            <el-select filterable v-model="listQuery.type" placeholder="请选择">
              <el-option
                :key="undefined"
                label="全部"
                :value="undefined"
              ></el-option>
              <el-option :key="1" label="标准数据" :value="1"></el-option>
              <el-option :key="2" label="全部" :value="2"></el-option>
              <el-option :key="3" label="全部" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单状态">
            <el-select
              filterable
              v-model="listQuery.status"
              placeholder="请选择"
            >
              <el-option
                :key="undefined"
                label="全部"
                :value="undefined"
              ></el-option>
              <el-option
                v-for="item in orderStatusList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付款状态">
            <el-select
              filterable
              v-model="listQuery.payStatus"
              placeholder="请选择"
            >
              <el-option
                :key="undefined"
                label="全部"
                :value="undefined"
              ></el-option>
              <el-option :key="1" label="已支付" :value="1"></el-option>
              <el-option :key="2" label="未支付" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-button type="primary" @click="handleFilter">筛选</el-button>
          <el-button type="primary" plain @click="clear_search"
            >清空筛选条件</el-button
          >
        </el-col>
      </el-row>
    </el-form>

    <div class="order-table">
      <label class="goods-name">用户昵称</label>
      <label class="goods-phone">手机号</label>
      <label class="goods-item">商品</label>
      <label class="goods-remark">备注</label>
      <label class="send-way-item">交付方式</label>
      <label class="pay-way-item">付款方式</label>
      <label class="amount-item">实收金额（元）</label>
      <label class="order-status-item">订单状态</label>
      <label class="option-item">操作</label>
    </div>
    <div v-for="item in list" :key="item.orderId">
      <div class="order-no-top">
        <span class="order-no"
          >订单号：{{ item.orderNo
          }}<span
            style="
              background: #f8ddbb;
              color: #f59a23;
              font-size: 12px;
              padding: 2px 10px;
              border-radius: 10px;
              margin-left: 10px;
            "
            v-if="item.invoiceStatus >= 2"
            >已开票</span
          ><span
            style="
              border: 1px solid #eee;
              color: #1890ff;
              font-size: 12px;
              padding: 2px 10px;
              border-radius: 10px;
              margin-left: 10px;
            "
            v-else-if="item.invoiceId"
            >开发票</span
          ></span
        >
        <span class="order-time"
          ><span
            style="
              background: #1890ff;
              color: #fff;
              font-size: 12px;
              padding: 2px 10px;
              border-radius: 4px;
              margin-right: 10px;
              cursor: pointer;
            "
            @click="handleInvoice(item)"
            v-if="item.invoiceId && item.invoiceStatus == 1"
            >开发票</span
          >下单时间：{{ item.crtTime }}</span
        >
      </div>
      <table class="order-table-1">
        <tr>
          <td class="goods-name">{{ item.nickname }}</td>
          <td class="goods-phone">{{ item.phone }}</td>
          <td class="goods-item" v-if="item.type == 1">
            <div
              v-for="iitem in item.orderItemList"
              :key="iitem.itemId"
              class="flex-aic goods-ii"
            >
              <img
                style="
                  width: 84px;
                  height: 62px;
                  border-radius: 8px;
                  object-fit: cover;
                "
                :src="iitem.itemPic"
              />
              <span v-if="iitem.type != 1">{{ iitem.name }}</span>
              <div v-else>
                <p>卫星：{{ iitem.detailJson.imageSatelliteType }}</p>
                <p>传感器：{{ iitem.detailJson.imageSensorType }}</p>
                <p>分辨率：{{ iitem.imageResolutionStr }}</p>
                <p>云量：{{ iitem.detailJson.imageCloudage }}</p>
              </div>
            </div>
          </td>
          <td class="goods-item" v-if="item.type == 2">
            <p>
              区域范围：{{
                item.customerJson.provinceName +
                item.customerJson.cityName +
                item.customerJson.areaName
              }}
            </p>
            <p>
              采集时间：{{ item.customerJson.startTimeStr }}至{{
                item.customerJson.endTimeStr
              }}
            </p>
            <p v-if="item.customerJson.type == 1">
              分辨率：{{ item.customerJson.resolution }}
            </p>
            <p v-if="item.customerJson.type != 3">
              获取类型：{{
                item.customerJson.gainType == 101
                  ? "数据API"
                  : item.customerJson.gainType == 102
                  ? "实体数据"
                  : item.customerJson.gainType == 201
                  ? "报告"
                  : item.customerJson.gainType == 202
                  ? "web平台"
                  : item.customerJson.gainType == 203
                  ? "其他"
                  : item.customerJson.gainType
              }}
            </p>
            <p v-if="item.customerJson.type == 3">
              定制类型：{{ item.customerJson.dataType }}
            </p>
            <p v-if="item.customerJson.type == 3">
              数据格式：{{ item.customerJson.dataFormat }}
            </p>
          </td>
          <td class="goods-remark">
            {{
              item.remark
                ? item.remark
                : item.customerJson
                ? item.customerJson.descr
                : ""
            }}
          </td>
          <td class="send-way-item">
            {{
              item.sendType == 1 ? "线上" : item.sendType == 2 ? "线下" : "线上"
            }}
          </td>
          <td class="pay-way-item">{{ item.payType }}</td>
          <td class="amount-item">￥{{ item.totalAmount }}</td>
          <td
            class="order-status-item"
            :style="
              item.status == 4
                ? 'color:#f6b725;'
                : item.status == 5
                ? 'color:#0493fe;'
                : item.status == 6
                ? 'color:#2fd96f;'
                : item.status == 2
                ? 'color:#e83328;'
                : ''
            "
          >
            {{
              item.status == 2
                ? "待付款"
                : item.status == 4
                ? "待发货"
                : item.status == 5
                ? "待收货"
                : item.status == 6
                ? "已完成"
                : item.status == -2
                ? "已取消"
                : item.status == -1
                ? "已删除"
                : item.status
            }}
          </td>
          <td style="padding: 20px; border-right: none">
            <span
              class="normal-btn"
              v-if="item.status == 5 || item.status == 6"
              @click="handleSee(item)"
              >查看</span
            >
            <span
              class="normal-btn"
              v-if="item.status == 4 && item.shippingStatus == 0"
              @click="handleSend(item)"
              >发货</span
            >
          </td>
        </tr>
      </table>
    </div>
    <div v-if="list.length <= 0">
      <table class="order-table-1">
        <tr style="text-align: center">
          <td style="padding: 20px; border-right: none">暂无数据</td>
        </tr>
      </table>
    </div>
    <div
      style="width：100%;dispaly:flex;justify-content: center;margin-top:20px"
      v-show="!listLoading"
    >
      <el-pagination
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!--查看发货信息-->
      <order-send-detail
        :oneRow="oneRow"
        v-if="orderSendDetailVisible"
        v-on:detailEvent="detailEvent"
      ></order-send-detail>
      <!--发货弹窗-->
      <send
        v-if="sendVisible"
        :one-row="oneRow"
        v-on:sendEvent="sendEvent"
        :title="title"
      ></send>
    </div>
  </div>
</template>
<script type="javascript">
import {getOrderList} from "api/website/order/index";
import orderSendDetail from "./orderSendDetail";
import send from './send'
import {timestamp2DateAuto} from "../../../utils/dateUtils";
export default {
  components:{orderSendDetail, send},
  data() {
    return {
      title: '订单发货',
      activeName: '1',
      orderStatusList: [
        // {id: 0, name: '定制订单无价格'},
        // {id: 1, name: '创建订单'},
        {id: 2, name: '待付款'},
        // {id: 3, name: '已支付'},
        {id: 4, name: '待发货'},
        {id: 5, name: '已收货'},
        {id: 6, name: '已完成'},
        // {id: -1, name: '删除'},
        {id: -2, name: '已取消'},
        // {id: -3, name: '退款'}
      ],
      listQuery: {
        name: undefined, // 商品名称
        page: 1,
        limit: 10,
        startTime: undefined, // 下单时间
        endTime: undefined, // 下单时间
        payStatus: undefined, // 支付状态: 1、已支付，2、未支付
        keywords: undefined, // 订单搜索
        status: undefined, // 订单状态：0、定制订单无价格 1--创建订单，2--待付款，3--已支付，4--已发货, 5--已收货, 6、已完成 -1、删除，-2、取消, -3 退款
      },
      listLoading: false,
      times: [], // 时间
      list: [],
      total: 0,
      orderSendDetailVisible: false, // 查看弹窗
      sendVisible: false, // 发货弹窗
      oneRow: {} // 当前操作项
    };
  },
  created() {
     this.listQuery.keywords = this.$route.query.orderNo;
    this.getList()
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    /**
     * 查看弹窗关闭
     */
    detailEvent(){
      this.orderSendDetailVisible = false
    },
    /**
     * 查看
     */
    handleSee(row){
      this.oneRow = row
      this.orderSendDetailVisible = true;
    },
    /**
     * 发货弹窗关闭
     */
    sendEvent(e){
      if(e){
        this.getList()
      }
      this.sendVisible = false
    },
    /**
     * 开票发货
     */
    handleInvoice(row){
      this.oneRow = row
      this.title = '发票发货'
      this.sendVisible = true
    },
    /**
     * 发货
     */
    handleSend(row){
      this.oneRow = row
      this.title = '订单发货'
      this.sendVisible = true
    },
    /**
     * 商品品牌列表
     */
    getList() {
      let _this = this
      this.listLoading = true;
      if(this.times.length>0){
        this.listQuery.startTime = this.times[0]
        this.listQuery.endTime = this.times[1]
      }
      getOrderList(this.listQuery).then((response) => {
        let a = response.data.data
        a.map(function(item) {
          if(item.orderItemList){
            item.orderItemList.map(function(iitem){
              iitem.detailJson = iitem.detailJson ? JSON.parse(iitem.detailJson) : {}
              if (iitem.type == 1) {
                // 标准数据
                iitem.imageResolutionStr = iitem.detailJson.imageResolution?iitem.detailJson.imageResolution.replace(/{/g, ""):''
                iitem.imageResolutionStr = iitem.imageResolutionStr?iitem.imageResolutionStr.replace(/}/g, ""):''
              }
            })
          }
          if(item.customerJson){
            item.customerJson = JSON.parse(item.customerJson)
            item.customerJson.startTimeStr = timestamp2DateAuto(item.customerJson.startTime, "yyyy-MM-dd");
            item.customerJson.endTimeStr = timestamp2DateAuto(item.customerJson.endTime, "yyyy-MM-dd");
          }
        })
        _this.list = a;
        _this.total = response.data.totalCount;
        _this.listLoading = false;
      });
    },
    /**
     * 清空筛选条件
     */
    clear_search() {
      this.times = []
      this.listQuery = {
        name: undefined, // 商品名称
        page: 1,
        limit: 10,
        startTime: undefined, // 下单时间
        endTime: undefined, // 下单时间
        payStatus: undefined, // 支付状态: 1、已支付，2、未支付
        keywords: undefined, // 订单搜索
        status: undefined, // 订单状态：0、定制订单无价格 1--创建订单，2--待付款，3--已支付，4--已发货, 5--已收货, 6、已完成 -1、删除，-2、取消, -3 退款
      };
      this.getList();
    },
  },
};
</script>
<style lang="scss">
.order-manage {
  padding: 20px;
  .order-table-1 {
    width: 100%;
    border: 1px solid #eee;
    border-top: none;
    td {
      border-right: 1px solid #e6e6e6;
    }
  }
  .order-filter {
    padding: 24px;
  }
  .el-tabs__item.is-active,
  .el-tabs__item:hover {
    color: #f6211d;
  }
  .order-table {
    background: #f5f6fa;
    border: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    height: 45px;
    label {
      color: #a3a6b4;
      font-size: 12px;
      display: flex;
    }
  }
  .normal-btn {
    border: 1px solid #707070;
    border-radius: 2px;
    height: 24px;
    width: 60px;
    margin-top: 16px;
    font-size: 12px;
    color: #919299;
    display: block;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
  }
  .pay-btn {
    background: linear-gradient(90deg, #f6211d, #f9531f);
    color: #fff;
    border-radius: 2px;
    height: 24px;
    width: 60px;
    font-size: 12px;
    color: #fff;
    display: block;
    text-align: center;
    line-height: 24px;
    cursor: pointer;
  }
  .goods-name,
  .goods-phone,
  .goods-remark {
    width: 10%;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .goods-item {
    width: 20%;
    height: 100%;
    padding-left: 10px;
    align-items: center;
    .goods-ii {
      border-bottom: 1px solid #e6e6e6;
      padding: 16px;
    }
    .goods-ii:last-child {
      border-bottom: none;
    }
  }
  .pay-way-item,
  .send-way-item {
    width: 10%;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .amount-item {
    width: 10%;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .order-status-item {
    width: 10%;
    height: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .option-item {
    width: 10%;
    height: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .order-no {
    color: #43425d;
    font-size: 13px;
  }
  .order-time {
    color: #919299;
    font-size: 12px;
  }
  .order-no-top {
    background: #f5f6fa;
    border: 1px solid #e6e6e6;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
  }
}
</style>
