<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
    >
      <el-form-item label="用户名称" >
        <el-input
          v-model="queryParams.userName"
          placeholder=""
          clearable
        />
      </el-form-item>
      <el-form-item label="姓名" >
        <el-input
          v-model="queryParams.nickName"
          placeholder=""
          clearable
        />
      </el-form-item>
      <el-form-item label="手机号" >
        <el-input
          v-model="queryParams.phonenumber"
          placeholder=""
          clearable
        />
      </el-form-item>
      <el-form-item label="提交权限" >
        <el-select v-model="queryParams.applyPermission" placeholder="请选择">
          <el-option label="关闭" value="0">关闭</el-option>
          <el-option label="开启" value="1">开启</el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getList"
        >搜索</el-button>
        <el-button icon="el-icon-refresh"  @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
    </el-row>
    <div class="table">
      <el-table
        v-loading="loading"
        :data="deptList"
        row-key="deptId"
        max-height="430px"
      >
        <el-table-column
          prop="userName"
          label="用户名称"
        >
        </el-table-column>
        <el-table-column
          label="姓名"
          align="center"
          prop="nickName"
        >
        </el-table-column>
        <el-table-column
          label="手机号"
          align="center"
          prop="phonenumber"
        >
        </el-table-column>
        <el-table-column prop="applyPermission" label="提交权限" >
          <template slot-scope="{row,data}">
            <el-switch v-model="row.applyPermission" :active-value="1" :inactive-value="0" @change="dangerOut(row)"  active-color="#13ce66" inactive-color="#ff4949"/>
          </template>
        </el-table-column>
      </el-table>
<!--      <Table-->
<!--      :tableData="deptList"-->
<!--      :loading="loading"-->
<!--      :columns="columns"-->
<!--      :total="total"-->
<!--      :pageSize="pageSize"-->
<!--      :pageNo="pageNo"-->
<!--      />-->
<!--      <el-pagination-->
<!--        style="display: flex;justify-content: flex-end ;margin: 15px 0px 0px 0px"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--        :current-page="pageNo"-->
<!--        :page-sizes="[10, 20, 30, 40]"-->
<!--        :page-size="pageSize"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        :total="total" />-->
    </div>
  </div>
</template>

<script>
import {userApplyPermissionPage,updateApplyPermission} from '@/api/utils'
import  moment from 'moment'
import Table from '@/components/TableData/index'

export default {
  components:{
    Table
  },
  data() {
    return {
      deptList:[],
      // 遮罩层
      loading: false,
      // 重新渲染表格状态
      refreshTable: true,
      columns:[{
        label:"手机号",
        align:"center",
        prop:"phonenumber"
      },{
        label:"姓名",
        align:"center",
        prop:"nickName"
      },
      ],
      // 查询参数
      queryParams: {
        applyPermission: undefined,
        nickName: undefined,
        userName:null,
        phonenumber:null,
      },
      pageNo:1,
      pageSize:10,
      total:0,
    };
  },
  created() {
    this.getList();
  },
  computed:{
    //审核
    getStatus(val){
      let data=this.dataList.find(f=>f.value==val)
      return data.label
    }
  },
  methods: {
    dangerOut(val){
      console.log(val.applyPermission)
      if(val.applyPermission==1){
        val.applyPermission=0
        console.log('打开')
        this.$confirm('是否打开?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          val.applyPermission=1
          let res=await updateApplyPermission({applyPermission:val.applyPermission,userId:val.userId})
        }).catch(() => {
          val.applyPermission=0
        });
      } else {
        val.applyPermission=1
        console.log('关闭')
        this.$confirm('是否关闭?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          val.applyPermission=0
          let res=await updateApplyPermission({applyPermission:val.applyPermission,userId:val.userId})
        }).catch(() => {
          val.applyPermission=1
        });
      }

    },
    moment,
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      userApplyPermissionPage(this.queryParams).then((response) => {
        if(response && response.data && response.data.records){
          this.loading = false;
          this.deptList = response.data.records;
          this.total=response.data.total
        }else {
          this.deptList =[]
          this.loading = false;
          this.total=0
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNo=val
      this.getList()
    },
    // 表单重置
    reset() {
      this.queryParams={
          applyPermission: undefined,
          nickName: undefined,
          userName:null,
          phonenumber:null,
       }
    },
  },
};
</script>
<style lang="scss" scoped>
.table {
  height: calc(100% - 80px);
  margin-top: 10px;
}
::v-deep {
  .el-table {
    height: 100%;
    width: 100%;
    .el-table__body-wrapper {
      width: 100% !important;
      height: calc(100% - 50px) !important; // 表格高度减去表头的高度
      overflow-y: scroll;
    }
  }
}
</style>
