<template>
  <div v-loading="loading">
    <div class="heior_box">
      <el-button size="small" type="primary" icon="el-icon-edit" @click="add">添加</el-button>
      <!-- <el-button size="small" type="primary" icon="el-icon-upload" @click="importExcel">导入</el-button>
      <a href="http://www.ipkd.com/tpl.xlsx"><el-button size="small" type="primary" icon="el-icon-download" @click="importExcel">下载模板</el-button></a>       -->
      <div class="search-box">   
        <el-select v-model="searchModel.productId" placeholder="选择产品" clearable size="small">
          <el-option v-for="item in products" :key="item.Name" :label="item.Name" :value="item.Id"></el-option>
        </el-select>     
        <el-input v-model="searchModel.keyWord" placeholder="请输入城市或者运营商" clearable size="small">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      row-key="Id"
      border
      size="medium"
      :data="retData.Data"
      :height="$getHeight(100)"   
       @filter-change="filterHandler" 
    >   
      <el-table-column prop="ProductName" label="产品"></el-table-column>
        <el-table-column prop="Province" label="省份"></el-table-column>
      <el-table-column prop="City" label="城市"></el-table-column>
      <el-table-column prop="Name" label="运营商"></el-table-column>
      <el-table-column prop="ServerUrl" label="服务器域名"></el-table-column>
      <el-table-column prop="Status" label="运行状态"></el-table-column>
      <el-table-column prop="LineType" label="支持方式"></el-table-column>
      <el-table-column prop="BandWidth" label="实时带宽"></el-table-column>
      <el-table-column prop="IpRemark" label="Ip量"></el-table-column>     
       <el-table-column prop="Sort" label="排序"></el-table-column>   
      <el-table-column label="操作" width="140px">
        <template slot-scope="scope">
          <span class="handel cursor edit" @click="edit(scope.row)">编辑</span>
          <span class="handel cursor edit" @click="del(scope.row)">删除</span>         
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        v-if="retData.Data.length>0"
        @current-change="get"
        :page-size="50"
        :current-page.sync="searchModel.PageIndex"
        layout="total,prev, pager, next"
        :total="retData.TotalCount"
      ></el-pagination>
    </div>  
    <el-dialog title="线路维护" :visible.sync="showDialog" width="500px">
      <el-form :model="routeModel" :rules="rules" ref="inputForm" label-width="80px">
        <el-form-item prop="ProductId" label="产品">         
          <el-select size="small" v-model="routeModel.ProductId">
            <el-option v-for="(item,index) in products" :key="index" :label="item.Name" :value="item.Id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="Province" label="省份">
          <el-input v-model="routeModel.Province" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="City" label="城市">
          <el-input v-model="routeModel.City" size="small"></el-input>
        </el-form-item>
         <el-form-item prop="Name" label="运营商">
          <el-input v-model="routeModel.Name" size="small"></el-input>
        </el-form-item>
        <el-form-item prop="ServerUrl" label="服务器域名">
          <el-input v-model="routeModel.ServerUrl"  size="small"></el-input>
        </el-form-item>
        <el-form-item prop="Status" label="运行状态">
          <el-radio-group v-model="routeModel.Status"  size="small">
            <el-radio label="正常">正常</el-radio>
            <el-radio label="离线">离线</el-radio>
          </el-radio-group>        
        </el-form-item>
        <el-form-item prop="Sort" label="排序">
          <el-input v-model="routeModel.Sort" size="small" number ></el-input>
        </el-form-item>
        <el-form-item prop="LineType" label="支持方式">
          <el-input v-model="routeModel.LineType" size="small"></el-input>
        </el-form-item>
          <el-form-item prop="BandWidth" label="带宽">
          <el-input v-model="routeModel.BandWidth" size="small"></el-input>
        </el-form-item>
          <el-form-item prop="IpRemark" label="Ip">
          <el-input v-model="routeModel.IpRemark" size="small"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('inputForm')">取 消</el-button>
        <el-button type="primary" @click="save('inputForm')">确定</el-button>
      </span>
    </el-dialog> 
  </div>
</template>
<script>
export default {
  name: "treeTable",
  components: {
    
  },
  data() {
    return {
      loading: false,
      showDialog:false,
      optype:1,    
      retData: { TotalCount: 0, Data: [] },     
      searchModel: {       
        PageIndex: 1,
        keyWord: "",
        productId:"",
      },
      products:[],
      routeModel: {
        LineType:'L.P.T',
        Status:'正常',
      },   
      types: [       
      ],
      rules: {
        ProductId: [this.$vaild.required("产品")],
        Province: [this.$vaild.required("省份")],
        City: [this.$vaild.required("城市")],
         ServerUrl: [this.$vaild.required("服务器域名")],
        Name: [this.$vaild.required("运营商")]
      },
    }
  },
  created() {
    this.$store.commit("setCurrentNav", "产品管理>>线路管理");
    this.getProducts()
    this.get();
  },
  methods: {
    search(){
      this.searchModel.PageIndex=1;
      this.get();
    },
    getProducts(){
         this.$api
        .get("course/v1/product/page", this.searchModel)
        .then(res => {
          this.products= res.Data;
          //this.types=this.products.map(m=>{  return {text:m.Name,value:m.Id} })
        });
    },
    get() {
      this.$api
        .get("course/v1/productroute/page", this.searchModel)
        .then(res => {
          this.retData = res;
        });
    },
    del(item) {
      var that = this;
      this.$confirm("确定删除？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(_ => {
        this.$api
          .post("course/v1/productroute/Delete?id=" + item.Id)
          .then(res => {
            that.get();
          });
      });
    },
   add() {
      this.showDialog = true;
      this.optype = 1;
    },
    edit(item) {
      this.showDialog = true;
      this.optype = 2;
      this.routeModel = clone(item);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();    
      this.showDialog = false;    
    },
    filterHandler(filters) {
      console.log(filters)
      var values=Object.values(filters);      
      this.searchModel.productIds=values.join(',')
      this.searchModel.PageIndex=1;
      this.get(); 
    },
    save(formName) {
      var that=this;       
      this.$refs[formName].validate(valid => {
        if (!valid) return;
       var [name]=that.products.filter(m=>m.Id==that.routeModel.ProductId).map(m=>m.Name);
        that.routeModel.ProductName=name
        if (that.optype == 1) {
          that.$api.post("course/v1/productroute/post", that.routeModel).then(res => {
            that.resetForm('inputForm');
            that.get();
          });
        } else {
          that.$api.post("course/v1/productroute/put", that.routeModel).then(res => {
            that.resetForm('inputForm');
            that.get();
          });
        }
      })
    },
    importExcel(callback) {   
      this.$api.upload("course/v1/productroute/Import",{accept:"*/*"}).then(res => {
         this.get()
      })
    } 
  }
};
</script>
<style scoped>
</style>
