<style>
.page_visaMG ._vMG_edit {
  overflow: auto;
  display: none;
  position: absolute;
  font-family: "PingFangSc-Fine";
  bottom: 0;
  left: 0;
  border-top: 3px solid #38425d;
  background-color: #fff;
  padding: 10px;
  width: 100%;
  min-width: 1146px;
  padding-right: 10px;
}
.page_visaMG .edHeight {
  display: block;
  height: 330px;
}
.page_visaMG ._vMG_conten {
  padding: 30px 0;
  overflow-x: auto;
}
.page_visaMG ._vMG_conten ul li {
  width: 175px;
  height: auto;
  float: left;
  background-color: #ffffff;
  margin-right: 26px;
}
.page_visaMG ._vMG_conten ul li ._top {
  text-align: center;
  position: relative;
}
.page_visaMG ._vMG_conten ul li ._top p {
  font-size: 14px;
  color: #333333;
  font-weight: bold;
  margin-top: 8px;
  padding-bottom: 20px;
  font-weight: bold;
}
.page_visaMG ._vMG_conten ul li ._btm {
  border-top: 1px dashed #b8b8b8;
  display: flex;
  text-align: center;
  padding-top: 22px;
}
.page_visaMG ._vMG_conten ul li ._btmt {
  border: none;
}
.page_visaMG ._vMG_conten ul li ._btm > div {
  width: 50%;
}
.page_visaMG ._vMG_conten ul li ._btm > div:nth-child(1) {
  border-right: 1px solid #b8b8b8;
}
.page_visaMG ._vMG_conten ul li ._btm > div ._num {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}
.page_visaMG ._vMG_conten ul li ._btmt > div ._num {
  font-size: 14px;
}
.page_visaMG ._vMG_conten ul li ._btm > div ._text {
  font-size: 12px;
  color: #666666;
}
.page_visaMG ._vMG_conten ul li .tcenter {
  margin-top: 20px;
}
.page_visaMG ._vMG_conten li:hover {
  box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
  transition: all linear 0.5s;
}
.page_visaMG ._black {
  filter: gray;
  -webkit-filter: grayscale(100%);
}
.page_visaMG ._noOpen {
  line-height: 34px;
  color: #666666;
  font-size: 12px;
  text-align: center;
  padding-top: 22px;
  border-top: 1px dashed #b8b8b8;
}
.page_visaMG ._vMG_edit ._tit {
  padding-left: 10px;
  border-left: 3px solid #e95252;
  font-size: 16px;
  color: #000000;
}
.page_visaMG ._vMG_edit ._tit span {
  color: #666666;
  font-size: 14px;
}
.page_visaMG ._info_box {
  padding: 30px 15px;
  font-size: 12px !important;
}
.page_visaMG ._info_box > div {
  float: left;
}
.page_visaMG .w400 {
  width: 450px;
  margin-right: 20px;
  height: 100px;
}
.page_visaMG .w225 {
  width: 225px;
  margin-right: 20px;
}
.page_visaMG .wauto label {
  width: 98px;
}
.page_visaMG ._info_box {
  padding-bottom: 0;
}
.page_visaMG ._info_box ul {
  margin-top: 10px;
}
.page_visaMG ._info_box ul li {
}
.page_visaMG ._info_box ul li .el-form-item {
  display: flex;
  height: 30px;
  line-height: 30px;
}
.page_visaMG ._info_box ul li .el-form-item .el-input {
  display: flex;
  height: 30px;
  line-height: 30px;
}
.page_visaMG ._info_box ul li:nth-child(odd) {
  margin-right: 15px;
}
.page_visaMG ._info_box ul li .el-form-item__label {
  font-size: 12px !important;
  line-height: 30px;
}
.page_visaMG .select .el-form-item input {
  height:34px!important;
  line-height: 30px;
}
.page_visaMG ._info_box ul li .el-form-item textarea {
  height: 80px;
  resize: none;
  width: 280px;
}
.page_visaMG ._edHeight {
  height: 400px;
}
.page_visaMG ._scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
.page_visaMG ._scrollbar::-webkit-scrollbar-thumb {
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #c9c9c9;
}
.page_visaMG ._scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #ededed;
}
.page_visaMG ._status {
  position: absolute;
  left: -20px;
  top: 0px;
}
.page_visaMG ._status span {
  display: inline-block;
  padding: 2px 5px;
  background-color: #4bca81;
  color: white;
  font-size: 12px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.page_visaMG ._status span:nth-child(2) {
  background-color: #e95252;
}
.page_visaMG ._tips {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #e95252;
  color: #e95252;
  font-size: 12px;
  line-height: 15px;
  cursor: pointer;
}
.page_visaMG_tips {
  text-align: center;
}
.page_visaMG_tips .hollowFixedBtn {
  margin-top: 10px;
}
._form_item {
  padding-left: 13px;
}
</style>
<template>
    <div class="page_visaMG">
        <div class="_vMG_conten _scrollbar" :class="addShow==true?'_edHeight':''">
            <ul class="clearfix">
                <li v-for="(item,index) in DataList">
                    <div class="_top">
                        <img :class="item.Status==1?'_black':''" src="../../assets/img/logo@2x.png" alt="">
                        <p class="PingFangSC">{{item.Name}}</p>
                        <div class="_status">
                            <span v-if="item.Status==1">{{$t('visa.v_nqiyong')}}</span>
                            <span v-if="item.Status!=1">{{$t('visa.v_qiyong')}}</span>
                        </div>
                    </div>
                    <div class="_btm" v-if="item.Status!=1">
                        <div>
                            <p class="_num PingFangSC">{{item.ProcessedCount}}</p>
                            <p class="_text">{{$t('visa.v_yiban')}}</p>
                        </div>
                        <div>
                            <p class="_num PingFangSC">{{item.PendingCount}}</p>
                            <p class="_text">{{$t('visa.v_daiban')}}</p>
                        </div>
                    </div>
                    <div class="_btm _btmt" v-if="item.Status!=1">
                        <div>
                            <p class="_num PingFangSC" v-if="item.IsGroupSigned==1">{{$t('visa.v_zhichi')}} 
                                <el-popover 
                                    popper-class="page_visaMG_tips"    
                                    trigger="click">
                                    <div>
                                       <p>{{$t('visa.v_pnoset')}}</p>
                                       <button class="hollowFixedBtn"  @click="editVisa(item)">{{$t('visa.v_setp')}}</button>
                                    </div>
                                    <span slot="reference" class="_tips" v-show="!item.TCUnit_Price||!item.TCInterior_Price">!</span>
                                </el-popover>  
                            </p>
                            <p class="_num PingFangSC" v-if="item.IsGroupSigned==2">{{$t('visa.v_buzhichi')}}</p>
                            <p class="_text">{{$t('visa.v_tvisa')}}</p>
                        </div>
                        <div>
                            <p class="_num PingFangSC" v-if="item.IsOrderSigned==1">{{$t('visa.v_zhichi')}}
                                <el-popover 
                                    popper-class="page_visaMG_tips"    
                                    trigger="click">
                                    <div>
                                       <p>{{$t('visa.v_pnoset')}}</p>
                                       <button class="hollowFixedBtn"  @click="editVisa(item)">{{$t('visa.v_setp')}}</button>
                                    </div>
                                    <span slot="reference" class="_tips" v-show="!item.Unit_Price||!item.Interior_Price">!</span>
                                </el-popover>  
                            </p>
                            <p class="_num PingFangSC" v-if="item.IsOrderSigned==2">{{$t('visa.v_buzhichi')}}</p>
                            <p class="_text">{{$t('visa.v_gvisa')}}</p>
                        </div>
                    </div>
                    <div v-if="item.Status==1">
                        <p class="_noOpen">{{$t('visa.v_qiyongts')}}!</p>
                        <div class="tcenter">
                            <button class="normalBtn" type="button" @click="editVisa(item)">{{$t('visa.v_liqiyong')}}</button>
                        </div>
                    </div>
                    <div class="tcenter" v-else>
                        <button class="normalBtn" type="button" @click="editVisa(item)">{{$t('visa.v_qianzhenggl')}}</button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="_vMG_edit" :class="addShow==true?'edHeight':''">
            <p class="_tit">{{$t('visa.v_qianzhenggl')}} <span>{{$t('visaT.notes')}}</span> </p>
            <el-form class="_info_box clearfix" >
                <div class="">
                    <p>{{$t('visa.v_geqianp')}}</p>
                    <ul class="clearfix">
                        <li>
                            <el-form-item :label="$t('hotel.hotel_CostPrice')+'：'">
                                <el-input v-model="addMsg.Unit_Price" onkeyup="value=value.replace(/[^\d]/g,'')" class="w135"></el-input>
                            </el-form-item>                        
                        </li>
                        <li>
                            <el-form-item :label="$t('visa.v_neibup')+'：'">
                                <el-input v-model="addMsg.Interior_Price" onkeyup="value=value.replace(/[^\d]/g,'')" class="w135"></el-input>
                            </el-form-item>                        
                        </li>
                        <li>
                            <el-form-item :label="$t('Airticket.Air_b2bPrice')+'：'">
                                <el-input v-model="addMsg.B2B_Price" onkeyup="value=value.replace(/[^\d]/g,'')" class="w135"></el-input>
                            </el-form-item>                        
                        </li>
                        <li>
                            <el-form-item :label="$t('Airticket.Air_b2cPrice')+'：'">
                                <el-input v-model="addMsg.B2C_Price" onkeyup="value=value.replace(/[^\d]/g,'')" class="w135"></el-input>
                            </el-form-item>                        
                        </li>
                    </ul>
                </div>
                <div class="">
                    <p>{{$t('visa.v_tuanqianp')}}</p>
                    <ul class="clearfix">
                        <li>
                            <el-form-item :label="$t('hotel.hotel_CostPrice')+'：'">
                                <el-input v-model="addMsg.TCUnit_Price" onkeyup="value=value.replace(/[^\d]/g,'')" class="w135"></el-input>
                            </el-form-item>                        
                        </li>
                        <li>
                            <el-form-item :label="$t('visa.v_neibup')+'：'">
                                <el-input v-model="addMsg.TCInterior_Price" onkeyup="value=value.replace(/[^\d]/g,'')" class="w135"></el-input>
                            </el-form-item>                        
                        </li>
                    </ul>
                </div>
                <div style="width:520px" class="w225 select">
                    <p>{{$t('visa.v_qianzhengst')}}</p>
                    <ul class="clearfix">
                        <li>
                            <el-form-item :label="$t('visa.v_shifouqiyong')+'：'">
                                <el-switch v-model="addMsg.Status"
                                active-value='0'   
                                inactive-value='1' 
                                active-color="#4BCA81"
                                size=mini></el-switch>
                            </el-form-item>                        
                        </li>
                        <li>
                            <el-form-item :label="$t('Airticket.Air_salesPlatform')+'：'">
                                <el-select v-model="addMsg.SalesPlatform" class="w135">
                                    <el-option 
                                        v-for="item in VisaSalesPlatformEnum" 
                                        :key="item.Id" 
                                        :label="item.Name" 
                                        :value="item.Id">
                                    </el-option>
                                </el-select>
                            </el-form-item>                        
                        </li>
                        <li v-for="(item,index) in MRList" :key="index+2000">
                            <el-form-item style="width:220px;display:inline-block" :label="$t('hotel.hotel_Supplier')+'：'" class="_form_item">
                                <el-select v-model="item.CommuneId " class="w135">
                                    <el-option 
                                        v-for="item in CommuneInfoList" 
                                        :key="item.Id" 
                                        :label="item.Name" 
                                        :value="item.Id">
                                    </el-option>
                                </el-select>
                            </el-form-item>  
                            <el-form-item style="width:230px;display:inline-block" label="公司" class="_form_item collapse_select">
                                <el-select multiple collapse-tags v-model="item.BranchList" style="width:170px">
                                    <el-option 
                                        v-for="item in companyList" 
                                        :key="item.Id" 
                                        :label="item.BName" 
                                        :value="item.Id">
                                    </el-option>
                                </el-select>
                            </el-form-item>  
                            <span><el-button @click="DeleteMRList(item,index)" style="padding:4px" type="danger" icon="el-icon-delete" circle></el-button></span>                       
                        </li>
                        <li>
                            <el-button @click="AddMRList" type="danger" size="small">新增</el-button>
                        </li>
                    </ul>
                </div>
                <div class="w400">
                    <p>{{$t('visa.v_qianzhengshuoming')}}</p>
                    <ul class="clearfix">
                        <li>
                            <el-form-item :label="$t('visa.v_qianzhengshuoming')+'：'">
                                <el-input v-model="addMsg.Discription" type="textarea" class="w135"></el-input>
                            </el-form-item>                        
                        </li>
                    </ul>
                </div>
                <div class="" style="margin:0">
                    <p>{{$t('visa.v_dayset')}}</p>
                    <ul class="clearfix">
                        <li>
                            <el-form-item :label="$t('hotel.hotel_deadday')+'：'">
                                <el-input v-model="addMsg.DaySet"  class="w135"></el-input>
                            </el-form-item>                        
                        </li>
                    </ul>
                </div>
                <div>
                    <ul class="clearfix" style="text-align: right;margin-top:108px"> <li class="_add_saveBtn" style="float: initial;" >
                            <button class="hollowFixedBtn" type="button" @click="cancelEdit()">{{$t('pub.cancelBtn')}}</button>
                            <button type="button" class="normalBtn" @click="saveVisa()">{{$t('pub.saveBtn')}}</button>
                        </li></ul>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      msg: {
        pageIndex: 1,
        pageSize: 15,
        StartTime: "",
        EndTime: "",
        orderId: "",
        IsSaveFile: ""
      },
      addMsg: {
        Id: 0,
        Discription: "",
        Icon: "",
        Sort: 1,
        Status: 0,
        B2B_Price: "",
        B2C_Price: "",
        DaySet: "",
        Interior_Price: "",
        SalesPlatform: "",
        Unit_Price: "",
        CommuneId: "",
        TCInterior_Price: "",
        TCUnit_Price: ""
      },
      DataList: [],
      editData: [],
      VisaSalesPlatformEnum: [],
      CommuneInfoList: [],
      addShow: false,
      companyList: [],
      MRList: []
    };
  },
  methods: {
    // 删除公司
    DeleteMRList(item, index) {
      this.MRList.splice(index, 1);
    },
    AddMRList() {
      let obj = {};
      obj.CommuneId = 12;
      obj.BranchList = [];
      this.MRList.push(obj);
    },
    getCompanyList() {
      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) {
            this.companyList = [
              {
                Id: "-1",
                BName: "不限"
              }
            ];
            res.data.data.forEach(x => {
              var obj = {
                Id: "",
                BName: ""
              };
              obj.Id = x.Id.toString();
              obj.BName = x.BName;
              this.companyList.push(obj);
            });
          }
        },
        err => {}
      );
    },
    editVisa(item) {
      let data = item;
      data.Status = data.Status.toString();
      this.addShow = true;
      this.addMsg = JSON.parse(JSON.stringify(data));
      if(this.addMsg.MRList){
          this.MRList = this.addMsg.MRList;
          for (let i = 0; i < this.MRList.length; i++) {
            let obj = this.MRList[i];
            for (let j = 0; j < obj.BranchList.length; j++) {
            obj.BranchList[j] = obj.BranchList[j].toString();
            }
        } 
      }
      



    },
    getVisaSalesPlatformEnum() {
      //  获取签证销售平台枚举
      this.apipost(
        "dmc_get_visa_GetVisaSalesPlatformEnum",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.VisaSalesPlatformEnum = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    getVisaManagementList() {
      //  获取签证管理
      this.apipost(
        "dmc_get_visa_GetVisaManagementList",
        { Status: -1, BranchId: -1 },
        res => {
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data;
            this.DataList.forEach(x => {
              x.SalesPlatform = x.SalesPlatform.toString();
            });
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    getCommuneInfoList() {
      //  获取签证供应商
      this.apipost(
        "dmc_post_visa_GetCommuneInfoList",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.CommuneInfoList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    isRepeat(arr) {
      var hash = {};
      for (var i in arr) {
        if (hash[arr[i]]) return true;
        hash[arr[i]] = true;
      }
      return false;
    },
    saveVisa() {
      //修改保存
      this.addMsg.MRList=this.MRList;
      let arr=[];
      for (let i = 0; i < this.MRList.length; i++) {
        let obj = this.MRList[i];
        arr.push(obj.CommuneId);
      }
      if(this.isRepeat(arr)){
          this.Error("存在相同的供应商！")
          return;
      }
      if (!this.addMsg.Icon) {
        this.addMsg.Icon = "";
      }
      this.apipost(
        "dmc_post_visa_SetVisaManagement",
        this.addMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.addMsg = {
              Id: 0,
              Discription: "",
              Sort: 1,
              Status: 0,
              B2B_Price: "",
              B2C_Price: "",
              DaySet: "",
              Interior_Price: "",
              SalesPlatform: "",
              Unit_Price: ""
            };
            this.addShow = false;
            this.$message.success(res.data.message);
            this.getVisaManagementList();
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    cancelEdit() {
      this.addMsg = {
        Id: 0,
        Discription: "",
        Sort: 1,
        Status: 0,
        B2B_Price: "",
        B2C_Price: "",
        DaySet: "",
        Interior_Price: "",
        SalesPlatform: "",
        Unit_Price: ""
      };
      this.addShow = false;
    }
  },
  mounted() {
    this.getCompanyList();
    this.getVisaManagementList();
    this.getVisaSalesPlatformEnum();
    this.getCommuneInfoList();
  }
};
</script>