<template>
  <div id="user">
    <el-main>
      <div style="margin-bottom: 10px">
        <el-button size="medium" icon="el-icon-back" type="text" @click="back">返回</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.realname"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input placeholder="账号" size="mini" v-model="searchFormData.account"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input placeholder="手机号" size="mini" v-model="searchFormData.phone"></el-input>
        </el-form-item>

        <el-form-item label="角色标识" style="margin-top: 6px" size="mini">
          <el-select v-model="searchFormData.roleFlag" placeholder="角色标识" style="width: 180px" clearable>
            <el-option :value="i.flag" v-for="(i,index) in roles" :key="index" :label="i.flag"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="运营商编号" style="margin-top: 6px" size="mini">
          <el-select v-model="searchFormData.operatorNumber" placeholder="运营商编号" style="width: 180px" clearable>
            <el-option :value="i.number" v-for="(i,index) in operators" :key="index" :label="i.number"></el-option>
          </el-select>
        </el-form-item>


        <el-dialog title="用户" :visible.sync="dialogFormVisible" style="width: 68% ; margin-left: 320px ;">
          <el-form label-position="left" :model="formData">
            <el-row style="margin-left: 15px">
            <el-form-item label="姓名" style="margin-left: 28px;margin-right: 50px">
              <el-input v-model="formData.realname"></el-input>
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="formData.account"></el-input>
            </el-form-item>
            </el-row>

            <el-row style="margin-left: 15px">
            <el-form-item label="手机号" style="margin-left: 14px;margin-right: 50px">
              <el-input v-model="formData.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="formData.password"></el-input>
            </el-form-item>
            </el-row>

            <el-row style="margin-left: 15px">
            <el-form-item label="角色标识" style="margin-left: 0px">
              <el-select v-model="formData.roleFlag" placeholder="角色标识" style="width: 200px" clearable>
                <el-option :value="i.flag" v-for="(i,index) in roles" :key="index" :label="i.flag"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运营商编号">
              <el-select v-model="formData.operatorNumber" placeholder="运营商编号" style="width: 200px" clearable>
                <el-option :value="i.number" v-for="(i,index) in operators" :key="index" :label="i.number"></el-option>
              </el-select>
            </el-form-item>
            </el-row>
          </el-form>

          <div slot="footer" class="dialog-footer" style="text-align: center">
            <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="realname" label="姓名"></el-table-column>
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
<!--        <el-table-column prop="password" label="密码"></el-table-column>-->
        <el-table-column prop="roleFlag" 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="showEdit(scope.row)">编辑</el-button>
            <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>
  </div>

</template>

<script>
export default {
  name: 'user',
  data() {
    return {
      roles:[],
      operators:[],

      api: {
        list: this.$api.user.list,
        delete: this.$api.user.delete,
        add: this.$api.user.add,
        update: this.$api.user.update,
      },

      addOrEdit: 1,

      dialogFormVisible: false,

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

      tableData:
        [{
          realname: '',
          account: '',
          phone: '',
          password: '',

          roleFlag: '',
          operatorNumber: '',

        }],
      formData: {
        realname: '',
        account: '',
        phone: '',
        password: '',

        roleFlag: '',
        operatorNumber: '',
      },
      searchFormData:
        {
          realname: '',
          account: '',
          phone: '',

          roleFlag: '',
          operatorNumber: '',
        }
    }
  },

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

  methods: {
    getOperatorNumber() {
      const vm = this;
      vm.$http.get(vm.$api.operator.list).then((resp) => {

        console.log(resp.data.data.operators)

        vm.operators = resp.data.data.operators
      })
    },
    getRoles() {
      const vm = this;
      vm.$http.get(vm.$api.role.list).then((resp) => {

        console.log(resp.data.data.roles)

        vm.roles = resp.data.data.roles
      })
    },

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

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

          realname: this.searchFormData.realname,
          account: this.searchFormData.account,
          phone: this.searchFormData.phone,
          roleFlag: this.searchFormData.roleFlag,
          operatorNumber: this.searchFormData.operatorNumber,
        }
      })
        .then((response) => {
          // vm.paper = response.data.data.paper;
          //console.log(response.data.data);

          vm.pager = response.data.data.pager

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

      this.formData.realname = '';
      this.formData.account = '';
      this.formData.roleFlag = '';
      this.formData.operatorNumber = '';
      this.formData.phone = '';
      this.formData.password = '';

      this.addOrEdit = 1
    },

    showEdit(row) {

      this.dialogFormVisible = true;

      this.editRow = JSON.parse(JSON.stringify(row));
      this.formData = this.editRow

      this.addOrEdit = 2
    }
    ,


    addOrEditMehtond() {
      const vm = this;
      if (this.addOrEdit == 2) {
        vm.$http.get(vm.api.update,  {
          params: {
            code: this.formData.code,
            realname: this.formData.realname,
            account: this.formData.account,
            roleFlag: this.formData.roleFlag,
            operatorNumber: this.formData.operatorNumber,
            phone: this.formData.phone,
            password: this.formData.password,
          }
        })
          .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: {
            realname: this.formData.realname,
            account: this.formData.account,
            roleFlag: this.formData.roleFlag,
            operatorNumber: this.formData.operatorNumber,
            phone: this.formData.phone,
            password: this.formData.password,
          }
        })
          .then((response) => {
            if (response.data.status == 200) {

              this.dialogFormVisible = false;

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

              this.loadData();
            }
          })
      }
    },

    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;

    },
    back() {
      let vm = this;
      vm.$router.back()
    }

  }
}
</script>


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

.el-row{
  margin-top: 10px;
}
</style>
