<template>
  <el-container>
    <el-main>
      <el-card class="box-card">
        <p>添加接口</p>
        <el-form ref="authorityForm" style="margin-top:10px" :inline="true" :model="authority" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="接口名称" prop="name">
            <el-input v-model="authority.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="接口地址" prop="apiUrl">
            <el-input v-model="authority.apiUrl" autocomplete="off" />
          </el-form-item>

          <el-form-item label="接口类型" prop="method">
            <el-select v-model="authority.method">
              <el-option label="全部" value="ALL" />
              <el-option label="查看" value="GET" />
              <el-option label="添加" value="PUT" />
              <el-option label="修改" value="POST" />
              <el-option label="删除" value="DELETE" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="description">
            <el-input v-model="authority.description" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addAuthority('authorityForm')">添加</el-button>
            <el-button @click="resetForm('authorityForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <template>
        <el-card style="margin-top:10px" class="box-card">
          <p>接口列表</p>
          <el-table
            :data="authorities"
            style="width: 100%"
          >
            <el-table-column
              label="ID"
              width="80"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="名称"
              width="180"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="接口地址"
              width="280"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.apiUrl }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="接口方法"
              width="180"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.method }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
              width="280"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.description }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
            title="修改接口"
            :visible.sync="dialogVisible"
            width="70%"
            :close-on-click-modal="false"
            :show-close="false"
          >
            <el-container>
              <el-main>
                <el-form ref="updateAuthForm" style="margin-top:10px" :model="editAuth" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="名称" prop="apiUrl">
                    <el-input v-model="editAuth.name" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="接口地址" prop="username">
                    <el-input v-model="editAuth.apiUrl" />
                  </el-form-item>

                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="editAuth.description" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="接口类型" prop="method">
                    <el-select v-model="editAuth.method">
                      <el-option label="全部" value="ALL" />
                      <el-option label="查看" value="GET" />
                      <el-option label="添加" value="PUT" />
                      <el-option label="修改" value="POST" />
                      <el-option label="删除" value="DELETE" />
                    </el-select>
                  </el-form-item>

                  <el-form-item>
                    <el-button type="primary" @click="updateAuth('updateAuthForm')">确认</el-button>
                    <el-button @click="cancel()">取消</el-button>
                  </el-form-item>
                </el-form>
              </el-main>
            </el-container>
          </el-dialog>
        </el-card>
      </template>

    </el-main>
  </el-container>

</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      authority: {
        apiUrl: '',
        description: '',
        method: 'ALL',
        name: ''
      },
      editAuth: {
        apiUrl: '',
        description: '',
        method: 'ALL',
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入接口名称', trigger: 'blur' },
          { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
        ],
        apiUrl: [
          { required: true, message: '请输入接口名称', trigger: 'blur' },
          { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    authorities() {
      return this.$store.getters.allAuthorities
    }
  },
  created() {
    console.log('created')
    this.$store.dispatch('authority/getAllAuthorities')
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
      this.editAuth = row
      this.dialogVisible = true
    },
    cancel() {
      // this.$store.dispatch('role/getAllRoles')
    //  this.$store.dispatch('user/getAllUsers')
      this.dialogVisible = false
    },

    updateAuth(formName) {
      console.log('start to update auth-1', this.editAuth)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('start to update auth0', this.editUser)

          this.$store.dispatch('authority/updateAuthority', this.editAuth).then(res => {
            if (res.data.success) {
              this.$message({ message: '修改接口信息成功', type: 'success' })
              this.editAuth = res.data.data
              this.$store.dispatch('authority/getAllAuthorities')
            } else {
              console.log('修改接口信息失败!', res)
              this.$message({ message: '修改接口信息失败!' + res.data.info, type: 'error' })
            }
          }
          )
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    handleDelete(index, row) {
      console.log(index, row)
      this.$confirm('此操作将永久删除该接口, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('authority/deleteAuthority', row).then(res => {
          if (res.data.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.$store.dispatch('authority/getAllAuthorities')
          } else {
            this.$message({ message: '删除失败!' + res.data.info, type: 'error' })
          }
        }).catch(_error => {
          // eslint-disable-next-line no-undef
          this.$message({ message: '删除失败!' + res.data.info, type: 'error' })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    addAuthority(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('start to add authority0', this.authority)
          this.$store.dispatch('authority/addAuthority', this.authority).then(res => {
            if (res.data.success) {
              this.$message({ message: '添加权限成功', type: 'success' })
              this.$store.dispatch('authority/getAllAuthorities')
            } else {
              console.log('添加权限失败!', res)
              this.$message({ message: '添加权限失败!' + res.data.info, type: 'error' })
            }
          }
          )
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
