<template>
  <div class="execution">
    <basic-container>
      <div style="margin-bottom: .5%">
        <el-button-group style="margin-left: 1%">
          <el-button type="primary" icon="el-icon-search" :loading="tableLoading" @click="getList()">刷新</el-button>
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd()" :loading="tableLoading">添加</el-button>
        </el-button-group>
      </div>

      <el-table
        :data="tableData"
        :header-cell-style="{background:'#ECF1FE'}"
        border
        style="width: 100%">
        <el-table-column align="name" prop="url" label="通道名称"></el-table-column>
        <el-table-column align="ip" prop="url" label="ip"></el-table-column>
        <el-table-column align="port" prop="url" label="端口"></el-table-column>
        <el-table-column align="username" prop="url" label="用户"></el-table-column>
        <el-table-column align="password" prop="url" label="密码"></el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              :loading="tableLoading"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              :loading="tableLoading"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="this.page.pageSize"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="this.page.total">
      </el-pagination>

      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        :append-to-body="true"
        :close-on-click-modal="false"
        width="30%"
        :before-close="handleClose">
        <el-form ref="elform" :model="form" :rules="rules" label-width="80px">
          <el-form-item prop="name" label="通道名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item prop="ip" label="ip">
            <el-input v-model="form.ip"></el-input>
          </el-form-item>
          <el-form-item prop="port" label="端口">
            <el-input v-model="form.port"></el-input>
          </el-form-item>
          <el-form-item prop="username" label="用户">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item prop="password" label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align: center">
          <el-button type="primary" @click="handleUpdate">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
export default {
  name: 'ftpChannel',
  data() {
    return {
      form: {},
      searchForm: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      stationCode:'',
      dialogVisible: false,
      dialogType: '',//新增还是编辑
      title:'',//弹框的文本
      rules: {
        // stationCode: {required: true, message: '请选择场站', trigger: 'blur'},
        // url: {required: true, message: '请输入路径', trigger: 'blur'},
      }
    }
  },
  computed: {

  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      var page = this.page
      // if (this.searchForm.stationCode != '') {
      //   this.form.stationCode =  this.searchForm.stationCode
      // }
      // this.form.cId = this.channelId
      // this.searchForm = this.form
      // console.log(this.form)
      if(this.stationCode !== null && this.stationCode !== undefined && this.stationCode !== ''){
        this.searchForm ={stationCode:this.stationCode,delFlag:0}
      }else {
        this.searchForm = {delFlag:0}
      }
      this.tableLoading = true
      this.$axios.get("/ftpChannel", Object.assign({
        current: page.currentPage,
        size: page.pageSize
      }, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.currentPage = 1
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList();
    },
    handleAdd() {
      this.form = {}
      this.dialogType = "add"
      this.title = '新增&保存'
      this.form.cid = this.channelId
      this.dialogVisible = true
    },
    // 编辑按钮
    handleEdit(index, row) {
      this.form = row
      this.dialogType = "edit"
      this.title = '编辑&保存'
      this.dialogVisible = true

    },
    // 删除按钮
    handleDelete(index, row) {
      this.rowDel(row)
    },

    rowDel: function (row, index) {
      this.$confirm('是否确认删除ID为' + row.id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return this.$axios.delete("/ftpChannel/"+row.id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },
    handleUpdate: function () {
      if (this.dialogType === 'add') {
        // row.cid = this.channelId
        // row.stationCode = this.stationCode
        this.$axios.post("/ftpChannel",this.form).then(data => {
          this.$message.success('添加成功')
          this.getList()
          this.dialogVisible = false
        }).catch((e) => {
          console.log('添加失败：' + e)
        });
      } else {
        this.$axios.put("/ftpChannel", this.form).then(data => {
          this.$message.success('修改成功')
          this.getList()
          this.dialogVisible = false
        }).catch(() => {
          console.log('修改失败：' + e)
        });
      }

    },
    // 弹框的关闭前的回调
    handleClose(done) {
      this.form = {}
      this.$nextTick(() => {
        this.$refs.elform.resetFields();
      })
      done()
    },
    handleCancel() {
      this.$nextTick(() => {
        this.$refs.elform.resetFields();
      })
      this.form = {}
      this.dialogVisible = false
    },

  }
}
</script>
