<style>
.startCityMG .query_box {
  font-size: 12px;
  padding: 29px 0;
  padding-right: 30px;
  display: flex;
  justify-content: space-between;
}
.startCityMG .query_box label {
  display: inline-block;
  margin-right: 25px;
  width: 80px;
  text-align: right;
}
.startCityMG .addCompany {
  width: 440px;
  max-height: 600px;
}
.startCityMG .addCompany .el-dialog__body {
  padding-bottom: 0;
}
.startCityMG .el-switch.is-checked .el-switch__core {
  border-color: #4bca81;
  background-color: #4bca81;
}
.noData {
  text-align: center;
  padding: 20px;
}
.startCityMG .city_box {
  width: 100%;
  display: flex;
  justify-content: center;
}
.startCityMG .city_box .el-input {
  width: 88%;
}
.startCityMG .city_box .el-input input {
  width: 100%;
}
.startCityMG .query_box li label {
  display: inline-block;
  min-width: 80px;
  text-align: right;
  font-style: normal;
  margin: 0 20px 0 0;
}
</style>
<template>
  <div class="flexOne startCityMG">
       <div class="query-box">
            <ul>
                <li>
                    <span>
                        <em>{{$t('system.table_company')}}</em>
                        <el-select v-model="msg.RB_Branch_id" filterable class="w210">
                            <el-option label='不限' value='-1'></el-option>
                            <el-option
                            v-for="item in BranchGetList"
                            :key="item.Id" 
                            :label="item.BName"
                            :value="item.Id">
                            </el-option>
                        </el-select>
                    </span>
                </li>
                <li>
                    <span>
                        <em>{{$t('system.query_cityName')}}</em>
                        <el-input v-model="msg.startCityName" :placeholder="$t('system.ph_in')" @keyup.enter.native="getList" class="w210"></el-input> 
                    </span>
                </li>
                <li>
                    <input type="button" class="hollowFixedBtn" value="查询" @click="resetPageIndex(),getList()" />
                    <input type="button" class="normalBtn" value="新增" @click="outerVisible = true,dialogTitle='新增出发城市'" />
                </li>
            </ul>
       </div>
       <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
			<tr>
				<th width="">{{$t('system.table_company')}}</th>
				<th width="">{{$t('system.table_goCity')}}</th>
				<th>{{$t('system.table_enName')}}</th>
				<th>{{$t('system.table_pvrg')}}</th>
				<th>{{$t('system.table_country')}}</th>
				<th>{{$t('system.table_rankNum')}}</th>
				<th width="200">{{$t('system.table_operation')}}</th>
			</tr>
			<tr v-for="(item,index) in DataList">
				<td>{{item.BranchName}}</td>
				<td>{{item.startCityName}}</td>
                <td>{{item.startCityNamePin}}</td>
				<td>{{item.PName}}/{{item.startCityName}}</td>
				<td>{{item.CName}}</td>
				<td>{{item.rank}}</td>
				<td style="position: relative;">    
                     <el-row>
                        <el-tooltip class="item" effect="dark" :content="$t('system.table_edit')" placement="top-start">
                            <el-button type="primary" icon="el-icon-edit" circle @click="outerVisible = true,dialogTitle='修改出发城市',updateData(item.ID)"></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" circle @click="deleteStartCity(item.ID)"></el-button>
						</el-tooltip>	                        					
					</el-row>
				</td>
			</tr>
		</table>
        <div class="noData" v-show="noData">
            {{$t('system.content_noData')}}
        </div>
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
		</el-pagination>
        <el-dialog custom-class='addCompany' :title="dialogTitle" :visible.sync="outerVisible" center :before-close="closeChangeMachie">			
			<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px" >
                <el-form-item :label="$t('system.table_company')" prop="RB_Branch_id">
                    <el-select v-model="addMsg.RB_Branch_id" filterable :placeholder="$t('system.ph_choice')" class="w210">
                        <el-option v-for='item in BranchGetList'
                                :key="item.Id" 
                                :label="item.BName"
                                :value="item.Id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('system.table_country')" prop="CountryID">
                    <el-select v-model="addMsg.CountryID" filterable :placeholder="$t('system.ph_choice')" @change="getProvinceList(1)" class="w210">
                        <el-option v-for='item in countryList'
                                :key="item.ID" 
                                :label="item.Name"
                                :value="item.ID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('system.table_pvrg')" prop="ProvinceID">
                       <el-select v-model="addMsg.ProvinceID" filterable :placeholder="$t('system.table_pvrg')" @change="getCityList(1)" class="w210">
                        <el-option v-for='item in provinceList'
                                :key="item.ID" 
                                :label="item.Name"
                                :value="item.ID">
                        </el-option>
                        </el-select>
                        
                </el-form-item>
                <el-form-item :label="$t('system.table_city')" prop="startID" ><!--v-if="cityList.length>1"-->
                    <el-select v-model="addMsg.startID" filterable :placeholder="$t('system.ph_city')" @change="setInfo" class="w210">
                        <el-option v-for='item in cityList'
                                :key="item.ID" 
                                :label="item.Name"
                                :value="item.ID">
                        </el-option>
                    </el-select>
                </el-form-item>
                  <el-form-item :label="$t('system.table_EN')" prop="startCityNamePin">
                   <el-input type="text" v-model="addMsg.startCityNamePin" :auto-complete="$t('system.ph_cityEname')" class="w210"></el-input>
                </el-form-item>
                <!-- <el-form-item :label="$t('system.table_praceQK')" prop="priceType">
                    <el-radio-group v-model="addMsg.priceType">
                        <el-radio label="0">{{$t('system.sel_priceNo')}}</el-radio>
                        <el-radio label="1">{{$t('system.sel_priceUp')}}</el-radio>
                        <el-radio label="2">{{$t('system.sel_priceDown')}}</el-radio>
                    </el-radio-group>
                </el-form-item> -->
                <!-- <el-form-item :label="$t('system.table_priceChange')">
                   <el-input type="text" v-model="addMsg.changePrice" placeholder="0.00" class="w210"></el-input>
                </el-form-item> -->
                <el-form-item :label="$t('system.table_rank')">
                   <el-input type="text" v-model="addMsg.rank" placeholder="" class="w210"></el-input>
                </el-form-item>
                <!-- <el-form-item :label="$t('system.table_isDefault')">
                    <el-switch v-model="addMsg.isDefault" active-value="1" inactive-value="0" ></el-switch>
                </el-form-item> -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button> &nbsp;
				<button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg')">{{$t('pub.cancelBtn')}}</button>
			</div>
		</el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      startCityList: [],
      BranchGetList: [],
      msg: {
        pageIndex: 1,
        pageSize: 15,
        RB_Branch_id: "-1",
        startCityName: ""
      },
      addMsg: {
        RB_Branch_id: "",
        CountryID: "",
        ProvinceID: "",
        startID: "",
        startCityName: "",
        startCityNamePin: "",
        priceType: "",
        changePrice: "",
        rank: "",
        isDefault: ""
      },
      DataList: [],
      countryList: [],
      provinceList: [],
      cityList: [],
      loading: true,
      total: 0,
      currentPage: 1,
      outerVisible: false,
      noData: false,
      dialogTitle: "",
      rules: {
        RB_Branch_id: [
          { required: true, message: "请选择公司", trigger: "change" }
        ],
        CountryID: [
          { required: true, message: "请选择国家", trigger: "change" }
        ],
        ProvinceID: [
          { required: true, message: "请选择省", trigger: "change" }
        ],
        startID: [{ required: true, message: "请选择城市", trigger: "change" }],
        startCityNamePin: [
          { required: true, message: "请输入城市拼音", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    getList() {
      //获取数据分页
      this.loading = true;
      this.apipost(
        "city_post_GetPageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.DataList = res.data.data.pageData;
            this.noData = !this.total > 0;
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    getBranchGetList() {
      //获取公司列表
      var obj = this.getLocalStorage();
      let msg = {
        Status: "0",
        is_show: "",
        RB_Group_Id: obj.RB_Group_id
      };
      this.apipost(
        "admin_get_BranchGetList",
        msg,
        res => {
          this.BranchGetList = res.data.data;
        },
        err => {}
      );
    },
    getCountryList() {
      //获取国家列表//获取国家列表
      let msg = {};
      this.apipost(
        "dict_post_Destination_GetCountry",
        msg,
        res => {
          this.countryList = res.data.data;
        },
        err => {}
      );
    },
    getProvinceList(num) {
      //根据选择国家id获取相应省份
      if (num == 1) {
        this.initTableData();
      }
      let msg = {
        Id: this.addMsg.CountryID
      };
      this.apipost(
        "dict_post_Destination_GetChildList",
        msg,
        res => {
          this.provinceList = res.data.data;
        },
        err => {}
      );
    },
    getCityList(type) {
      //根据相应城市id获取相应城市
      if (type == 1) {
        this.cityList = [];
        this.addMsg.startID = "";
      }
      let msg = {
        Id: this.addMsg.ProvinceID
      };

      this.apipost(
        "dict_post_Destination_GetChildList",
        msg,
        res => {
          this.cityList = res.data.data;
        },
        err => {}
      );
    },
    setInfo() {
      //城市名获取
      let msg = {
        Id: this.addMsg.ProvinceID
      };
      this.apipost(
        "dict_post_Destination_GetChildList",
        msg,
        res => {
          res.data.data.forEach((item, index) => {
            if (item.ID == this.addMsg.startID) {
              this.addMsg.startCityName = item.Name;
            }
          });
        },
        err => {}
      );
    },
    addStartCity() {
      //新增出发城市
      this.apipost(
        "city_post_Set",
        this.addMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.Success("保存成功！");
            this.getList();
            this.outerVisible = false;
            this.resetForm("addMsg");
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    updateData(ID) {
      //修改
      let msg = {
        ID: ID
      };
      this.apipost(
        "city_post_Get",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.addMsg = res.data.data;
            // this.addMsg.isDefault = this.addMsg.isDefault.toString();
            // this.addMsg.priceType = this.addMsg.priceType.toString();
            this.getProvinceList(2);
            this.getCityList(2);
          }
        },
        err => {}
      );
    },
    //删除
    deleteStartCity(ID) {
      var that = this;
      this.Confirm("是否删除?", function() {
        var msg = {
          ID: ID
        };
        that.apipost(
          "city_post_Remove",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              that.Success("删除成功");
              that.getList();
            }
          },
          null
        );
      });
    },
    initTableData() {
      // 新增修改时改变国家初始化省份地区下拉框
      this.addMsg.ProvinceID = "";
      this.addMsg.startID = "";
    },
    handleCurrentChange(val) {
      //翻页功能按钮
      this.msg.pageIndex = val;
      this.getList();
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      let that = this;
      that.$refs[addMsg].validate(valid => {
        if (valid) {
          that.addStartCity();
        } else {
          return false;
        }
      });
    },
    initAddMsg() {
      //初始化查询数据
      let newMsg = {
        RB_Branch_id: "",
        CountryID: "",
        ProvinceID: "",
        startID: "",
        startCityName: "",
        startCityNamePin: "",
        // priceType: "",
        changePrice: "",
        rank: "",
        // isDefault: ""
      };
      this.addMsg = newMsg;
    },
    resetPageIndex() {
      //查询初始化页码
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    closeChangeMachie(done) {
      done();
      this.resetForm("addMsg");
    },
    resetForm(formName) {
      this.initAddMsg();
      this.$refs[formName].resetFields();
    }
  },
  mounted() {
    this.getList();
    this.getBranchGetList();
    this.getCountryList();
  }
};
</script>
