<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="下单时间">
            <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 class="tag-invoice" v-if="item.invoiceStatus>=2">已开票</span>
          <span class="tag-no" v-else-if="item.invoiceId">开发票</span>
          <span class="tag-no" style="color: #d9001b;" v-if="item.type == 2">定制</span>
        </span>
        <span class="order-time"><span class="tag-invoice-no" @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">
              <div class="flex-aic-jcb" style="width: 100%;">
                <div class="flex-aic">
                  <img style="width: 84px;height: 62px;border-radius: 8px;object-fit: cover;margin-right: 6px;" :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>
                <p style="padding-right: 10px;">{{iitem.type==1?'标准数据':iitem.type==2?'行业应用':iitem.type==3?'影像图库':iitem.type}}</p>
              </div>
            </div>
          </td>
          <td class="goods-item" v-if="item.type == 2">
            <div class="flex-aic-jcb">
              <div>
                <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>
              </div>
              <p style="padding-right: 10px;">{{item.customerJson.type==1?'编程需求':item.customerJson.type==2?'专题应用需求':item.customerJson.type==3?'影像图需求':item.customerJson.type}}</p>
            </div>
          </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" :style="item.payType==3?'color:#f6b725;':item.payType==2?'color:#13a8ff;':'color:#73d721;'">{{item.payType==1?'微信支付':item.payType==2?'支付宝':item.payType==3?'对公支付':item.payType}}</td>
          <td class="amount-item">￥{{item.totalAmount}}</td>
          <td class="order-status-item" v-if="item.payType==3" :style="item.status==4?'color:#f6b725;':item.status==5?'color:#0493fe;':item.status==6?'color:#2fd96f;':item.status==2&& !item.payImg?'color:#e83328;':item.status==2&& item.payImg?'color:#13a8ff;':''">{{item.status==2 && !item.payImg?'待付款':item.status==2 && item.payImg && !item.auditStatus?'待审核':item.status==2 && item.payImg && item.auditStatus==2?'已拒绝':item.status==4?'待发货':item.status==5?'待收货':item.status==6?'已完成':item.status==-2?'已取消':item.status==-1?'已删除':item.status}}</td>
          <td class="order-status-item" v-else :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 && item.type == 1" @click="handleSend(item)">发货</span>
            <span class="normal-btn" v-if="item.status==4 && item.type == 2" @click="handleData(item)">选择数据</span>
            <span class="normal-btn" style="border: 1px solid #13a8ff;color: #13a8ff;" v-if="item.status==2 && item.payType == 3" @click="handleAudit(item)">{{item.auditStatus?'查看':'待审核'}}</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>
      <!--定制数据-选择数据-->
      <select-data-dialog v-if="selectDataVisible" :one-row="oneRow" v-on:selectDataEvent="selectDataEvent"></select-data-dialog>
      <!--对公支付审核-->
      <el-dialog :visible="auditVisible" title="对公支付审核" @close="cancel">
        <label style="color: red">转账信息</label>
        <div v-if="companyAccountInfo.detail" style="border: 1px solid #eee;padding: 16px;margin: 20px 0;">
          <div style="margin-bottom: 20px;">户名：{{companyAccountInfo.detail.accountName}}</div>
          <div style="margin-bottom: 20px;">账号：{{companyAccountInfo.detail.account}}</div>
          <div>开户行：{{companyAccountInfo.detail.openBank}}</div>
        </div>
        <label style="color: red">上传信息</label>
        <div style="border: 1px solid #eee;padding: 16px;margin-top: 20px;">
          <div class="flex-aic">
            <label>支付凭证：</label>
            <el-image
              style="width: 100px; height: 100px;"
              :src="oneRow.payImg"
              :preview-src-list="[oneRow.payImg]">
            </el-image>
          </div>
        </div>
        <el-form label-width="80px" style="margin-top: 20px;" ref="form" :rules="rules" :model="form" v-if="!oneRow.auditStatus">
          <el-row>
            <el-form-item label="审核结果" prop="auditStatus">
              <el-radio v-model="form.auditStatus" :label="1" @change="checkValid">通过</el-radio>
              <el-radio v-model="form.auditStatus" :label="2" @change="checkValid">拒绝</el-radio>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="拒绝原因" prop="auditReason" v-if="form.auditStatus == 2">
              <el-input type="textarea" v-model="form.auditReason" placeholder="请输入拒绝原因" :maxlength="400" :row="4"></el-input>
            </el-form-item>
          </el-row>
        </el-form>
        <div v-else>
          <div style="margin-bottom: 20px;margin-top: 20px;">审核状态：{{ oneRow.auditStatus == 1?'已通过':'已拒绝' }}</div>
          <div style="margin-bottom: 20px;">拒绝原因：{{ oneRow.auditReason }}</div>
        </div>
        <div slot="footer" class="dialog-footer" v-if="!oneRow.auditStatus">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" v-if="!isClick" @click="okSend('form')">确 定</el-button>
          <el-button type="primary" v-else style="opacity: 0.6;" disabled>确 定</el-button>
        </div>
        <div slot="footer" class="dialog-footer" v-else>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script type="javascript">
  import {getOrderList, updatePayStatus, getCompanyInfoByType} from "api/website/order/index";
  import orderSendDetail from "./orderSendDetail";
  import selectDataDialog from './selectDataDialog'
  import send from './send'
  import {timestamp2DateAuto} from "../../../utils/dateUtils";
  export default {
    components:{orderSendDetail, send, selectDataDialog},
    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: '退款'}
        ],
        isClick: false, // 是否已点击审核
        auditVisible: false, // 对公支付审核
        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 退款
        },
        form:{
          auditStatus: undefined, // 审核状态： 1、审核通过，2、审核拒绝
          auditReason: undefined, // 审核理由
          orderNo: undefined // 订单号
        },
        rules: {
          auditReason: { required:  true, message: '请输入拒绝原因', trigger: 'blur' },
          auditStatus: {required:  true, message: '请选择审核结果', trigger: 'change' }
        },
        listLoading: false,
        times: [], // 时间
        list: [],
        total: 0,
        orderSendDetailVisible: false, // 查看弹窗
        sendVisible: false, // 发货弹窗
        oneRow: {}, // 当前操作项
        selectDataVisible: false, // 选择数据
        companyAccountInfo: {}, // 对公信息
      };
    },
    created() {
      this.listQuery.keywords = this.$route.query.orderNo;
      this.getList()
      this.companyInfoByType() // 获取对公信息
    },
    methods: {
      handleFilter() {
        this.listQuery.page = 1
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      /**
       * 取消审核
       */
      cancel(){
        this.auditVisible = false
      },
      /**
       * 对公支付-待审核
       */
      handleAudit(row){
        this.oneRow = row
        this.form = {
          auditStatus: undefined, // 审核状态： 1、审核通过，2、审核拒绝
          auditReason: undefined, // 审核理由
          orderNo: row.orderNo // 订单号
        }
        this.auditVisible = true;
      },
      /**
       * 检测填写状态
       */
      checkValid(){
        this.$refs['form'].validateField('auditStatus', picError => { //审核结果
          if (!picError) {
            console.log('审核结果-已选择')
          } else {
            return false;
          }
        });
      },
      /**
       * 提交审核
       */
      okSend(formName){
        let _this = this
        if(this.isClick){
          return
        }
        this.isClick = true
        setTimeout(function(){
          _this.isClick = false
        }, 2000)
        const set = this.$refs;
        set[formName].validate((valid) => {
          if (valid) {
            updatePayStatus(this.form).then((response) => {
              if(response.status == 200){
                this.$notify({
                  title: "成功",
                  message: "操作成功",
                  type: "success",
                  duration: 2000
                });
                this.auditVisible = false
                this.getList()
              } else {
                this.$notify({
                  title: '失败',
                  message: response.message,
                  type: 'error',
                  duration: 2000
                })
              }
            });
          }
        })
      },
      /**
       * 查看弹窗关闭
       */
      detailEvent(){
        this.orderSendDetailVisible = false
      },
      /**
       * 获取对公信息
       */
      companyInfoByType(){
        getCompanyInfoByType({type: 2}).then((res) => {
          if(res.status == 200){
            if(res.data.length>0){
              res.data[0].detail = res.data[0].detail?JSON.parse(res.data[0].detail):{}
              this.companyAccountInfo = res.data[0]
            }
          } else {
            this.$notify({
              title: "失败",
              message: res.message,
              type: "error",
              duration: 2000,
            });
          }
        });
      },
      /**
       * 选择数据-关闭弹窗
       */
      selectDataEvent(e){
        if(e){
          this.getList()
        }
        this.selectDataVisible = 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
      },
      /**
       * 选择数据
       */
      handleData(row){
        this.oneRow = row
        this.selectDataVisible = 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: 30%;
      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: 8%;
      height: 100%;
      text-align: center;
      justify-content: center;
      align-items: center;
    }
    img{object-fit: cover;}
    .amount-item{
      width: 10%;
      height: 100%;
      text-align: center;
      justify-content: center;
      align-items: center;
    }
    .order-status-item{
      width: 8%;
      height: 100%;
      text-align: center;
      justify-content: center;
      align-items: center;
    }
    .option-item{
      width: 8%;
      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;
    }
    .tag-invoice{background: #f8ddbb;color: #F59A23;font-size: 12px;padding: 2px 10px;border-radius: 10px;margin-left:10px;}
    .tag-invoice-no{background: #1890FF;color: #fff;font-size: 12px;padding: 2px 10px;border-radius: 4px;margin-right:10px;cursor: pointer;}
    .tag-no{border:1px solid #eee;color: #1890FF;font-size: 12px;padding: 2px 10px;border-radius: 10px;margin-left:10px;}
  }
</style>
