<style>
.destMG .addCompany {
  width: 440px;
  max-height: 600px;
}
.destMG .el-switch.is-checked .el-switch__core:after {
  left: 100%;
  margin-left: -17px;
}
.destMG .el-switch__core:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  border-radius: 100%;
  transition: all 0.3s;
  width: 16px;
  height: 16px;
  background-color: #fff;
}
.destMG .el-switch.is-checked .el-switch__core {
  border-color: #4bca81;
  background-color: #4bca81;
}
.destMG .query-box li label {
  display: inline-block;
  min-width: 80px;
  text-align: right;
  font-style: normal;
  margin: 0 20px 0 0;
}
.destMG .countryList .el-select .el-input {
  height: auto !important;
}
</style>

<template>
  <div class="flexOne destMG">
    <div class="query-box">
      <ul>
        <li>
          <label>{{$t('system.query_lineName')}}</label>
          <el-select v-model="msg.LineID" filterable :placeholder="$t('system.ph_choice')" class="w210">
            <el-option :label="$t('pub.unlimitedSel')" :value='defaultSelectValue'></el-option>
            <el-option v-for='item in lineList' :key="item.LineID" :label="item.LineName" :value="item.LineID">
            </el-option>
          </el-select>
        </li>
        <li>
          <label class="">{{$t('system.query_dest')}}</label>
          <el-input v-model="msg.PlaceName" :placeholder="$t('system.ph_in')" @keyup.native.enter="getList" class="w210"></el-input>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" />
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')" @click="outerVisible=true,dialogTitle='新增'" />
        </li>
      </ul>
    </div>
    <div class="commonContent" v-loading="loading">
      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th width="">{{$t('system.table_ssLine')}}</th>
          <th width="">{{$t('system.table_destName')}}</th>
          <th>{{$t('system.table_country')}}</th>
          <th>{{$t('system.table_isShow')}}</th>
          <th width="200">{{$t('system.table_operation')}}</th>
        </tr>
        <tr v-for="(item,index) in DataList">
          <td>{{item.LineName}}</td>
          <td>{{item.PlaceName}}</td>
          <td>{{item.CountryName}}</td>
          <td>{{item.IsShow==0? $t('MarketingActi.notShow'):$t('system.table_isShows')}}</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(index)"></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="deletelist(index)"></el-button>
              </el-tooltip>
            </el-row>
          </td>
        </tr>
      </table>
      <div class="noData" v-show="noData">
        {{$t('system.content_noData')}}
      </div>
    </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_ssLine')" prop="LineID">
          <el-select v-model="addMsg.LineID" filterable :placeholder="$t('system.ph_choice')" class="w210">
            <el-option v-for='item in lineList' :key="item.LineID" :label="item.LineName" :value="item.LineID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('system.table_destName')" prop="PlaceName">
          <el-input type="text" v-model="addMsg.PlaceName" :placeholder="$t('system.ph_destName')" class="w210"></el-input>
        </el-form-item>
        <el-form-item :label="$t('system.table_destCoun')" class='multiple_input countryList' porp='countryString'>
          <el-select v-model="countryString" filterable multiple :placeholder="$t('system.ph_noYes')" 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_isShow')">
          <el-switch v-model="addMsg.IsShow" :active-value="activeValue" :inactive-value="inactiveValue"></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 {
      msg: {
        pageIndex: 1,
        pageSize: 15,
        LineID: 0,
        PlaceName: ""
      },
      defaultSelectValue: 0,
      addMsg: {
        PlaceID: 0,
        PlaceName: "",
        LineID: "",
        CountryID: "",
        IsShow: 0
      },
      activeValue: 1,
      inactiveValue: 0,

      countryString: [],
      countryStringS: [],
      lineList: [],
      destinationList: [],
      DataList: [],
      countryList: [],
      noData: false,
      auditorList: [],
      total: 0,
      currentPage: 1,
      outerVisible: false,
      dialogTitle: "",
      loading: true,
      rules: {
        //表单必填验证
        LineName: [
          {
            required: true,
            message: this.$t('op.qtxxianlumc'),
            trigger: "blur"
          }
        ],
        LineID: [
          {
            required: true,
            message: this.$t('op.qxzsuosxl'),
            trigger: "change"
          }
        ],
        PlaceName: [
          {
            required: true,
            message: this.$t('op.qtxmddmc'),
            trigger: "blur"
          }
        ],
        countryString: [
          {
            required: true,
            message: this.$t('visaT.qxzguojia'),
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    getList() {
      //获取现有线路列表
      this.loading = true;
      this.apipost(
        "place_post_GetPageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data.pageData;
            this.total = res.data.data.count;
            this.noData = !this.total > 0;
          } else {
            this.loading = false;
          }
        },
        err => {}
      );
    },
    getLineList() {
      //获取线路下拉列表
      this.lineList = "";
      let msg = {
        IsShow: -1
      };
      this.apipost("line_post_GetAllList_V3", msg, res => {
        this.lineList = res.data.data;
      });
    },
    getDestinationList() {
      let msg = {
        LineID: 0,
        IsShow: -1
      };
      this.apipost("place_post_GetList", msg, res => {
        this.destinationList = res.data.data;
      });
    },
    getCountry() {
      //获取国家
      let msg = {};
      this.apipost(
        "dict_post_Destination_GetCountry",
        msg,
        res => {
          this.countryList = res.data.data;
        },
        err => {}
      );
    },
    getBranchGetList() {
      //获取公司列表
      let msg = {
        Status: "0",
        is_show: "",
        RB_Group_Id: ""
      };
      this.apipost(
        "admin_get_BranchGetList",
        msg,
        res => {
          this.BranchGetList = res.data.data;
        },
        err => {}
      );
    },
    addLine() {
      //添加
      this.apipost(
        "place_post_Set",
        this.addMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.Success("保存成功!");
            this.getList();
            this.innerVisible = false;
            this.outerVisible = false;
            this.initAddMsg();
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    updateData(index) {
      //修改
      let msg = {
        ID: this.DataList[index].PlaceID
      };
      this.apipost(
        "place_post_Get",
        msg,
        res => {
          this.addMsg = res.data.data;
          //移除最后一个逗号
          var reg = /,$/gi;
          this.addMsg.CountryID = this.addMsg.CountryID.replace(reg, "");

          this.countryStringS = this.addMsg.CountryID.split(",");
          this.countryStringS.forEach(x => {
            this.countryString.push(Number(x));
          });
        },
        err => {}
      );
    },
    deletelist(index) {
      //删除
      this.$confirm(this.$t('tips.shifoushanchu'), this.$t('tips.tips'), {
        confirmButtonText: this.$t('pub.sureBtn'),
        cancelButtonText: this.$t('pub.cancelBtn'),
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: this.$t('tips.shanchuchenggong')
          });
          this.deleteLine(index);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    deleteLine(index) {
      //删除
      let msg = {
        ID: this.DataList[index].PlaceID
      };
      this.apipost(
        "place_post_Remove",
        msg,
        res => {
          if (res.data.resultCode == 1) {
          }
          this.getList();
        },
        err => {}
      );
    },
    submitForm(addMsg) {
      //提交创建、修改表单
      let countryStringS = "";
      this.countryString.forEach(x => {
        countryStringS = countryStringS + x + ",";
      });
      this.addMsg.CountryID = countryStringS;
      this.countryString = [];
      this.$refs[addMsg].validate(valid => {
        if (valid) {
          this.addLine();
        } else {
          return false;
        }
      });
    },
    handleCurrentChange(val) {
      //翻页功能按钮
      this.msg.pageIndex = val;
      this.getList();
    },
    initAddMsg() {
      //初始化创建、修改表单数据
      let newMsg = {
        PlaceID: 0,
        PlaceName: "",
        LineID: "",
        CountryID: "",
        RB_Branch_id: "",
        IsShow: 0
      };
      this.addMsg = newMsg;
    },
    resetPageIndex() {
      //查询初始化页码
      this.msg.pageIndex = 1;
      this.currentPage = 1;
    },
    closeChangeMachie(done) {
      //弹出框关闭初始化弹框内表单
      done();
      this.resetForm("addMsg");
    },
    resetForm(formName) {
      //弹出框取消 初始化谈框内表单
      this.$refs[formName].resetFields();
      this.countryString = [];
    }
  },
  
  mounted() {
    this.getList();
    this.getDestinationList();
    this.getBranchGetList();
    this.getCountry();
    this.getLineList();
  }
};
</script>