<style>
/* @import "../../assets/css/newTravelManager.css"; */
.ModifyVisaProduct .TravelLeftMenu {
  width: 120px;
  float: left;
  position: fixed;
  padding-bottom: 20px;
  border-radius: 4px;
  background-color: #fff;
  margin-top: 30px;
  text-align: center;
  z-index: 1;
}
.ModifyVisaProduct .TravelTopTitle {
  width: 100%;
  height: 40px;
  background-color: #333333;
  color: #fff;
  line-height: 40px;
  font-size: 14px;
}
.ModifyVisaProduct .TravelTopTitle {
  width: 100%;
  height: 40px;
  background-color: #333333;
  color: #fff;
  line-height: 40px;
  font-size: 14px;
}
.ModifyVisaProduct .rightTravelInfo {
  float: left;
  margin-left: 160px;
  /* min-width: 1150px; */
  width: 85%;
}
.ModifyVisaProduct .TravelNavList {
  width: 72px;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
  margin: 10px auto;
  font-size: 12px;
  border-radius: 4px;
}
.ModifyVisaProduct .TravelNavList:hover {
  background-color: #e95252;
  color: #fff;
}
.ModifyVisaProduct .TravelLine {
  width: 13px;
  height: 2px;
  background-color: #333333;
  margin: auto;
}
.ModifyVisaProduct .TravelCked {
  background-color: #e95252;
  color: #fff;
}
.ModifyVisaProduct .newTravelRight {
  float: left;
  margin-left: 130px;

  padding: 20px 0;
  width: calc(100% - 130px);
  box-sizing: content-box;
}
.ModifyVisaProduct .btnFixedDiv {
  position: fixed;
  z-index: 999;
  width: 60px;
  height: auto;
  padding-bottom: 10px;
  right: 30px;
  bottom: 20%;
  background-color: #e95252;
  border-radius: 4px;
}
.ModifyVisaProduct .toTop {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}
.ModifyVisaProduct .toTop i {
  font-size: 20px;
}
.ModifyVisaProduct .DTSaveBtn {
  width: 37px;
  height: 37px;
  border-radius: 4px;
  background-color: #ffc2c2;
  margin: 8px;
  color: #cc1212;
  text-align: center;
  line-height: 37px;
  font-size: 12px;
  cursor: pointer;
}
.ModifyVisaProduct .DTSaveBtn span {
  display: block;
}
.ModifyVisaProduct .disClick {
  background-color: #d1d1d1;
  color: #fff;
  border: 1px solid #d1d1d1;
}
.ModifyVisaProduct .TMTitle {
  display: inline-block;
  padding-left: 10px;
  font-size: 14px;
}
.ModifyVisaProduct .TMTitle i {
  display: inline-block;
  width: 3px;
  height: 14px;
  background-color: #e95252;
  margin-right: 10px;
  position: relative;
  top: 2px;
}
.ModifyVisaProduct .TC_tcnum {
  margin-left: 20px;
}
.ModifyVisaProduct .TC_OneKeyUp {
  margin-left: 35%;
  width: 140px;
  line-height: 38px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  text-shadow: 1px 1px 1px #333;
  border-radius: 5px;
  margin-left: 32%;
  position: relative;
  padding: 5px 15px;
  overflow: hidden;
  border: 1px solid #64c878;
  box-shadow: 0 1px 2px #b9ecc4 inset, 0 -1px 0 #6c9f76 inset,
    0 -2px 3px #b9ecc4 inset;
  background: -webkit-linear-gradient(top, #90dfa2, #47bf8c);
  background: -moz-linear-gradient(top, #90dfa2, #47bf8c);
  background: linear-gradient(top, #90dfa2, #47bf8c);
}
.ModifyVisaProduct .foldList {
  width: 90px;
  height: 28px;
  background-color: #e95252;
  color: #fff;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  float: right;
  line-height: 28px;
  border-radius: 16px;
}
.ModifyVisaProduct .Travel_Nav {
  margin: 40px 0;
}
.ModifyVisaProduct .Travel_TT {
  display: inline-block;
  padding: 3px 8px;
  background-color: #333333;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 20px;
}
.ModifyVisaProduct .Travel_Line {
  display: block;
  width: 95%;
  margin: 15px auto;
  border-bottom: 1px dashed #bfbfbf;
}
.ModifyVisaProduct .modify_form .el-form-item {
  display: inline-block;
  width: 290px;
}
#firstAnchor,
#feiyXInxi,
#visacailiao,
#wenxintips {
  background: #fff;
  margin-top: 10px;
  padding: 15px 6px;
  box-sizing: border-box;
}
.ModifyVisaProduct .NotContain {
  margin-top: 50px;
}
.ModifyVisaProduct .TNtitle {
  height: 35px;
  padding: 0 10px;
  text-align: center;
  line-height: 35px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  background-color: #333333;
}
.ModifyVisaProduct .ql-container {
  box-sizing: border-box;
  min-height: 200px;
}
.ModifyVisaProduct .el-textarea {
  border: none;
  height: 100%;
}
.ModifyVisaProduct .el-textarea textarea {
  border: none;
  height: 100%;
}
.ModifyVisaProduct .tag_ul {
  font-size: 14px;
  color: #606266;
  padding-left: 50px;
}
.ModifyVisaProduct .tag_ul li .input-new-tag {
  width: 150px;
}
.ModifyVisaProduct .tag_ul li .el-tag {
  margin-right: 15px;
  margin-bottom: 15px;
  width: 70px;
  padding: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  position: relative;
}
.ModifyVisaProduct .tag_ul li > div {
  margin: 15px 0;
}
.ModifyVisaProduct .el-tag .el-icon-close {
  position: absolute;
  top: 2px;
  right: 0px;
}
.ModifyVisaProduct .Travel_ImgList {
  margin: 10px 0 0 60px;
}
.ModifyVisaProduct .TFimgList {
  float: left;
  width: 170px;
  height: 120px;
  border-radius: 4px;
  position: relative;
  margin: 0 10px 10px 0;
  overflow: hidden;
}
.ModifyVisaProduct .TFIMGzhe {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  text-align: center;
  line-height: 115px;
  border-radius: 4px;
  display: none;
}
.ModifyVisaProduct .TFimgList img {
  width: 100%;
  height: 100%;
}
.ModifyVisaProduct .TFreupload {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  line-height: 32px;
  top: 50px;
  left: 53px;
  display: inline-block;
  text-align: center;
  background-color: gray;
  color: #fff;
}
.ModifyVisaProduct .TFimgList:hover .TFIMGzhe {
  display: block;
}
.ModifyVisaProduct .TFreupload:hover {
  color: #e95252;
  background-color: #fff;
  cursor: pointer;
}
.ModifyVisaProduct .TFimgList .re-delte {
  width: 32px;
  height: 32px;
  background: gray;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  display: inline-block;
  color: #fff;
  margin: 40px auto;
  cursor: pointer;
}
.ModifyVisaProduct .TFimgList .re-delte:hover {
  color: #e95252;
  background: #fff;
}
.ModifyVisaProduct .btn_color{
    background:#e95252;
    border: 1px solid #e95252;
    color:#fff;
    padding: 4px 10px;
}
.ModifyVisaProduct .el-date-editor .el-range-separator{
    width: auto;
}
.el-date-table td.end-date span{
    background:#e95252;
}
.el-date-table td.start-date span{
    background:#e95252;
}

.el-date-table td.start-date:hover span {
    color:#fff!important;
}
.el-date-table td.end-date:hover span {
    color:#fff!important;
}
.ModifyVisaProduct .tag_span{
    display: inline-block;
    width: 150px;
    margin-bottom: 15px;
}
.ModifyVisaProduct .icon-img_bianji_small{
    font-size: 12px;
}
.ModifyVisaProduct .el-upload-list{
    width:500px;
}
</style>
<template>
  <div class="ModifyVisaProduct">
    <div class="clearfix" style="margin:auto;width:1300px;">
      <div class="TravelLeftMenu">
        <div class="TravelTopTitle">页面导航</div>
        <div class="TravelNavList" :class="{'TravelCked':ckedNav==1}" @click.prevent="custormAnchor('firstAnchor',1)">
          基础信息
        </div>
        <div class="TravelLine"></div>
        <!-- <div class="TravelNavList" :class="{'TravelCked':ckedNav==2}" @click.prevent="custormAnchor('secondAnchor',2)">
          预定须知
        </div>
        <div class="TravelLine"></div> -->
        <div class="TravelNavList" :class="{'TravelCked':ckedNav==2}" @click.prevent="custormAnchor('feiyXInxi',2)">
          费用说明
        </div>
        <div class="TravelLine"></div>
        <div class="TravelNavList" :class="{'TravelCked':ckedNav==3}" @click.prevent="custormAnchor('visacailiao',3)">
          签证材料
        </div>
        <div class="TravelLine"></div>
        <div class="TravelNavList" :class="{'TravelCked':ckedNav==4}" @click.prevent="custormAnchor('wenxintips',4)">
          温馨提示
        </div>
        <div class="TravelLine"></div>
      </div>
      <div class="newTravelRight" v-loading="loading">
        <!-- 基础信息 -->
            <div id="firstAnchor">
                <span class="TMTitle">
                    <i></i>基础设置
                </span>
                <!-- <span class="foldList">点击折叠</span>
                <span class="foldList">点击展开</span> -->
                <div class="Travel_Nav">
                    <span class="Travel_TT">信息</span>
                    <span class="Travel_Line"></span>
                </div>

                <el-form
                    class="modify_form"
                    :model="addMsg"
                    :rules="rules"
                    ref="addMsg"
                    label-width="120px"
                >
                   <el-form-item label="出团公司" prop="RB_Branch_Id">
                        <el-select v-model="addMsg.RB_Branch_Id">
                            <el-option :label="$t('pub.unlimitedSel')" :value="-1" key="-1"></el-option>
                            <el-option
                          v-for="item in companyList"
                :label="item.BName"
                :value="item.Id"
                :key="item.Id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('hotel.product_name')" prop="Name">
                    <el-input v-model="addMsg.Name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="签证类型" prop="VisaType">
                    <el-select v-model="addMsg.VisaType" @change="getVisaManagementList">
                        <!-- <el-option :label="$t('pub.unlimitedSel')" value='-1' key='-1'></el-option> -->
                        <el-option label="个签" :value="1" key="1"></el-option>
                        <el-option label="团签" :value="2" key="2"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="签证模板" prop="VisaManagementId">
                        <el-select v-model="addMsg.VisaManagementId">
                            <el-option :label="$t('pub.unlimitedSel')" :value="0" key="0"></el-option>
                            <el-option
                            v-for="item in VisaManagementList"
                            :label="item.Name"
                            :value="item.Id"
                            :key="item.Id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="成本价" prop="CostPrice">
                    <el-input v-model="addMsg.CostPrice"  @keyup.native="checkPrice(addMsg,'CostPrice')" placeholder="请输入" maxlength="20"></el-input>
                    </el-form-item>


                    <el-form-item label="同业价" prop="VisaPrice">
                    <el-input v-model="addMsg.VisaPrice" @keyup.native="checkPrice(addMsg,'VisaPrice')" placeholder="请输入" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="直客价" prop="VisaB2CPrice">
                    <el-input v-model="addMsg.VisaB2CPrice" @keyup.native="checkPrice(addMsg,'VisaB2CPrice')" placeholder="请输入" maxlength="20"></el-input>
                    </el-form-item>

                    <!-- <el-form-item label="提成金额" prop="CommissionPrice">
                    <el-input v-model="addMsg.CommissionPrice" placeholder="请输入"  @keyup.native="checkPrice(addMsg,'CommissionPrice')"></el-input>
                    </el-form-item> -->
                    <el-form-item label="交通过路费" prop="TrafficToll">
                    <el-input v-model="addMsg.TrafficToll" placeholder="请输入"  @keyup.native="checkPrice(addMsg,'TrafficToll')"></el-input>
                    </el-form-item>

                    <el-form-item label="提前预定天数" prop="BookAdvance">
                      <el-input v-model="addMsg.BookAdvance" @keyup.native="checkInteger(addMsg,'BookAdvance')" placeholder="工作日"></el-input>
                    </el-form-item>
                    <el-form-item label="价格有效日期"  style="width:588px">
                        <el-date-picker
                            v-model="PriceDates"
                            type="daterange"
                            :range-separator="$t('OrderList.zhi')"
                            value-format="yyyy-MM-dd"
                            @change="getTimeDate"
                            >
                            </el-date-picker>
                          </br>
                        <!-- <span style="color: red;font-size: 12px;">*结束日期请设置为月20日左右， 防止销售月底报名次月无法提成帐未平。</span> -->
                    </el-form-item>
                    <el-form-item label="热门签证" prop="HotVisa">
                        <el-select v-model="addMsg.HotVisa">
                            <el-option label="是" :value="1" key="1" ></el-option>
                            <el-option label="否" :value="0" key="0" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="送签地" prop="SendCityName">
                        <el-input v-model="addMsg.SendCityName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="入境次数" prop="EntryType">
                      <el-select v-model="addMsg.EntryType">
                          <el-option label="单次" :value="1" key="1" ></el-option>
                          <el-option label="多次" :value="2" key="2" ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="办理时长" prop="ManageDuration" >
                    <el-input v-model.number="addMsg.ManageDuration" placeholder="工作日" @keyup.native="checkInteger(addMsg,'ManageDuration')"></el-input>
                    </el-form-item>
                    <el-form-item label="停留天数">
                        <el-input v-model="addMsg.StayDays" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="限时优惠" prop="FlashSale">
                    <el-select v-model="addMsg.FlashSale">
                        <el-option label="是" :value="1" key="1" ></el-option>
                        <el-option label="否" :value="0" key="0" ></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="签证有效期">
                        <el-input v-model="addMsg.VisaValidity" placeholder="请输入"></el-input>
                    </el-form-item>

                    <span class="Travel_Line"></span>
                    <div>
                        <el-form-item label="签证关联国家" prop="VisaCountryId">
                            <el-select @change="VisaCountry" v-model="addMsg.VisaCountryId" class="dateClass">
                              <el-option :label="$t('pub.unlimitedSel')" :value="0" :key="0" ></el-option>
                                <el-option
                                v-for="item in Visacountry"
                                :label="item.CountryName"
                                :value="item.Id"
                                :key="item.Id"
                                ></el-option>
                                </el-select>
                            </el-form-item>
                            <ul class="tag_ul">
                                <li>
                                    <span>签证类型</span>
                                    <span style="margin-left:10px">
                                        <el-input
                                            class="input-new-tag"
                                            v-if="inputVisible1"
                                            v-model="inputValue"
                                            ref="saveTagInput1"
                                            size="small"
                                            @blur="CloseTag"
                                            @keyup.enter.native="handleInputConfirm(1)"
                                            >
                                            </el-input>
                                            <el-button v-else class="button-new-tag btn_color" size="mini" @click="showInput(1)">新增</el-button>
                                            </span>
                                            <div>
                                                <span class="tag_span" v-for="tag in CountryTagList" v-if="tag.TagType==1" :key="tag.Id">
                                                    <input type="checkbox" :value="tag.Id" v-model="checkList" :id="tag.Id">
                                                    <label :for="tag.Id">{{tag.TagTame}}</label>
                                                        <el-tooltip
                                                            class="item"
                                                            effect="dark"
                                                            :content="$t('pub.edit')"
                                                            placement="top-start"
                                                            >
                                                            <el-button
                                                                type="primary"
                                                                style="background:#409EFF; border-color:#409EFF;padding:2px"
                                                                icon="iconfont icon-img_bianji_small"
                                                                @click="EditTag(tag,1)"
                                                            ></el-button>
                                                            </el-tooltip>
                                                </span>
                                            </div>
                                    </li>
                                    <li>
                                    <span>产品标签</span>
                                    <span style="margin-left:10px">
                                        <el-input
                                            class="input-new-tag"
                                            v-if="inputVisible2"
                                            v-model="inputValue"
                                            ref="saveTagInput2"
                                            size="small"
                                            @blur="CloseTag"
                                            @keyup.enter.native="handleInputConfirm(2)"
                                            >
                                        </el-input>
                                        <el-button v-else class="button-new-tag btn_color" size="mini" @click="showInput(2)">新增</el-button>
                                    </span>
                                    <div>
                                        <span class="tag_span" v-for="tag in CountryTagList" v-if="tag.TagType==2" :key="tag.Id">
                                            <input type="checkbox" :value="tag.Id" v-model="checkList" :id="tag.Id">
                                            <label :for="tag.Id">{{tag.TagTame}}</label>
                                                <el-tooltip
                                                    class="item"
                                                    effect="dark"
                                                    :content="$t('pub.edit')"
                                                    placement="top-start"
                                                    >
                                                    <el-button
                                                        type="primary"
                                                        style="background:#409EFF; border-color:#409EFF;padding:2px"
                                                        icon="iconfont icon-img_bianji_small"
                                                        @click="EditTag(tag,2)"
                                                    ></el-button>
                                                    </el-tooltip>
                                                </span>
                                            </div>
                                    </li>
                                    <li>
                                    <span>特色服务</span>
                                    <span style="margin-left:10px">
                                        <el-input
                                            class="input-new-tag"
                                            v-if="inputVisible3"
                                            v-model="inputValue"
                                            ref="saveTagInput3"
                                            size="small"
                                            @blur="CloseTag"
                                            @keyup.enter.native="handleInputConfirm(3)"
                                            >
                                            </el-input>
                                            <el-button v-else class="button-new-tag btn_color" size="mini" @click="showInput(3)">新增</el-button>
                                            </span>
                                            <div>
                                                <span class="tag_span" v-for="tag in CountryTagList" v-if="tag.TagType==3" :key="tag.Id">
                                                    <input type="checkbox" :value="tag.Id" v-model="checkList" :id="tag.Id">
                                                    <label :for="tag.Id">{{tag.TagTame}}</label>
                                                        <el-tooltip
                                                            class="item"
                                                            effect="dark"
                                                            :content="$t('pub.edit')"
                                                            placement="top-start"
                                                            >
                                                            <el-button
                                                                type="primary"
                                                                style="background:#409EFF; border-color:#409EFF;padding:2px"
                                                                icon="iconfont icon-img_bianji_small"
                                                                @click="EditTag(tag,3)"
                                                            ></el-button>
                                                            </el-tooltip>
                                                </span>
                                            </div>
                                    </li>
                            </ul>

                    </div>
                        <div class="Travel_ImgList clearfix">
                            <div class="TFimgList" v-for="(item,index) in addMsg.CoverImageList" :key="item.subCode" v-if="index==0">
                                <img v-if="!item.Url" src="../../assets/img/bg_c3@3x.png">
                                <img v-else :src='compressImg(item.Url, "filt", 170, "")'>
                                <div class="TFIMGzhe">
                                <div class="TFreupload" @click="updateTFimg(index)">
                                    <el-upload :file-list="addMsg.CoverImageList" :http-request="reUpload" :multiple="true"
                                            accept="image/jpeg, image/gif, image/png, image/bmp"
                                            :show-file-list="false" action>
                                    <i class="iconfont icon-Edit"></i>
                                    </el-upload>
                                </div>
                                <!-- <div class="re-delte" @click.stop="ExchangeImg(index,0)" v-if="index!=0&&item.Url">
                                    <i class="iconfont icon-zuoyi"></i>
                                </div>
                                <div class="re-delte" @click.stop="ExchangeImg(index,1)"
                                    v-if="index!=addMsg.CoverImageList.length-1&&item.Url">
                                    <i class="iconfont icon-youyi"></i>
                                </div> -->
                                <!-- <div class="re-delte" @click.stop="addImgOpen(index)">
                                    <i class="iconfont icon-img_cz"></i>
                                </div> -->
                                </div>
                            </div>
                    </div>
                </el-form>
            </div>

            <!-- 费用说明（费用包含，费用不包含） -->
            <div id="feiyXInxi">
                <span class="TMTitle">
                    <i></i>费用说明
                </span>
                <!-- <span class="foldList">点击折叠</span>
                <span class="foldList">点击展开</span> -->
                <div>
                    <div class="TNtitle NotContain">
                        费用包含
                    </div>
                    <div class="ql-container">
                       <my-edit v-on:edit-value="addMsg.VisaProductInfo.FeeInclude = arguments[0]" v-bind:editValue="addMsg.VisaProductInfo.FeeInclude"
                        v-bind:toolbarShow="toolbar" v-bind:referenceList="FeeInclude" v-bind:defaultAccount="false"></my-edit>

                    </div>
                    <div class="TNtitle NotContain">
                        费用不包含
                    </div>
                    <div class="ql-container">
                         <my-edit v-on:edit-value="addMsg.VisaProductInfo.FeeNonInclude = arguments[0]" v-bind:editValue="addMsg.VisaProductInfo.FeeNonInclude"
                        v-bind:toolbarShow="toolbar" v-bind:referenceList="FeeInclude" v-bind:defaultAccount="false"></my-edit>

                    </div>

                </div>


            </div>
            <!-- 签证材料 -->
            <div id="visacailiao">
                <span class="TMTitle">
                    <i></i>签证材料
                </span>
                <!-- <span class="foldList">点击折叠</span>
                <span class="foldList">点击展开</span> -->
                <div>
                    <div class="TNtitle NotContain">
                        签证材料
                    </div>
                    <div class="ql-container">
                        <my-edit v-on:edit-value="addMsg.VisaProductInfo.VisaMaterials = arguments[0]" v-bind:editValue="addMsg.VisaProductInfo.VisaMaterials"
                        v-bind:toolbarShow="toolbar" v-bind:referenceList="FeeInclude" v-bind:defaultAccount="false"></my-edit>

                    </div>
                    <div>
                        <el-upload
                        class="upload-demo"
						:file-list="addMsg.VisaProductInfo.DownloadMaterialsFileList"
						:http-request="uploadTest"
                        :on-remove="handleRemove"
						:multiple="true"
						:limit="10"
                        action="">
                            <el-button size="small" type="primary">点击上传</el-button>
                        </el-upload>
                    </div>
                </div>

            </div>


            <!-- 温馨提示 -->
            <div id="wenxintips">
                <span class="TMTitle">
                    <i></i>温馨提示
                </span>
                <div>
                    <div class="TNtitle NotContain">
                        温馨提示
                    </div>
                    <div class="ql-container">
                         <my-edit v-on:edit-value="addMsg.VisaProductInfo.WarmTip = arguments[0]" v-bind:editValue="addMsg.VisaProductInfo.WarmTip"
                        v-bind:toolbarShow="toolbar" v-bind:referenceList="FeeInclude" v-bind:defaultAccount="false"></my-edit>

                    </div>
                </div>

            </div>


            <!-- 返回顶部 -->
            <div class="btnFixedDiv">
                <div class="toTop" @click="backTop">
                    <i class="iconfont icon-huidaodingbu"></i>
                </div>
                <!-- @click="submitForm(1)" -->
                <div v-show="saveBtn" class="DTSaveBtn" @click="SaveVisaProduct('addMsg')">保存</div>
                <!-- <div class="DTSaveBtn">提交</div> -->
                <!-- <div v-if="ConfigId>0" class="DTSaveBtn" :class="{'disClick':!isSubmit}" @click="goB2B()">预览</div> -->
            </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
  import {quillEditor} from "vue-quill-editor";
  import * as Quill from "quill"; //引入编辑器
  import MyEdit from "../EditTemplate.vue";
  //quill编辑器的字体
  var fonts = [
    "SimSun",
    "SimHei",
    "Microsoft-YaHei",
    "KaiTi",
    "FangSong",
    "Arial",
    "Times-New-Roman",
    "sans-serif"
  ];
  var Font = Quill.import("formats/font");
  Font.whitelist = fonts; //将字体加入到白名单
  Quill.register(Font, true);
export default {
    components: {
      "my-edit": MyEdit
    },
  data() {
    return {
        saveBtn:true,
        fileList:[],
        checkList:[],
 companyList: [],
        fonts: [
          "SimSun",
          "SimHei",
          "Microsoft-YaHei",
          "KaiTi",
          "FangSong",
          "Arial",
          "Times-New-Roman",
          "sans-serif"
        ],
        toolbar: {
          clean: false, //加粗
          font: false, //字体
          narrative: true //叙述,
        },
        referenceList:[],
        FeeInclude:[],

      //选中的导航
      ckedNav: 1,
      loading: false,
      value6: "",
        VisaManagementList:[],
        companyList:[],
      addMsg: {
        Id: 0,
        Name: "",
        VisaType: 1,
        SendVisaDate: "",
        VisaPrice: "",
        PeopleNum: "0",
        CostPrice: "",
        EntryType:1,
        CommissionPrice: "0",
        VisaManagementId: "",
        VisaB2CPrice: "",
        TrafficToll:"0",
        VisaProductInfo: {
            DownloadMaterialsFileList:[],
        },
        CoverImageList: [],
        VisaCountryId:"",
        RB_Branch_Id:-1,
      },

      rules: {
        Name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
        customerName: [
          { required: true, message: "请输入客户名", trigger: "blur" }
        ],
        VisaPrice: [
          { required: true, message: "请输入同业价", trigger: "blur" },
          {
            pattern: this.$commonUtils.Regex.el_Isdecimal,
            message: "请输入同业价"
          }
        ],
        VisaB2CPrice: [
          { required: true, message: "请输入直客价", trigger: "blur" },
          {
            pattern: this.$commonUtils.Regex.el_Isdecimal,
            message: "请输入直客价"
          }
        ],
        CostPrice: [
          { required: true, message: this.$t('objFill.qingshurucbj'), trigger: "blur" },
          {
            pattern: this.$commonUtils.Regex.el_Isdecimal,
            message: "请输入成本价"
          }
        ],
        VisaType: [
          { required: true, message: "请选择类型", trigger: "change" }
        ],
        PeopleNum: [{ required: true, message: "请输入人数", trigger: "blur" }],
        CommissionPrice: [
          { required: true, message: "请输入提成金额", trigger: "blur" },
          {
            pattern: this.$commonUtils.Regex.el_Isdecimal,
            message: "请输入提成金额"
          }
        ],
        SendVisaDate: [
          { required: true, message: "请输入价格有效期", trigger: "blur" }
        ]
      },
      inputVisible1: false,
      inputVisible2: false,
      inputVisible3: false,
      productlabel: {},
      inputValue: "",
      CountryTagList: [],
      Visacountry: [],
      // 图片
      updateChoseIndex: 0,
      addimg: false,
      ChooseImgIndex: 0,
      //   价格有效期
      PriceDates:[],
      Pid:0,
    };
  },
    mounted() {
        if(this.$route.query.save){
          this.saveBtn=false;
        }
      if(this.$route.query.Id){
          this.Pid=this.$route.query.Id;
            this.GetVisaProductDetails(this.Pid);
      }
        // this.ScrollMethod();
        this.Getvisacountry();
        this.getCompanyList();
        this.getVisaManagementList();
        this.initFileList();
  },

  created() {

  },

  methods: {
     onEditorChange({editor, html, text}, typeStr) {
        //富文本编辑器  文本改变时 设置字段值
        switch (typeStr) {
          case "FeeInclude":
            this.addMsg.VisaProductInfo.FeeInclude = html;
            break;
          case "FeeNonInclude":
            this.addMsg.VisaProductInfo.FeeNonInclude = html;
            break;
          case "VisaMaterials":
            this.addMsg.VisaProductInfo.VisaMaterials = html;
            break;
          case "WarmTip":
            this.addMsg.VisaProductInfo.WarmTip = html;
            break;
        }
      },
      handleRemove(file, fileList) {
        this.addMsg.VisaProductInfo.DownloadMaterialsFileList=fileList;
      },
    uploadTest(file) {

      let newArr = [];
      newArr.push(file.file);
      let path = "/Upload/DMC/Icon/";
      this.UploadSelfFileT(path, newArr, x => {
        let url = this.domainManager().ViittoFileUrl + x.data.FilePath;
        let Name=x.data.SourceFileName;
        this.addMsg.VisaProductInfo.DownloadMaterialsFileList.push({Url:url,Name:Name,name:Name})

      });
    },

getCompanyList() {
   this.companyList=[];
      let userInfo = this.getLocalStorage();
      let RB_Group_id = userInfo.RB_Group_id;
      let msg = {
        Status: 0,
        is_show: 0,
        RB_Group_Id: RB_Group_id
      };
      this.apipost(
        "admin_get_BranchGetList",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            res.data.data.forEach(x => {
              var obj = {
                Id: "",
                BName: ""
              };
              obj.Id = x.Id.toString();
              obj.BName = x.BName;
              this.companyList.push(obj);
            });
          }
        },
        err => {}
      );
    },
    //   请求签证产品详情
    GetVisaProductDetails(Pid){
        this.PriceDates=[];
         this.apipost(
            "dmc_get_visa_GetVisaProductInfo_V1",
            {Pid:Pid},
            res => {
              if (res.data.resultCode == 1) {
                  let data=res.data.data;
                  data.RB_Branch_Id = String(data.RB_Branch_Id)
                  this.addMsg=res.data.data;
                  this.PriceDates.push(data.EffectiveStartDate)
                  this.PriceDates.push(data.SendVisaDate)
                  let val=data.VisaCountryId;
                  if(val){
                    this.GetProductLabel(val);
                  }
                  this.initFileList();
                //   新增签证字段
                let Download=data.VisaProductInfo.DownloadMaterialsFileList;
                if(Download.length>0){

                    Download.forEach(item=>{
                        item.name=item.Name;
                    })
                }
                //   初始化产品标签被选中的
                let TagList=data.VisaProductTagList;
                if(TagList.length>0){
                    TagList.forEach(tag=>{
                        this.checkList.push(tag.TagId);
                    })
                }
              } else {
                this.Error(res.data.message);
              }
            },
            err => {}
          );
    },
    initAddMasg(){
        this.addMsg= {
        Id: 0,
        Name: "",
        VisaType: "",
        SendVisaDate: "",
        VisaPrice: "",
        PeopleNum: 0,
        CostPrice: "",
        CommissionPrice: "0",
        VisaManagementId: "",
        VisaB2CPrice: "",
        VisaProductInfo: {},
        CoverImageList: [],
        RB_Branch_Id:-1,
      };
      this.PriceDates=[]
    },
    getTimeDate(){
      this.addMsg.EffectiveStartDate = moment(this.PriceDates[0]).format(
        "YYYY-MM-DD"
      );
      this.addMsg.SendVisaDate = moment(this.PriceDates[1]).format(
        "YYYY-MM-DD"
      );
      // let SendVisaDate = moment(new Date(this.addMsg.SendVisaDate)).format("YYYY-MM")+'-25'
      // if(this.addMsg.SendVisaDate>=SendVisaDate){
      //   this.Error(`价格有效结束日期请选择${SendVisaDate}之前日期！`);
      //   return;
      // }
    },
    SaveVisaProduct(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {

            let that = this;
           this.addMsg.VisaProductTagList=[];

           if(this.checkList.length>0){
               this.checkList.forEach(item=>{
                   let obj_tag={TagId:0};
                   obj_tag.TagId=item;
                   this.addMsg.VisaProductTagList.push(obj_tag);
            })
           }
          if (
            !this.PriceDates ||
            this.PriceDates == "" ||
            this.PriceDates.length == 0
          ) {
            this.Error("请选择价格有效期！");
            return;
          }
          this.addMsg.EffectiveStartDate = moment(this.PriceDates[0]).format(
            "YYYY-MM-DD"
          );
          this.addMsg.SendVisaDate = moment(this.PriceDates[1]).format(
            "YYYY-MM-DD"
          );
          // let SendVisaDate = moment(new Date(this.addMsg.SendVisaDate)).format("YYYY-MM")+'-25'
          // if(this.addMsg.SendVisaDate>=SendVisaDate){
          //   this.Error(`价格有效结束日期请选择${SendVisaDate}之前日期！`);
          //   return;
          // }
          this.apipost(
            "dmc_post_visa_SetVisaProduct_V1",
            this.addMsg,
            res => {
              this.loading=false;
              if (res.data.resultCode == 1) {
                  this.$message.success(res.data.message);
                  this.initAddMasg();
                  this.$router.push({name: "VisaProduct",query: { blank: "y", tab: "签证产品" }});
              } else {
                this.Error(res.data.message);
              }
            },
            err => {}
          );
        } else {
          return false;
        }
      });
    },
    initFileList() {
      for (var i = 0; i <5; i++) {
        var fileObj = this.$commonUtils.FileObject();
        if (this.addMsg.CoverImageList.length <=5) {
          this.addMsg.CoverImageList.push(fileObj);
        }
      }
    },

    getVisaManagementList() {
      //  获取签证管理
      this.VisaManagementList = [];
      this.addMsg.VisaManagementId = "";
      this.apipost(
        "dmc_get_visa_GetVisaManagementList",
        { Status: -1, BranchId: -1, SignStatus: this.addMsg.VisaType },
        res => {
          if (res.data.resultCode == 1) {
            this.VisaManagementList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    //上传图片
    reUpload(file) {
      let newArr = [];
      newArr.push(file.file);
      let fileName = file.file.name;
      let that = this;
      let path = "/Upload/DMC/";
      this.UploadSelfFileT(path, newArr, x => {
        var str = this.domainManager().ViittoFileUrl + x.data.FilePath;
        that.addMsg.CoverImageList[
          this.updateChoseIndex
        ].Url = this.$commonUtils.GetALiFileUrl(str);
        that.addMsg.CoverImageList[this.updateChoseIndex].Name = fileName;
      });
    },
    updateTFimg(index) {
      this.updateChoseIndex = index;
    },

    //图片左移右移
    // ExchangeImg(index, IsMove) {
    //   var imgItem = this.addMsg.CoverImageList[index];
    //   //左移
    //   if (IsMove == 0) {
    //     var upItem = this.addMsg.CoverImageList[index - 1];
    //     this.$set(this.addMsg.CoverImageList, index - 1, imgItem);
    //     this.$set(this.addMsg.CoverImageList, index, upItem);
    //   } else {
    //     //右移动
    //     var downItem = this.addMsg.CoverImageList[index + 1];
    //     this.$set(this.addMsg.CoverImageList, index + 1, imgItem);
    //     this.$set(this.addMsg.CoverImageList, index, downItem);
    //   }
    // },

    //   签证国家Id改变
    VisaCountry(val) {
      this.GetProductLabel(val);
    },

    // 双击编辑标签
    EditTag(tag, num) {
      this.showInput(num);
      this.inputValue = tag.TagTame;
      this.productlabel.Id = tag.Id;
    },
    handleClose(tag) {
      this.tagloading = true;
      this.apipost(
        "dmc_post_visa_DeleteVisaProductCountryTag",
        { Id: tag.Id },
        res => {
          this.tagloading = false;
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.GetProductLabel(tag.VisaCountryId);
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    CloseTag(){
      this.inputVisible1 = false;
      this.inputVisible2 = false;
      this.inputVisible3 = false;
    },
    showInput(num) {
      if (!this.addMsg.VisaCountryId || this.addMsg.VisaCountryId == "") {
        this.Error("请先选择签证国家！");
        return;
      }
      this.productlabel.Id = 0;
      this.inputValue = "";
      this.productlabel.VisaCountryId = this.addMsg.VisaCountryId;
      this.inputVisible1 = false;
      this.inputVisible2 = false;
      this.inputVisible3 = false;
      if (num == 1) {
        this.inputVisible1 = true;
      }
      if (num == 2) {
        this.inputVisible2 = true;
      }
      if (num == 3) {
        this.inputVisible3 = true;
      }
      // `${this.inputVisible}num` = true;
      this.$nextTick(_ => {
        this.$refs[`saveTagInput${num}`].$refs.input.focus();
        //   this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm(num) {
      // 标签类型
      this.productlabel.TagType = num;
      this.productlabel.TagTame = this.inputValue;
      this.apipost(
        "dmc_post_visa_SetVisaProductCountryTag",
        this.productlabel,
        res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message);
            this.inputValue = "";
            this.inputVisible1 = false;
            this.inputVisible2 = false;
            this.inputVisible3 = false;
            this.GetProductLabel(this.productlabel.VisaCountryId);
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    GetProductLabel(item) {
      this.tagloading = true;
      this.apipost(
        "dmc_post_visa_GetVisaProductCountryTagList",
        { VisaCountryId: item },
        res => {
          this.tagloading = false;
          if (res.data.resultCode == 1) {
            this.CountryTagList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    // 获取签证国家
    Getvisacountry() {
      this.apipost(
        "dmc_post_visa_GetVisaProductCountrySelect",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.Visacountry = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    custormAnchor(anchorName, index) {
      // 找到锚点
      let anchorElement = document.getElementById(anchorName);
      // 如果对应id的锚点存在，就跳转到锚点
      if (anchorElement) {
        anchorElement.scrollIntoView();
      }
      this.ckedNav = index;
    },
    //滚动事件
    // ScrollMethod() {
    //   var that = this;
    //   var s1, s2, s3, s4, s5;
    //   document
    //     .getElementsByClassName("frame-box")[0]
    //     .addEventListener("scroll", function() {
    //       if (document.getElementById("firstAnchor") != null) {
    //         s1 = document.getElementById("firstAnchor").offsetTop;
    //       }
    //       if (document.getElementById("secondAnchor") != null) {
    //         s2 = document.getElementById("secondAnchor").offsetTop;
    //       }
    //       if (document.getElementById("thirdAnchor") != null) {
    //         s3 = document.getElementById("thirdAnchor").offsetTop;
    //       }
    //       if (document.getElementById("fourAnchor") != null) {
    //         s4 = document.getElementById("fourAnchor").offsetTop;
    //       }
    //       if (document.getElementById("fiveAnchor") != null) {
    //         s5 = document.getElementById("fiveAnchor").offsetTop;
    //       }

    //       if (s1 >= this.scrollTop - 50 && s1 <= this.scrollTop + 50) {
    //         that.ckedNav = 1;
    //       } else if (s2 >= this.scrollTop - 50 && s2 <= this.scrollTop + 50) {
    //         that.ckedNav = 2;
    //       } else if (s3 >= this.scrollTop - 50 && s3 <= this.scrollTop + 50) {
    //         that.ckedNav = 3;
    //       } else if (s4 >= this.scrollTop - 50 && s4 <= this.scrollTop + 50) {
    //         that.ckedNav = 4;
    //       } else if (s5 >= this.scrollTop - 50 && s5 <= this.scrollTop + 50) {
    //         that.ckedNav = 5;
    //       }
    //     });
    // },
    //返回顶部
    backTop() {
      var timer = setInterval(function() {
        var scrollTop = document.getElementsByClassName("frame-box")[0]
          .scrollTop;
        var ispeed = Math.floor(-scrollTop / 6);
        if (scrollTop == 0) {
          clearInterval(timer);
        }
        document.getElementsByClassName("frame-box")[0].scrollTop =
          scrollTop + ispeed;
      }, 30);
    }
  },

  watch: {

  },

};
</script>