<template>
  <div class="execution app-container">
    <basic-container>
      <div class="dark-el-button" style="margin-bottom: .5%">
        <!--        <el-button-group style="margin-left: 1%">-->
        <el-button type="primary" size="small" icon="el-icon-search" :loading="tableLoading" @click="getList()">刷新
        </el-button>
        <el-button type="primary" size="small" 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="center" prop="fileType" :formatter="formatFileType" label="解析文件类型"></el-table-column>
        <el-table-column align="center" prop="fileName" 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">
        <div class="dark-el-dialog">
          <el-form ref="elform" :model="form" :rules="rules" label-width="120px">
            <el-form-item prop="fileType" label="解析文件类型">
               <el-select popper-class="cpp-popper" v-model="form.fileType" clearable>
                <el-option
                  v-for="item in this.fileTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item prop="fileName" label="文件名识别标识">
              <el-input v-model="form.fileName"></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>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
export default {
  name: 'parsingType',
  data() {
    return {
      fileTypes: [],
      form: {},
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      tableLoading: false,
      dialogVisible: false,
      dialogType: '',//新增还是编辑
      title: '',//弹框的文本
      rules: {
        // stationCode: {required: true, message: '请选择场站', trigger: 'blur'},
        // url: {required: true, message: '请输入路径', trigger: 'blur'},
      }
    }
  },
  computed: {},
  created() {
    this.init()
  },
  methods: {
    init() {
      this.$axios.get("/parsingInfo/getFileTypes").then(res => {
        this.fileTypes = res.data
      })
      this.getList()
    },
    getList() {
      var page = this.page
      this.tableLoading = true
      this.$axios.get("/parsingType/page", {
        params: {
          currentPage: page.currentPage,
          pageSize: page.pageSize
        }
      }).then(response => {
        this.tableData = response.data.records
        this.page.total = response.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("/parsingType/" + 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("/parsingType", this.form).then(data => {
          this.$message.success('添加成功')
          this.getList()
          this.dialogVisible = false
        }).catch((e) => {
          console.log('添加失败：' + e)
        });
      } else {
        this.$axios.put("/parsingType", 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
    },
    formatFileType(row, column) {
      let belongTo = '未知'
      for (let i = 0; i < this.fileTypes.length; i++) {
        if (row.fileType === this.fileTypes[i].value) {
          belongTo = this.fileTypes[i].label
        }
      }
      return belongTo
    },

  }
}
</script>
