<template>

  <div>
    <el-dialog
        title="用户管理"
        :visible.sync="editor.showUserManager"
        width="60%"
        custom-class="user-manager-dialog"
    >

      <el-form :inline="true" :model="dataForm" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="dataForm.keyword" placeholder="用户名" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="dataForm.status" clearable placeholder="状态" style="width: 100px;">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="editHandler({})">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="list" height="450" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="username" label="用户名" width="150"></el-table-column>
        <!--      <el-table-column prop="password" label="密码" width="100"></el-table-column>-->
        <el-table-column prop="remark" label="备注" width="150"></el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="status" label="启用">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="update(scope.row)"
                       active-color="#13ce66"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-tag @click="editHandler(scope.row)" style="margin-right: 10px">编辑</el-tag>
            <el-tag type="danger" @click="deleteHandler(scope.row)">删除</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          style="position: absolute; bottom: 20px;"
          @current-change="query()"
          :current-page.sync="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="limit"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>

    </el-dialog>

    <el-dialog
        :title="`${this.edit.title}用户`"
        :visible.sync="edit.show"
        width="40%"
    >

      <el-form ref="dataForm" :model="edit.dataForm" label-width="120px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="edit.dataForm.username" placeholder="用户名" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input show-password v-model="edit.dataForm.password" placeholder="密码" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="edit.dataForm.remark" placeholder="备注" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="edit.dataForm.status" clearable placeholder="状态" style="width: 100px;">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="edit.show = false">取消</el-button>
          <el-button type="primary" @click="dataFormSubmitHandle()">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import {mapState} from "vuex";
import http from "../../../api/fastposter";

export default {
  name: "FpUserManager",
  data() {
    return {
      list: [],
      page: 1,                    // 当前页码
      limit: 10,                  // 每页数
      total: 0,                   // 总条数
      dataForm: {
        keyword: ''
      },
      edit: {
        show: false,
        title: '',
        dataForm: {
          id: '',
          username: '',
          password: '',
          remark: '',
          status: 1,
        }
      }
    }
  },
  watch: {
    'editor.showUserManager': {
      handler(v) {
        if (v) {
          this.query()
        }
      }
    }
  },
  computed: {
    ...mapState({
      'editor': state => state.editor
    })
  },
  methods: {
    query(x) {
      http.http.get('api/admin/users', {
        params: {
          ...this.dataForm,
          page: this.page,
          limit: this.limit
        }
      }).then(r => {
        if (r.code === 0) {
          this.list = r.data.list
          this.total = r.data.total
        }
      });
    },
    update(row) {
      http.http.put('api/admin/users', row).then(r => {
        if (r.code === 0) {
          this.$message.success('操作成功')
          this.edit.show = false
          this.query()
        }
      })
    },
    editHandler(row) {
      this.edit.show = true
      if (row && row.id) {
        this.edit.title = '编辑'
      } else {
        this.edit.title = '新增'
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (row.id) {
          http.http.get('api/admin/users/' + row.id).then(r => {
            if (r.code === 0) {
              this.edit.dataForm = r.data.user
            }
          })
        }
      })
    },
    deleteHandler(row) {
      this.$confirm(`是否删除此[${row.username}]记录？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        http.http.delete('api/admin/users/' + row.id).then(r => {
          if (r.code === 0) {
            this.$message.success('操作成功')
            this.query()
          }
        })
      })
    },
    dataFormSubmitHandle() {

      let row = {
        ...this.edit.dataForm
      }
      if (row.id) {
        this.update(row)
      } else {
        http.http.post('api/admin/users', row).then(r => {
          if (r.code === 0) {
            this.$message.success('操作成功')
            this.edit.show = false
            this.query()
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>


<style>
.user-manager-dialog {
  height: 70%;
  min-width: 900px;
}

.user-manager-dialog .el-tag {
  user-select: none;
  cursor: pointer;
}
</style>
