<template>
  <div class="flexOne">
    <div class="enrollTotalSearch">
      <ul>
        <li><span><em>线路</em>
            <el-select class='w200' v-model="msg.LineId" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option label="不限" value='-1'></el-option>
              <el-option v-for="item in LineList" :label='item.LineName' :value='item.LineID' :key='item.LineID'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li><span><em>公司</em>
            <el-select class='w200' v-model="msg.BranchId" filterable :placeholder="$t('pub.pleaseSel')" @change='linkageDepartment()'>
              <el-option label="不限" value='-1'></el-option>
              <el-option v-for="item in companyList" :label='item.BName' :value='item.Id' :key='item.Id'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li><span><em>参团类型</em>
            <el-select class='w200' v-model="msg.GroupType" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option label="不限" value='-1'></el-option>
              <el-option v-for="item in ctlxList" :key='item.Id' :label='item.Name' :value='item.Id'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span><em>团号</em></span>
          <el-input class='w200' v-model='msg.TCNUM'></el-input>
        </li>
        <li>
          <span><em>人员选择</em></span>
          <el-select class='w200' v-model="msg.CreateBy" filterable :placeholder="$t('pub.pleaseSel')">
            <el-option label='不限' value='-1'></el-option>
            <el-option v-for='item in employeeList' :label='item.name' :value='item.empId' :key='item.empId'>
            </el-option>
          </el-select>
        </li>
        <li>
          <span><em>订单号</em></span>
          <el-input class='w200' v-model='msg.tempOrderId'></el-input>
        </li>
        <li>
          <span><em>订单状态</em></span>
          <el-select v-model='msg.OrderState' filterable :placeholder="$t('pub.pleaseSel')">
            <el-option label="不限" value='-1'></el-option>
            <el-option v-for="item in ddztList" :label='item.Name' :value='item.Id' :key='item.Id'>
            </el-option>
          </el-select>
        </li>
        <li><span><em>发团日期</em>
            <el-date-picker v-model='msg.QStartDate' @change="dataDuiQ()" class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
            -
            <el-date-picker v-model='msg.QEndDate' @change="dataDuiQ()" class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
          </span>
        </li>
        <li><span><em>报名日期</em>
            <el-date-picker v-model='msg.CStartDate' @change="dataDui()" class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
            -
            <el-date-picker v-model='msg.CEndDate' @change="dataDui()" class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" value="查询" @click="getList();resetPageIndex()" />
        </li>
      </ul>
    </div>
    <!-- 表格 -->
    <div style="clear: both; width: 100%;height: 20px;"></div>
    <table class="enrollTotalSearchTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
      <tr>
        <th width="130">单号&团号</th>
        <th width="60">客户信息</th>
        <th width="70">类型</th>
        <th width="180">系列&线路</th>
        <th width="100">人数/机位数</th>
        <th width="80">单价</th>
        <th width="80">成交单价</th>
        <th width="80">应收总额</th>
        <th width="80">实收</th>
        <th width="80">优惠</th>
        <th width="60">小费</th>
        <th width="80">退款</th>
        <th width="80">平台税金</th>
        <th width="80">平台在途</th>
        <th width="80">待收金额</th>
        <th width="60">状态</th>
        <th v-if="userId==1" width="140">操作</th>
      </tr>
      <tr>
        <td v-show="list.length==0" colspan="15" align="center">暂无数据</td>
      </tr>
      <tbody v-for="(item,index) in list" :key="index">
        <tr>
          <td rowspan="2">
            <p v-if="item.isChargeLossOrders==1" style="color:red">损</p>
            <p class="fbold over_ellipsis" style="width: 100%;cursor:pointer;" :title="item.orderId" @click="goUrlX('团报名清单', 'groupTourOrderByTuan',item.tcid,item.tcnum)">{{item.orderId}}</p>
            <p class="fz12 over_ellipsis" style="width: 100%;text-decoration:underline;cursor:pointer;" :title="item.alName"
              @click="goUrlX('产品查询', 'productQuery',item.tcid,item.tcnum)">{{item.tcnum}}</p>
            <p class="fz12 over_ellipsis" style="width: 100%;">{{item.createBy}}<span v-if="item.leaveStr!=''" style="color:red">({{item.leaveStr}})</span></p>
            <p class="fz12 over_ellipsis" style="width: 100%;">{{item.commissionSPeopleName=='无'?'':item.commissionSPeopleName}}</p>
            <p>发团：{{item.startDate}}</p>
            <p v-if='item.commissionMoney' style="color:red">提成：{{item.commissionMoney}}</p>
            <p v-else-if="item.latestCommissionMoney" style="color:red">提成：{{item.latestCommissionMoney}}</p>
            <div v-if="item.extraRewardMoney!=null&&item.extraRewardMoney>0">奖励金额：<span style="color:#e95252">{{item.extraRewardMoney}}</span></div>
            <div v-if="item.extraDeductMoney!=null&&item.extraDeductMoney>0">扣除金额：<span style="color:#e95252">{{item.extraDeductMoney}}</span></div>
          </td>
          <td>
            <p class="over_ellipsis" style="width: 150px;" :title="item.contactName">{{item.contactName}}</p>
            <p>{{item.contactMobile}}</p>
          </td>
          <td>
            <p class="fz12 over_ellipsis" style="width: 100%;">{{item.orderTypeName}}</p>
          </td>
          <td class="fz12">
            <p style="max-width: 160px;display: block;" class="over_ellipsis" :title="item.lineName">
              <span>{{item.lineName}}</span>
            </p>
            <p style="max-width: 160px;display: block;" class="over_ellipsis" :title="item.ltName">{{item.ltName}}</p>
          </td>
          <td>
            {{item.guestNum}}/{{item.ySeatNum>0? item.ySeatNum+'Y ':''}}{{item.eSeatNum>0? item.eSeatNum+'E ':''}}{{item.fSeatNum>0? item.fSeatNum+'F ':''}}
          </td>
          <td style="color:#FF9C00">{{item.tC_Price}}</td>
          <td style="color:#FF9C00">￥{{item.unit_Price}}</td>
          <td>
            <p style="color:#FF9C00">￥{{item.preferPrice}}</p>
          </td>
          
          
          <td>
            <span v-if='item.isEnd==0' style="cursor: pointer;">{{item.income}}</span>
            <span v-if='item.isEnd!=0' style="cursor: pointer;color: #e95252;">{{item.income}}</span>
          </td>
          <!-- 优惠 -->
          <td>
            <el-popover style='padding: 0;' width="600" trigger="click">
              <div class="personNolayer">
                <table border="0" cellspacing="1" cellpadding="1">
                  <tr>
                    <th>优惠券名称</th>
                    <th>优惠券类型</th>
                    <th>抵扣金额/折扣</th>
                    <th>使用条件</th>
                    <th>获取方式</th>
                    <th>获取日期</th>
                  </tr>
                  <tr v-if='item.couponAllotList.length>0' v-for="(item2,index2) in item.couponAllotList" :key="index2">
                    <td>{{item2.couponsName}}</td>
                    <td>
                      <span v-if="item2.couponsType==1">抵用券</span>
                      <span v-if="item2.couponsType==2">折扣卷</span>
                    </td>
                    <td>{{item2.denomination}}</td>
                    <td>满{{item2.useCondition}}可用</td>
                    <td>
                      <span v-if="item2.accessType==1">抽奖</span>
                      <span v-else></span>
                    </td>
                    <td>{{item2.acessDate}}</td>
                  </tr>
                  <tr v-if='item.couponAllotList.length==0'>
                    <td colspan="6" align="center">暂无数据</td>
                  </tr>
                </table>
              </div>
              <span style="cursor: pointer;color: #e95252;" slot="reference">{{moneyFormat(item.discountMoney)}}</span>
            </el-popover>
          </td>
          <td v-if="item.tipMoney">{{item.tipMoney}}</td>
          <td v-else>0.00</td>
          <td>{{item.refund}}</td>
          <td>{{item.platformTax}}</td>
          <td>{{item.zaiTuMoney}}</td>
          <td><span :class="{color_red_order:item.dueInMoney!==item.preferPrice}">{{item.dueInMoney}}</span></td>
          <td v-if="item.isChargeLossOrders==1" class="fz12" style="color: #e95252">收损</td>
          <td v-else class="fz12" :style="item.orderState===3?'color: #e95252;':''">{{item.statsstr}}</td>
          <td v-if="userId==1">
              <button class="normalBtn" style="margin-left:0;width:95px;padding:0" @click="getSalerInfo(item)">修改业务员</button>
          </td>
        </tr>
        <tr>
          <td colspan="3" class="groupTourOrder_remarks" style="height: 40px;">
            <div>
              <div><span>备注：</span>
                <p><span v-if='item.clientSource==1&&item.brandName!=""'>{{item.brandName}}订单 {{item.platformOrder}};</span>{{item.remarks}}</p>
              </div>
              <div>
                <span>{{item.remarksName}}&ensp;{{item.rematksTime}}</span>
                <el-popover width="600" placement="bottom-end" trigger="click">
                  <div class="groupTourOrder_remarks_popover">
                    <div>历史备注</div>
                    <p v-if="item.remarksList.length !== 0" v-for="(item2, index2) in item.remarksList" :key="index2">
                      <span>{{item2.remarks}}</span>
                      <span>{{item2.createByName}} <span style="color: #666666;">{{item2.createDate}}</span></span>
                    </p>
                    <span v-if="item.remarksList.length === 0">暂无数据</span>
                  </div>
                  <el-button slot="reference" icon="iconfont icon-gengduo" style="padding:0px;border:none;background-color:transparent;"
                    class="groupTourOrder_remarks_btn"></el-button>
                </el-popover>
              </div>
            </div>
          </td>
          <td colspan="4" class="groupTourOrder_remarks" style="height: 40px;">
            <div>
              <div>
                <span>OP备注:</span>
                <p>{{item.oP_Remarks ? item.oP_Remarks : '无'}}</p>
              </div>
            </div>
          </td>
          <td colspan="8" class="groupTourOrder_tickets" style="height: 40px;cursor: pointer;" @click="goUrlSFD('SalesFinancialDetail', '销售财务单据', item)">
            <div>
              <div>收款单据：</div>
              <div>
                <span v-for="(item2,index2) in item.financeList" :key="index2">
                  <span v-if="item2.colorState===1" class="groupTourOrder_tickets_blue">{{item2.frID}}</span>
                  <span v-else-if="item2.colorState===2" class="groupTourOrder_tickets_green">{{item2.frID}}</span>
                  <span v-else-if="item2.colorState===3" class="groupTourOrder_tickets_red">{{item2.frID}}</span>
                  <span v-else-if="item2.colorState===4" class="groupTourOrder_tickets_black">{{item2.frID}}</span>
                </span>
                <span v-if="item.financeList.length===0" style="cursor: default;">暂无数据</span>
              </div>
            </div>
            <div>
              <div>付款单据：</div>
              <div>
                <span v-for="(item2,index2) in item.refundFinanceList" :key="index2">
                  <span v-if="item2.colorState===1" class="groupTourOrder_tickets_blue">{{item2.frID}}</span>
                  <span v-else-if="item2.colorState===2" class="groupTourOrder_tickets_green">{{item2.frID}}</span>
                  <span v-else-if="item2.colorState===3" class="groupTourOrder_tickets_red">{{item2.frID}}</span>
                  <span v-else-if="item2.colorState===4" class="groupTourOrder_tickets_black">{{item2.frID}}</span>
                </span>
                <span v-if="item.financeList.length===0" style="cursor: default;">暂无数据</span>
              </div>
            </div>
            <div>
              <div>发票单据：</div>
              <div>
                <span v-for="(item2,index2) in item.invoiceApplyList" :key="index2">
                  <span v-if="item2.invoiceApplyState===6" class="groupTourOrder_tickets_blue" @click="goIisDetail(item2.id)">{{item2.id}}</span>
                  <span v-else-if="item2.invoiceApplyState===1" class="groupTourOrder_tickets_green" @click="goIisDetail(item2.id)">{{item2.id}}</span>
                  <span v-else-if="item2.invoiceApplyState===5" class="groupTourOrder_tickets_red" @click="goIisDetail(item2.id)">{{item2.id}}</span>
                  <span v-else-if="item2.invoiceApplyState===3" class="groupTourOrder_tickets_black" @click="goIisDetail(item2.id)">{{item2.id}}</span>
                </span>
                <span v-if="item.invoiceApplyList.length===0" style="cursor: default;">暂无数据</span>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
      :page-size=msg.pageSize :total=total></el-pagination>
    <div class="combottomDiv" v-if="showChangeSales" style="height:200px;">
      <updateSalesMan @closeUpdiv="closeSalseDiv" @getList="getList" :subInfo="subInfo"></updateSalesMan>
    </div>
  </div>
</template>

<script>
  import Treeselect from "@riophae/vue-treeselect";
  import updateSalesMan from "../commonPage/updateSalesMan.vue";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components: {
      Treeselect,
      updateSalesMan
    },
    data() {
      return {
        normalizer(node) {
          var obj = {
            id: node.DepartmentId,
            label: node.DepartmentName,
          };
          if (node.ChildList != null && node.ChildList.length > 0) {
            obj.children = node.ChildList;
          }
          return obj;
        },
        defaultImg: 'this.src="' + require("../../assets/img/litheader.png") + '"',
        currentPage: 1,
        total: 0,
        loading: false,
        msg: {
          LineId: "-1",
          RB_Department_Id: null,
          CreateBy: "-1",
          OrderState: "-1",
          CStartDate: "",
          CEndDate: "",
          QStartDate: "",
          QEndDate: "",
          pageIndex: 1,
          pageSize: 10,
          tempOrderId: "",
          SellFormEmp: 0,
          GroupType: '-1',
          TCNUM: '',
          BranchId:'-1',
          IsUnionOrder:'1'
        },
        employeeMsg: {
          RB_Group_id: "0",
          RB_Branch_id: "-1",
          departmentId: "0",
          IsLeave: "-1"
        },
        getCompanyMsg: {
          RB_Group_Id: '0',
          Status: '0',
        },
        getDepartmentMsg: {
          RB_Group_Id: '0',
          RB_Branch_Id: '-1',
          Status: '0',
        },
        isOwn: false,
        list: [],
        LineList: [],
        LineTeamList: [],
        departmentList: [],
        employeeList: [],
        companyList: [],
        ddztList: [],
        countData: {
          // 总报名人数
          TotalGuestNum: 0,
          TotalYSeatNum: 0,
          TotalESeatNum: 0,
          TotalFSeatNum: 0,
          // 正常报名人数
          NormalGuestNum: 0,
          NormalYSeatNum: 0,
          NormalESeatNum: 0,
          NormalFSeatNum: 0,
          // 取消人数
          CancelGuestNum: 0,
          CancelYSeatNum: 0,
          CancelESeatNum: 0,
          CancelFSeatNum: 0,
          // 其他统计项
          Income: 0,
          Commission: 0,
          DueinMoney: 0,
          PreferPrice: 0,
          InteriorNum: 0,
          B2BNum: 0
        },
        ctlxList: [],
        showChangeSales:false,
        //订单编号及业务员信息
        subInfo:{
          CreateBy:'',
          OrderId:0
        },
        userId:0,
      };
    },
    methods: {
      goUrlSFD: function (path, name, item) {
        let obj = JSON.parse(JSON.stringify(item))
        obj.oP_Remarks = ''
        obj.remarksList = []
        obj.refundFinanceList = []
        obj.remarks = []
        obj.ltName = []
        obj.lineName = []
        obj.financeList = []
        obj.guestList = []
        obj.description = []
        this.$router.push({
          name: path,
          query: {  blank: 'y', tab: name, item: JSON.stringify(obj)}
        });
      },
      // 结束日期不能大于开始日期
      dataDui() {
        if (this.msg.CStartDate > this.msg.CEndDate && this.msg.CEndDate !== "") {
          this.$message.error("结束日期不能大于开始日期");
          this.msg.CEndDate = "";
        }
      },
      dataDuiQ() {
        if (this.msg.QStartDate > this.msg.QEndDate && this.msg.QEndDate !== "") {
          this.$message.error("结束日期不能大于开始日期");
          this.msg.QEndDate = "";
        }
      },
      goUrl(name, path, id, tcmun) {
        this.$router.push({
          name: path,
          query: {
            id: id,
            tcmun: tcmun,
            blank: 'y',
            tab: name
          }
        });
      },
      goUrlX(name, path, id, tcmun) {
        this.$router.push({
          name: path,
          query: {
            id: id,
            tcmun: tcmun,
            blank: 'y',
            tab: name
          }
        });
      },
      linkageEmployeeMsg(node, instanceId) {
        this.employeeMsg.departmentId = node.DepartmentId;
        this.msg.CreateBy = "-1";
        this.getEmployee();
      },
      getDdztList() {
        this.apipost(
          "sellorder_post_GetSellOrderStatusEnumList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.ddztList = res.data.data;
            }
          },
          err => {}
        );
      },
      getEmployee() {
        this.apipost(
          "app_get_company_employee",
          this.employeeMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.employeeList = res.data.data;
            }
          },
          err => {}
        );
      },
      getLineList() {
        this.apipost("line_post_GetAllList", {}, res => {
          if (res.data.resultCode == 1) {
            this.LineList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      //获取公司
      getCompany() {
        this.apipost('admin_get_BranchGetList', this.getCompanyMsg, res => {
          if (res.data.resultCode == 1) {
            this.companyList = res.data.data;
          } else {}
        }, err => {})
      },
      linkageDepartment() { //联动部门
        this.msg.RB_Department_Id = null;
        if(this.msg.BranchId!=0){
           this.getDepartmentMsg.RB_Branch_Id = this.msg.BranchId;
        }
        this.getDepartment();
      },
      getDepartment() {
        this.apipost(
          "admin_Get_GetDepartmentTreeForReceiveQuery",
          this.getDepartmentMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.departmentList = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },

      getList() {
        this.loading = true;
        this.apipost(
          "sellorder_post_GetOrderList",
          this.msg,
          res => {
            if (res.data.resultCode == 1) {
              this.loading = false;
              this.total = res.data.data.count;
              this.list = res.data.data.pageData;
            } else {
              this.loading = false;
              this.$message.error(res.data.message);
            }
          },
          err => {}
        );
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      // 获取参团类型
      getCtlxList() {
        this.apipost('sellorder_get_GetOrderJoinEnumList', {}, res => {
          if (res.data.resultCode == 1) {
            this.ctlxList = res.data.data
          }
        }, err => {})
      },
      //点击修改业务员
      getSalerInfo(item){
        this.subInfo.CreateBy = item.createBy;
        this.subInfo.OrderId = item.orderId;
        this.showChangeSales = true;
      },
      //关闭修改业务员
      closeSalseDiv(){
        this.showChangeSales=false;
      },
      goIisDetail: function (id) {  // 跳转发票详情页面
        this.$router.push({
          name: 'invoicesManagerDetail',
          query: { id: id,noDetail: 1,blank: "y",}
        });
      },
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.userId = userInfo.EmployeeId;

      this.getCompanyMsg.RB_Group_Id = this.getDepartmentMsg.RB_Group_Id = userInfo.RB_Group_id; //集团
      this.getCompany();

      this.getCtlxList()
      this.getEmployee();
      this.getLineList();
      this.getDepartment();
      this.getDdztList();
      if (this.$route.query.id) {
        this.msg.tempOrderId = this.$route.query.id;
      }
      if (this.$route.query.isOwn) {
        this.isOwn = true;
        this.msg.SellFormEmp = 1;
      }
      this.msg.CreateBy = this.$route.query.EmployeeId === undefined ? "-1" : this.$route.query.EmployeeId;
      this.msg.QStartDate = this.$route.query.starTime === undefined ? "" : this.$route.query.starTime;
      this.msg.QEndDate = this.$route.query.endTime === undefined ? "" : this.$route.query.endTime;
      if (this.msg.QStartDate === "" && this.msg.QEndDate === "" && !this.msg.tempOrderId) {
        let nowDay = new Date().toLocaleDateString();
        this.msg.QStartDate = nowDay;
        this.msg.QEndDate = nowDay;
      }
      if (this.$route.query.orderId) {
        this.msg.tempOrderId = this.$route.query.orderId;
        this.msg.QStartDate = "";
        this.msg.QEndDate = "";
      }
      this.getList();
    }
  };

</script>

<style>
.color_red_order{
  color: #e95252 !important;
}
  .enrollTotalSearch {
    width: 100%;
    min-height: auto;
    padding: 0 0 20px 0;
  }

  .enrollTotalSearch::after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
  }

  .enrollTotalSearch li {
    float: left;
    font-size: 12px;
    height: 40px;
    color: #666;
    margin: 20px 10px 10px 0;
  }

  .enrollTotalSearch li>span {
    display: inline-block;
  }

  .enrollTotalSearch li span>em {
    display: inline-block;
    min-width: 60px;
    text-align: right;
    font-style: normal;
    margin: 0 12px 0 0;
  }

  .enrollTotalSearch li:last-child {
    float: right;
    position: fixed;
    top: 36px;
    right: 20px;
    text-align: right;
    z-index: 50;
  }

  .enrollTotalSearchTable {
    width: 100%;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
    border-collapse: collapse;
  }

  .enrollTotalSearchTable tr {
    /* border-bottom: 2px solid #333; */
  }

  .enrollTotalSearchTable tr th {
    background: #bdbdbd;
    height: 30px;
    font-size: 12px;
    text-align: left;
    text-indent: 15px;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
  }

  .enrollTotalSearchTable tr {
    background: #fff;
    text-align: left;
  }
.enrollTotalSearchTable tbody tr:last-child {
  border-bottom: 2px solid #333;
}
.enrollTotalSearchTable tr:first-child td:first-child {
  border-bottom: 2px solid #333;
}
  .enrollTotalSearchTable tr td {
    height: 80px;
    padding: 10px;
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
  }

  .enrollTotalSearchTable tr td>img {
    width: 32px;
    height: 32px;
    border-radius: 16px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .enrollTotalSearchTable tr td p {
    line-height: 20px;
  }

  .groupTourOrder_count_green {
    color: #1BC594;
  }

  .groupTourOrder_count_blue {
    color: #4D7AFD;
  }

  .groupTourOrder_count_yellow {
    color: #FF9C00;
  }

  .groupTourOrder_count_gray {
    color: #999999;
  }

  .groupTourOrder_count {
    margin: 0 0 20px 0;
    width: 100%;
    height: auto;
  }

  .groupTourOrder_count_col {
    height: 80px;
  }

  .groupTourOrder_count_item {
    font-weight: 400;
    padding: 10px;
    height: 100%;
    border: 1px solid #E6E6E6;
    background-color: #FFFFFF;
    color: #333333;
  }

  .groupTourOrder_count_item>div>i {
    font-size: 12px;
    vertical-align: bottom;
  }

  .groupTourOrder_count_item>div>span:nth-child(2) {
    font-size: 14px;
    vertical-align: bottom;
  }

  .groupTourOrder_count_item>div>span:nth-child(3) {
    font-weight: bold;
    font-size: 16px;
    vertical-align: bottom;
  }

  .groupTourOrder_count_item>p {
    font-size: 12px;
    line-height: 18px;
  }

  .groupTourOrder_count_item>p>span {
    margin: 0 5px 0 0;
    white-space: nowrap;
  }

  .groupTourOrder_more {
    margin: 0 -12px;
  }

  .groupTourOrder_more>div {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
    color: #333333;
    background-color: #FFFFFF;
    cursor: pointer;
  }

  .groupTourOrder_more>div:hover {
    color: #297BEF;
    background-color: #DCEBFF;
  }

  .groupTourOrder_remarks {
    font-size: 0px;
  }

  .groupTourOrder_remarks>div {}

  .groupTourOrder_remarks>div>div:nth-child(1) {
    float: left;
    display: flex;
    align-items: flex-start;
  }

  .groupTourOrder_remarks>div>div:nth-child(1)>span {
    line-height: 20px;
    font-size: 12px;
    color: #e95252;
    white-space: nowrap;
  }

  .groupTourOrder_remarks>div>div:nth-child(1)>p {
    line-height: 20px;
    font-size: 12px;
    color: #e95252;
  }

  .groupTourOrder_remarks>div>div:nth-child(2) {
    float: right;
    text-align: right;
    font-size: 12px;
    color: #e95252;
  }

  .groupTourOrder_remarks>div>div:nth-child(2)>i {
    font-size: 10px;
    cursor: pointer;
  }

  .groupTourOrder_remarks>div::after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
  }

  .groupTourOrder_remarks_btn {
    padding: 0px;
    width: 12px;
    height: 12px;
    border: none;
    background-color: transparent;
  }

  .groupTourOrder_remarks_btn>i {
    color: #e95252;
    font-size: 12px;
  }

  .groupTourOrder_remarks_popover>div {
    display: inline-block;
    font-size: 14px;
    color: #000000;
  }

  .groupTourOrder_remarks_popover>div::before {
    content: '';
    display: inline-block;
    margin: 0 5px 0 0;
    width: 2px;
    height: 12px;
    background-color: #e95252;
  }

  .groupTourOrder_remarks_popover>span {
    display: block;
    margin: 0 0 0 0;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #000000;
  }

  .groupTourOrder_remarks_popover>p {
    margin: 5px 0 0 0;
    padding: 3px;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    font-size: 12px;
    color: #000000;
  }

  .groupTourOrder_remarks_popover>p:nth-child(even) {
    background-color: #E6E6E6;
  }

  .groupTourOrder_remarks_popover>p>span:nth-child(1) {
    float: left;
  }

  .groupTourOrder_remarks_popover>p>span:nth-child(2) {
    margin: 0 10px 0 0;
    float: right;
  }

  .groupTourOrder_remarks_popover>p::after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0;
  }

  /* .groupTourOrder_tickets>div>span{
	margin: 0 5px 0 0;
	cursor: pointer;
} */
  .groupTourOrder_tickets>div>div>span {
    display: inline-block;
    margin: 0 10px 0 0;
  }

  .groupTourOrder_tickets_red {
    color: #FF0000;
    text-decoration: underline;
  }

  .groupTourOrder_tickets_blue {
    color: #0000FF;
    text-decoration: underline;
  }

  .groupTourOrder_tickets_green {
    color: #008000;
    text-decoration: underline;
  }

  .groupTourOrder_tickets_black {
    color: #000000;
    text-decoration: underline;
  }

  .groupTourOrderByTuan_ico {
    margin: 0 10px 0 0;
  }

  .groupTourOrderByTuan_ico>i {
    display: inline-block;
    margin: 0 2px 0 0;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    vertical-align: middle;
  }

  .groupTourOrderByTuan_ico>span {
    vertical-align: middle;
  }

  .groupTourOrder_tickets>div>div {
    display: table-cell;
    cursor: pointer;
  }

  .groupTourOrder_tickets>div>div:nth-child(1) {
    width: 80px;
  }

  .groupTourOrder_tickets>div>div>span {
    display: inline-block;
    margin: 0 10px 0 0;
  }

</style>