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

  .seriesMG .addCompany .el-dialog__body {
    overflow: auto;
  }

  .seriesMG .el-pagination {
    text-align: center;
    padding-top: 10px;
  }

  .seriesMG .addCompany input {
    width: 208px;
    height: 34px;
    border-radius: 17px;
  }

  .seriesMG .margin_left_30 {
    margin-left: 30px !important;
  }

  .seriesMG .el-switch.is-checked .el-switch__core {
    border-color: #4bca81;
    background-color: #4bca81;
  }

  .seriesMG .seriesMg_tips_f {
    margin-bottom: 0 !important;
  }

  .seriesMG .seriesMg_tips,
  .seriesMG .seriesMg_tips_one {
    color: #e95252;
    padding-left: 96px;
    font-size: 12px;
  }

  .seriesMG .seriesMg_tips_one {
    color: #f56c6c;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    padding-left: 0;
  }

  .seriesMG .seriesMg_my_tips .el-form-item__error {
    left: 60px;
  }

  .seriesMG .el-switch.is-checked .el-switch__core:after {
    left: 100%;
    margin-left: -17px;
  }

  .seriesMG .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;
  }

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

  .seriesMG .el-form-item__error {
    left: 0;
  }

</style>
<template>
  <div class="flexOne seriesMG">
    <div class="query-box">
      <ul>
        <li>
          <label class="">{{$t('system.table_ssLine')}}</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.table_isShow')}}</label>
          <el-select v-model="msg.isTOOP" filterable :placeholder="$t('system.ph_choice')" class="w210">
            <el-option v-for='item in isTOOPOption' :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li>
          <label class="">{{$t('op.XilieName')}}</label>
          <el-input type="text" v-model="msg.LtName" :placeholder="$t('system.ph_LtName')" @keyup.native.enter="getList"
            maxlength="20" 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=$t('objFill.xingztmzl')" />
        </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>{{$t('system.query_dest')}}</th>
          <th>{{$t('op.XilieName')}}</th>
          <th>{{$t('objFill.shifouxszk')}}</th>
          <th>{{$t('system.table_isShow')}}</th>
          <th width="200">{{$t('system.table_operation')}}</th>
        </tr>
        <tr v-for="(item,index) in DataList" :key="index">
          <td>{{item.LineName}}</td>
          <td>{{item.PlaceName}}</td>
          <td>{{item.LtName}}</td>
          <td>
            <template v-if="item.isSaleInNET==1">
              <span style="color:red;">{{$t('visaT.sale')}}</span>
            </template>
            <template v-else>
              <span>{{$t('objFill.buxiaosou')}}</span>
            </template>
          </td>
          <td>
            <template v-if="item.isTOOP==1">
              <span style="color:red;">{{$t('system.table_isShows')}}</span>
            </template>
            <template v-else>
              <span>{{$t('MarketingActi.notShow')}}</span>
            </template>
          </td>
          <td>
            <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=$t('objFill.xiugaitmzl'),updateData(item.LtID)"></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-tooltip class="item" effect="dark" :content="$t('leader.leader_Set')" placement="top-start">
                <el-button type="info" icon="el-icon-setting" @click="goUrl('seriesSetList',item.LtID)" circle>
                </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="msg.currentPage"
      layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total="msg.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')"
            @change="getDestinationList(1)" 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>
        </el-form-item>
        <el-form-item :label="$t('system.query_dest')" prop="placeID">
          <el-select v-model="addMsg.placeID" filterable :placeholder="$t('system.ph_choice')" class="w210">
            <el-option :label="$t('pub.unlimitedSel')" :value='defaultSelectValue'></el-option>
            <el-option v-for='item in destinationList' :key="item.PlaceID" :label="item.PlaceName"
              :value="item.PlaceID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('system.table_code')" prop="LtCode" class="seriesMg_my_tips">
          <el-input type="text" v-model="addMsg.LtCode" :placeholder="$t('system.ph_codes')" maxlength="3" class="w210">
          </el-input>
          <div class="seriesMg_tips_one">
            {{$t('system.table_codeTips')}}
          </div>
        </el-form-item>
        <el-form-item :label="$t('op.XilieName')" prop="LtName">
          <el-input type="text" v-model="addMsg.LtName" :placeholder="$t('system.ph_LtName')" maxlength="20"
            class="w210"></el-input>
        </el-form-item>
        <el-form-item :label="$t('system.table_isSaleInNET')" class="seriesMg_tips_f">
          <el-switch v-model="addMsg.isSaleInNET" :active-value="checkedValue" :inactive-value="defaultSelectValue">
          </el-switch>
        </el-form-item>
        <div class="seriesMg_tips">
          {{$t('system.table_NetLtNameTips')}}
        </div>
        <el-form-item :label="$t('system.table_isShows')" class="seriesMg_tips_f">
          <el-switch v-model="addMsg.isTOOP" :active-value="checkedValue" :inactive-value="defaultSelectValue">
          </el-switch>
        </el-form-item>
        <div class="seriesMg_tips">
          {{$t('system.table_isShowTips')}}
        </div>
      </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,
          isTOOP: -1,
          LtName: "",
          total: 0,
          currentPage: 1
        },
        addMsg: {
          LtID: 0,
          LtCode: "",
          LineID: 0,
          LtName: "",
          NetLtName: "",
          isSaleInNET: 0,
          isTOOP: 0,
          placeID: 0,
          RB_Branch_id: -1
        },
        //默认值
        defaultSelectValue: 0,
        //选中值
        checkedValue: 1,
        isTOOPOption: [{
            value: -1,
            label: this.$t('advmanager.v_all')
          },
          {
            value: 0,
            label: this.$t('MarketingActi.notShow')
          },
          {
            value: 1,
            label: this.$t('system.table_isShows')
          }
        ],
        lineList: [],
        destinationList: [],
        DataList: [],
        BranchGetList: [],
        countryList: [],
        noData: false,
        auditorList: [],

        outerVisible: false,
        deleteID: "",
        loading: true,
        dialogTitle: "",
        rules: {
          LineID: [{
            required: true,
            message: this.$t('op.qxzsuosxl'),
            trigger: "change"
          }],
          placeID: [{
            required: true,
            message: this.$t('op.qtxmddmc'),
            trigger: "change"
          }],
          LtCode: [{
              required: true,
              message: this.$t('objFill.qingtxdm'),
              trigger: "blur"
            },
            {
              pattern: this.$commonUtils.Regex.el_IsNumEn,
              message: this.$t('objFill.qingtxzqdm')
            }
          ],
          LtName: [{
            required: true,
            message: this.$t('objFill.qingtxtmmc'),
            trigger: "blur"
          }]
        }
      };
    },
    methods: {
      //获取现有线路列表
      getList() {
        this.loading = true;
        this.apipost(
          "team_post_GetPageList",
          this.msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.DataList = res.data.data.pageData;
              this.msg.total = res.data.data.count;
              if (this.msg.total > 0) {
                this.noData = false
              } else {
                this.noData = true
              }
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        );
      },
      //获取所有线路列表
      getLineList() {
        let msg = {
          IsShow: -1
        };
        this.apipost("line_post_GetAllList_V3", msg, res => {
          this.lineList = res.data.data;
        });
      },
      //获取目的地
      getDestinationList(type) {
        if (type == 1) {
          this.addMsg.placeID = "";
          this.destinationList = [];
        }
        let msg = {
          LineID: this.addMsg.LineID,
          IsShow: -1
        };
        this.apipost("place_post_GetList", msg, res => {
          this.destinationList = res.data.data;
        });
      },
      //获取公司列表(暂时注释)
      getBranchGetList() {
        let msg = {
          Status: "0",
          is_show: "",
          RB_Group_Id: ""
        };
        this.apipost(
          "admin_get_BranchGetList",
          msg,
          res => {
            this.BranchGetList = res.data.data;
          },
          err => {}
        );
      },
      deletelist(index) {
        var that = this;
        this.Confirm(that.$t('tips.shifoushanchu'), function () {
          that.deleteLine(index);
        });
      },
      addLine() {
        //添加
        this.apipost(
          "team_post_Set",
          this.addMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.Success(this.$t('tips.saveYes'));
              this.getList();
              this.outerVisible = false;
              this.initAddMsg();
            } else {
              this.Warning(this.$t('objFill.baocunshibai')+'!');
            }
          },
          err => {}
        );
      },
      //修改
      updateData(ID) {
        let msg = {
          ID: ID
        };
        this.apipost(
          "team_post_Get",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.addMsg = res.data.data;
              this.addMsg.placeID = Number(this.addMsg.placeID);
              this.getDestinationList(2);
            }
          },
          err => {}
        );
      },
      //删除
      deleteLine(index) {
        this.loading = true;
        let msg = {
          ID: this.DataList[index].LtID
        };
        this.apipost(
          "team_post_Remove",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.Success(this.$t('tips.shanchuchenggong'));
            }
            this.loading = false;
            this.getList();
          },
          err => {}
        );
      },
      //添加 提交创建、修改表单
      submitForm(addMsg) {
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.addLine();
          } else {
            return false;
          }
        });
      },
      //翻页功能按钮
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList(this.queryMsg);
      },
      //初始化创建、修改表单数据
      initAddMsg() {
        this.addMsg.LtID = 0;
        this.addMsg.LtCode = "";
        this.addMsg.LineID = 0;
        this.addMsg.LtName = "";
        this.addMsg.NetLtName = "";
        this.addMsg.isSaleInNET = 0;
        this.addMsg.isTOOP = 0;
        this.addMsg.placeID = 0;
      },
      //查询初始化页码
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.msg.currentPage = 1;
      },
      //弹出框关闭初始化弹框内表单
      closeChangeMachie(done) {
        done();
        this.resetForm("addMsg");
        this.initArrData();
      },
      //弹出框取消 初始化谈框内表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.initArrData();
        this.initAddMsg();
      },
      //弹窗用初始化数据
      initArrData() {
        this.destinationList = [];
      },
      goUrl(path, id) {
        this.$router.push({
          name: path,
          query: {
            "id": id
          }
        })
      }
    },

    mounted() {
      this.getList();
      this.getLineList();
      // this.getBranchGetList();
    }
  };

</script>