<style>
  @import "../../../assets/css/newTravelManager.css";

  .opbdList {
    font-weight: bold;
    display: inline-block;
    width: 25px;
    height: 25px;
    color: #fff;
    border-radius: 50%;
    line-height: 25px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
  }

  .Audian_cent {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .quoTation .Audit_left {
    align-items: center;
    border-right: 1px dashed #dddddd;
    padding-right: 20px;
  }

</style>
<template>
  <div class="flexOne quoTation">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>所属线路</em>
            <el-select v-model="queryData.LineId" class='w200' filterable :placeholder="$t('pub.pleaseSel')"
              @change="getLineTeamList()">
              <el-option :label="$t('pub.unlimitedSel')" :value='noLimit'></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 v-model="queryData.LineteamId" class='w200' filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='noLimit'></el-option>
              <el-option v-for="item in LineTeamList" :label='item.LtName' :value='item.LtID' :key='item.LtID'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>提交人</em>
            <el-select v-model="queryData.CreateBy" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='noLimit'></el-option>
              <el-option v-for="item in EmployeeList" :label='item.EmName' :value='item.EmployeeId'
                :key='item.EmployeeId'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>出团公司</em>
            <el-select class="multiple_input" v-model="queryData.RB_Branch_Id" filterable clearable>
              <el-option v-for='item in companyList' :key="item.id" :label="item.bName" :value="item.id">
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>出发日期</em>
            <el-date-picker class="w150" type="date" v-model="queryData.StartGroupDate"
              :picker-options="pickerBeginDateBefore" value-format="yyyy-MM-dd" placeholder></el-date-picker>
            <el-date-picker class="w150" type="date" v-model="queryData.EndGroupDate"
              :picker-options="pickerBeginDateAfter" value-format="yyyy-MM-dd" placeholder></el-date-picker>
          </span>
        </li>
        <li>
          <button class="hollowFixedBtn" @click="getList(),resetPageIndex()">查询</button>
        </li>
      </ul>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
      <el-tab-pane v-for="item in $tripUtils.TravelStateList" :label="item.label" :name="item.Id" :key="item.subCode">
      </el-tab-pane>
    </el-tabs>
    <div class="commonContent" v-loading="loading">
      <ul class="_content">
        <li v-for="item in dataList" :key="item.ID" style="padding:0 15px;">
          <div class="Audit_left" style="width:160px">
            <div slot="reference" v-if="item.TCNUMS" class="line1">
              团号：{{item.TCNUMS}}
            </div>
            <div>
              <span>报价单号：{{item.ID}}</span>
            </div>
            <div style="margin-top:1px">类型：
              <template v-if="item.TeamType==1">
                <i style="color:red;font-weight:bold;">{{item.TeamTypeName}}</i>
              </template>
              <template v-else>
                {{item.TeamTypeName}}
              </template>
            </div>

          </div>
          <div class="Audit_left" style="width:20%;">
            <div>
              <p class="quoListName" style="padding-right:20px;width:100%;">
                <span>{{item.LineName}}</span>
              </p>
              <p class="Quo_Content" style="padding-right:20px;width:100%;" v-if="item.LtName">
                <span>{{item.LtName}}</span>
              </p>
              <p class="Quo_Content" style="padding-right:20px;width:100%;">
                <span> 出发日期:{{item.OutDateTime}}</span>
              </p>
            </div>
          </div>
          <div class="Audit_left" style="width:20%;">
            <div>
              <p class="quoListName" style="padding-right:20px;width:100%;">
                <el-tooltip popper-class="max-w250" effect="dark" :content="item.Title" placement="top-start">
                  <span>{{item.Title}}</span>
                </el-tooltip>
              </p>
              <p class="Quo_Content" style="padding-right:20px;width:100%;" v-if="item.CustomerName">
                <span>{{item.CustomerName}}</span>
              </p>
              <p class="Quo_Content" style="padding-right:20px;width:100%;">
                <span>出团公司：{{item.OutBranchName}}
                </span>
              </p>
            </div>
          </div>
          <div class="Audian_cent" style="width:260px;">
            <div class="stayDays">{{item.DayNum}}天</div>
            <div class="">
              销售定价
              <el-popover popper-class="salsSetPrice" trigger="click">
                <div class="priceContentDiv" v-if="item.QuotationPrice!=null">
                  <div>
                    <div>成人</div>
                    <div class="priceList">
                      <div>
                        <span class="pLeftPrice">销售价格：￥{{item.QuotationPrice.B2BMemberPrice}}</span>
                      </div>
                    </div>
                    <div>小孩</div>
                    <div class="priceList">
                      <div>
                        <span class="pLeftPrice">占床：￥{{item.QuotationPrice.ChildNeedPrice}}</span>
                        <span class="pRightPrice">不占床：￥{{item.QuotationPrice.ChildNoNeedPrice}}</span>
                      </div>
                      <div class="priceDivCon">
                        <span class="pLeftPrice">婴儿：￥{{item.QuotationPrice.BabyPrice}}</span>
                        <span class="pRightPrice">附加费：￥{{item.QuotationPrice.BabyChargePrice}}</span>
                      </div>
                    </div>
                    <div>老人</div>
                    <div class="priceList">
                      <div>
                        <span class="pLeftPrice">附加费：￥{{item.QuotationPrice.OldManChargePrice}}</span>
                      </div>
                    </div>
                    <div>杂费</div>
                    <div class="priceList">
                      <div>
                        <span class="pLeftPrice">签证：￥{{item.QuotationPrice.VisaPrice}}</span>
                        <span class="pRightPrice">单房差：￥{{item.QuotationPrice.SingleRoomPrice}}</span>
                      </div>
                    </div>
                    <div>单项报价</div>
                    <div class="priceList">
                      <div>
                        <span class="pLeftPrice">单地接：￥{{item.QuotationPrice.SingleDMCPrice}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <span slot="reference" class="diPrice">{{item.JPYSalePrice}}<span class="qi">起</span></span>
              </el-popover>
            </div>
          </div>
          <div class="_rightAudit">
            <div class="AuditUserInfo clearfix aa" style="width:165px;">
              <div class="AuditDanHeader">
                <img v-if="item.CreateUserPhoto" :src="item.CreateUserPhoto" alt="">
                <img v-else src="../../../assets/img/default_head_img.jpg" alt="">
              </div>
              <div class="AuditUserInfoDetail">
                <div style="width:85px;">{{item.CreateUserName}}</div>
                <div class="AuditChangeDate">{{item.CreateDate}}</div>
              </div>
            </div>
            <div class="AuditStatus">
              <div v-if="item.TravelState==2">
                <div>待审核</div>
              </div>
              <div v-if="item.TravelState==3">
                <div class="Auditapproved">已通过</div>
              </div>
              <div v-if="item.TravelState==4">
                <div class="Auditrejected">已驳回</div>
              </div>
              <template
                v-if="(item.AuditByName&&item.AuditByName!='')||(item.ManagerAduitName&&item.ManagerAduitName!='')">
                <el-popover popper-class="salsSetPrice" trigger="click">
                  <template v-if="item.ManagerAduitName&&item.ManagerAduitName!=''">
                    <div class="priceContentDiv" style="margin-bottom:5px;">
                      <div>
                        <span>审批结果</span>
                        <span class="AuditDate">{{item.ManagerAduitDate}}</span>
                      </div>
                      <div>{{item.ManagerAduitName}}:
                        <template v-if="item.ManagerAduitContent&&item.ManagerAduitContent!=''">
                          {{item.ManagerAduitContent}}
                        </template>
                        <template v-else>
                          无
                        </template>
                      </div>
                    </div>
                  </template>
                  <div class="priceContentDiv" v-if="item.AuditDate&&item.AuditDate!=''">
                    <div>
                      <span>审批结果</span>
                      <span class="AuditDate">{{item.AuditDate}}</span>
                    </div>
                    <div>{{item.AuditByName}}:
                      <template v-if="item.AuditContent&&item.AuditContent!=''">
                        {{item.AuditContent}}
                      </template>
                      <template v-else>
                        无
                      </template>
                    </div>
                  </div>
                  <div slot="reference" class="AuditLookDetail">日志</div>
                </el-popover>
              </template>
            </div>
            <div class="AD_Operation">
              <span class="openGroup opbdList">
                <el-tooltip class="item" effect="dark" content="查看" placement="top-start" popper-class="max-w250">
                  <span @click="offerAudit(item,1)">查</span>
                </el-tooltip>
              </span>
              <span class="openGroup opbdList" v-if="item.TravelState==2">
                <el-tooltip class="item" effect="dark" content="审核" placement="top-start" popper-class="max-w250">
                  <span @click="offerAudit(item,2)">审</span>
                </el-tooltip>
              </span>
              <span class="openGroup opbdList" v-if="item.TravelState==3" >
                <el-tooltip class="item" effect="dark" content="驳回重新调整" placement="top-start" popper-class="max-w250">
                  <span @click="refuseOffer(item)">驳</span>
                </el-tooltip>
              </span>
              <span class="openGroup opbdList">
                <el-tooltip class="item" effect="dark" content="日志" placement="top-start" popper-class="max-w250">
                  <el-popover popper-class="salsSetPrice" trigger="click">
                    <div class="priceContentDiv">
                      <div class="AuditLog">报价单日志</div>
                      <div class="logContact">
                        <div v-for="(childItem,logIndex) in AuditLogList" :key="childItem.subCode">
                          <div class="clearfix">
                            <div class="Auditcircle"></div>
                            <div class="operateName">{{childItem.UserName}}</div>
                            <div class="operateDate">{{childItem.hour}}</div>
                          </div>
                          <div>{{childItem.LogContent}}<span class="spread" v-if="childItem.LogType==2"
                              @click="expectInfo(logIndex)">{{childItem.expectName}}</span></div>
                          <div v-if="childItem.isShow">{{childItem.LogRemark}}</div>
                        </div>
                      </div>
                    </div>
                    <span slot="reference" class="AuditLogSpan" @click="getAudiDanLog(item.ID)">志</span>
                  </el-popover>
                </el-tooltip>
              </span>
            </div>
          </div>
        </li>
      </ul>
      <div class="noData" v-show="noData">
        {{$t('system.content_noData')}}
      </div>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size="queryData.pageSize" :total="total">
    </el-pagination>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        queryData: {
          LineId: 0,
          LineteamId: 0,
          CreateBy: 0,
          PageSize: "5",
          TravelState: 2,
          StartGroupDate: "", //开始日期
          EndGroupDate: "", //结束日期
          RB_Branch_Id: "", //出团公司
        },
        pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.queryData.EndGroupDate == null) {
              return false;
            } else {
              let endTime = new Date(this.queryData.EndGroupDate);
              return endTime.getTime() < time.getTime();
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.queryData.StartGroupDate);
            return startTime.getTime() >= time.getTime();
          }
        },
        loading: true,
        //默认选中
        activeName: "2",
        //员工列表
        EmployeeList: [],
        //日志
        AuditLogList: "",

        //线路列表
        LineList: "",
        noLimit: 0,
        //系列列表
        //是否有数据
        noData: false,
        LineTeamList: "",
        dataList: "",
        total: 0,
        currentPage: 1,
        companyList: [], //出团公司
      };
    },
    components: {

    },
    methods: {
      handleCurrentChange(val) {
        this.queryData.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.queryData.pageIndex = 1;
        this.currentPage = 1;
      },
      //选项卡切换
      handleClick(activeName) {
        this.resetPageIndex()
        this.queryData.TravelState = activeName;
        this.getList();
      },
      //获取操作日志
      getAudiDanLog(ID) {
        let msg = {
          configId: ID
        };
        this.apipost("travel_get_GetTravelOfferLog", msg, res => {
          if (res.data.resultCode == 1) {
            var endDate = new Date();
            endDate.setMonth(endDate.getMonth() + 1);
            var tempData = res.data.data;
            tempData.forEach(x => {
              if (x.LogType == 2) {
                x.isShow = false;
                x.expectName = "展开";
              }
              x.hour = this.$commonUtils.formatMsgTime(x.LogTimeStr);
            });
            this.AuditLogList = tempData;
          }
        });
      },
      expectInfo(logIndex) {
        var flag = this.AuditLogList[logIndex].isShow;
        this.AuditLogList[logIndex].isShow = !flag;
        if (this.AuditLogList[logIndex].isShow) {
          this.AuditLogList[logIndex].expectName = "关闭";
        } else {
          this.AuditLogList[logIndex].expectName = "展开";
        }
      },
      //获取线路列表
      getLineList() {
        this.apipost("line_post_GetList", {}, res => {
          if (res.data.resultCode == 1) {
            this.LineList = res.data.data;
          }
        });
      },
      //获取系列列表
      getLineTeamList(lineId) {
        this.queryData.LineteamId = 0;
        let msg = {
          lineID: this.queryData.LineId,
          isTOOP: 1
        };
        this.apipost("team_post_GetList", msg, res => {
          if (res.data.resultCode == 1) {
            this.LineTeamList = res.data.data;
          }
        });
      },
      //初始化表格数据
      getList() {
        this.loading = true;
        this.apipost(
          "travel_get_GetTravelOfferAuditPageList_V2",
          this.queryData,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.total = res.data.data.count;
              this.noData = !this.total > 0;
              var tempData = res.data.data.pageData;
              tempData.forEach(x => {
                if (x.AuditDate && x.AuditDate != '') {
                  x.hours = this.$commonUtils.formatMsgTime(x.AuditDate);
                }
              });
              this.dataList = tempData;
            }
          }
        );
      },
      //根据当前员工所在部门获取该部门及子部门员工信息
      getEmployeeList() {
        this.apipost(
          "admin_get_GetEmployeeByUserDepartmentId", {},
          res => {
            if (res.data.resultCode == 1) {
              this.EmployeeList = res.data.data;
            }
          }
        );
      },
      offerAudit(item, qType) {
        this.$router.push({
          name: 'QuotationAduit',
          query: {
            offerid: item.OfferId,
            Qtype: qType,
            blank: 'y',
            tab: '报价单审核'
          }
        });
      },
      //驳回报价单
      refuseOffer(item) {
        var that = this;
        var nObj = {
          ID: item.ID,
          AuditContent: "驳回",
          TravelState: 4,
          OfferPayType: 0,
          TeamType: item.TeamType,
        };
        var str = "是否要驳回【" + item.TCNUMS + "】的报价单?";
        this.Confirm(str, function () {
          that.apipost(
            "travel_get_AuditTravelOffer", nObj,
            res => {
              that.loading = false;
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
            err => {}
          );
        });
      },
      getCompanyList() {
        //出团公司
        this.apipost(
          "sellorder_post_GetBranchList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.companyList = res.data.data;
            }
          },
          err => {}
        );
      },
    },
    mounted() {
      this.getCompanyList();
      this.getLineList();
      this.getEmployeeList();
      this.getList();
    }
  };

</script>
