<style>
  .cityManagement .w150 .el-input {
    width: 150px;
  }

  .cityManagement .btmAddStore {
    border-top: 1px solid #d1d1d1;
    width: 100%;
    display: none;
    overflow-x: auto;
    overflow-y: auto;
    position: fixed;
    background: #f9f9f9;
    bottom: 0;
  }

  .cityManagement .isShow {
    display: block !important;
  }

  .cityManagement .changeMsg {
    width: 80%;
  }

  .cityManagement .changeMsg li {
    float: left;
  }

  .cityManagement .btmTitle {
    padding: 0 10px;
    margin: 20px 0 20px 40px;
    border-left: 3px solid #e95252;
    font-size: 14px;
    color: #000000;
  }

  .cityManagement .cityBtnList {
    margin: 5px 0 20px 40px;
  }

  .cityManagement .query-box li {
    margin: 5px 30px 5px 0;
  }

  .cityManagement ._addUpload_box>div:hover {
    background-color: #f5f5f5;
  }

  .cityManagement .el-upload-dragger {
    font-size: 28px;
    color: #8c939d;
    width: 126px;
    height: 80px;
    line-height: 41px;
    text-align: center;
  }

  .cityManagement ._show_img_box {
    position: fixed;
    background: rgba(0, 0, 0, .6);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    text-align: center;
  }

  .cityManagement ._addUpload_box {
    display: block;
  }

  .cityManagement ._addUpload_box img {
    width: 100%;
    height: 100%;
  }

  .cityManagement ._addUpload_box>div {
    float: left;
    width: 138px;
    height: 92px;
    border: 1px dashed rgba(210, 210, 210, 1);
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
    margin-right: 10px;
    position: relative;
  }

  .cityManagement ._addUpload_box .icon-guanbi1 {
    font-size: 12px;
    color: white;
    display: inline-block;
    margin-left: 15px;
    position: absolute;
    right: -6px;
    top: -9px;
    background-color: #f56c6c;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
  }

</style>
<template>
  <div class="flexOne cityManagement">
    <div class="query-box">
      <ul>
        <li>
          <span>{{$t('objFill.zhou')}}</span>
          <el-select v-model="msg.QArea" clearable class="w150" @change="getCountry(msg.QArea,1)" filterable
            :placeholder="$t('hotel.hotel_country')">
            <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
            <el-option v-for='item in AreaList' :key="item.Id" :label="item.Name" :value="item.Id">
            </el-option>
          </el-select>
        </li>
        <li>
          <span>{{$t('system.table_country')}}</span>
          <el-select v-model="msg.QCountry" clearable class="w150" filterable @change="getProvinceList(msg.QCountry,1)"
            :placeholder="$t('hotel.hotel_country')">
            <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
            <el-option v-for='item in countryList' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </li>
        <li>
          <span>{{$t('hotel.hotel_province')}}</span>
          <el-select v-model="msg.QProvince" clearable class="w150" filterable
            @change="getProvinceList(msg.QProvince,2)" :placeholder="$t('hotel.hotel_province')">
            <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
            <el-option v-for='item in provinceList' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </li>
        <li>
          <span>{{$t('hotel.hotel_city')}}</span>
          <el-select v-model="msg.QCity" class="w150" clearable filterable @change="getProvinceList(msg.QCity,3)"
            :placeholder="$t('hotel.hotel_city')">
            <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
            <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </li>
        <li>
          <span>{{$t('hotel.hotel_area')}}</span>
          <el-select v-model="msg.QDistrict" class="w150" clearable filterable :placeholder="$t('hotel.hotel_area')">
            <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
            <el-option v-for='item in district' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </li>
        <li>
          <span>{{$t('hotel.hotel_nameOf')}}</span>
          <el-input v-model="msg.Name" maxlength="50" class="w150"></el-input>
        </li>
        <li>
          <button class="normalBtn" type="button" @click="addCityInfo">{{$t('pub.addBtn')}}</button>
          <button class="hollowFixedBtn" type="button"
            @click="resetPageIndex(),initData()">{{$t('pub.searchBtn')}}</button>
        </li>
      </ul>
    </div>
    <div class="supplierList clearfix" v-loading="loading">
      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th>{{$t('hotel.hotel_nameOf')}}</th>
          <th>{{$t('objFill.xingzhnegjib')}}</th>
          <th>{{$t('objFill.suosudazhou')}}</th>
          <th>{{$t('objFill.suosuguojia')}}</th>
          <th>{{$t('objFill.suosushengfen')}}</th>
          <th>{{$t('objFill.suosushi')}}</th>
          <th>{{$t('objFill.jingdu')}}</th>
          <th>{{$t('objFill.weidu')}}</th>
          <th>{{$t('system.table_operation')}}</th>
        </tr>
        <tr v-for="item in tabelDate" :key="item.subCode">
          <td>{{item.Name}}</td>
          <td>{{item.CodeLevelName}}</td>
          <td>{{item.AreaName}}</td>
          <td>{{item.CountryName}}</td>
          <td>{{item.ProvinceName}}</td>
          <td>{{item.CityName}}</td>
          <td>{{item.Lng}}</td>
          <td>{{item.Lat}}</td>
          <td>
            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
              <el-button type="primary" @click="isShow=true,titleInfo=$t('objFill.xiugaichengshi'),updateCity(item.ID)" icon="el-icon-edit"
                circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" @click="delArea(item.ID,item.CodeLevel)" circle>
              </el-button>
            </el-tooltip>
          </td>
        </tr>
      </table>
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
      layout="total,prev, pager, next, jumper" :page-size="this.msg.pageSize" :total="total">
    </el-pagination>
    <div class="btmAddStore" :class="{'isShow':isShow}">
      <div class="btmTitle">{{titleInfo}}</div>
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
        <ul class="changeMsg clearfix">
          <template v-if="currentUserInfo&&currentUserInfo.RB_Group_id==100">
            <li>
              <el-form-item :label="$t('system.query_airName')" prop="Name">
                <el-input v-model="addMsg.Name" class="w150" maxlength="20"></el-input>
              </el-form-item>
            </li>
          </template>
          <template v-else>
            <li>
              <el-form-item :label="$t('objFill.zhongwenmc')" prop="Name">
                <el-input v-model="addMsg.Name" class="w150" maxlength="20"></el-input>
              </el-form-item>
            </li>
          </template>
          <li v-if="currentUserInfo&&currentUserInfo.RB_Group_id!=100">
            <el-form-item :label="$t('system.table_enName')">
              <el-input v-model="addMsg.EnName" class="w150" maxlength="20"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('objFill.xingzhnegjib')" prop="CodeLevel">
              <el-select v-model="addMsg.CodeLevel" class="w150" clearable @change="getCodeLevel(addMsg.CodeLevel)"
                filterable :placeholder="$t('pub.pleaseSel')">
                <el-option v-for='item in RegionList' :key="item.Id" :label="item.Name" :value="item.Id">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('objFill.suosuzhou')" prop="Area">
              <el-select v-model="addMsg.Area" class="w150" clearable @change="getCountry(addMsg.Area,2)" filterable
                :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                <el-option v-for='item in AreaList' :key="item.Id" :label="item.Name" :value="item.Id">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li v-if="disCountry">
            <el-form-item :label="$t('objFill.suosuguojia')" prop="CountryID">
              <el-select v-model="addMsg.CountryID" clearable class="w150" filterable
                @change="getProvinceList(addMsg.CountryID,1)" :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                <el-option v-for='item in countryListOther' :key="item.ID" :label="item.Name" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li v-if="disProvince">
            <el-form-item :label="$t('oobjFill.suosushengfen')" prop="ProvinceID">
              <el-select v-model="addMsg.ProvinceID" clearable class="w150" filterable
                @change="getProvinceList(addMsg.ProvinceID,2)" :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                <el-option v-for='item in provinceList' :key="item.ID" :label="item.Name" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li v-if="disCity">
            <el-form-item :label="$t('objFill.suosushi')" prop="CityID">
              <el-select v-model="addMsg.CityID" class="w150" clearable filterable :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" value='0'></el-option>
                <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('objFill.sanma')">
              <!--prop="ThreeCode"-->
              <el-input v-model="addMsg.ThreeCode" class="w150" maxlength="3"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('objFill.jingdu')">
              <el-input v-model="addMsg.Lng" class="w150"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('objFill.weidu')">
              <el-input v-model="addMsg.Lat" class="w150"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item :label="$t('system.label_img')">
              <div class="_addUpload_box clearfix">
                <div v-if="addMsg.Images && addMsg.Images!=''">
                  <div style="width:100%;height:100%;overflow: hidden;">
                    <img :src="addMsg.Images" />
                  </div>
                  <span class="iconfont icon-guanbi1" @click="deleteUploadFile()"></span>
                </div>
                <div v-else class="_pic_upload">
                  <el-upload drag :http-request="uploadFileBtn" :multiple="false" :show-file-list="false" action="">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    <div class="el-upload__text">{{$t("active.ld_djscwj")}}</div>
                  </el-upload>
                </div>
              </div>
            </el-form-item>
          </li>
          <li>
            <div class="cityBtnList">
              <input type="button" class="hollowFixedBtn" @click="cancelPanel" :value="$t('pub.cancelBtn')" />
              <input type="button" class="normalBtn" @click="submitForm('addMsg')" :value="$t('pub.saveBtn')" />
            </div>
          </li>
        </ul>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        total: 0,
        currentPage: 1,
        loading: true,
        AreaList: "",
        RegionList: "",
        countryList: "",
        countryListOther: "",
        provinceList: "",
        cityList: "",
        district: "",
        titleInfo: "",
        tabelDate: "",
        isShow: false,
        District: "",
        disCountry: false,
        disProvince: false,
        disCity: false,
        msg: {
          pageIndex: 1,
          pageSize: 15,
          Name: "",
          QArea: "",
          QCountry: "",
          QProvince: "",
          QCity: "",
          QDistrict: ""
        },
        addMsg: {
          ID: 0,
          Name: "",
          EnName: "",
          ParentID: 0,
          CodeLevel: "",
          ThreeCode: "",
          FourCode: "",
          Area: "",
          CountryID: 0,
          ProvinceID: 0,
          CityID: 0,
          Lng: "", //经度
          Lat: "", //纬度
        },
        rules: {
          Name: [{
            required: true,
            message: this.$t('objFill.qsrzhongwenmc'),
            trigger: "change"
          }],
          EnName: [{
              required: true,
              message: this.$t('system.ph_ENname'),
              trigger: "change"
            },
            {
              pattern: this.$commonUtils.Regex.el_IsEnglish,
              message: this.$t('visaT.peEnglish')
            }
          ],
          CodeLevel: [{
            required: true,
            message: this.$t('objFill.qxzxingzhnegjib'),
            trigger: "change"
          }],
          Area: [{
            required: true,
            message: this.$t('objFill.qxzzhpu'),
            trigger: "change"
          }],
          CountryID: [{
            required: true,
            message: this.$t('visaT.qxzguojia'),
            trigger: "change"
          }],
          ProvinceID: [{
            required: true,
            message: this.$t('objFill.qxzshen'),
            trigger: "change"
          }],
          CityID: [{
            required: true,
            message: this.$t('objFill.qxzshi'),
            trigger: "change"
          }],
          ThreeCode: [{
            required: true,
            message: this.$t('objFill.qsrsanma'),
            trigger: "change"
          }]
        },
        currentUserInfo: {},
      };
    },
    methods: {
      deleteUploadFile() { // 删除上传文件
        this.addMsg.Images = '';
      },
      //上传图片
      uploadFileBtn(file) { //上传
        if (file.file.size > 1024 * 1024 * 10) {
          this.$message.warning(this.$t('tips.wjdxbncgsz'))
          return
        }
        //  1 文档  2 数据 3 图片
        let typeArr = [{
          stringArr: 'GIF|JPG|JPEG|PNG|BMP',
          type: 3
        }, ]
        let ft = file.file.name.substring(file.file.name.lastIndexOf('.') + 1, file.file.name.length).toUpperCase();
        let fileTypeNumber = 2;
        let typeOk = false;
        typeArr.forEach(x => {
          if (x.stringArr.indexOf(ft) != '-1') {
            fileTypeNumber = x.type
            typeOk = true;
          }
        })
        if (!typeOk) return this.$message.error(this.$t('tips.qsctpian'));
        let newArr = [];
        newArr.push(file.file)
        let path = "/Upload/plat/"
        this.$message.info(this.$t('tips.shangchuanzhong'))
        this.UploadSelfFileT(path, newArr, x => {
          let fileSize = file.file.size < 1024 ? file.file.size : (file.file.size / 1024).toFixed(0);
          this.addMsg.Images = this.domainManager().ViittoFileUrl + x.data.FilePath
          this.$message.success(this.$t('tips.scchenggong'));
          // this.$forceUpdate();
        });
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.initData();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      //初始化表格数据
      initData() {
        this.loading = true;
        this.apipost(
          "dict_post_Destination_GetPageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.tabelDate = res.data.data.pageData;
              this.total = res.data.data.count;
            }
          },
          null
        );
      },
      delArea(ID, CodeLevel) {
        var that = this;
        this.Confirm(that.$t('tips.shifoushanchu'), function () {
          let msg = {
            ID: ID,
            CodeLevel: CodeLevel
          };
          that.apipost(
            "dict_post_Destination_Remove",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success(this.$t('tips.shanchuchenggong'));
                that.initData();
              } else {
                that.Error(res.data.message);
              }
            },
            null
          );
        });
      },
      addCityInfo() {
        this.isShow = true;
        this.titleInfo = this.$t('objFill.xingzenchengshi');
        this.addMsg.ID = 0;
      },
      saveInfo() {
        if (this.addMsg.Area == 0) {
          this.Error(this.$t('objFill.qxzzhpuqxzzhpu'));
          return;
        }
        switch (this.addMsg.CodeLevel) {
          case 1:
            this.addMsg.ParentID = 0;
            break;
          case 2:
            this.addMsg.ParentID = this.addMsg.CountryID;
            if (this.addMsg.CountryID == 0) {
              this.Error(this.$t('objFill.qxzsuosuguojia'));;
              return;
            }
            break;
          case 3:
            this.addMsg.ParentID = this.addMsg.ProvinceID;
            if (this.addMsg.ProvinceID == 0) {
              this.Error(this.$t('objFill.qxzsuosushengfen'));;
              return;
            }
            break;
          case 4:
            this.addMsg.ParentID = this.addMsg.CityID;
            if (this.addMsg.CityID == 0) {
              this.Error(this.$t('objFill.qxzsuosushi'));;
              return;
            }
            break;
        }
        this.apipost(
          "dict_post_Destination_Set",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.initData();
              this.Success(this.$t('tips.saveYes'));
              this.isShow = false;
              this.resetForm("addMsg");
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //修改信息
      updateCity(ID) {
        let msg = {
          ID: ID
        };
        this.addMsg.ID = ID;
        this.apipost(
          "dict_post_Destination_Get",
          msg,
          res => {
            this.disCountry = false;
            this.disProvince = false;
            this.disCity = false;
            if (res.data.resultCode == 1) {
              if (res.data.data.CodeLevel == 1) {
                this.addMsg.ParentID = 0;
              } else if (res.data.data.CodeLevel == 2) {
                this.disCountry = true;
                this.addMsg.ParentID = res.data.data.CountryID;
              } else if (res.data.data.CodeLevel == 3) {
                this.getProvinceList(res.data.data.CountryID, 1)
                this.addMsg.ParentID = res.data.data.ProvinceID;
                this.disCountry = true;
                this.disProvince = true;
              } else if (res.data.data.CodeLevel == 4) {
                this.addMsg.ParentID = res.data.data.CityID;
                this.disCountry = true;
                this.disProvince = true;
                this.disCity = true;
              }
              this.addMsg = res.data.data;
              this.addMsg.CountryID = res.data.data.CountryID;
              this.addMsg.ProvinceID = res.data.data.ProvinceID;
              this.addMsg.CityID = res.data.data.CityID;
              this.addMsg.Images = res.data.data.Images;
              this.addMsg.Lng = res.data.data.Lng;
              this.addMsg.Lat = res.data.data.Lat;
              if (this.addMsg.Area == 0) {
                this.addMsg.Area = this.addMsg.Area.toString();
              } else {
                this.addMsg.Area = parseInt(this.addMsg.Area);
              }
              this.getCountry(this.addMsg.Area, 2);
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      getProvinceList(ID, type) {
        //根据省份获取城市
        let msg = {
          Id: ID
        };
        if (type == 1) {
          this.msg.QProvince = "";
          this.msg.QCity = "";
          this.msg.QDistrict = "";
        } else if (type == 2) {
          this.msg.QCity = "";
          this.msg.QDistrict = "";
        } else if (type == 3) {
          this.msg.QDistrict = "";
        }
        if (this.msg.QCountry != "" || this.Country != "") {
          this.apipost(
            "dict_post_Destination_GetChildList",
            msg,
            res => {
              if (type == 1) {
                this.provinceList = res.data.data;
              } else if (type == 2) {
                this.cityList = res.data.data;
              } else if (type == 3) {
                this.district = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      //取消
      cancelPanel() {
        this.isShow = false;
        this.resetForm("addMsg");
      },
      submitForm(addMsg) {
        //提交创建、修改表单
        let that = this;
        that.$refs[addMsg].validate(valid => {
          if (valid) {
            that.saveInfo();
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //获取洲下拉数据
      getContinentList() {
        let msg = {};
        this.apipost(
          "dict_post_Destination_GetContinentList",
          msg,
          res => {
            this.AreaList = res.data.data.AreaList;
            this.RegionList = res.data.data.RegionList;
          },
          err => {}
        );
      },
      //根据洲获取国家
      getCountry(Area, type) {
        let msg = {
          Area: Area
        };
        this.msg.QCountry = "";
        this.apipost(
          "dict_post_Destination_GetCountryByArea",
          msg,
          res => {
            if (type == 1) {
              this.countryList = res.data.data;
            } else {
              this.countryListOther = res.data.data;
            }
          },
          err => {}
        );
      },
      //根据行政区别获取ParentID
      getCodeLevel(CodeLevel) {
        this.disCountry = false;
        this.disProvince = false;
        this.disCity = false;
        if (CodeLevel == 1) {
          this.addMsg.ParentID = 0;
          if (this.addMsg.Area == 0) {
            this.addMsg.Area = this.addMsg.Area.toString();
          }
        } else if (CodeLevel == 2) {
          this.disCountry = true;
          this.addMsg.ParentID = this.addMsg.CountryID;
          if (this.addMsg.Area == 0) {
            this.addMsg.Area = this.addMsg.Area.toString();
          }
          if (this.addMsg.CountryID == 0) {
            this.addMsg.CountryID = this.addMsg.CountryID.toString();
          }
        } else if (CodeLevel == 3) {
          this.disCountry = true;
          this.disProvince = true;
          if (this.addMsg.Area == 0) {
            this.addMsg.Area = this.addMsg.Area.toString();
          }
          if (this.addMsg.CountryID == 0) {
            this.addMsg.CountryID = this.addMsg.CountryID.toString();
          }
          if (this.addMsg.ProvinceID == 0) {
            this.addMsg.ProvinceID = this.addMsg.ProvinceID.toString();
          }
          this.addMsg.ParentID = this.addMsg.ProvinceID;
        } else if (CodeLevel == 4) {
          this.disCountry = true;
          this.disProvince = true;
          this.disCity = true;
          this.addMsg.ParentID = this.addMsg.CityID;
          if (this.addMsg.CountryID == 0) {
            this.addMsg.CountryID = this.addMsg.CountryID.toString();
          }
          if (this.addMsg.ProvinceID == 0) {
            this.addMsg.ProvinceID = this.addMsg.ProvinceID.toString();
          }
          if (this.addMsg.CityID == 0) {
            this.addMsg.CityID = this.addMsg.CityID.toString();
          }
        }
      }
    },
    created() {
      this.currentUserInfo = this.getLocalStorage();
    },
    mounted() {
      this.initData();
      this.getContinentList();
    }
  };

</script>
