<template>
  <div>
    <div >
      <el-input v-model="queryModel.name" placeholder="名称" clearable style="width: 200px;" class="filter-item" />
      <el-select v-model="queryModel.module" placeholder="模块" clearable style="width: 200px" class="filter-item">
        <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchIndex">搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus"
        v-permission="('build:data:add')" @click="addData">新增
      </el-button>
    </div>
    <el-table :data="dataList" border style="width: 100%;margin-top:20px">
      <el-table-column label="#" prop="id" align="center" width="50px">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" align="center" />
      <el-table-column prop="url" label="地址" align="center" width="350px" />
      <el-table-column prop="moduleName" label="模块" align="center"  />
      <el-table-column prop="updateTime" label="创建时间" align="center"  />
      <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" v-permission="('build:data:update')" @click="editData(scope.row)">编辑
          </el-button>
          <el-button size="mini" type="danger" v-permission="('build:data:delete')" @click="delData(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增数据 -->
    <el-dialog :title="dialogName" :visible.sync="dialogFormVisible" @closed="handleClose" width="50%">
      <el-form ref="dataFormRef" :rules="rules" :model="dataForm" label-width="90px">
        <el-form-item label="名称" prop="name" style="width:500px">
          <el-input v-model="dataForm.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="地址" prop="url" style="width:500px">
          <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="dataForm.url" type="textarea" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="模块" prop="module">
          <el-select v-model="dataForm.module" placeholder="选择模块" style="width:410px" clearable class="filter-item">
            <el-option v-for="item in moduleList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveData()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDataList,
  getDataModules,
  addData,
  editData,
  delData
} from '@/api/getConfluence'
export default {
  data() {
    return {
      queryModel: {
        name: '',
        module: ''
      },
      dataList: [],
      moduleList: [],
      dialogName: '',
      dialogFormVisible: false,
      dataForm: {},
      rules: {
        name: [
          {
            required: true,
            message: '名称不能为空！',
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: true,
            message: '地址不能为空！',
            trigger: 'blur'
          }
        ],
        module: [
          {
            required: true,
            message: '模块不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getDataList()
    this.getDataModules()
  },
  methods: {
    getDataList() {
      getDataList(this.queryModel).then((resp) => {
        this.dataList = resp.data.data
      })
    },
    getDataModules() {
      getDataModules().then((resp) => {
        this.moduleList = resp.data.data
      })
    },
    searchIndex() {
      this.getDataList()
    },
    // 添加按钮
    addData() {
      this.dialogName = '新增数据'
      this.dataForm = {}
      this.dialogFormVisible = true
    },
    // 编辑数据
    editData(row) {
      console.log(row)
      this.dialogName = '更新数据'
      this.dataForm = Object.assign({}, row)
      this.dialogFormVisible = true
    },
    // 对话框方法
    openMessage(message, confirmText, doit) {
      this.$messageBox
        .confirm(message, '确定', {
          cancelButtonText: '取消',
          confirmButtonText: confirmText,
          type: 'warning'
        })
        .then(() => {
          doit()
        })
        .catch(() => {})
    },
    // 删除数据
    delData(row) {
      this.openMessage('您确定要删除吗？', '删除', () => {
        delData(row).then((resp) => {
          if (resp.data.code === '0000') {
            this.getDataList()
            this.$message.success('数据删除成功！')
          } else {
            this.$message.error('数据删除失败！')
          }
        })
      })
    },
    saveData() {
      this.$refs.dataFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          if (this.dataForm.id) {
            editData(this.dataForm).then((resp) => {
              if (resp.data.code === '0000') {
                this.dialogFormVisible = false
                this.getDataList()
                this.$message.success('更新数据成功！')
              } else {
                this.$message.error('更新数据失败！')
              }
            })
          } else {
            addData(this.dataForm).then((resp) => {
              console.log('ll', resp)
              if (resp.data.code === '0000') {
                this.dialogFormVisible = false
                this.getDataList()
                this.$message.success('新增数据成功！')
              } else {
                return this.$message.error('新增数据失败！')
              }
            })
          }
        }
      })
    },
    handleClose() {}
  }
}
</script>
<style lang="less" scoped>
.filter {
  margin-bottom: 20px;
}
</style>
