<template>
  <div class="ruleMaskDiv" v-if="show">
    <basicPop :pop="pop" @closeClick="closeClick">
      <div class="order-content">
        <p class="order-text">{{ruleMsg}}</p>
        <p v-if="priceType == 1 && skuType == 2" style="color: red;font-size: 0.24rem;">若订单包含排除商品则整单无法参与活动，建议单独下单排除商品。</p>
        <van-tabs v-model="activeName">
          <van-tab title="满足规则订单" name="满足规则订单">
            <div class="orderList">
              <div class="noFind" v-if="successList.length == 0 && successOrderListForTask.length == 0">
                ～～～没有找到订单哦～～～
              </div>
              <div v-else >
                <!-- successOrderListForTask -->
                <div class="taskFailListDiv" v-if="successOrderListForTask.length > 0">
                  <div class="taskFailItem" v-for="item in successOrderListForTask">
                    <div class="failReason">{{item.failReason}}</div>
                    <div class="failOrderItem" v-for="jtem in item.orderCheckRecordList">
                      <div class="o1 oMsg">
                        <div>订单号：{{jtem.orderId}}</div>
                        <div v-if="activityType != '10107'">下单时间：{{jtem.orderStartTime}}</div>
                        <div v-else>
                          <div v-if="orderStatus == 0">付款时间：{{jtem.paymentConfirmTime}}</div>
                          <div v-else>完成时间：{{jtem.orderEndTime}}</div>
                        </div>
                      </div>
                      <div class="skuList" v-for="ktem in jtem.orderCheckSkuRecordList">
                        <div style="display:flex;justify-content:space-between">
                          <div class="skuName">
                            商品名称：{{ktem.skuName}}
                          </div>
                          <div class="oMsg" style="color:red" v-if="ktem.skuDetail">{{ktem.skuDetail}}</div>
                        </div>
                        
                        <div class="skuMsg">
                          <div>SKU金额：¥{{ktem.skuPrice}}</div>
                          <div>数量：{{ktem.skuNum}}个</div>
                        </div>
                      </div>
                      <div class="oMsg">
                        <div>订单状态：{{jtem.orderStatus}}</div>
                        <div>订单金额（{{jtem.orderPriceType}}）：{{jtem.orderTotalPrice}}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="orderItem" v-for="item in successList">
                  <div v-if="item.leafNodeList && item.leafNodeList.length > 0">
                    <div class="o1 oMsg" style="color: red;">当前订单已被平台拆单，以下所有子订单只可参与一次活动</div>
                    <div class="o1 oMsg">
                      <div>父订单号：{{ item.orderId }}</div>
                      <div>下单时间：{{ item.orderStartTime }}</div>
                    </div>
                    <div v-for="jtem in item.leafNodeList" class="leafItem">
                      <div class="leafTop">
                        <div>子订单号：{{jtem.orderId}}</div>
                        <div>订单状态：{{jtem.orderStatus}}</div>
                      </div>
                      <div class="skuList" v-for="ktem in jtem.orderCheckSkuRecordList">
                        <div style="display:flex;justify-content:space-between">
                          <div class="skuName">商品名称：{{ktem.skuName}}</div>
                          <div class="oMsg" :style="ktem.skuDetail == '活动商品' ? 'color:#4fc08d' : 'color:red'">{{ ktem.skuDetail }}</div>
                        </div>
                        <div class="skuMsg">
                          <div>SKU金额：¥{{ktem.skuPrice}}</div>
                          <div>数量：{{ktem.skuNum}}个</div>
                        </div>
                      </div>
                    </div>
                    <div class="o2 oMsg">
                      <div>订单金额（{{item.orderPriceType}}）：{{item.orderTotalPrice}}</div>
                    </div>
                  </div>
                  <div v-else>
                    <div class="o1 oMsg" v-if="item.failReason">{{item.failReason}}</div>
                    <div class="o1 oMsg">
                      <div>订单号：{{item.orderId}}</div>
                      <div v-if="activityType != '10107'">下单时间：{{item.orderStartTime}}</div>
                      <div v-else>
                        <div v-if="orderStatus == 0">付款时间：{{item.paymentConfirmTime}}</div>
                        <div v-else>完成时间：{{item.orderEndTime}}</div>
                      </div>
                    </div>
                    <div class="skuList" v-for="jtem in item.orderCheckSkuRecordList">
                      <div style="display:flex;justify-content:space-between">
                        <div class="skuName">
                          商品名称：{{jtem.skuName}}
                        </div>
                        <div class="oMsg" :style="jtem.skuDetail == '活动商品' ? 'color:#4fc08d' : 'color:red'">{{ jtem.skuDetail }}</div>
                      </div>
                      <div class="skuMsg">
                        <div>SKU金额：¥{{jtem.skuPrice}}</div>
                        <div>数量：{{jtem.skuNum}}个</div>
                      </div>
                    </div>
                    <div class="o2 oMsg">
                      <div>订单状态：{{item.orderStatus}}</div>
                      <div>订单金额（{{item.orderPriceType}}）：{{item.orderTotalPrice}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="不满足规则订单" name="不满足规则订单">
            <div class="orderList">
              <div class="noFind" v-if="failList.length == 0 && cntOrPriceFailList.length == 0 && taskFailList.length == 0">
                ～～～没有找到订单哦～～～
              </div>
              <div v-else>
                <div class="cntOrPriceFailDiv">
                  <div class="failReason" v-if="cntOrPriceFailList.length > 0">{{cntOrPriceFailList[0].failReason}}</div>
                </div>
                <div class="failItem" v-if="cntOrPriceFailList.length > 0" v-for="(item,index) in cntOrPriceFailList">
                  <div v-if="item.leafNodeList && item.leafNodeList.length > 0">
                    <div class="failOrderItem">
                      <div class="o1 oMsg" style="color: red;">当前订单已被平台拆单，以下所有子订单只可参与一次活动</div>
                      <div class="o1 oMsg">
                        <div>父订单号：{{ item.orderId }}</div>
                        <div>下单时间：{{ item.orderStartTime }}</div>
                      </div>
                      <div v-for="jtem in item.leafNodeList" class="leafItem">
                        <div class="leafTop">
                          <div>子订单号：{{jtem.orderId}}</div>
                          <div>订单状态：{{jtem.orderStatus}}</div>
                        </div>
                        <div class="skuList" v-for="ktem in jtem.orderCheckSkuRecordList">
                          <div style="display:flex;justify-content:space-between">
                            <div class="skuName">
                              商品名称：{{ktem.skuName}}
                            </div>
                            <div class="oMsg" :style="ktem.skuDetail == '活动商品' ? 'color:#4fc08d' : 'color:red'">{{ktem.skuDetail}}</div>
                          </div>
                          <div class="skuMsg">
                            <div>SKU金额：¥{{ktem.skuPrice}}</div>
                            <div>数量：{{ktem.skuNum}}个</div>
                          </div>
                        </div>
                      </div>
                      <div class="o2 oMsg">
                        <div>订单金额（{{item.orderPriceType}}）：{{item.orderTotalPrice}}</div>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <div class="failOrderItem">
                    <div class="o1 oMsg">
                      <div>订单号：{{item.orderId}}</div>
                      <div v-if="activityType != '10107'">下单时间：{{item.orderStartTime}}</div>
                      <div v-else>
                          <div v-if="orderStatus == 0">付款时间：{{item.paymentConfirmTime}}</div>
                          <div v-else>完成时间：{{item.orderEndTime}}</div>
                      </div>
                    </div>
                    <div class="skuList" v-for="jtem in item.orderCheckSkuRecordList">
                      <div style="display:flex;justify-content:space-between">
                        <div class="skuName">
                          商品名称：{{jtem.skuName}}
                        </div>
                        <div class="oMsg" :style="jtem.skuDetail == '活动商品' ? 'color:#4fc08d' : 'color:red'">{{jtem.skuDetail}}</div>
                      </div>
                      <div class="skuMsg">
                        <div>SKU金额：¥{{jtem.skuPrice}}</div>
                        <div>数量：{{jtem.skuNum}}个</div>
                      </div>
                    </div>
                    <div class="o2 oMsg">
                      <div>订单状态：{{item.orderStatus}}</div>
                      <div>订单金额（{{item.orderPriceType}}）：{{item.orderTotalPrice}}</div>
                    </div>
                  </div>
                  </div>
                </div>
                <!-- taskFailList -->
                <div class="taskFailListDiv" v-if="taskFailList.length > 0">
                  <div class="taskFailItem" v-for="item in taskFailList">
                    <div class="failReason">{{item.failReason}}</div>
                    <div class="failOrderItem" v-for="jtem in item.orderCheckRecordList">
                      <div class="o1 oMsg">
                        <div>订单号：{{jtem.orderId}}</div>
                        <div  v-if="activityType != '10107'">下单时间：{{jtem.orderStartTime}}</div>
                        <div v-else>
                          <div v-if="orderStatus == 0">付款时间：{{jtem.paymentConfirmTime}}</div>
                          <div v-else>完成时间：{{jtem.orderEndTime}}</div>
                        </div>
                      </div>
                      <div class="skuList" v-for="ktem in jtem.orderCheckSkuRecordList">
                        <div style="display:flex;justify-content:space-between">
                          <div class="skuName">
                            商品名称：{{ktem.skuName}}
                          </div>
                          <div class="oMsg" style="color:red" v-if="ktem.skuDetail">{{ktem.skuDetail}}</div>
                        </div>
                        
                        <div class="skuMsg">
                          <div>SKU金额：¥{{ktem.skuPrice}}</div>
                          <div>数量：{{ktem.skuNum}}个</div>
                        </div>
                      </div>
                      <div class="oMsg">
                        <div>订单状态：{{jtem.orderStatus}}</div>
                        <div>订单金额（{{jtem.orderPriceType}}）：{{jtem.orderTotalPrice}}</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="failItem" v-for="item in failList">
                  <div v-if="item.leafNodeList && item.leafNodeList.length > 0">
                    <div class="failReason">{{item.failReason}}</div>
                    <div class="failOrderItem">
                      <div class="o1 oMsg" style="color: red;">当前订单已被平台拆单，以下所有子订单只可参与一次活动</div>
                      <div class="o1 oMsg">
                        <div>父订单号：{{ item.orderId }}</div>
                        <div>下单时间：{{ item.orderStartTime }}</div>
                      </div>
                      <div v-for="jtem in item.leafNodeList" class="leafItem">
                        <div class="leafTop">
                          <div>子订单号：{{jtem.orderId}}</div>
                          <div>订单状态：{{jtem.orderStatus}}</div>
                        </div>
                        <div class="skuList" v-for="ktem in jtem.orderCheckSkuRecordList">
                          <div style="display:flex;justify-content:space-between">
                            <div class="skuName">
                              商品名称：{{ktem.skuName}}
                            </div>
                            <div class="oMsg" :style="ktem.skuDetail == '活动商品' ? 'color:#4fc08d' : 'color:red'">{{ktem.skuDetail}}</div>
                          </div>
                          <div class="skuMsg">
                            <div>SKU金额：¥{{ktem.skuPrice}}</div>
                            <div>数量：{{ktem.skuNum}}个</div>
                          </div>
                        </div>
                      </div>
                      <div class="o2 oMsg">
                        <div>订单金额（{{item.orderPriceType}}）：{{item.orderTotalPrice}}</div>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <div class="failReason">{{item.failReason}}</div>
                    <div class="failOrderItem">
                      <div class="o1 oMsg">
                        <div>订单号：{{item.orderId}}</div>
                        <div v-if="activityType != '10107'">下单时间：{{item.orderStartTime}}</div>
                        <div v-else>
                            <div v-if="orderStatus == 0">付款时间：{{item.paymentConfirmTime}}</div>
                            <div v-else>完成时间：{{item.orderEndTime}}</div>
                          </div>
                      </div>
                      <div class="skuList" v-for="jtem in item.orderCheckSkuRecordList">
                        <div style="display:flex;justify-content:space-between">
                          <div class="skuName">
                            商品名称：{{jtem.skuName}}
                          </div>
                          <div class="oMsg" :style="jtem.skuDetail == '活动商品' ? 'color:#4fc08d' : 'color:red'">{{jtem.skuDetail}}</div>
                        </div>
                        <div class="skuMsg">
                          <div>SKU金额：¥{{jtem.skuPrice}}</div>
                          <div>数量：{{jtem.skuNum}}个</div>
                        </div>
                      </div>
                      <div class="o2 oMsg">
                        <div>订单状态：{{item.orderStatus}}</div>
                        <div v-if="item.orderPriceType">订单金额（{{item.orderPriceType}}）：{{item.orderTotalPrice}}</div>
                        <div v-else>订单金额{{item.orderPriceType}}：{{item.orderTotalPrice}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </van-tab>
        </van-tabs>
        <div class="bottom">
          <p class="order-msg" @click="getOrderNum = true">如何获取订单号</p>
        <van-field v-model="orderId" center clearable label="" placeholder="请输入订单编号">
          <template #button>
            <van-button size="small" type="info" @click="searchFun">订单查询</van-button>
          </template>
        </van-field>
        <div class="orderMsg">如出现已下单，但活动未查询到订单的情况，可手动查询订单</div>
        </div>
      </div>
    </basicPop>

    <!--如何获取订单号-->
    <van-popup v-model="getOrderNum">
      <div class="getOrderNum">
        <img src="//img10.360buyimg.com/imgzone/jfs/t1/165632/7/5949/324932/601cb100E52c23633/3f07618319b6f4e0.jpg" alt="" />
        <van-button type="danger" size="large" @click="getOrderNum = false">返回</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import basicPop from './hdzxtbasicPop.vue';
  import apis1 from '../../../util/apis1.js';
  import taskVo from '../../../util/taskVo.js';

  let { getOrderInfoApi } = apis1;
  import Vue from 'vue';
  import { Tab, Tabs, Field } from 'vant';
  Vue.use(Tab);
  Vue.use(Tabs);
  Vue.use(Field);
  export default {
    props: [],
    components: {
      basicPop
    },
    data() {
      return {
        pop: {
          title: '订单校验',
          titlepop: {
            "backgroundImage": "url(//img10.360buyimg.com/imgzone/jfs/t1/141588/29/18217/44025/5fd571b9Ef55329ec/42dba91b188b9dce.png)"
          }
        },
        getOrderNum: false,
        activeName: '满足规则订单',
        orderId: '',
        ruleMsg: '',
        successList: [],
        failList: [],
        cntOrPriceFailList: [],
        taskFailList:[],
        successOrderListForTask:[],
        activityType:0,
        orderStatus:0,
        priceType:'',
        skuType:'',
      };
    },
    created() {
      document.querySelector('body').setAttribute('style', 'position:#fixed;top:0;height:100%;overflow:hidden');
      this.initData();
    },
    methods: {
      initData() {
        this.activityType = sessionStorage.getItem("activityType");
        this.isCheckOrder = false;
        this.getOrderInfoFun()
        this.orderStatus = sessionStorage.getItem("orderStatus");
      },
      getOrderInfoFun() {
        getOrderInfoApi((this.orderId), res => {
          if(this.activityType == '10107'||this.activityType == '10095'|| this.activityType == '10094'|| this.activityType == '10093'|| this.activityType == '10091'|| this.activityType == '10089'|| this.activityType == '10086'|| this.activityType == '10084'|| this.activityType == '10092'|| this.activityType == '10082'|| this.activityType == '10059'|| this.activityType == '10020'|| this.activityType == '10042' || this.activityType == '10035' || this.activityType == '10021' || this.activityType == '10046' || this.activityType == '10031' || this.activityType == '10054' || this.activityType == '10041' || this.activityType == '10062' || this.activityType == '10063'){
            this.ruleMsg = taskVo.taskVoMsg()
          }else{
            this.ruleMsg = res.data.ruleData[0].failReason
          }
          if(res.data.successData){
            this.successList = res.data.successData
          }else{
            this.successList = []
          }
          if(res.data.failData && res.data.failData.length > 0){
            this.failList = res.data.failData
            if(this.failList[0].failReason == '未查到有效订单'){
              this.failList = []
            }
          }else{
            this.failList = []
          }
          if(res.data.cntOrPriceFailData){
            this.cntOrPriceFailList = res.data.cntOrPriceFailData
          }else{
            this.cntOrPriceFailList = []
          }
          if(res.data.taskFailList){
            this.taskFailList = res.data.taskFailList
          }else{
            this.taskFailList = []
          }
          if(res.data.successOrderListForTask){
            this.successOrderListForTask = res.data.successOrderListForTask
          }else{
            this.successOrderListForTask = []
          }
          
          if(this.successList.length == 0 && this.successOrderListForTask.length == 0){
            this.activeName = '不满足规则订单'
          }
          this.priceType = res.data.priceType
          this.skuType = res.data.skuType
        })
      },
      searchFun(){
        this.successList = []
        this.failList = []
        this.cntOrPriceFailList = []
        this.taskFailList = []
        this.successOrderListForTask = []
        this.getOrderInfoFun()
      },
      closeClick() {
        document.querySelector('body').removeAttribute('style');
        this.submit();
      }
    }
  };
</script>

<style lang="scss">
  .ruleMaskDiv {
    .van-tabs__nav {
      background: #f2f2f2;
    }
    .van-tab--active {
      color: #ee0a24;
    }
    .basicPopDiv {
      height: auto !important;
    }
  }
  .order-content {
    width: 100%;
    /* // height: 11rem; */
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    padding: 0 0.2rem;
  }
  .order-text {
    margin-top: 0.2rem;
    font-size: 0.24rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
    text-align: left;
  }
  .orderMsg{
    margin-top: 0.2rem;
    font-size: 0.24rem;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #333333;
    text-align: left;
    color: #bbc3cc;
  }
  .orderList {
    width: 100%;
    height: 6rem;
    margin-top: 0.1rem;
    overflow-y: scroll;
    .noFind {
      width: 100%;
      height: 2rem;
      font-size: 0.36rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f69132;
    }
    .orderItem {
      width: 100%;
      padding: 0.15rem;
      border: 1px solid #bbc3cc;
      border-radius: 8px;
      font-size: 0.24rem;
      margin-bottom: 0.15rem;
      background: #fff;
      .skuList {
        width: 100%;
        background: #f0f0f0;
        padding: 0.15rem;
        border-radius: 0.05rem;
        margin-bottom: 0.1rem;
        .skuMsg {
          line-height: 0.3rem;
          font-size: 0.2rem;
          display: flex;
          justify-content: space-between;
        }
      }
      .o1 {
        margin-bottom: 0.1rem;
      }
      .oMsg {
        font-size: 0.2rem;
        display: flex;
        justify-content: space-between;
        font-weight: bold;
      }
    }
    .cntOrPriceFailDiv{
      .failReason {
        font-size: 0.24rem;
        font-weight: bold;
        color: #f69132;
        margin-bottom: 0.1rem;
      }
    }
    .taskFailListDiv{
      .taskFailItem{
        .failReason{
          font-size: 0.24rem;
          font-weight: bold;
          color: #f69132;
          margin-bottom: 0.1rem;
        }
        .failOrderItem{
          width: 100%;
          padding: 0.15rem;
          border: 1px solid #bbc3cc;
          border-radius: 8px;
          font-size: 0.24rem;
          margin-bottom: 0.15rem;
          background: #fff;
          .o1 {
            margin-bottom: 0.1rem;
          }
          .oMsg {
            font-size: 0.2rem;
            display: flex;
            justify-content: space-between;
            font-weight: bold;
          }
          .skuList {
            width: 100%;
            background: #f0f0f0;
            padding: 0.15rem;
            border-radius: 0.05rem;
            margin-bottom: 0.1rem;
            .skuMsg {
              line-height: 0.3rem;
              font-size: 0.2rem;
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }
    }
    .failItem {
      .failReason {
        font-size: 0.24rem;
        font-weight: bold;
        color: #f69132;
        margin-bottom: 0.1rem;
      }
      .o1 {
          margin-bottom: 0.1rem;
        }
        .oMsg {
          font-size: 0.2rem;
          display: flex;
          justify-content: space-between;
          font-weight: bold;
        }
      .failOrderItem {
        width: 100%;
        padding: 0.15rem;
        border: 1px solid #bbc3cc;
        border-radius: 8px;
        font-size: 0.24rem;
        margin-bottom: 0.15rem;
        background: #fff;
        .skuList {
          width: 100%;
          background: #f0f0f0;
          padding: 0.15rem;
          border-radius: 0.05rem;
          margin-bottom: 0.1rem;
          .skuMsg {
            line-height: 0.3rem;
            font-size: 0.2rem;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
    .leafItem{
      width: 100%;
      padding: 0.15rem;
      border: 1px dashed #bbc3cc;
      border-radius: 8px;
      font-size: 0.24rem;
      margin-bottom: 0.15rem;
      background: #fff;
      .leafTop{
        display: flex;
        justify-content: space-between;
        font-size: 0.2rem;
      }
    }
  }
  .bottom{
    /* // position: absolute;
    // bottom: 0;
    width: 100%;
    // left: 0;
    // padding: .15rem; */
  }
  .order-msg {
    font-size: 0.2rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: 0.6rem;
    letter-spacing: 0px;
    color: #0083ff;
  }
  .getOrderNum {
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
  }
  .skuName{
    width: 5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制显示的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }
  .gray100 {
    filter: grayscale(100);
  }
</style>
