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

  .BilldownLoadCommon input[type="checkbox"]+label::before {
    content: "\A0";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    border-radius: 4px;
    background-color: white;
    text-indent: .15em;
    line-height: 15px;
    color: white;
    border: 1px solid #e95252;
    cursor: pointer;
  }

  .BilldownLoadCommon input[type="checkbox"]:checked+label::before {
    content: "\2713";
    background-color: #e95252;
    cursor: pointer;
  }

  .BilldownLoadCommon input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }

  .BilldownLoadCommon input[type="checkbox"]:focus+label::before {
    box-shadow: none;
    cursor: pointer;
  }

  .BilldownLoadCommon input[type="checkbox"]:disabled+label::before {
    background-color: gray;
    box-shadow: none;
    color: #555;
    cursor: pointer;
  }

  .BilldownLoadCommon table td {
    text-align: left;
  }

  .newAopbdd {
    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;
  }

  .newQuostayDays {
    padding: 8px 15px;
    background-color: #2aaef2;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
  }

  .wstRedType {
    color: red;
    cursor: pointer;
  }

</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='0'></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='0'></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-input v-model="queryData.Title" clearable></el-input>
          </span>
        </li>
        <li>
          <button class="hollowFixedBtn" @click="getList(),resetPageIndex()">{{$t('pub.searchBtn')}}</button>
          <button class="hollowFixedBtn" @click="goMakeQuo('QuotationPrice_SWT',0)">新增</button>
        </li>
      </ul>
    </div>
    <div class="commonContent" v-loading="loading">
      <ul class="_content">
        <li v-for="item in dataList" :key="item.subCode" :data-id="item.Id" style="padding:0 10px;">
          <div class="_left" style="padding:0;flex:0.3;display:flex;">
            <div class="QT_CodeNum">
              {{$t('hotel.hotel_SerialNumber')}}：{{item.Id}}
            </div>
          </div>
          <div class="_left" style="display:flex;">
            <div style="padding-left:10px">
              <p style="font-size:14px">
                <el-tooltip popper-class="max-w250" effect="dark" :content="item.Title" placement="top-start">
                  <span>线路名称:{{item.LineName}}</span>
                </el-tooltip>
              </p>
              <span>系列名称:{{item.LtName}}</span>
            </div>
          </div>
          <div class="_left" style="padding-left:10px">
            <div>
              <p style="font-size:14px">
                <el-tooltip popper-class="max-w250" effect="dark" :content="item.Title" placement="top-start">
                  <span>{{item.Title}}</span>
                </el-tooltip>
              </p>
            </div>
          </div>
          <div class="_left" style="padding-left:10px">
            <div class="newQuostayDays">
              出发日期 {{item.StartDateStr}}
            </div>
          </div>
          <div class="_cent">
            <div style="margin: 0 13px 0 10px;" class="newQuostayDays">
              {{item.DayNum}} 天</div>
          </div>
          <div class="_cent">
            <el-popover width="400" trigger="click">
              <div class="mainPopDiv">
                <template v-if="item.AuditStatus>-1">
                  <el-form label-width="100px">
                    <el-form-item label="审核人" style="margin-bottom:0;">
                      {{item.AuditMan}}
                    </el-form-item>
                    <el-form-item :label="$t('objFill.shenheishijian')" style="margin-bottom:0;">
                      {{item.AuditTimeStr}}
                    </el-form-item>
                    <el-form-item label="意见" style="margin-bottom:0;">
                      {{item.AuditContent}}
                    </el-form-item>
                  </el-form>
                </template>
              </div>
              <span slot="reference"><span class="teamName"></span>
                审核状态: <span style="cursor:pointer" :class="{'wstRedType':item.AuditStatus==2}"
                  title="点击查看">{{item.AuditStatusStr}}</span>
              </span>
            </el-popover>
          </div>
          <div class="_right">
            <div class="AuditUserInfo clearfix aa" style="margin-left:10px;">
              <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="AU_creatName">
                <div>{{item.CreateByName}}</div>
              </div>
            </div>
            <div style="width:134px;">
              <span class="bianji newAopbdd" @click="goMakeQuo('QuotationPrice_SWT',item.Id)">
                <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start" popper-class="max-w250">
                  <i class="iconfont icon-bianji-smal"></i>
                </el-tooltip>
              </span>
              <span class="newAopbdd" style="background-color:#67c23a;" @click="delQuotation(item.Id)">
                <el-tooltip class="item" effect="dark" content="详情" placement="top-start" popper-class="max-w250">
                  <i class="iconfont icon-biaoge"></i>
                </el-tooltip>
              </span>

              <span style="background:#85ce61; " class="newAopbdd" @click="showDownLoad(item)">
                <el-tooltip class="item" effect="dark" content="下载" placement="top-start" popper-class="max-w250">
                  <i class="iconfont icon-bb-xiazai"></i>
                </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="queryData.currentPage"
      layout="total,prev, pager, next, jumper" :page-size="queryData.pageSize" :total="queryData.total">
    </el-pagination>
    <!-- 下载弹窗 -->
    <el-dialog custom-class='w450' title="报价单下载" :visible.sync="downloadBill" center>
      <div class="BilldownLoadCommon">
        <table style="width:380px;margin-left:44px;" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <th colspan="2" style="height:50px;">
              <span style="margin-left:-60px;">{{$t('salesModule.ChoiceNeed')}}</span>
            </th>
          </tr>
          <tbody>
            <tr height="36">
              <td width="50%"><input id="IsShowBaseInfo" type="checkbox" v-model="downLoadMsg.IsShowBaseInfo" /><label
                  for="IsShowBaseInfo">基础信息</label></td>
              <td width="50%"><input id="IsShowSalePrice" type="checkbox" v-model="downLoadMsg.IsShowSalePrice" /><label
                  for="IsShowSalePrice">建議售價</label></td>
            </tr>
            <tr height="36">
              <td><input id="IsShowSingleRoomPrice" type="checkbox" v-model="downLoadMsg.IsShowSingleRoomPrice" /><label
                  for="IsShowSingleRoomPrice">單房差</label></td>
              <td><input id="IsShowHotel" type="checkbox" v-model="downLoadMsg.IsShowHotel" /><label
                  for="IsShowHotel">飯店</label></td>
            </tr>
            <tr height="36">
              <td><input id="IsShowDinner" type="checkbox" v-model="downLoadMsg.IsShowDinner" /><label
                  for="IsShowDinner">餐食</label></td>
              <td><input id="IsShowBus" type="checkbox" v-model="downLoadMsg.IsShowBus" /><label
                  for="IsShowBus">車資</label></td>
            </tr>
            <tr height="36">
              <td><input id="IsShowSelfFeeTrip" type="checkbox" v-model="downLoadMsg.IsShowSelfFeeTrip" /><label
                  for="IsShowSelfFeeTrip">自費行程</label></td>
              <td><input id="IsShowShopping" type="checkbox" v-model="downLoadMsg.IsShowShopping" /><label
                  for="IsShowShopping">SHOPPING</label></td>
            </tr>
            <tr height="36">
              <td><input id="IsShowBusShop" type="checkbox" v-model="downLoadMsg.IsShowBusShop" /><label
                  for="IsShowBusShop">車購</label></td>

              <td style="display:none;"><input id="IsShowScenic" type="checkbox"
                  v-model="downLoadMsg.IsShowScenic" /><label for="IsShowScenic">景點門票</label></td>
            </tr>
          </tbody>
          <tr height="66">
            <td colspan="2" style="text-align:center;">
              <input type="button" class="normalBtn" style="margin-left:-70px;" :value="$t('pub.sureBtn')"
                @click="SwtDownLoadFile()" />
            </td>
          </tr>
        </table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        EditBtn: false, //报价单修改权限
        userInfo: {},
        queryData: {
          LineId: 0,
          LineteamId: 0,
          PageIndex: 1,
          PageSize: 10,
          total: 0,
          currentPage: 1,
          Title: "",
          AuditStatus: -1,
          IsQAuditStatus: 0, //所有的数据
        },
        loading: true,
        //线路列表
        LineList: "",
        //系列列表
        LineTeamList: "",
        //是否有数据
        noData: false,
        dataList: "",
        downloadBill: false,
        //下载参数
        downLoadMsg: {
          Id: 0,
          FileName: "",
          IsShowBaseInfo: true, //基础信息
          IsShowSalePrice: false, //是否显示建议售价
          IsShowSingleRoomPrice: false, //是否显示单房差
          IsShowHotel: false, //是否显示酒店
          IsShowDinner: false, //是否显示餐食
          IsShowScenic: false, //是否显示景点门票
          IsShowBus: false, //是否显示车资
          IsShowSelfFeeTrip: false, //是否显示自费行程
          IsShowShopping: false, //是否显示自费购物
          IsShowBusShop: false, //是否显示车购
        },
      };
    },
    components: {

    },
    methods: {
      handleCurrentChange(val) {
        this.queryData.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.queryData.pageIndex = 1;
        this.queryData.currentPage = 1;
      },
      //获取线路列表
      getLineList() {
        this.apipost("line_post_GetList", {}, res => {
          if (res.data.resultCode == 1) {
            this.LineList = res.data.data;
          }
        });
      },
      //获取系列列表
      getLineTeamList() {
        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_GetBaoJiaDanSwtPageListService", this.queryData, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.queryData.total = res.data.data.count;
            this.noData = !this.queryData.total > 0;
            this.dataList = res.data.data.pageData;
          }
        });
      },
      //删除报价单
      delQuotation(ID) {
        var that = this;
        this.Confirm(this.$t('sm.schbnhfjscz'), function () {
          let msg = {
            Id: ID,
            Status: 1,
          };
          that.apipost(
            "travel_post_UpdateBaoJiaDanSwtService",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(res.data.message);
                that.getList();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      //报价单跳转
      goMakeQuo(path, Id) {
        this.$router.push({
          name: path,
          query: {
            Id: Id,
            blank: 'y',
            tab: '报价单'
          }
        });
      },
      //开团或修改
      goToOpenTravel(item) {
        var routeName = this.$route.name;
        var path = '';
        if (routeName == 'newQuotation') {
          path = 'TravelManager6'
        }
        if (routeName == 'newQuotation2') {
          path = 'TravelManager5'
        }
        if (item.ID > 0) {
          this.$router.push({
            name: path,
            query: {
              configId: item.ID,
              openState: 1,
              isOffer: 1,
              offerId: item.OfferId,
              blank: 'y'
            }
          });
        } else {
          this.$router.push({
            name: path
          });
        }
      },
      //显示下载弹窗
      showDownLoad(item) {
        this.downLoadMsg.Id = item.Id;
        var fileName = "";
        if (item.CustomerName) {
          fileName += "【" + item.CustomerName + "】";
        } else if (item.LtName) {
          fileName += "【" + item.LtName + "】";
        } else if (item.LineName) {
          fileName += "【" + item.LineName + "】";
        }
        fileName += "成本下载.xls";
        this.downLoadMsg.FileName = fileName;
        this.downloadBill = true;
      },
      //报价单下载
      SwtDownLoadFile() {
        this.downloadBill = false;
        this.loading = true;
        this.GetLocalFile("quotation_get_SwtDownLoadQuotation", this.downLoadMsg, this.downLoadMsg.FileName, res => {
          this.loading = false;
        });
      },
      GetAuth() {
        var actionCode = this.$AuthCode.EditQuotation;
        this.CheckUserAuth(actionCode, res => {
          if (res.data.resultCode == 1 && res.data.data == 1) {
            this.EditBtn = true;
          }
        });
      },
    },
    mounted() {
      this.userInfo = this.getLocalStorage();
      this.getLineList();
      this.getList();
    },
    created() {}
  };

</script>
