<template>
  <div id="operatorLog">
    <el-container>

      <el-main>
        <div style="margin-bottom: 10px">
          <el-button size="medium" icon="el-icon-back" type="text">返回</el-button>
          <span style="margin-left: 20px; font-size: 18px">操作日志列表</span>
        </div>

        <el-button size="medium" icon="el-icon-search" style="margin-bottom: 15px" @click="search(searchFormData)">
          查询
        </el-button>
        <el-button size="medium" icon="el-icon-plus" @click="showAdd" style="margin-left: 0">新增</el-button>


        <div style="padding: 10px;background-color: white">
          <el-form :inline="true" :model="searchFormData" style="background-color: white;">
            <el-form-item label="用户姓名">
              <el-input placeholder="用户姓名" size="mini" v-model="searchFormData.userRealname"></el-input>
            </el-form-item>
            <el-form-item label="用户账号">
              <el-input placeholder="用户账号" size="mini" v-model="searchFormData.userAccount"></el-input>
            </el-form-item>
            <el-form-item label="运营商编号">
              <el-input placeholder="运营商编号" size="mini" v-model="searchFormData.operatorNumber"></el-input>
            </el-form-item>


            <el-dialog title="日志" :visible.sync="dialogFormVisible">
              <el-form label-position="left" :model="formData">

                <el-form-item label="用户姓名">
                  <el-input v-model="formData.userRealname"></el-input>
                </el-form-item>
                <el-form-item label="用户账号">
                  <el-input v-model="formData.userAccount"></el-input>
                </el-form-item>
                <el-form-item label="操作内容">
                  <el-input v-model="formData.content"></el-input>
                </el-form-item>
                <el-form-item label="运营商编号">
                  <el-input v-model="formData.operatorNumber"></el-input>
                </el-form-item>
              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="addOrEditMehtond">确 定</el-button>
              </div>
            </el-dialog>

          </el-form>


          <el-table :data="tableData">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="userRealname" label="用户姓名"></el-table-column>
            <el-table-column prop="userAccount" label="用户账号"></el-table-column>
            <el-table-column prop="content" label="操作内容"></el-table-column>
            <el-table-column prop="operatorNumber" label="运营商编号"></el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click="del(scope.row)" style="color: #c01920">删除</el-button>
              </template>
            </el-table-column>

          </el-table>


        <el-pagination
            style="margin-top: 15px;text-align: center"
            background
            layout="prev, pager, next"
            :page-size="pager.pageSize"
            :current-page="pager.pageIndex"
            :total="pager.itemCount"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
        </div>
      </el-main>

    </el-container>
  </div>
</template>


<script>


export default {
  name: 'operatorLog',
  data() {
    return {
      api: {
        list: this.$api.operatorLog.list,
        delete: this.$api.operatorLog.delete,
        add: this.$api.operatorLog.add,
        update: this.$api.operatorLog.update,
      },

      addOrEdit: 1,

      dialogFormVisible: false,

      pager: {
        pageSize: 2,
        pageIndex: 1,
        itemCount: 0,
      },

      tableData:
          [{
            userRealname: '1',
            userAccount: '1',
            content: '1',
            operatorNumber: '1',

          }],
      formData: {
        userRealname: '1',
        userAccount: '1',
        content: '1',
        operatorNumber: '1',
      },
      searchFormData:
          {
            userRealname: '',
            userAccount: '',
            operatorNumber: '',
          }
    }
  },

  created: function () {
    this.loadData();
  },

  methods: {
    //切换页码
    handleCurrentChange(index) {
      this.loadData(index)
    },

    loadData(index) {
      const vm = this;
      vm.$http.get(vm.api.list, {
        params: {
          pageSize: 5,
          pageIndex: index ? index : 1,

          operatorNumber: this.searchFormData.operatorNumber,
          userRealname: this.searchFormData.userRealname,
          userAccount: this.searchFormData.userAccount,
        }
      })
          .then((response) => {
            // vm.paper = response.data.data.paper;
            console.log(response.data.data);

            vm.pager = response.data.data.pager

            vm.tableData = response.data.data.operatorLogs;
          })
    },
    search() {
      //console.log(this.searchFormData)
      this.loadData();
    },
    showAdd() {
      this.dialogFormVisible = true;

      this.formData.operatorNumber = '',
          this.formData.userAccount = '',
          this.formData.userRealname = '',
          this.formData.content = ''
    },

    showEdit(row) {

      console.log(row)

      this.dialogFormVisible = true;

      this.formData = row

      this.addOrEdit = 2
    },


    addOrEditMehtond() {
      const vm = this;
      if (this.addOrEdit == 2) {
        vm.$http.get(vm.api.update, {
          params: {
            content: this.formData.content,
            userAccount: this.formData.userAccount,
            userRealname: this.formData.userRealname,
            operatorNumber: this.formData.operatorNumber,

          }
        })
            .then((response) => {
              console.log(response)

              if (response.data.status == 200) {

                this.$message({
                  type: 'success',
                  showClose: true,
                  message: response.data.desc
                })
              }

              this.dialogFormVisible = false;

              this.loadData();

            })
            .catch(() => {
            });
      }

      if (this.addOrEdit == 1) {
        vm.$http.get(vm.api.add, {
          params: {
            content: this.formData.content,
            userAccount: this.formData.userAccount,
            userRealname: this.formData.userRealname,
            operatorNumber: this.formData.operatorNumber,
          }
        })
            .then((response) => {
              console.log(response)
              if (response.data.status == 200) {

                this.dialogFormVisible = false;

                this.$message({
                  type: 'success',
                  showClose: true,
                  message: response.data.desc
                })

                this.loadData();
              }

              if (response.data.status == 401) {

                this.$message({
                  type: 'info',
                  showClose: true,
                  message: response.data.desc
                })
              }
            })
      }
    },

    del(row) {
      const vm = this;
      this.$confirm('确认删除', '提示', {
        type: 'warning'
      }).then(() => {
        vm.$http.get(vm.api.delete, {
          params: {
            code: row.code,
          }
        })
            .then((response) => {
              console.log(response)
              if (response.data.status == 200) {
                this.$message({
                  type: 'success',
                  showClose: true,
                  message: response.data.desc
                })


              }
              this.loadData();
            })
      })
          .catch(() => {
            this.$message({
              type: 'info',
              showClose: true,
              message: '取消删除'
            })
          });
    },
    cancel() {
      this.$message({
        message: '操作取消',
        showClose: true,
        type: 'info'
      });

      this.dialogFormVisible = false;
    },

  }


}
</script>

<style scoped>
.el-form-item {
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 0px;
}
</style>
