<template>
  <div class="app-container">
    <div style="margin-bottom:10px">
      <el-button type="success" @click="addBtn">新增</el-button>
      <el-button type="success" @click="importBtn">导入</el-button>
      <el-button type="success" @click="exportTempBtn">模版下载</el-button>
    </div>
    <!--搜索-->
    <el-form ref="form" class="mt_15" inline size="small">
      <el-form-item label="机器人账号">
        <el-input v-model.trim="searchParm.accountName" clearable placeholder="机器人账号" />
      </el-form-item>
      <el-form-item label="uuid">
        <el-input v-model.trim="searchParm.robotClientUuid" clearable placeholder="uuid" />
      </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="accountName" />
      <el-table-column label="uuid信息" prop="robotClientUuid" />
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          {{ scope.row.status | getStatus }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createdAt" />
      <el-table-column label="修改时间" prop="updatedAt" />
      <el-table-column label="操作" width="300">
        <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="updateStatus(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="130px">
          <el-form-item label="机器人账号" prop="accountName">
            <el-input v-model.trim="addParm.accountName" clearable />
          </el-form-item>
          <el-form-item label="uuid信息" prop="robotClientUuid">
            <el-input v-model.trim="addParm.robotClientUuid" 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="130px">
          <el-form-item label="机器人账号" prop="accountName">
            <el-input v-model.trim="editParm.accountName" clearable />
          </el-form-item>
          <el-form-item label="uuid信息" prop="robotClientUuid">
            <el-input v-model.trim="editParm.robotClientUuid" clearable />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button type="info" @click="sureExitCancle('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="accountName">
            <el-input v-model.trim="detailParm.accountName" :disabled="true" />
          </el-form-item>
          <el-form-item label="uuid信息" prop="robotClientUuid">
            <el-input v-model.trim="detailParm.robotClientUuid" :disabled="true" />
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <!--机器人信息导入  importBtn-->
    <el-dialog :visible.sync="dialogImportVisible" :title="dialogImportTitle" center width="23%">
      <div class="dialog-content">
        <el-upload
          ref="upload"
          class="upload-demo"
          drag
          :action="uploadFileUrl"
          :headers="uploadHeaders"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :before-upload="beforeAvatarUpload"
          multiple
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传xlsl文件，且不超过10M</div>
        </el-upload>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import { getList, add, delById, getById, editById, updateStatus } from '@/api/rpa/rebot'
export default {
  filters: {
	  getStatus: function(value) {
		   if (value == 0) {
		   	return '未占用'
		   } else {
		   	return '已占用'
		   }
	  }
  },
  //	数据
  data() {
    return {
    	searchParm: {
    		page: 1,
    		pageSize: 10,
    		sort: 'created_at',
    		order: 'desc',
        accountName: null,
    		robotClientUuid: null
    	},
    	total: 0,
      list: [],
	  uploadHeaders: { Authorization: this.$store.getters.token },
      dialogAddVisible: false,
      dialogAddTitle: '新增',
      dialogDetailVisible: false,
      dialogDetailTitle: '详情',
      dialogEditVisible: false,
      dialogEditTitle: '修改',
	  dialogImportVisible: false,
      dialogImportTitle: '导入',
	  uploadFileUrl: process.env.VUE_APP_BASE_API + '/api/ctRebot/import',
	  tempUrl: process.env.VUE_APP_BASE_API + '/api/ctRebot/exportTemp',
      addParm: {
        id: null,
        accountName: null,
    	robotClientUuid: null
      },
      detailParm: {
      	id: null,
        accountName: null,
    	robotClientUuid: null
      },
      editParm: {
      	id: null,
        accountName: null,
    	robotClientUuid: null
      },
      rules: {
      	accountName: [
          { required: true, message: '请输入机器人账号', trigger: 'blur' }
        ],
      	robotClientUuid: [
          { required: true, message: '请输入uuid信息', trigger: 'blur' }
        ]
    	}
    }
  },
  // 调用
  created() {
    this.goSearch()
  },
  // 方法
  methods: {
    // 重置
  	resetForm() {
      this.searchParm.accountName = null
      this.searchParm.robotClientUuid = null
      this.goSearch()
    },
    //	查询
    goSearch() {
      this.searchParm.page = 1
      this.getDataList()
    },
    // 导入成功
    uploadSuccess(res, file) {
  		this.dialogImportVisible = false
    	if (res.code == 200) {
        console.log('********date:' + res.data)
        if (res.data == true) {
          this.$message.success('导入成功!')
        } else {
          window.location.href = res.data
          this.$message.error('导入失败!')
        }
      }
      this.goSearch()
  	},
    beforeAvatarUpload(file) {
	    console.log(file)
	    const isLt10M = file.size / 1024 / 1024 < 10
	    if (!isLt10M) {
	      this.$message.error('上传Excel文件大小不能超过 10MB!')
	    }
	    return isLt10M
	 },
    // 导入
    importBtn() {
      this.dialogImportVisible = true
    },
    // 机器人模板
    exportTempBtn() {
      console.log(this.tempUrl)
      window.location.href = this.tempUrl
    },
    // 新增
    addBtn(addParm) {
      this.addParm = {
        id: null,
        accountName: null,
    		robotClientUuid: 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) {
      getById({ id: data.id }).then(res => {
        if (res.code == 200) {
          this.editParm.id = res.data.id
          this.editParm.accountName = res.data.accountName
          this.editParm.robotClientUuid = res.data.robotClientUuid
          this.dialogEditVisible = true
          this.$refs.editParm.clearValidate()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    updateStatus(data) {
      console.log('==================updateStatus')
      updateStatus({ id: data.id, status: 0 }).then(res => {
        if (res.code == 200) {
          this.$message.success('初始化状态成功!')
          this.getDataList()
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 确认修改
    sureEdit(editParm) {
      this.$refs[editParm].validate((valid) => {
		 if (valid) {
		 	this.$refs.editParm.clearValidate()
          editById(this.editParm).then(res => {
            if (res.code == 200) {
              console.log(res)
              this.dialogEditVisible = false
              this.$message.success('修改成功!')
              this.getDataList()
            }
          }).catch(err => {
            console.log(err)
          })
		  } else {
          console.log('error submit!!')
          return false
		  }
      })
    },
    // 确认新增
    sureAdd(addParm) {
      this.$refs[addParm].validate((valid) => {
		 if (valid) {
		 	this.$refs.addParm.clearValidate()
          add(this.addParm).then(res => {
            if (res.code == 200) {
              this.dialogAddVisible = false
              this.$message.success('新增成功!')
              this.getDataList()
            }
          }).catch(err => {
            console.log(err)
          })
		  } else {
          console.log('error submit!!')
          return false
		  }
      })
    },

    sureAddCancle(addParm) {
      this.dialogAddVisible = flase
      this.$refs.addParm.clearValidate()
    },
    sureExitCancle(editParm) {
      this.dialogEditVisible = false
      this.$refs.editParm.clearValidate()
    },
    // 查看根据id
    getBtnById(id) {
      getById({ id }).then(res => {
        if (res.code == 200) {
          this.detailParm.id = res.data.id
          this.detailParm.accountName = res.data.accountName
          this.detailParm.robotClientUuid = res.data.robotClientUuid
          this.detailParm.status = res.data.status
          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>
