<template>
  <div class="app-container">
    <div style="margin-bottom:10px">
      <el-button type="success" @click="addBtn">新增</el-button>
    </div>
    <!--搜索-->
    <el-form ref="form" class="mt_15" inline size="small">
      <el-form-item label="应用名称">
        <el-input v-model.trim="searchParm.name" clearable placeholder="应用名称" />
      </el-form-item>
      <el-form-item label="应用id">
        <el-input v-model.trim="searchParm.robotUuid" clearable placeholder="应用id" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="goSearch">搜索</el-button>
        <el-button type="warning" @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <!--表格渲染-->
    <el-table
      ref="table"
      border
      size="small"
      :data="list"
      :header-cell-style="{textAlign:'center'}"
      :cell-style="{textAlign:'center'}"
    >
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="应用名称" prop="name" />
      <el-table-column label="应用id" prop="robotUuid" />
      <el-table-column label="任务名称" prop="taskName" />
      <el-table-column label="方法名称" prop="methodName" />
      <el-table-column label="accessKeyId" prop="accessKeyId" />
      <el-table-column label="accessKeySecret" prop="accessKeySecret" />
      <el-table-column label="备注" prop="remark" />
      <el-table-column label="创建时间" prop="createdAt" />
      <el-table-column label="修改时间" prop="updatedAt" />
      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <el-button type="info" @click="getBtnById(scope.row.id)">查看</el-button>
          <el-button type="warning" @click="editById(scope.row)">修改</el-button>
          <el-button type="danger" @click="delById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="mt_15">
      <el-pagination
        :current-page="searchParm.page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="searchParm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!--新增弹窗-->
    <el-dialog :visible.sync="dialogAddVisible" :title="dialogAddTitle" center width="45%">
      <div class="dialog-content">
        <el-form ref="addParm" size="small" :model="addParm" :rules="rules" label-width="150px">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model.trim="addParm.name" clearable />
          </el-form-item>
          <el-form-item label="应用ID" prop="robotUuid">
            <el-input v-model.trim="addParm.robotUuid" clearable />
          </el-form-item>
          <el-form-item label="任务名称" prop="taskName">
            <el-select v-model.trim="addParm.taskName" placeholder="请选择">
              <el-option
                v-for="item in taskList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="accessKeyId" prop="accessKeyId">
            <el-input v-model.trim="addParm.accessKeyId" clearable />
          </el-form-item>
          <el-form-item label="accessKeySecret" prop="accessKeySecret">
            <el-input v-model.trim="addParm.accessKeySecret" clearable />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model.trim="addParm.remark" clearable />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button type="info" @click="sureAddCancle('addParm')">取消</el-button>
        <el-button type="primary" @click="sureAdd('addParm')">确认</el-button>
      </span>
    </el-dialog>

    <!--修改弹窗-->
    <el-dialog :visible.sync="dialogEditVisible" :title="dialogEditTitle" center width="45%">
      <div class="dialog-content">
        <el-form ref="editParm" size="small" :model="editParm" :rules="rules" label-width="150px">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model.trim="editParm.name" clearable />
          </el-form-item>
          <el-form-item label="应用ID" prop="robotUuid">
            <el-input v-model.trim="editParm.robotUuid" clearable />
          </el-form-item>
          <el-form-item label="任务名称" prop="taskName">
            <el-select v-model.trim="editParm.taskName" placeholder="请选择">
              <el-option
                v-for="item in taskList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="accessKeyId" prop="accessKeyId">
            <el-input v-model.trim="editParm.accessKeyId" clearable />
          </el-form-item>
          <el-form-item label="accessKeySecret" prop="accessKeySecret">
            <el-input v-model.trim="editParm.accessKeySecret" clearable />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model.trim="editParm.remark" clearable />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button type="info" @click="sureEditCancle('editParm')">取消</el-button>
        <el-button type="primary" @click="sureEdit('editParm')">确认</el-button>
      </span>
    </el-dialog>

    <!--详情弹窗-->
    <el-dialog :visible.sync="dialogDetailVisible" :title="dialogDetailTitle" center width="45%">
      <div class="dialog-content">
        <el-form ref="form" size="small" label-width="130px">
          <el-form-item label="应用名称" prop="name">
            <el-input v-model.trim="detailParm.name" :disabled="true" />
          </el-form-item>
          <el-form-item label="应用ID" prop="robotUuid">
            <el-input v-model.trim="detailParm.robotUuid" :disabled="true" />
          </el-form-item>
          <el-form-item label="任务名称" prop="taskName">
            <el-input v-model.trim="detailParm.taskName" :disabled="true" />
          </el-form-item>
          <el-form-item label="方法名称" prop="methodName">
            <el-input v-model.trim="detailParm.methodName" :disabled="true" />
          </el-form-item>
          <el-form-item label="accessKeyId" prop="accessKeyId">
            <el-input v-model.trim="detailParm.accessKeyId" :disabled="true" />
          </el-form-item>
          <el-form-item label="accessKeySecret" prop="accessKeySecret">
            <el-input v-model.trim="detailParm.accessKeySecret" :disabled="true" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model.trim="detailParm.remark" :disabled="true" />
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getList, add, delById, getById, editById } from '@/api/rpa/apply'
export default {
  //	数据
  data() {
    return {
      taskList: [
        {
          id: 1,
          name: 'demoTask'
        },
        {
          id: 2,
          name: 'clickFarmTask'
        }, {
        	id: 3,
        	name: 'clickFarmSuppleMentTask'
        }
      ],
      searchParm: {
        page: 1,
        pageSize: 10,
        sort: 'created_at',
        order: 'desc',
        name: null,
        robotUuid: null,
        remark: null
      },
      total: 0,
      list: [],
      dialogAddVisible: false,
      dialogAddTitle: '新增',
      dialogDetailVisible: false,
      dialogDetailTitle: '详情',
      dialogEditVisible: false,
      dialogEditTitle: '修改',
      dialogImportVisible: false,
      dialogImportTitle: '导入',
      addParm: {
        id: null,
        name: null,
        robotUuid: null,
        taskName: null,
        methodName: null,
        accessKeyId: null,
        accessKeySecret: null,
        remark: null
      },
      detailParm: {
        id: null,
        name: null,
        robotUuid: null,
        taskName: null,
        methodName: null,
        accessKeyId: null,
        accessKeySecret: null,
        remark: null
      },
      editParm: {
        id: null,
        name: null,
        robotUuid: null,
        taskName: null,
        methodName: null,
        accessKeyId: null,
        accessKeySecret: null,
        remark: null
      },
      rules: {
        name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
        robotUuid: [
          { required: true, message: '请输入应用id', trigger: 'blur' }
        ],
        taskName: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }
        ],
        methodName: [
          { required: true, message: '请输入方法名称', trigger: 'blur' }
        ],
        accessKeyId: [
          { required: true, message: '请输入accessKeyId', trigger: 'blur' }
        ],
        accessKeySecret: [
          { required: true, message: '请输入accessKeySecret', trigger: 'blur' }
        ],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      }
    }
  },
  // 调用
  created() {
    this.goSearch()
  },
  // 方法
  methods: {
    // 重置
    resetForm() {
      this.searchParm.name = null
      this.searchParm.robotUuid = null
      this.searchParm.remark = null
      this.goSearch()
    },
    //	查询
    goSearch() {
      this.searchParm.page = 1
      this.getDataList()
    },
    // 新增
    addBtn() {
      this.addParm = {
        id: null,
        name: null,
        robotUuid: null,
        taskName: null,
        methodName: null,
        accessKeyId: null,
        accessKeySecret: null,
        remark: null
      }
      this.dialogAddTitle = '新增'
      this.dialogAddVisible = true
      this.$refs.addParm.clearValidate()
    },
    //	根据id删除
    delById(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delById({ id })
            .then(res => {
              if (res.code == 200) {
                this.$message.success('删除成功!')
                this.getDataList()
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
        .catch(() => {
          this.$message.info('取消删除')
        })
    },
    //	修改
    editById(data) {
    	this.$refs.editParm.clearValidate()
      getById({ id: data.id })
        .then(res => {
          if (res.code == 200) {
            this.editParm.id = res.data.id
            this.editParm.name = res.data.name
            this.editParm.robotUuid = res.data.robotUuid
            this.editParm.taskName = res.data.taskName
            this.editParm.accessKeyId = res.data.accessKeyId
            this.editParm.accessKeySecret = res.data.accessKeySecret
            this.editParm.remark = res.data.remark
            this.dialogEditVisible = true
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 确认修改
    sureEdit(editParm) {
      editById(this.editParm)
        .then(res => {
          if (res.code == 200) {
            console.log(res)
            this.dialogEditVisible = false
            this.$message.success('修改成功!')
            this.getDataList()
          } else if (res.code == -1) {
            this.$message.warning(res.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    sureEdit(editParm) {
    	this.dialogEditVisible = flase
      this.$refs.editParm.clearValidate()
    },
    // 确认新增
    sureAdd(addParm) {
      add(this.addParm)
        .then(res => {
          if (res.code == 200) {
            this.dialogAddVisible = false
            this.$message.success('新增成功!')
            this.getDataList()
          } else if (res.code == -1) {
            this.$message.warning(res.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    sureAdd(addParm) {
    	this.dialogAddVisible = flase
      this.$refs.addParm.clearValidate()
    },
    // 查看根据id
    getBtnById(id) {
      getById({ id })
        .then(res => {
          if (res.code == 200) {
            this.detailParm.id = res.data.id
            this.detailParm.name = res.data.name
            this.detailParm.robotUuid = res.data.robotUuid
            this.detailParm.taskName = res.data.taskName
            this.detailParm.methodName = res.data.methodName
            this.detailParm.accessKeyId = res.data.accessKeyId
            this.detailParm.accessKeySecret = res.data.accessKeySecret
            this.detailParm.remark = res.data.remark
            this.dialogDetailVisible = true
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 分页获取表格数据
    getDataList() {
      getList(this.searchParm)
        .then(res => {
          console.log(res)
          if (res.code == 200) {
            console.log(res)
            this.list = res.data.list
            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    //	分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.searchParm.pageSize = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.searchParm.page = val
      this.getDataList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
