<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>域名/IP</em>
            <el-input v-model="msg.Name" placeholder="域名/IP" @keyup.enter.native="getList" class="w210">
            </el-input>
          </span>
        </li>
        <li>
          <span>
            <em>白名单IP</em>
            <el-input v-model="msg.IPAddress" placeholder="白名单IP" @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="">编号</th>
        <th width="">域名/Ip</th>
        <th>白名单</th>
        <th width="200">{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="(item,index) in DataList">
        <td>{{item.Id}}</td>
        <td>{{item.Name}}</td>
        <td>{{item.IPAddress}}</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  label-width="100px">
        <el-form-item label="域名/IP">
          <el-input type="text" v-model="addMsg.Name" placeholder="域名/IP" class="w210"></el-input>
        </el-form-item>
        <el-form-item label="IP地址">
          <el-input type="text" v-model="addMsg.IPAddress" placeholder="IP地址" class="w210"></el-input>
        </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,
          Name: "",
          IPAddress: ""
        },
        addMsg: {
          Id: 0,
          Name: "",
          IPAddress: ""
        },
        DataList: [],
        countryList: [],
        provinceList: [],
        cityList: [],
        loading: true,
        total: 0,
        currentPage: 1,
        outerVisible: false,
        noData: false,
        dialogTitle: "",
      };
    },
    methods: {
      getList() {
        //获取数据分页
        this.loading = true;
        this.apipost(
          "ipmanager_get_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 => {}
        );
      },
      addIpManager() {
        //新增出发城市
        this.apipost(
          "ipmanager_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(
          "ipmanager_get_Get",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.addMsg = res.data.data;
            }
          },
          err => {}
        );
      },
      //删除
      deleteStartCity(ID) {
        var that = this;
        this.Confirm("是否删除?", function () {
          var msg = {
            Id: ID
          };
          that.apipost(
            "ipmanager_post_Remove",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success("删除成功");
                that.getList();
              }
            },
            null
          );
        });
      },
      handleCurrentChange(val) {
        //翻页功能按钮
        this.msg.pageIndex = val;
        this.getList();
      },
      submitForm(addMsg) {
        //提交创建、修改表单
        let that = this;
        that.addIpManager();
      },
      initAddMsg() {
        this.addMsg.Id=0;
        this.addMsg.Name="";
        this.addMsg.IPAddress="";
      },
      resetPageIndex() {
        //查询初始化页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      closeChangeMachie(done) {
        this.initAddMsg();
      },
      resetForm(formName) {
        this.initAddMsg();
      }
    },
    mounted() {
      this.getList();
    }
  };
</script>