<style>
.SM_setBtm{width:100%;height:150px;position: fixed;bottom:0;background-color: #fff;}
.btmTitle{padding-left:20px;border-left:3px solid #CD2929;margin:20px;font-size: 14px;}
</style>
<template>
  <div class="flexOne seriesMG">
    <div class="query-box">
      <ul>
        <li>
             <input type="button" class="normalBtn" :value="$t('fnc.tianjia')" @click="addSeries"/>
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>{{$t('active.ad_xlmc')}}</th>
        <th>{{$t('objFill.xiliebh')}}</th>
        <th>{{$t('objFill.kaishirs')}}</th>
        <th>{{$t('objFill.jieshurs')}}</th>
        <th>{{$t('sm.youhuijine')}}</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="(item,index) in DataList" :key="index">
        <td>{{item.LtName}}</td>
        <td>{{item.LtId}}</td>
        <td>{{item.StartNum}}</td>
        <td>{{item.EndNum}}</td>
        <td>{{item.DiscountAmount}}</td>
        <td>
            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
              <el-button type="primary" @click="getQueryMsg(item.ID)" icon="el-icon-edit" circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="$t('system.table_delete')" placement="top-start">
              <el-button type="danger" @click="delSeries(item.ID)" icon="el-icon-delete" circle></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>
    <div class="SM_setBtm" v-if="isShow">
        <div class="btmTitle">{{comTitle}}</div>
        <div>
            <el-form :model="queryMsg" :rules="rules" ref="queryMsg" label-width="100px">
                <el-col :span="4">
                    <el-form-item :label="$t('admin.admin_personNumber')" prop="StartNum">
                        <el-input v-model="queryMsg.StartNum" class="w80" maxlength="20" @keyup.native="checkInteger(queryMsg,'StartNum')"></el-input> -
                        <el-input v-model="queryMsg.EndNum" class="w80" maxlength="20" @keyup.native="checkInteger(queryMsg,'EndNum')" @blur="checkIsLetter(queryMsg)"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item :label="$t('sm.youhuijine')" prop="DiscountAmount">
                        <el-input v-model="queryMsg.DiscountAmount" class="w150" maxlength="20" @keyup.native="checkPrice(queryMsg,'DiscountAmount')"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <input type="button" class="normalBtn" @click="submitForm('queryMsg')" :value="$t('pub.saveBtn')"/>
                    <input type="button" class="normalBtn" @click="isShow=false" :value="$t('pub.cancelBtn')"/>
                </el-col>
            </el-form>
        </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      LtId:'',
      total: 0,
      currentPage: 1,
      msg:{
        pageIndex: 1,
        pageSize: 15,
        LtId:''
      },
      queryMsg:{
          ID:0,
          LtId:0,
          StartNum:0,
          EndNum:0,
          DiscountAmount:0,
      },
      //是否显示添加
      isShow:false,
      DataList: [],
      noData: false,
      loading:false,
      rules: {
        StartNum: [
          {
            required: true,
            message: this.$t('objFill.qingtxrs'),
            trigger: "change"
          }
        ],
        DiscountAmount: [
          {
            required: true,
            message: this.$t('objFill.qingsryhje'),
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    //获取现有线路列表
    getList() {
      this.loading = true;
      this.msg.LtId = this.LtId
      this.apipost(
        "team_get_GetDiscountPageList",this.msg,res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data.pageData;
            this.total = res.data.data.count;
            if(this.total>0){
              this.noData=false
            }else{
              this.noData=true
            }
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    handleCurrentChange(val) {
        //翻页功能按钮
        this.msg.pageIndex = val;
        this.getList();
    },
    getQueryMsg(ID){
        let msg = {
            ID:ID
        }
        this.apipost("team_get_GetDiscount",msg,res => {
            this.queryMsg = res.data.data;
            this.isShow=true;
            this.comTitle = this.$t('objFill.xiugaixinxi')
        })
    },
    submitForm(addMsg) {
        //提交创建、修改表单
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.saveData();
          } else {
            return false;
          }
        });
    },
    resetForm(formName) {
        this.$refs[formName].clearValidate();
    },
    saveData(){
        this.apipost("team_post_SetDiscount",this.queryMsg,res => {
            if(res.data.resultCode==1){
                this.Success(this.$t('tips.baocunchenggong'));
                this.getList();
                this.isShow=false;
            }else{
                this.Error(this.$t('objFill.baocunshibai'));
            }
        })
    },
    //添加
    addSeries(){
        this.isShow=true;
        this.queryMsg.ID = 0;
        this.queryMsg.StartNum='';
        this.queryMsg.EndNum = '';
        this.queryMsg.DiscountAmount='';
        this.queryMsg.LtId = this.LtId;
        this.comTitle=this.$t('fnc.tianjia');
    },
    //删除系列
    delSeries(ID) {
      var that = this;
      this.Confirm(that.$t('tips.shifoushanchu'), function() {
        var msg = {
          ID: ID
        };
        that.apipost(
          "team_post_RemoveDiscount",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              that.Success(this.$t('tips.shanchuchenggong'));
              that.getList();
            }
          },
          null
        );
      });
    },
    //验证是否小于
    checkIsLetter(queryMsg){
        var StartNum = parseInt(queryMsg.StartNum);
        var EndNum = parseInt(queryMsg.EndNum);
        if(EndNum<StartNum){
            queryMsg.EndNum=''
        }
    }
  },
  mounted() {
    this.LtId = this.$route.query.id;
    this.getList();
  }
};
</script>