<style scoped>
.row {
  display: flex;
}

.row-c {
  display: flex;
  align-items: center;
}

.column {
  display: flex;
  flex-direction: column;
}

.column-jac {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.column-ac {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
}

.justify-sb {
  justify-content: space-between;
}

.justify-c {
  justify-content: center;
}

.justify-e {
  justify-content: flex-end;
  align-items: flex-end;
}

.flex-g {
  flex-grow: 1;
}

.flex-s {
  flex-shrink: 0;
}

.align-c {
  align-items: center;
}

.cblack {
  color: black;
}

.cf {
  color: #ffffff;
}

.c9e {
  color: #9e9e9e;
}

.c20C997 {
  color: #20c997;
}

.c02C854 {
  color: #02c854;
}

.cff9800 {
  color: #ff9800;
}

.cF1416C {
  color: #f1416c;
}

.cF57A98 {
  color: #f57a98;
}

.c04C8C8 {
  color: #04c8c8;
}

.c059FF6 {
  color: #059ff6;
}

.c3FC4FF {
  color: #3fc4ff;
}

.fz10 {
  font-size: 10px;
}

.fz11 {
  font-size: 11px;
}

.fz12 {
  font-size: 12px;
}

.fz13 {
  font-size: 13px;
}

.fz14 {
  font-size: 14px;
}

.fz15 {
  font-size: 15px;
}

.fz16 {
  font-size: 16px;
}

.fz17 {
  font-size: 17px;
}

.fz18 {
  font-size: 18px;
}

.fbold {
  font-weight: bold;
}

.ml {
  margin-left: 10px;
}

.mr {
  margin-right: 10px;
}

.mt {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mb {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mx {
  margin-left: 10px;
  margin-right: 10px;
}

.mx5 {
  margin-left: 5px;
  margin-right: 5px;
}

.mb5 {
  margin-bottom: 5px;
}

.py {
  padding: 15px 0;
}

.py5 {
  padding: 5px 0;
}

.px5 {
  padding: 0 5px;
}

.px15 {
  padding: 0 15px;
}

.pa15 {
  padding: 15px;
}

.py20 {
  padding: 20px 0;
}

.pb5 {
  padding: 0 0 5px 0;
}

.pa {
  padding: 10px 20px;
}

.pa20 {
  padding: 20px;
}

.pt20 {
  padding: 20px 0;
}

.borderD {
  border-bottom: 1px dashed #dddddd;
}

.bgf {
  background: #ffffff;
}

.bgf5 {
  background: #f5f5f5;
}

.bgE8F5E9 {
  background: #e8f5e9;
}

.bgD9F3FF {
  background: #d9f3ff;
}

.bgFAEAED {
  background: #faeaed;
}

.bj {
  background: #ffffff;
}

.bjFFF3E0 {
  background: #FFF3E0;
}

.radius5 {
  border-radius: 5px;
}

.cursor-pointer {
  cursor: pointer;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.left0 {
  left: 0;
}

.right0 {
  right: 0;
}

.top0 {
  top: 0;
}

.bottom0 {
  bottom: 0;
}

.left20 {
  left: 020px;
}

.right20 {
  right: 20px;
}

.top20 {
  top: 20px;
}

.bottom20 {
  bottom: 20px;
}

.text-center {
  text-align: center;
}

.orderType {
  padding: 3px 15px;
  border-radius: 3px;
  background: #f57a98;
  margin-right: 15px;
}

.orderType.active {
  background: #4dd0e1;
}

.orderType.activeNo {
  background: #E95252;
}

.copy {
  display: inline-block;
  padding: 3px 15px;
  border-radius: 3px;
  margin-left: 20px;
}

.copy:hover {
  background: #f5f5f5;
}

.see-rec div {
  padding: 1px 5px;
  border-radius: 3px;
}

.see {
  border: 1px solid #04c8c8;
}

.seeLK {
  border: 1px solid #059ff6;
}

.see:hover {
  background-color: rgba(4, 200, 200, 0.1);
}

.rec {
  border: 1px solid #04c8c8;
  background-color: rgba(4, 200, 200, 1);
}

.rec:hover {
  border: 1px solid rgba(4, 200, 200, 0.9);
  background-color: rgba(4, 200, 200, 0.9);
}

.cancel:hover {
  background-color: #f3dce2;
}

.confirm:hover {
  background-color: #dcedc8;
}

.change:hover {
  background-color: #d7e9f3;
}

.change1:hover {
  background-color: #dcedc8;
}

.orderop {
  text-align: center;
}

.orderop div {
  width: 100px;
  height: 50%;
  display: flex;
  justify-content: center;
}

.RoomList div {
  border-bottom: 1px solid #e7e7e7;
}

.RoomList div:last-child {
  border: 0;
}

.el-table {
  font-size: 13px;
}

.shezhifrom {
  position: relative;
}

.shebox {
  position: absolute;
  top: 0;
  left: -100px;
  display: none;
}

.shezhifrom:hover .shebox {
  display: block;
}

.flexOne-form-bj h3 {
  font-size: 18px;
  color: black;
  padding: 0 0 20px 0;
  font-weight: 400;
}

.flexOne-type {
  display: flex;
  align-items: center;
  padding: 0 0 20px 0;
}

.flexOne-type b {
  font-size: 13px;
  width: 100px;
  flex-shrink: 0;
}

.flexOne-type div {
  display: flex;
}

.flexOne-description {
  padding: 15px 15px;
  border-radius: 5px;
  background: #E1F5FE;
  margin-bottom: 20px;
}

.flexOne-description b {
  font-size: 14px;
}

.flexOne-description p {
  font-size: 12px;
  color: #4C5759;
  padding: 10px 0 0 0;
}

.flexOne-infor-box b {
  font-size: 13px;
}

.infor-list {
  display: flex;
  flex-direction: column;
}

.list-title {
  padding: 20px 0;
  border-bottom: 1px dashed #eeeeee;
  color: #7E8299;
  font-size: 13px;
}

.list-title,
.list-centent {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}

.infor-list li {
  width: 25%;
}

.list-centent li {
  width: 33.33%;
}

.list-centent.active li {
  width: 25%;
}

/deep/.el-table tr td:first-child {
  border-bottom: 0;
}

/deep/.el-table tr:last-child td {
  border-bottom: 1px solid #EBEEF5;

}

/deep/.el-table tr td {
  border-bottom: 1px solid #EBEEF5;

}
</style>

<template>
  <div>
    <div v-for="(item, index) in OrderList" class="column bgf radius5 px15 mb20">
      <div class="row-c justify-sb align-c py">
        <div class="row-c">
          <div>
            <div class="orderType cf fz12" :class="{ active: item.MailingState == 1,activeNo: item.MailingState == 4 }">
              <template v-if="item.MailingState == 1">自行取件</template>
              <template v-if="item.MailingState > 1&&item.MailingState < 4">邮寄票券</template>
              <template v-if="item.MailingState == 4">电子券</template>
            </div>
          </div>
          <div class="c9e fz12">
            <span>订单编号：</span>
            <span>{{ item.OrderNo }}({{ item.OrderId}})</span>
            <span class="copy cblack cursor-pointer" v-if="copyId != item.OrderId" @click="CopyHandler(item)">复制</span>
            <span class="copy c059FF6 bgD9F3FF cursor-pointer" v-else><i class="el-icon-check mr"></i>已复制</span>
          </div>
        </div>
        <div class="c9e fz12">
          <span>客人信息：{{ item.Name }}({{ item.EName }})/{{ item.Mobile }}</span>
          <span v-if="pagesTitle!='销售'">
            /来源<template v-if="!item.OrderSource&&!item.CustomerId">销售</template>
            <template v-if="!item.OrderSource&&item.CustomerId>0">B2B</template>
            <template v-if="item.OrderSource==1">B2C</template>
          </span>
        </div>
        <div class="row c9e fz12">
          <span class="mr" v-if="item.LureEmpName">引流人：{{ item.LureEmpName }}</span>
          <span>销售：</span>
          <span class="mr">
            {{ item.SaleName }}
          </span>
          <span class="mr" v-if="item.CustomerName">创建人：</span>
          <span class="mr" v-if="item.CustomerName">{{ item.CustomerName }} ({{ item.CustomerContact }}/{{
            item.CustomerTel
          }})</span>
          <span>下单时间：</span>
          <span class="mr">{{ item.CreateTime }}</span>
          <div class="">
            <i class="mx5" :class="{
              'el-icon-alarm-clock c20C997': item.OrderStatus == 1,
              'el-icon-check cblack': item.OrderStatus == 2,
              'el-icon-warning cff9800': item.OrderStatus == 3,
              'el-icon-refresh cF1416C': item.OrderStatus == 4
            }"></i>
            <span class="fz12 cblack" :class="{
              c20C997: item.OrderStatus == 1,
              cblack: item.OrderStatus == 2,
              cff9800: item.OrderStatus == 3,
              cF1416C: item.OrderStatus == 4
            }">
              {{ item.OrderStatusName }}
            </span>
          </div>
        </div>
      </div>
      <div class="mb">
        <el-table :data="item.DetailList" style="width:100%" border>
          <el-table-column label="景区名称(日期)" min-width="100" style="background:#EAEAEA">
            <template slot-scope="scope" v-if="scope.$index == 0" :row="item.DetailList.length">
              <template>
                <div>{{ item.CouponsName }}</div>
                <span style="color: #999999;">{{ item.UseDate }}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="票券名称" style="background:#EAEAEA">
            <template slot-scope="scope">
              {{ scope.row.TicketName }}
            </template>
          </el-table-column>
          <el-table-column label="数量" style="background:#EAEAEA">
            <template slot-scope="scope">
              {{ scope.row.Num }}
            </template>
          </el-table-column>
          <el-table-column label="小计" min-width="70" style="background:#EAEAEA">
            <template slot-scope="scope">
              <span class="fz15 fbold">{{ scope.row.Money.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <template slot="append" v-if="(item.Remark||item.OPRemark||item.isMore)||(item.OrderStatus>1&&item.OrderStatus!=3)">
            <div v-if="(item.OrderStatus>1&&item.OrderStatus!=3)||item.Remark" style="padding:10px;color:#f1416c">客户备注：{{item.Remark}}
              <i v-if="pagesTitle=='销售'&&item.OrderStatus>1&&item.OrderStatus!=3" class="el-icon-edit cursor-pointer c059FF6 mx" @click="editRemark(item)"></i></div>
            <div v-if="(item.OrderStatus>1&&item.OrderStatus!=3)||item.OPRemark" style="padding:10px;color:#f1416c"
            :style="{'padding':!item.Remark&&item.isMore?'0 10px 30px 10px':'0 10px 10px 10px'}">
              OP备注：{{item.OPRemark}}
              <i v-if="pagesTitle=='OP'&&item.OrderStatus>1&&item.OrderStatus!=3" class="el-icon-edit cursor-pointer c059FF6 mx" @click="editRemark(item)"></i>
            </div>
          </template>
        </el-table>
      </div>

      <el-table :data="item.list" style="width:100%" border v-if="item.OrderStatus!=3">
        <el-table-column label="实收" min-width="100">
          <template slot-scope="scope">
            <span class="fz15 fbold">{{ scope.row.Income ? scope.row.Income : "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="成本" min-width="100">
          <template slot-scope="scope">
            <span class="fz15 fbold">{{ scope.row.CostMoney ? scope.row.CostMoney : "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="平台税金" min-width="100">
          <template slot-scope="scope">
            <span class="fz15 fbold">{{
              scope.row.PlatformTax ? scope.row.PlatformTax : "-"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="退款" min-width="100">
          <template slot-scope="scope">
            <span class="fz15 fbold">{{ scope.row.Refund ? scope.row.Refund : "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="毛利" min-width="100">
          <template slot-scope="scope">
            <span class="fz15 fbold">{{ scope.row.Income-scope.row.CostMoney-scope.row.Refund>0?(scope.row.Income-scope.row.CostMoney-scope.row.Refund).toFixed(2):'-' }}</span>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="row justify-sb mt mb20">
        <div class="column px15 bjFFF3E0 radius5 flex-g pa relative" style="max-width: 300px;">
          <div class="fz12 row justify-sb" v-if="item.MailingState != 4">
            <span>{{ item.MailingState > 1 ? '收货地址：' : '自取地址：' }}</span>
            <div :class="{ 'cF1416C': item.MailingState == 2, 'c02C854': item.MailingState == 3 }">
              <template v-if="item.MailingState == 2">
                等待配送
              </template>
              <template v-if="item.MailingState == 3">
                已配送
              </template>
            </div>
          </div>
          <div class="row wrap orderNo fz12 c9e">
            <template v-if="item.MailingState == 2 || item.MailingState == 3">
              {{ item.MailingAddress }}
            </template>
            <template v-else>
              <template v-if="item.MailingAddress==1">
                {{ item.SelffetchAddress ? item.SelffetchAddress : '等待操作确认后，才能看到自取地址' }}
              </template>
              <div class="row" style="margin-right: 10px;" v-if="item.MailingState==4">
                <div class="column">
                  <template v-if="item.TicketCodeFile">
                  <div class="wrap fz12 c9e">
                    电子券
                  </div>
                  <div class="row fz12 see-rec mt">
                    <div class="text-accent q-mr-md c">
                      {{ item.TicketCodeFile.split("/").at(-1) }}
                    </div>
                    <div class="cursor-pointer ml mr rec cf">
                      <a
                        class="cf"
                        style="text-decoration:none"
                        :href="item.TicketCodeFile"
                        >下载</a
                      >
                    </div>
                  </div>
                  </template>
                  <template v-if="item.MailingState==4&&pagesTitle!='销售'&&!item.TicketCodeFile">
                      <div class="fz12 mt c9e">
                        电子券，需要您于
                        <span class="cff9800">{{item.UseDate}}</span> 前
                      </div>
                      <div class="row fz12 see-rec mt">
                        <el-upload ref="my-upload" 
                        :http-request="uploadFileBtn" 
                        v-loading="loadingDZP"
                          :multiple="true" 
                          :show-file-list="false" action="">
                            <div :class="{'cursor-pointer seeLK c059FF6':!loadingDZP,
                            'cursor-pointer see c04C8C8':loadingDZP}" 
                            @click="uploadOrderId=item.OrderId">上传电子券</div>
                          </el-upload>
                      </div>
                  </template>
                  <template v-if="item.MailingState==4&&pagesTitle=='销售'&&!item.TicketCodeFile">
                    '等待操作确认后，才能看到电子券地址'
                  </template>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="column px15 bgf5 radius5 ml flex-g pa relative" style="min-width: 150px;max-width:300px">
          <div class="fz12">收款单据</div>
          <div class="row wrap orderNo fz12 py">
            <span class="cursor-pointer radius5 mr mb px5" 
            :class="{'bgD9F3FF':x.Status==1,'bgFAEAED':x.Status==2,'bjFFF3E0':x.Status==3,
            'c3FC4FF':x.Status==1,'cF1416C':x.Status==2,'cff9800':x.Status==3}" v-for="(x, i) in item.IncomeList"
              @click="openDetails(x)">{{ x.FrID }}</span>
            <span v-if="item.IncomeList.length == 0" class="c9e fz12">
              暂无收款单据
            </span>
          </div>
          <el-tooltip v-if="item.OrderStatus == 2" class="item" effect="dark" content="制单" placement="top">
            <i class="absolute right20 bottom20 el-icon-circle-plus cursor-pointer c059FF6"
              @click="makeAdocument(item, index, 1)"></i>
          </el-tooltip>
        </div>
        <div class="column px15 bgf5 radius5 ml flex-g pa relative" style="min-width: 150px;max-width:300px">
          <div class="fz12">退款单据</div>
          <div class="row wrap orderNo fz12 py">
            <span class="cursor-pointer radius5 mr mb px5" 
            :class="{'bgD9F3FF':x.Status==1,'bgFAEAED':x.Status==2,'bjFFF3E0':x.Status==3,
            'c3FC4FF':x.Status==1,'cF1416C':x.Status==2,'cff9800':x.Status==3}" v-for="(x, i) in item.RefundList"
              @click="openDetails(x)">{{ x.FrID }}</span>
            <span v-if="item.RefundList.length == 0" class="c9e fz12">
              暂无退款单据
            </span>
          </div>
          <el-tooltip v-if="item.OrderStatus == 2" class="item" effect="dark" content="制单" placement="top">
            <i class="absolute right20 bottom20 el-icon-circle-plus cursor-pointer c059FF6"
              @click="makeAdocument(item, index, 2)"></i>
          </el-tooltip>
        </div>
        <div class="column px15 bgf5 radius5 ml flex-g pa relative" style="min-width: 150px;max-width:300px">
          <div class="fz12">成本单据</div>
          <div class="row wrap orderNo fz12 py">
            <span class="cursor-pointer radius5 mr mb px5" 
            :class="{'bgD9F3FF':x.Status==1,'bgFAEAED':x.Status==2,'bjFFF3E0':x.Status==3,
            'c3FC4FF':x.Status==1,'cF1416C':x.Status==2,'cff9800':x.Status==3}" v-for="(x, i) in item.CostList"
              @click="openDetails(x)">{{ x.FrID }}</span>
            <span v-if="item.CostList.length == 0" class="c9e fz12">
              暂无成本单据
            </span>
          </div>
          <div class="item absolute right20 bottom20" v-if="item.OrderStatus == 2 && pagesTitle != '销售'">
            <el-tooltip class="" effect="dark" content="制单"
            placement="top">
            <i class="el-icon-circle-plus cursor-pointer c059FF6"
              @click="makeAdocument(item, index, 3)"></i>
          </el-tooltip>
            <el-tooltip v-if="item.OrderStatus == 2" class="" effect="dark" content="冲抵" placement="top">
              <i class="el-icon-circle-plus cursor-pointer c3FC4FF"
                @click="isOffset(item, index, 3)"></i>
            </el-tooltip>
          </div>
          
        </div>
        <div class="column justify-c px15 bgf5 radius5 ml flex-g pa20">
          <div class="row-c justify-sb pb5" :class="{'borderD':item.MailingMoney>0||item.DiscountsMoney>0}">
            <span class="fz12 c9e">订单总金额</span>
            <div class="ml">
              <span class="fz15 fbold">{{ item.Money.toFixed(2) }}</span>
              <span class="fz12 ml">{{ item.CurrencyName }}</span>
            </div>
          </div>
          <div
            class="row-c justify-sb py5"
            v-if="item.MailingMoney>0"
            :class="{'borderD':item.DiscountsMoney>0}"
          >
            <span class="fz12 c9e">邮寄费</span>
            <div class="ml">
              <span class="fz14">{{ item.MailingMoney.toFixed(2) }}</span>
              <span class="fz12 ml">{{ item.CurrencyName }}</span>
            </div>
          </div>
          <div
            class="row-c justify-sb py5"
            v-if="item.DiscountsMoney>0"
            >
              <span class="fz12 c9e">优惠金额</span>
              <div class="ml">
                <span class="fz14">{{ item.DiscountsMoney.toFixed(2) }}</span>
                <span class="fz12">{{ item.CurrencyName }}</span>
              </div>
          </div>
        </div>
        <div v-if="item.OrderStatus > 0 && item.OrderStatus < 4 && item.OrderStatus != 3"
          class="column justify-c px15 bgE8F5E9 radius5 ml fz12 orderop pa20 flex-s">
          <div v-if="
            item.OrderStatus == 1 &&
            item.IncomeList.length == 0 &&
            item.RefundList.length == 0 &&
            item.CostList.length == 0 && item.OrderSource!=1
          " class="row-c cursor-pointer radius5 cancel py5" @click="clickRightButtom(item, 0)">
            <i v-loading="msg.OrderId == item.OrderId && loading0"></i>
            <span class="cF1416C">取消订单</span>
          </div>
          <div v-if="item.OrderStatus == 1 && pagesTitle != '销售' && item.OrderSource!=1" class="row-c cursor-pointer radius5 confirm py5"
            @click="clickRightButtom(item, 1)">
            <i v-loading="msg.OrderId == item.OrderId && loading1"></i>
            <span class="c20C997">确认订单</span>
          </div>
          <div v-if="item.OrderStatus == 2 && item.MailingState == 2 && pagesTitle != '销售'"
            class="row-c cursor-pointer radius5 cancel py5" @click="clickRightButtom(item, 2)">
            <i v-loading="msg.OrderId == item.OrderId && loading1"></i>
            <span class="cF1416C">邮寄</span>
          </div>
          <!-- <div v-if="item.OrderStatus == 2 && item.MailingState == 1 && pagesTitle != '销售'"
            class="row-c cursor-pointer radius5 cancel py5" @click="clickRightButtom(item, 3)">
            <i v-loading="loading1"></i>
            <span class="cF1416C">设置自提地址</span>
          </div> -->
          <!-- <div
            v-if="item.OrderStatus == 2 || item.OrderStatus == 4"
            class="row-c cursor-pointer radius5 change py5"
            @click="goRoomDetails(item, '订房详情')"
          >
            <span class="c059FF6">明细/编辑</span>
          </div> -->
          <div v-if="item.OrderStatus == 1 && pagesTitle == '销售'" class="row-c cursor-pointer radius5 change py5"
            @click="goRoomDetails(item, '门票预定变更')">
            <span class="c059FF6">订单变更</span>
          </div>
          <div v-if="item.OrderStatus > 1" class="row-c cursor-pointer radius5 change1 py5"
            @click="clickRightButtom(item, 4)">
            <i v-loading="msg.OrderId == item.OrderId && loading2"></i>
            <span class="c20C997">收损</span>
          </div>
          <!-- <template v-if="item.OrderStatus==2">
            <div class="column-jac fz12 flex-s c20C997">
              <div class="mb5">已支付</div>
              <div>
                <span class="fbold fz14">{{item.Money.toFixed(2)}}</span>
                <span>日元</span>
              </div>
            </div>
          </template> -->
        </div>
      </div>
      <div class="mt mb20 bgf5 pa15 row-c" v-if="item.CancelRemark">
        <div style="font-size:16px;font-weight:bold;font-family: pingfangR;">取消理由：</div>
        <div style="margin-left:12px;font-size:12px;color: grey; font-family: microsoft yahei;">{{ item.CancelRemark }}
        </div>
        <div style="margin-left:12px;font-size:12px;font-family: microsoft yahei;">
          {{ item.CancelEmpName }} {{ item.CancelTime }}
        </div>
      </div>
    </div>

    <el-dialog custom-class="w400" :title="typeState == 3 ? '设置自提地址' : '设置收损金额'" :visible.sync="outerVisible">
      <div>
        <el-form label-width="80px" :model="msg" :rules="rules" ref="msg">
          <el-row :gutter="20">
            <!-- <el-col :span="20">
              <el-form-item label="订单状态" prop="State">
                <el-select v-model="msg.State" class="w110 HworkInput">
                  <el-option v-for="item in OrderStatusType" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="20" v-if="typeState == 3">
              <el-form-item label="自提地址" prop="SelffetchAddress">
                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                  v-model="msg.SelffetchAddress"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="20" v-if="typeState == 4">
              <el-form-item label="收损金额" prop="LossMoney">
                <el-input-number class="w200" v-model="msg.LossMoney" :min="0" :max="10000000"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-top: 20px;margin-bottom: 20px;">
            <el-col :span="24" style="text-align: right;">
              <input type="button" class="normalBtn" value="保存" @click="submitForm('msg')" />
              <input type="button" class="hollowFixedBtn" value="取消"
                @click="(outerVisible = false), $refs['msg'].resetFields()" />
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog custom-class="w600" title="取消订单" :visible.sync="cancelOrderDialog">
      <div style="padding-bottom:20px">
        <el-input type="textarea" autofocus rows="5" placeholder="请填写取消订单的缘由" clear="w300"
          v-model="cancelRemark"></el-input>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24" style="text-align: right;">
            <input type="button" class="normalBtn" value="取消订单" @click="cancelOrderHandler" />
            <input type="button" class="hollowFixedBtn" value="关闭" @click="cancelOrderDialog = false" />
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <!-- 变更订单 -->
    <el-dialog custom-class="w800" title="变更订单" :visible.sync="ChangeOrderDialog">
      <div style="padding-bottom:20px">
        <div class="flexOne-form-bj">
          <h3>取票方式</h3>
          <div class="flexOne-type">
            <b>取票方式：</b>
            <div>
              <el-radio v-model="msgParameter.MailingState" label="1">自行取票</el-radio>
              <el-radio v-model="msgParameter.MailingState" label="2">邮寄票券</el-radio>
            </div>
          </div>
          <div class="flexOne-description">
            <b>自行取票说明</b>
            <p>自行前往指定位置取票，當您完成付款後我們將通過郵件通知您取票的門票訊息</p>
          </div>
          <div class="flexOne-infor-box">
            <b>客人讯息 邮寄讯息</b>
            <el-form label-width="80px" :model="msgParameter" :rules="rules2" ref="msgParameter">
              <div class="infor-list">
                <!-- <div class="list-title">
                <li>中文姓名</li>
                <li>英文姓名</li>
                <li>性别</li>
                <li>联络电话</li>
                <li>收件地址</li>
              </div> -->
                </span>
                <div class="list-centent" :class="{ 'active': msg.MailingState == 1 }">
                  <li>
                    <el-form-item label="中文名" prop="Name">
                      <el-input v-model="msgParameter.Name" placeholder="请输入名称" />
                    </el-form-item>
                  </li>
                  <li>
                    <el-form-item label="英文名" prop="EName">
                      <el-input v-model="msgParameter.EName" placeholder="请输入英文名" />
                    </el-form-item>
                  </li>

                  <li>
                    <el-form-item label="电话" prop="Mobile">
                      <el-input type="Number" v-model="msgParameter.Mobile" placeholder="请输入电话" />
                    </el-form-item>
                  </li>
                  <li v-if="msgParameter.MailingState == 2">
                    <el-form-item label="地址" prop="MailingAddress">
                      <el-input style="border-radius: 3px;" v-model="msgParameter.MailingAddress"
                        placeholder="请输入邮寄地址" />
                    </el-form-item>
                  </li>
                  <li class="bottom">
                    <el-form-item label="性别" prop="Sex">
                      <el-radio v-model="msgParameter.Sex" label="1">男</el-radio>
                      <el-radio v-model="msgParameter.Sex" label="2">女</el-radio>
                    </el-form-item>
                  </li>
                </div>
              </div>
            </el-form>
            <div style="margin-top: 20px;">
              <el-input style="width: 100%;" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                v-model="msgParameter.Remark" placeholder="订单备注" />
            </div>
          </div>
        </div>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24" style="text-align: right;">
            <input type="button" class="hollowFixedBtn" value="取消" @click="ChangeOrderDialog = false" />
            <input type="button" class="normalBtn" value="确定" @click="submit2" />
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <!-- op备注 -->
    <el-dialog custom-class='addCompany' :title="pagesTitle=='销售'?'编辑客户备注':'编辑OP备注'" :visible.sync="isShowRemark" center width="400px">
      <el-row class="flex" style="margin-top: 10px;">
        <el-col>
          <span style="display: block;margin-bottom: 10px;">备注：</span>
          <span>
            <el-input type="textarea" :rows="4" v-model="postMsg.Remark">
            </el-input>
          </span>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="isShowRemark = false">取消</button> &nbsp;
        <button class="normalBtn" type="primary" @click="submitEditRemark">{{$t('pub.sureBtn')}}</button>
      </div>
    </el-dialog>
    <offset :isShow="cdState" :obj="queryObj" @close="cdState=false"></offset>
  </div>
</template>
<script>
  import offset from '../../public/offset.vue';
export default {
  components: {
    offset
    },
  props: ["OrderList", "pagesTitle"],
  data() {
    return {
      postMsg:{OrderId:0,Type:1,Remark:''},
      isShowRemark: false,
      queryObj:null,
      cdState: false,
      copyId: 0,
      loading0: false,
      loading1: false,
      loading2: false,
      loading3: false,
      BillMakingMsg: {
        // PeroidsId: null,
        // Type: null,
        // EmpIds:'',
        OtherType: 61,
        ReFinanceId: "",
        ReFinanceId2: ""
      },
      userInfo: {},
      msg: {
        OrderId: "",
        LossMoney: 0,
        State: '',//状态 1确认 2已邮寄 3设置自提 4收损
        SelffetchAddress: ''
      },
      msgParameter: {
        IsUpdateMailing: 1,
        OrderId: 0,
        Money: 0.0,
        Remark: '',
        MailingState: '1',//邮寄状态 1自取 2邮寄
        MailingAddress: '',//MailingState =2 填写邮寄
        UseDate: '',//门票日期
        Name: '',
        EName: '',
        Sex: '1',//1男2女
        Birthday: '',
        Mobile: '',
        CouponsId: '',//景点id
        DetailList: [],
      },
      rules2: {
        Name: [{
          required: true,
          message: '请输入中文名',
          trigger: 'blur'
        }],
        EName: [{
          required: true,
          message: '请输入英文名',
          trigger: 'blur'
        }],
        Mobile: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            pattern: this.$commonUtils.Regex.el_ISphone,
            message: "请输入正确的电话"
          }
        ],
        MailingAddress: [{
          required: true,
          message: '请输入邮寄地址',
          trigger: 'blur'
        }],
      },
      outerVisible: false,
      rules: {
        State: [
          {
            required: true,
            message: "请选择订单状态",
            trigger: "change"
          }
        ],
        SelffetchAddress: [
          {
            required: true,
            message: "请输入自提地址",
            trigger: "blur"
          }
        ],
        LossMoney: [
          {
            required: true,
            message: "请输入收损金额",
            trigger: "blur"
          }
        ]
      },
      cancelOrderDialog: false,
      cancelRemark: "",
      cancelOrderId: 0,
      uploadOrderId: 0,
      loading: false,
      fileList: [],
      GuestFile: '',
      ChangeOrderDialog: false,
      OrderStatusType: [
        { Name: this.$t('OrderList.orderStatus.apply'), ID: '1' },
        { Name: this.$t('OrderList.orderStatus.check'), ID: '2' },
        { Name: this.$t('OrderList.orderStatus.cancel'), ID: '3' },
        { Name: this.$t('OrderList.orderStatus.sun'), ID: '4' },
      ],
      items: null,
      typeState: '',
      loadingDZP: false,
      uploadOrderId: 0,
      GuestFile: ''
    };
  },
  watch: {
    pagesTitle(val, oldval) {
      this.pagesTitle = val
    },
    OrderList: {
      handler(val, oldVal) {

      }
    }
  },
  methods: {
    isOffset(row, index, num){
      this.makeAdocument(row, index, num,'Offset')
      setTimeout(()=>{
        this.cdState = true
      },100)
      
    },
    editRemark(item){
      this.postMsg.OrderId = item.OrderId
      this.postMsg.Remark = this.pagesTitle=='销售'?item.Remark:item.OPRemark
      this.isShowRemark = true
    },
    submitEditRemark(){
      if(!this.postMsg.Remark){
        this.$message.error('OP备注不能为空');
        return
      }
        this.apipost('ticket_post_SetTicketOrderRemark', {
          OrderId: this.postMsg.OrderId,
          Type: this.pagesTitle=='销售'?1:2,
          Remark: this.postMsg.Remark
        }, res => {
          if (res.data.resultCode == 1) {
              this.isShowRemark = false
              this.$emit('success')
              this.$forceUpdate();
          } else {
            this.Error(res.data.message);
          }
        })
    },
    submit2() {
      if (this.loading3) return
      this.$refs['msgParameter'].validate((valid) => {
        if (valid) {
          this.setFormMsg2()
        } else {
          return false;
        }
      });
    },
    setFormMsg2() {
      if (this.msgParameter.MailingState == '1') {
        this.msgParameter.MailingAddress = ''
      }
      let m = {
        IsUpdateMailing: 1,
        OrderId: this.msgParameter.OrderId,
        CouponsId: this.msgParameter.CouponsId,
        Money: this.msgParameter.Money,
        UseDate: this.msgParameter.UseDate,
        Birthday: this.msgParameter.Birthday,
        DetailList: this.msgParameter.DetailList,
        MailingState: this.msgParameter.MailingState,//邮寄状态 1自取 2邮寄
        MailingAddress: this.msgParameter.MailingAddress,//MailingState =2 填写邮寄
        Name: this.msgParameter.Name,
        EName: this.msgParameter.EName,
        Sex: this.msgParameter.Sex,//1男2女
        Mobile: this.msgParameter.Mobile,
        Remark: this.msgParameter.Remark,
      }
      this.loading3 = true
      this.apipost("ticket_post_SetSaleTicketOrder", m,
        res => {
          this.loading3 = false
          if (res.data.resultCode == 1) {
            this.Success('变更成功');
            this.$emit('success')
            this.ChangeOrderDialog = false
          } else {
            this.Error('变更失败')
          }
        },
        err => {
          this.loading3 = false
          this.Error(err.message)
        });
    },
    uploadFileBtn(file) {
      let ft = file.file.name.substring(file.file.name.lastIndexOf('.') + 1, file.file.name.length).toUpperCase();
      let typeOk = false;
      let FileName = file.file.name.substring(0, file.file.name.lastIndexOf("."))
      let newArr = [];
      newArr.push(file.file)
      let path = "/Upload/Temporary/"
      this.$message.info(this.$t('tips.shangchuanzhong'))
      this.UploadSelfFileT(path, newArr, x => {
        this.GuestFile = this.domainManager().ViittoFileUrl + x.data.FilePath
        this.uploadHandleChange()
      }, 1);
    },
    // 上传电子券
    uploadHandleChange() {
      if (this.loading) return
      let msg = {
        OrderId: this.uploadOrderId,
        TicketCodeFile: this.GuestFile
      }
      this.loading = true
      this.apipost(
        "ticket_post_SetTicketCodeFile", msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.uploadOrderId = 0
            this.GuestFile = ''
            this.$emit("success");
          } else {
            this.Error(res.data.message);
          }
        },
        err => {
          this.loading = false;
        }
      );
    },
    // 单据详情
    openDetails(item) {
      let query = {
        id: item.FrID,
        blank: "y",
      };
      this.$router.push({
        path: "/FinancialDocumentsDetail",
        query
      });
    },
    // 制作单据
    makeAdocument(row, index, num, Offset) {
      let type = 0
      if(num==3){
        type = 2
      }else{
        type = num
      }
      this.BillMakingMsg.ReFinanceId = row.OrderId;
      this.BillMakingMsg.ReFinanceId2 = num;
      this.BillMakingMsg.OtherType = 66;
      
        let text = "";
        let query = {};
        if (num == 1) {
          text = "收款";
        } else if (num == 2) {
          text = "付款";
        } else if (num == 3) {
          text = "成本";
        }
      
        query = {
          blank: "y",
          tab: `新增${text}单据`,
          Type: type,
          tradeObj: JSON.stringify(this.BillMakingMsg)
        };
      this.queryObj = query
      if(!Offset){
        this.$store.commit("ChoiceAddFinancialDocuments");
        this.$router.push({
          path: "/ChoiceAddFinancialDocuments",
          query
        });
      }
    },
    // 订单明细
    goRoomDetails(obj, title) {
      var path
      if (title === '订房详情') {
        path = "roomReservationsDetails";
        if (this.userInfo.RB_Group_id == 91) {
          path = "roomReservationsDetails_swt";
        }
        this.$router.push({
          name: path,
          query: {
            id: obj.OrderId,
            OrderType: 1,
            blank: "y",
            tab: title
          }
        });
      } else {//变更门票预定
        this.msgParameter = JSON.parse(JSON.stringify(obj))
        this.msgParameter.MailingState = JSON.stringify(this.msgParameter.MailingState)
        this.msgParameter.Sex = JSON.stringify(this.msgParameter.Sex)
        this.ChangeOrderDialog = true
      }
    },
    clickRightButtom(item, type) {
      // 0取消订单 1确认订单 2已邮寄 3设置自提地址 4收损
      this.msg.OrderId = item.OrderId;
      this.msg.SelffetchAddress = item.SelffetchAddress
      this.items = item
      this.typeState = type
      if (type == 0) {
        if (!this.loading0) {
          this.cancelOrderId = item.OrderId
          // 销售 OP
          if (this.pagesTitle != '销售') {
            this.cancelOrderDialog = true;
          } else {
            this.cancelOrderHandler()
          }

        }
      } else if (type == 1) {
        if (!this.loading1) {
          this.confirmFun(item, type);
        }
      } else if (type == 2) {
        if (!this.loading1) {
          this.confirmFun(item, type);
        }
      } else if (type == 3) {
        if (!this.loading1) {
          this.outerVisible = true;
        }
      } else if (type == 4) {
        if (!this.loading2) {
          this.outerVisible = true;
          this.msg.LossMoney = item.LossMoney ? item.LossMoney : 0;
        }
      }
    },
    // 销售取消订单
    cancelOrder() {
      let that = this
      if (this.loading0) return;
      that.$confirm(`是否确定取消订单？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading0 = true
        this.apipost("ticket_post_CancelSaleTicketOrder", {
          OrderId: this.cancelOrderId,
          IsOPCancel: this.pagesTitle != '销售' ? 1 : 0,
          Remark: this.cancelRemark
        },
          res => {
            this.loading0 = false
            if (res.data.resultCode == 1) {
              this.Success(res.data.message);
              this.$emit("success");
            } else {
              this.Error(res.data.message);
            }
          }).catch(err => {
            this.Error(err.message)
            this.loading0 = false
          })
      }).catch(() => {
        this.loading0 = false
      })
    },
    //提交
    submitForm(msg) {
      //提交创建、修改表单
      this.$refs[msg].validate(valid => {
        if (valid) {
          if (!this.loading2) {
            this.saveUpdate();
          }
        } else {
          // this.Error("请完成必填项");
          return false;
        }
      });
    },
    cancelOrderHandler() {
      if (this.cancelRemark == "" && this.pagesTitle != '销售') {
        this.Error("请填写取消订单的缘由");
        return;
      }
      if (this.loading0) return;
      this.loading0 = true
      this.apipost(
        "ticket_post_CancelSaleTicketOrder",
        {
          OrderId: this.cancelOrderId,
          IsOPCancel: this.pagesTitle != '销售' ? 1 : 0,
          Remark: this.pagesTitle != '销售' ? this.cancelRemark : ''
        },
        res => {
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.cancelOrderDialog = false
            this.cancelOrderId = 0
            this.cancelRemark = ''
            this.$emit("success");
          } else {
            this.Error(res.data.message);
          }
          this.loading0 = false;
        },
        err => {
          this.loading0 = false;
        }
      );

    },

    saveUpdate() {
      let text
      if (this.typeState == 3) {
        text = '是否确认设置自取地址?'
      }
      if (this.typeState == 4) {
        text = '是否确认设置收损?'
      }
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading2 = true;
          this.apipost(
            "ticket_post_SetSaleTicketOrderState",
            {
              OrderId: this.msg.OrderId,
              State: this.typeState,
              SelffetchAddress: this.typeState == 3 ? this.msg.SelffetchAddress : '',
              LossMoney: this.typeState == 4 ? this.msg.LossMoney : '',
            },
            res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message);
                this.$emit("success");
              } else {
                this.Error(res.data.message);
              }
              this.loading2 = false;
              this.outerVisible = false;
            },
            err => {
              (this.loading2 = false), (this.outerVisible = false);
            }
          );
        })
        .catch(() => { });
    },
    confirmFun(item, type) {
      let text
      if (type == 1) {
        text = '是否确认订单?'
      }
      if (type == 2) {
        text = '是否确认邮寄?'
      }
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.loading1 = true;
          this.apipost(
            "ticket_post_SetSaleTicketOrderState",
            {
              OrderId: item.OrderId,
              State: type,
              SelffetchAddress: type == 3 ? this.msg.SelffetchAddress : '',
              LossMoney: type == 4 ? this.msg.LossMoney : '',
            },
            res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message);
                this.$emit("success");
              } else {
                this.Error(res.data.message);
              }
              this.loading1 = false;
            },
            err => {
              this.loading1 = false;
            }
          );
        })
        .catch(() => {
          this.$message.info("已取消！");
        });
    },
    //复制信息
    CopyHandler(item) {
      this.copyId = item.OrderId;
      setTimeout(() => {
        this.copyId = 0;
      }, 2000);
    },
    setEdate() {
      return this.addMoth(new Date().Format("yyyy-MM-dd"), 1);
    },
    addMoth(d, m) {
      let ds = d.split("-"),
        _d = ds[2] - 0;
      let nextM = new Date(ds[0], ds[1] - 1 + m + 1, 0);
      let max = nextM.getDate();
      d = new Date(ds[0], ds[1] - 1 + m, _d > max ? max : _d);
      return d
        .toLocaleDateString()
        .match(/\d+/g)
        .join("-");
    },
    com_onresize() {
      //clientHeight的值由DIV内容的实际高度和CSS中的padding值决定，
      var contentsHeight = document.body.clientHeight;
      var h = contentsHeight - 50 - 180 - 40;
      if (h < 110) {
        return;
      }
      //设置table的行高
      // this.tableHeight = h;
    }
  },
  mounted() {
    this.userInfo = this.getLocalStorage();
    //自适应高度调节
    this.com_onresize();
    window.onresize = () => {
      this.com_onresize();
    };
  }
};
</script>

<style>

</style>
