<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: 20px 30px 20px 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>洲</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>国家</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>省</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>市</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>区</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>名称</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>名称</th>
          <th>行政级别</th>
          <th>所属大洲</th>
          <th>所属国家</th>
          <th>所属省份</th>
          <th>所属市</th>
          <th>操作</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>
            <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
              <el-button type="primary" @click="isShow=true,titleInfo='修改城市',updateCity(item.ID)" icon="el-icon-edit"
                circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" 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">
          <li>
            <el-form-item label="中文名称" prop="Name">
              <el-input v-model="addMsg.Name" class="w150" maxlength="20"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="英文名称" prop="EnName">
              <el-input v-model="addMsg.EnName" class="w150" maxlength="20"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="行政级别" prop="CodeLevel">
              <el-select v-model="addMsg.CodeLevel" class="w150" clearable @change="getCodeLevel(addMsg.CodeLevel)"
                filterable placeholder="请选择">
                <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="所属洲" prop="Area">
              <el-select v-model="addMsg.Area" class="w150" clearable @change="getCountry(addMsg.Area,2)" filterable
                placeholder="请选择">
                <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="所属国家" prop="CountryID">
              <el-select v-model="addMsg.CountryID" clearable class="w150" filterable @change="getProvinceList(addMsg.CountryID,1)"
                placeholder="请选择">
                <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="所属省份" prop="ProvinceID">
              <el-select v-model="addMsg.ProvinceID" clearable class="w150" filterable @change="getProvinceList(addMsg.ProvinceID,2)"
                placeholder="请选择">
                <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="所属市" prop="CityID">
              <el-select v-model="addMsg.CityID" class="w150" clearable filterable placeholder="请选择">
                <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="三码" ><!--prop="ThreeCode"-->
              <el-input v-model="addMsg.ThreeCode" class="w150" maxlength="3"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="图片">
                <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="取消" />
              <input type="button" class="normalBtn" @click="submitForm('addMsg')" value="保存" />
            </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: "",
        CodeLevel: "",
        ThreeCode: "",
        FourCode: "",
        Area: "",
        CountryID: "",
        ProvinceID: "",
        CityID: ""
      },
      rules: {
        Name: [
          {
            required: true,
            message: "请输入中文名称",
            trigger: "change"
          }
        ],
        EnName: [
          {
            required: true,
            message: "请输入英文名称",
            trigger: "change"
          },
          {
            pattern: this.$commonUtils.Regex.el_IsEnglish,
            message: "请输入英文"
          }
        ],
        CodeLevel: [
          {
            required: true,
            message: "请选择行政级别",
            trigger: "change"
          }
        ],
        Area: [
          {
            required: true,
            message: "请选择洲",
            trigger: "change"
          }
        ],
        CountryID: [
          {
            required: true,
            message: "请选择国家",
            trigger: "change"
          }
        ],
        ProvinceID: [
          {
            required: true,
            message: "请选择省",
            trigger: "change"
          }
        ],
        CityID: [
          {
            required: true,
            message: "请选择市",
            trigger: "change"
          }
        ],
        ThreeCode: [
          {
            required: true,
            message: "请输入三码",
            trigger: "change"
          }
        ]
      }
    };
  },
  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("是否删除?", function() {
        let msg = {
          ID: ID,
          CodeLevel: CodeLevel
        };
        that.apipost(
          "dict_post_Destination_Remove",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              that.Success("删除成功");
              that.initData();
            } else {
              that.Error(res.data.message);
            }
          },
          null
        );
      });
    },
    addCityInfo() {
      this.isShow = true;
      this.titleInfo = "新增城市";
      this.addMsg.ID = 0;
    },
    saveInfo() {
      if (this.addMsg.Area == 0) {
        this.Error("请选择洲");
        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("请选择所属国家");
            return;
          }
          break;
        case 3:
          this.addMsg.ParentID = this.addMsg.ProvinceID;
          if (this.addMsg.ProvinceID == 0) {
            this.Error("请选择所属省份");
            return;
          }
          break;
        case 4:
          this.addMsg.ParentID = this.addMsg.CityID;
          if (this.addMsg.CityID == 0) {
            this.Error("请选择所属市");
            return;
          }
          break;
      }
      this.apipost(
        "dict_post_Destination_Set",
        this.addMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.initData();
            this.Success("保存成功");
            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.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;
            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();
        }
      }
    }
  },
  mounted() {
    this.initData();
    this.getContinentList();
  }
};
</script>