<template>
  <div>
    <el-card>
      <div class="filter">
        <el-button type="primary" icon="el-icon-circle-plus" @click="addModelBtn" v-permission="('auto:module:add')">新增</el-button>
      </div>
      <el-table :data="modelList" border style="width: 100%;margin-top:20px">
        <el-table-column type='index' width="50px">
          <template slot-scope="scope">
            <span>{{  (queryModuleInfo.pageNum -1 ) * queryModuleInfo.pageSize + scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="模块名称" width="150px"></el-table-column>
        <el-table-column prop="projectName" label="所属项目" width="150px"></el-table-column>
        <el-table-column prop="domain" label="域名" width="350px"></el-table-column>
        <el-table-column prop="description" label="描述" width="200px"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
        <el-table-column label="操作">
          <slot slot-scope="scope">
            <el-button type="warning" icon="el-icon-edit" @click="openEditDialog(scope.row)" v-permission="('auto:module:edit')">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delModelFrom(scope.row)" v-permission="('auto:module:del')">删除</el-button>
          </slot>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryModuleInfo.pageNum" :page-size="queryModuleInfo.pageSize" layout="total, prev, pager, next" :total="totalNum"></el-pagination>
    </el-card>
    <!-- 新增模块 -->
    <el-dialog title="新增模块" :visible.sync="DialogVisible" @close="closeAddDialog" width="30%">
      <el-form ref="addModelFormRef" :rules="rules" :model="addModelForm" label-width="90px">
        <el-form-item label="模块名称:" prop="name" style="width:400px">
          <el-input v-model="addModelForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所属项目:" prop="projectId">
          <el-select v-model="addModelForm.projectId" placeholder="请选择项目" clearable style="width:310px">
            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模块描述:" prop="description" style="width:400px">
          <el-input v-model="addModelForm.description"></el-input>
        </el-form-item>
        <el-form-item label="域 名:" prop="domain" style="width:400px">
          <el-input v-model="addModelForm.domain"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addModelFrom">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑模块 -->
    <el-dialog title="编辑模块" :visible.sync="DialogEditVisible" width="30%">
      <el-form ref="editModelFormRef" :rules="rules" :model="editModelForm" label-width="90px">
        <el-form-item label="模块名称:" prop="name" style="width:400px">
          <el-input v-model="editModelForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所属项目:" prop="projectId">
          <el-select v-model="editModelForm.projectId" placeholder="请选择项目" clearable style="width:310px">
            <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模块描述:" prop="description" style="width:400px">
          <el-input v-model="editModelForm.description"></el-input>
        </el-form-item>
        <el-form-item label="域 名:" prop="domain" style="width:400px">
          <el-input v-model="editModelForm.domain"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="editModelFrom">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getModulList,
  getProjectList,
  addModul,
  editModel,
  delModel
} from '@/api/getAotoInterface'
export default {
  data() {
    return {
      queryModuleInfo: {
        pageNum: 1,
        pageSize: 10
      },
      queryProjectInfo: {
        pageNum: 1,
        pageSize: 10
      },
      totalNum: 0,
      modelList: [],
      projectList: [],
      addModelForm: {
        name: '',
        projectId: '',
        description: '',
        domain: ''
      },
      editModelForm: {
        id: '',
        name: '',
        projectId: '',
        description: '',
        domain: ''
      },
      DialogVisible: false,
      DialogEditVisible: false,
      delModelParam: {
        moduleId: ''
      },
      // 验证
      rules: {
        name: [
          {
            required: true,
            message: '模块名称不能为空！',
            trigger: 'blur'
          }
        ],
        projectId: [
          {
            required: true,
            message: '模块名称不能为空！',
            trigger: 'blur'
          }
        ],
        description: [
          {
            required: true,
            message: '模块描述不能为空！',
            trigger: 'blur'
          }
        ],
        domain: [
          {
            required: true,
            message: '域名不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.getProjectList()
    this.getModelList()
  },
  methods: {
    // 获取模块列表
    getModelList() {
      getModulList(this.queryModuleInfo).then((resp) => {
        this.modelList = resp.data.data.list
        this.totalNum = resp.data.data.total
      })
    },
    // 获取项目列表
    getProjectList() {
      getProjectList(this.queryProjectInfo).then((resp) => {
        this.projectList = resp.data.data.list
      })
    },
    // 分页展示
    handleSizeChange(newSize) {
      this.queryModuleInfo.pageSize = newSize
      this.getModelList()
    },
    // 分页展示
    handleCurrentChange(newPage) {
      this.queryModuleInfo.pageNum = newPage
      this.getModelList()
    },
    // 新增按钮
    addModelBtn() {
      this.DialogVisible = true
      this.getProjectList()
    },

    // 添加模块按钮
    addModelFrom() {
      this.$refs.addModelFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          // 添加模块
          addModul(this.addModelForm)
            .then((resp) => {
              console.log('保存信息', this.modelForm)
              if (resp.data.data === true) {
                this.DialogVisible = false
                this.$message.success('新增成功！')
                this.modelList.name = ''
                this.modelList.projectName = ''
                this.modelList.description = ''
                this.modelList.domain = ''
                this.getModelList()
              } else {
                this.$message.error(resp.data.msg)
              }
            })
            .catch((error) => {
              this.$message({ type: 'error', message: error })
            })
        }
      })
    },
    // 编辑保存按钮
    editModelFrom() {
      this.$refs.editModelFormRef.validate((valid) => {
        if (!valid) {
          return false
        } else {
          editModel(this.editModelForm).then((resp) => {
            if (resp.data.data === true) {
              this.DialogEditVisible = false
              this.$message.success('修改成功！')
              this.getModelList()
            } else {
              this.$message.error(resp.data.msg)
            }
          })
        }
      })
    },
    // 编辑模块
    openEditDialog(row) {
      this.DialogEditVisible = true
      this.editModelForm.id = row.id
      this.editModelForm.name = row.name
      this.editModelForm.projectId = row.projectId
      this.editModelForm.description = row.description
      this.editModelForm.domain = row.domain
    },
    // 对话框方法
    openMessage(message, confirmText, doit) {
      this.$messageBox
        .confirm(message, '确定', {
          cancelButtonText: '取消',
          confirmButtonText: confirmText,
          type: 'warning'
        })
        .then(() => {
          doit()
        })
        .catch(() => {})
    },
    closeAddDialog() {
      this.$refs.addModelFormRef.resetFields()
    },
    // 删除模块
    delModelFrom(row) {
      this.delModelParam.moduleId = row.id
      this.openMessage('您确定要删除吗？', '删除', () => {
        delModel(this.delModelParam)
          .then((resp) => {
            if (resp.data.data === true) {
              this.$message.success('删除成功！')
              this.getModelList()
            } else if (resp.data.data === false) {
              this.$message.error(resp.data.msg)
            }
          })
          .catch((error) => {
            this.$message({ type: 'error', message: error })
          })
      })
    }
  }
}
</script>
