<style>
  .airportMg .addCompany {
    width: 440px;
    max-height: 600px;
  }

  .airportMg .addCompany .el-dialog__body {
    height: 486px;
    overflow: auto;
  }

  .airportMg .query-box li label {
    display: inline-block;
    min-width: 80px;
    text-align: right;
    font-style: normal;
    margin: 0 20px 0 0;
  }

  .airportMg .el-dialog .el-form-item__label {
    width: 100px !important;
  }

</style>
<template>
  <div class='flexOne airportMg'>
    <div class='query-box'>
      <ul>
        <li>
          <label class="">{{$t('system.quety_area')}}</label>
          <el-select v-model="msg.Country_id" clearable filterable @change="getProvinceList(msg.Country_id,1)"
            :placeholder="$t('system.ph_choice')" class="w210">
            <el-option v-for='item in countryList' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
          <el-select v-model="msg.Province_id" filterable @change="getProvinceList(msg.Province_id,2)"
            :placeholder="$t('system.ph_choice')" class="w210">
            <el-option v-for='item in provinceList' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
          <el-select v-model="msg.City_id" filterable :placeholder="$t('system.ph_choice')" class="w210">
            <el-option v-for='item in cityList' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </li>
        <li>
          <label class="margin_left_30">{{$t('system.query_airName')}}</label>
          <el-input v-model="msg.Name" :placeholder="$t('system.ph_in')" @keyup.native.enter="getList" class="w210">
          </el-input>
        </li>
        <li>
          <label class="margin_left_30">{{$t('admin.admin_status')}}</label>
          <el-select v-model="msg.Status" :placeholder="$t('system.ph_choice')" class="w210">
            <el-option key="0" label="正常" value="0"></el-option>
            <el-option key="1" label="删除" value="1"></el-option>
          </el-select>
        </li>
        <li><input type="button" class="hollowFixedBtn" value="查询" @click="resetPageIndex(),getList()" />
          <input type="button" class="normalBtn" value="添加" @click="initAddMsg(),outerVisible=true,dialogTitle='新增车站'" /></li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>{{$t('system.query_airName')}}</th>

        <th>{{$t('system.table_city')}}</th>
        <th>{{$t('hotel.table_operater')}}</th>
        <th>{{$t('hotel.table_operattime')}}</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="(item,index) in DataList">
        <td>{{item.Name}}</td>
        <td>{{item.CityName}}</td>
        <td>{{item.EmName}}</td>
        <td>{{item.UpdateDate}}</td>
        <td>
          <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top">
            <el-button type="primary" icon="el-icon-edit" circle
              @click="outerVisible=true,dialogTitle='修改',updateData(index)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('pub.revoke')" placement="top-start"
            v-if="item.Status==1">
            <el-button type="danger" icon="iconfont icon-web-icon-revoke" circle @click="deletelist(index,2)">
            </el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start" v-else>
            <el-button type="danger" icon="el-icon-delete" circle @click="deletelist(index,1)"></el-button>
          </el-tooltip>
        </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_country')" prop="Country_id">
          <el-select v-model="addMsg.Country_id" filterable :placeholder="$t('system.ph_buxian')"
            @change="getProvinceListLayer(addMsg.Country_id,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('hotel.hotel_province')" prop="Province_id">
          <el-select v-model="addMsg.Province_id" filterable :placeholder="$t('system.ph_buxian')"
            @change="getProvinceListLayer(addMsg.Province_id,2)" class="w210">
            <el-option v-for='item in layer_provinceList' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('hotel.hotel_city')" v-if="layer_cityList.length!==0" prop="City_id">
          <el-select v-model="addMsg.City_id" filterable :placeholder="$t('system.ph_buxian')"
            @change="getProvinceListLayer(addMsg.City_id,3)" class="w210">
            <el-option v-for='item in layer_cityList' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('hotel.hotel_area')" v-if="layer_districtList.length!==0" prop="District_id">
          <el-select v-model="addMsg.District_id" filterable :placeholder="$t('system.ph_buxian')" class="w210">
            <el-option v-for='item in layer_districtList' :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('system.query_airName')" prop="Name">
          <el-input type="text" v-model="addMsg.Name" :placeholder="$t('system.ph_name')" class="w210"></el-input>
        </el-form-item>
        <el-form-item :label="$t('system.table_rankNum')" prop="RankNum">
          <el-input type="text" v-model="addMsg.RankNum" :placeholder="$t('system.table_rankNum')" class="w210"
            @keyup.native="checkInteger(addMsg,'RankNum')"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="normalBtn" type="primary"
          @click="submitForm('addMsg'),resetPageIndex()">{{$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 {
        msg: {
          pageIndex: 1,
          pageSize: 13,
          Status: '0',
          Country_id: '',
          Province_id: '',
          City_id: '',
          Name: '',
          IATA: '',
          ICAO: '',
          TrafficType: 2, //车站
        },
        addMsg: {
          ID: '',
          Country_id: '',
          Province_id: '',
          City_id: '',
          District_id: '',
          Name: '',
          En_name: '',
          IATA: '',
          ICAO: '',
          RankNum: '',
          //经
          Lng: '',
          //纬
          Lat: '',
          TrafficType: 2, //车站
        },
        DataList: [],
        BranchGetList: [],
        lineList: [],
        countryList: '',
        provinceList: '',
        cityList: '',
        layer_provinceList: [],
        layer_cityList: [],
        layer_districtList: [],
        loading: true,
        currentPage: 1,
        total: 0,
        outerVisible: false,
        noData: false,
        insideDialogTxt: '保存成功！',
        dialogTitle: '',
        rules: { //表单必填验证
          Country_id: [{
              required: true,
              message: '请选择国家',
              trigger: 'change'
            }
            //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          Province_id: [{
              required: true,
              message: '请选择省',
              trigger: 'change'
            }
            //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          City_id: [{
              required: true,
              message: '请选择市',
              trigger: 'change'
            }
            //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          District_id: [{
              required: true,
              message: '请选择区县',
              trigger: 'change'
            }
            //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          Name: [{
              required: true,
              message: '请输入名称',
              trigger: 'blur'
            }
            //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          En_name: [{
              required: true,
              message: '请输入英文名称',
              trigger: 'blur'
            }
            //{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          IATA: [{
              required: true,
              message: '请输入IATA',
              trigger: 'blur'
            },
            {
              pattern: this.$commonUtils.Regex.el_IsNumEn,
              message: '请输正确的IATA'
            },
          ],
          ICAO: [{
              required: true,
              message: '请输入ICAO',
              trigger: 'blur'
            },
            {
              pattern: this.$commonUtils.Regex.el_IsNumEn,
              message: '请输入正确的ICAO'
            },
          ],
          RankNum: [{
            pattern: this.$commonUtils.Regex.el_isInteger,
            message: '请输入数字'
          }, ]
        }
      }
    },
    methods: {
      getList() { //获取列表
        this.loading = true;
        if (this.msg.Country_id == '') {
          this.msg.Country_id = 0;
        }
        if (this.msg.Province_id == '') {
          this.msg.Province_id = 0;
        }
        if (this.msg.City_id == '') {
          this.msg.City_id = 0;
        }
        this.Status = Number(this.Status)
        this.apipost('airport_post_GetPageList', this.msg, res => {
          this.total = res.data.data.count;
          this.loading = false;
          if (res.data.resultCode == 1) {
            if (this.total > 0) {
              this.DataList = res.data.data.pageData;
              this.noData = false;
              if (this.msg.Country_id == 0) {
                this.msg.Country_id = '';
              }
              if (this.msg.Province_id == 0) {
                this.msg.Province_id = '';
              }
              if (this.msg.City_id == 0) {
                this.msg.City_id = '';
              }
              this.Status = this.Status.toString();
            } else {
              if (this.msg.Country_id == 0) {
                this.msg.Country_id = '';
              }
              if (this.msg.Province_id == 0) {
                this.msg.Province_id = '';
              }
              if (this.msg.City_id == 0) {
                this.msg.City_id = '';
              }
              this.noData = true;
              this.DataList = [];
            }
          } else {
            this.noData = true;
            this.Error(res.data.message);
          }
        }, err => {})
      },
      getCountryList() { //获取国家
        let msg = {};
        this.apipost('dict_post_Destination_GetCountry', msg, res => {
          this.countryList = res.data.data;
        }, err => {})
      },
      getProvinceList(ID, type) { //根据省份获取城市
        let msg = {
          Id: ID
        };
        if (type == 1) {
          this.msg.Province_id = '';
          this.msg.City_id = '';
        } else {
          this.msg.City_id = '';
        }
        if (this.msg.Country_id !== '') {
          this.apipost('dict_post_Destination_GetChildList', msg, res => {
            if (type == 1) {
              this.provinceList = res.data.data;
            } else {
              this.cityList = res.data.data;
            }
          }, err => {})
        }
      },
      getProvinceListLayer(ID, type) {
        let msg = {
          Id: ID
        };
        if (type == 1) {
          this.addMsg.Province_id = '';
          this.addMsg.City_id = '';
          this.addMsg.District_id = '';
        } else if (type == 2) {
          this.addMsg.City_id = '';
          this.addMsg.District_id = '';

        } else if (type == 3) {
          this.addMsg.District_id = '';
        }
        this.apipost('dict_post_Destination_GetChildList', msg, res => {
          if (type == 1) {
            this.layer_provinceList = res.data.data;
            this.layer_districtList = [];
          } else if (type == 2) {
            this.layer_cityList = res.data.data;
            this.layer_districtList = [];
          } else {
            this.layer_districtList = res.data.data;
          }
        }, err => {})
      },
      addAirport() { //添加机场
        if (this.addMsg.RankNum == '') {
          this.addMsg.RankNum = '0';
        }
        if (this.addMsg.City_id == '') {
          this.addMsg.City_id = 0
        }
        if (this.addMsg.District_id == '') {
          this.addMsg.District_id = 0
        }
        if (this.addMsg.ID == '') {
          this.addMsg.ID = 0
        }
        if (this.addMsg.RankNum == '') {
          this.addMsg.RankNum = 0
        }
        this.apipost('airport_post_Set', this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success('保存成功');
            this.getList();
            this.outerVisible = false;
            this.initAddMsg();
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      updateData(index) { //修改
        let msg = {
          ID: this.DataList[index].ID
        };
        this.apipost('airport_post_Get', msg, res => {
          if (res.data.data.Country_id !== 0) {
            this.getProvinceListLayer(res.data.data.Country_id, 1)
          }
          if (res.data.data.Province_id !== 0) {
            this.getProvinceListLayer(res.data.data.Province_id, 2)
          }
          if (res.data.data.City_id !== 0) {
            this.getProvinceListLayer(res.data.data.City_id, 3)
          }
          this.addMsg = res.data.data;
        }, err => {})
      },
      deletelist(index, type) { //删除
        var text = '';
        var text2 = "";
        if (type == 1) {
          text = "是否删除?"
          text2 = "删除成功"
        } else {
          text = "是否恢复?"
          text2 = "恢复成功"
        }
        this.$confirm(text, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: text2
          });
          this.deleteAirport(index)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteAirport(index) {
        let msg = {
          ID: this.DataList[index].ID
        };
        this.apipost('airport_post_Remove', msg, res => {
          if (res.data.resultCode == 1) {

          }
          this.getList();
        }, err => {})
      },
      handleCurrentChange(val) { //翻页功能按钮
        this.msg.pageIndex = val;
        this.getList();
      },
      submitForm(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addAirport()
          } else {

            return false;
          }
        });
      },
      initAddMsg() {
        this.addMsg.ID = '';
        this.addMsg.Country_id = '';
        this.addMsg.Province_id = '';
        this.addMsg.City_id = '';
        this.addMsg.District_id = '';
        this.addMsg.Name = '';
        this.addMsg.En_name = '';
        this.addMsg.IATA = '';
        this.addMsg.ICAO = '';
        this.addMsg.RankNum = '';
        this.addMsg.Lng = '';
        this.addMsg.Lat = '';
        this.addMsg.TrafficType = 2;
      },
      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.getCountryList();
    }
  }

</script>