<style>
.page_visaMG .vMG_edit {
  position: fixed;
  font-family: "PingFangSc-Fine";
  bottom: 0;
  left: 50px;
  border-top: 3px solid #38425d;
  background-color: #fff;
  padding: 10px;
  width: calc(100% - 50px);
  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 .list li {
  width: 175px;
  height: auto;
  padding: 20px;
  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: 10px;
  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: 15px;
}
.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;
  margin-bottom: 20px;
}
.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 ._info_box ul li .el-form-item input {
  height: 30px;
  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;
}
.el-upload-list__item-status-label {
}
._info_box .el-form-item {
  display: inline-block;
  margin-left: 10px;
}
._top img {
  display: inline-block;
  width: 71px;
  height: 46px;
}
.productlabel .el-form-item__content{
    line-height: 30px;
}

.tag_ul li .input-new-tag{
    width: 150px;
}
.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;
}
.tag_ul li>div{
    margin-top: 15px;
}
.page_visaMG .country .el-upload-list--text{
    max-width:200px;
}
.visa_pro_country .el-tag .el-icon-close{
  position: absolute;
  top:2px;
  right: 0px;
}
.visa_pro_country .TFimgList {
  float: left;
  width: 170px;
  height: 120px;
  border-radius: 4px;
  position: relative;
  margin: 0 10px 10px 0;
  overflow: hidden;
}
.visa_pro_country .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;
}
.visa_pro_country .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;
}
.visa_pro_country .TFimgList:hover .TFIMGzhe {
  display: block;
}

.visa_pro_country .TFimgList img {
  width: 100%;
  height: 100%;
}
</style>
<template>
    <div class="page_visaMG visa_pro_country">
        <p style="padding-top:10px">
            <span>{{$t('system.table_country')}}：<el-input style="width:200px;display:inline-block" v-model="countryList.countryName" :placeholder="$t('objFill.v101.Rest.qingshurgjia')"/>
            <button type="button"  class="normalBtn" @click="getVisaManagementList(),resetPageIndex()">{{$t('pub.searchBtn')}}</button>

            </span>
            <button style="float:right" type="button"  class="normalBtn" @click="AddForm">{{$t('pub.addBtn')}}</button>
            </p>
        <div class="_vMG_conten _scrollbar">
            <ul class="clearfix list">
                <li v-for="(item,index) in DataList" :key="index">
                    <div class="_top">
                        <img :src="item.Icon" alt="">
                        <p class="PingFangSC">{{item.CountryName}}</p>
                        <div class="_status">
                            <span v-if="item.HotCountry==1">{{$t('objFill.v101.activity.remen')}}</span>
                        </div>
                    </div>
                    <div class="tcenter">
                        <el-tooltip class="item" effect="dark" :content="$t('pub.edit')" placement="top-start">
                            <el-button @click="EditCountry(item)" style="padding:6px"  type="primary" icon="el-icon-edit" circle></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.Rest.chanpinbq')" placement="top-start">
                            <el-button @click="Product(item)" style="padding:6px;background:#4bca81;color:#fff;border:none" icon="el-icon-edit-outline" circle></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
                            <el-button @click="Delete(item)" style="padding:6px;background:#E95252;color:#fff;border:none" icon="el-icon-delete" circle></el-button>
                        </el-tooltip>



                    </div>
                </li>
            </ul>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                v-if="DataList.length>0"
                :current-page.sync="currentPage"
                layout="total,prev, pager, next, jumper"
                :page-size="countryList.pageSize"
                :total="total"
                ></el-pagination>
        </div>
        <div class="vMG_edit" v-show="addShow">
            <p class="_tit">{{$t('objFill.v101.Rest.qianzhenggj')}}
              <span style="float:right">
                  <button class="hollowFixedBtn" type="button" @click="cancelEdit()">{{$t('pub.cancelBtn')}}</button>
                    <button type="button" class="normalBtn" @click="saveVisa" >{{$t('pub.saveBtn')}}</button>
              </span>
            </p>
            <el-form class="country _info_box clearfix" label-width="80px">
                <el-form-item :label="$t('system.table_country')">
                    <el-select @change="Selectchange" filterable v-model="country.CountryId" :placeholder="$t('pub.pleaseSel')">
                        <el-option
                        v-for="item in allcountry"
                        :key="item.ID"
                        :label="item.Name"
                        :value="item.ID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('objFill.v101.Rest.shifouremen')">
                    <el-select v-model="country.HotCountry" :placeholder="$t('pub.pleaseSel')">
                        <el-option key="1" :label="$t('pub.yes')" :value="1"></el-option>
                        <el-option key="0" :label="$t('pub.no')" :value="0"></el-option>

                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('system.table_rank')">
                    <el-input v-model="country.Sort" :placeholder="$t('system.table_rank')"/>
                </el-form-item>
                <el-form-item :label="$t('objFill.v101.Rest.guojiatub')">
                        <div class="TFimgList">
                                <img v-if="!country.Icon" src="../../assets/img/bg_c3@3x.png">
                                <img v-else :src='country.Icon'>
                                <div class="TFIMGzhe">
                                  <div class="TFreupload">
                                      <el-upload :file-list="fileList" :http-request="uploadTest" :multiple="true" :limit="2"
                                              :on-change="handleChange1"
                                              accept="image/jpeg, image/gif, image/png, image/bmp"
                                              :show-file-list="false" action="">
                                      <i class="iconfont icon-Edit"></i>
                                      </el-upload>
                                  </div>
                                </div>
                            </div>
                </el-form-item>
                <el-form-item :label="$t('objFill.v101.Rest.beijintup')">
                            <div class="TFimgList">
                                <img v-if="!country.ImageFileList[0]" src="../../assets/img/bg_c3@3x.png">
                                <img v-else :src='country.ImageFileList[0]'>
                                <div class="TFIMGzhe">
                                  <div class="TFreupload">
                                      <el-upload :file-list="fileList2" :http-request="uploadTest2" :multiple="true" :limit="2"
                                              :on-change="handleChange2"
                                              accept="image/jpeg, image/gif, image/png, image/bmp"
                                              :show-file-list="false" action="">
                                      <i class="iconfont icon-Edit"></i>
                                      </el-upload>
                                  </div>
                                </div>
                            </div>

                </el-form-item>

            </el-form>
        </div>
        <!-- 国家产品标签 -->
        <el-dialog
            @close="dialogclose"
            v-loading="tagloading"
            :title="$t('tips.tips')"
            :visible.sync="CPBQ"
            width="550px"
            >
            <ul class="tag_ul">
               <li>
                   <span>{{$t('visa.v_visaType')}}</span>
                   <span style="margin-left:10px">
                       <el-input
                class="input-new-tag"
                v-if="inputVisible1"
                v-model="inputValue"
                ref="saveTagInput1"
                size="small"
                @keyup.enter.native="handleInputConfirm(1)"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="mini" @click="showInput(1)">{{$t('pub.addBtn')}}</el-button>
                   </span>
                   <div>
                <el-tag size="small" v-for="tag in CountryTagList" v-if="tag.TagType==1"
                  :key="tag.Id"
                  closable
                  :disable-transitions="false"
                  @click.native="EditTag(tag,1)"
                  @close="handleClose(tag)">
                  <!-- <el-input v-model="tag.TagTame" :disabled="tagstate==tag.Id"></el-input> -->
                  {{tag.TagTame}}
                </el-tag>

                   </div>
                </li>
                <li>
                   <span>{{$t('objFill.v101.Rest.chanpinbq')}}</span>
                   <span style="margin-left:10px">
                       <el-input
                class="input-new-tag"
                v-if="inputVisible2"
                v-model="inputValue"
                ref="saveTagInput2"
                size="small"
                @keyup.enter.native="handleInputConfirm(2)"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="mini" @click="showInput(2)">{{$t('pub.addBtn')}}</el-button>
                   </span>
                   <div>
                      <el-tag v-if="tag.TagType==2" size="small"
                      :key="tag.Id"
                      v-for="tag in CountryTagList"
                      closable
                      :disable-transitions="false"
                      @click.native="EditTag(tag,2)"
                      @close="handleClose(tag)">
                      {{tag.TagTame}}
                      </el-tag>

                   </div>
                </li>
                <li>
                   <span>{{$t('objFill.v101.Rest.tesefuwu')}}</span>
                   <span style="margin-left:10px">
                       <el-input
                class="input-new-tag"
                v-if="inputVisible3"
                v-model="inputValue"
                ref="saveTagInput3"
                size="small"
                @keyup.enter.native="handleInputConfirm(3)"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="mini" @click="showInput(3)">{{$t('pub.addBtn')}}</el-button>
                   </span>
                   <div>
                      <el-tag v-if="tag.TagType==3" size="small"
                      :key="tag.Id"
                      v-for="tag in CountryTagList"
                      closable
                      :disable-transitions="false"
                      @click.native="EditTag(tag,3)"
                      @close="handleClose(tag)">
                      {{tag.TagTame}}
                      </el-tag>

                   </div>
                </li>
            </ul>

            </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
        tagstate:13,
        tagloading:false,
        CPBQ:false,
        productlabel:{},
      country: {
        CountryId: 2,
        HotCountry: 1,
        Icon: "",
        ImageFileList: ["../../assets/img/bg_c3@3x.png"],
        Sort:0,
      },
    //   fileList: [],
      fileList: [],
      fileList2: [],

      DataList: [],
      editData: [],
      VisaSalesPlatformEnum: [],
      CommuneInfoList: [],
      addShow: false,
      countryList: {
        pageIndex: 1,
        pageSize: 20
      },
      currentPage: 1,
      total: 0,
      allcountry: [],
      CountryTagList:[],
      dynamicTags:[],
      inputVisible1: false,
      inputVisible2: false,
      inputVisible3: false,
      inputValue: "",
    };
  },
  methods: {
      resetPageIndex() {
        this.countryList.pageIndex = 1;
        this.currentPage = 1
      },
      handleCurrentChange(val) {
      this.countryList.pageIndex = val;
      this.getVisaManagementList();
    },
      dialogclose(){
          this.CountryTagList=[];
      },
      // 编辑标签
      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 => {}
        );

      },

      showInput(num) {
        this.inputValue="";
        this.productlabel.Id=0;
        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 => {}
      );

      },

      Product(item){
        this.inputVisible1 = false;
        this.inputVisible2 = false;
        this.inputVisible3 = false;
          this.tagloading=true;
          this.productlabel.VisaCountryId=item.Id;
          this.GetProductLabel(item.Id);
          this.CPBQ=true;
      },
    // 新增
    AddForm(){
        this.addShow=true;
        this.country = {
              CountryId: "",
              HotCountry: 1,
              Icon: "",
              ImageFileList: [],
              Sort:0,
            };
        this.fileList2=[];
        this.fileList=[];
    },
    //   获取签证国家产品标签列表
     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 => {}
      );
      },
    // 删除签证国家
    Delete(item) {
      this.$Confirm(this.$t('tips.shifoushanchu'), this.$t('tips.tips'), {
        confirmButtonText: this.$t('pub.sureBtn'),
        cancelButtonText: this.$t('pub.cancelBtn'),
        type: "warning"
      })
        .then(() => {
          this.apipost(
            "dmc_post_visa_DeleteVisaProductCountry",
            { Id: item.Id },
            res => {
              if (res.data.resultCode == 1) {
                this.$message.success(res.data.message);
                this.getVisaManagementList();
              } else {
                this.Error(res.data.message);
              }
            },
            null
          );
        })
        .catch(() => {
          this.$message.info(this.$t('objFill.v101.administrative.yiquxiaoty'));
        });
    },
    Selectchange(val) {
      let obj = {};
      obj = this.allcountry.find(item => {
        //这里的userList就是上面遍历的数据源
        return item.ID === val; //筛选出匹配数据
      });
      this.country.CountryName = obj.Name;
    },
    uploadTest2(file) {
      let newArr = [];
      this.country.ImageFileList = [];
      newArr.push(file.file);
      let path = "/Upload/DMC/Icon/";
      this.UploadSelfFileT(path, newArr, x => {
        let url = this.domainManager().ViittoFileUrl + x.data.FilePath;
        this.country.ImageFileList.push(url);
      });
    },
    handleChange2(file, fileList) {
        this.fileList2 = fileList.slice(-1);
    },
    handleChange1(file, fileList) {

      this.fileList = fileList.slice(-1);
    },
    // 修改国家图标
    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;
        this.country.Icon = url;
      });
    },
    EditCountry(item) {
        this.fileList2=[];
        this.fileList=[];
      this.addShow = true;
      this.country = Object.assign({}, item);
      let obj1={name:"",url:''};
      obj1.name=item.Icon;
      obj1.url=item.Icon;
      this.fileList.push(obj1);

      let obj2={name:"",url:''};
      obj2.name=item.ImageFileList[0];
      obj2.url=item.ImageFileList[0];
      this.fileList2.push(obj2);
    },
    editVisa(item) {
      let data = item;
      data.Status = data.Status.toString();
      this.addShow = true;
      this.addMsg = JSON.parse(JSON.stringify(data));
    },
    //  获取签证列表
    getVisaManagementList() {

      this.apipost(
        "dmc_get_visa_GetVisaProductCountryPageList",
        this.countryList,
        res => {
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data.pageData;
            this.total=res.data.data.count;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    },
    saveVisa() {
      //修改保存

      if (this.country.CountryId == "") {
        this.$message.error(this.$t('visaT.qxzguojia')+'!');
        return;
      }
      if (this.country.Icon == "") {
        this.$message.error(this.$t('objFill.v101.Rest.qingshangcgjtup'));
        return;
      }
      if (this.country.ImageFileList.length == 0) {
        this.$message.error(this.$t('objFill.v101.Rest.qinshangcbjtu'));
        return;
      }
      this.apipost(
        "dmc_post_visa_SetVisaProductCountry",
        this.country,
        res => {
          if (res.data.resultCode == 1) {
            this.country = {
              CountryId: "",
              HotCountry: 1,
              Icon: "",
              ImageFileList: [],
              Sort:0,
            };
            this.fileList = [];
            this.fileList2 = [];
            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;
    },
    //    获取国家列表
    getcountryList() {
      this.apipost(
        "dict_post_Destination_GetCountry",
        {},
        res => {
          if (res.data.resultCode == 1) {
            this.allcountry = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    }
  },
  mounted() {
    this.getVisaManagementList();
    this.getcountryList();
  }
};
</script>