<template>
  <div>
    <Panel title="用户管理">
      <template slot="buttons">
        <el-button class="blue" @click="queryUserData" icon="el-icon-fa-search">查询</el-button>
        <el-button class="yellow" @click="pageTable.handleReset()" icon="el-icon-fa-reply-all">重置</el-button>
      </template>
      <el-form label-position="top" :model="pageTable.param" ref="queryform">
        <el-row>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="用户名称" prop="username">
              <el-input v-model="pageTable.param.username" @keyup.native.enter="queryUserData"/>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="用户工号" prop="usercode">
              <el-input v-model="pageTable.param.usercode" @keyup.native.enter="queryUserData"/>
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="隶属机构" prop="orgId">
              <Selector v-model="pageTable.param.orgId" :clearable="true" label-key="label" value-key="id"
                        placeholder="隶属组织机构">
                <SelectorTree tree-key="orgTree" searchField="ORG_NAME" rootLabel="组织机构"/>
              </Selector>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </Panel>
    <Panel title="用户列表">
      <el-table border :data="pageTable.data" element-loading-spinner="el-icon-loading" v-loading="pageTable.isLoading" ref="table"
                element-loading-text="数据加载中" height="calc(100vh - 600px)">
        <el-table-column prop="userid" label="登陆账号" show-overflow-tooltip/>
        <el-table-column prop="username" label="用户名称" show-overflow-tooltip/>
        <!-- <el-table-column prop="usercode" label="用户工号" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="orgname" label="隶属机构" show-overflow-tooltip/>
        <el-table-column prop="useremail" label="邮箱" show-overflow-tooltip/>

        <el-table-column label="邮箱开关" width="140">
          <template slot-scope="scope">
            <el-switch  :width="40" v-model='scope.row.openemail' active-text="开启"
                        inactive-text="关闭" active-color="#13ce66"  active-value="1" inactive-value="0" @change="changeemail(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="usermobl" label="短信" show-overflow-tooltip/>
        <el-table-column label="短信开关" width="140">
          <template slot-scope="scope">
            <el-switch  :width="40" v-model='scope.row.openmobl' active-text="开启"
                        inactive-text="关闭" active-color="#13ce66"  active-value="1" inactive-value="0" @change="changemobl(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="userphon" label="电话" show-overflow-tooltip/>
        <el-table-column label="电话开关" width="140">
          <template slot-scope="scope">
            <el-switch  :width="40" v-model='scope.row.openphon' active-text="开启"
                        inactive-text="关闭" active-color="#13ce66"  active-value="1" inactive-value="0" @change="changephon(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background :page-size.sync="pageTable.size" :current-page.sync="pageTable.curr" :total="pageTable.total"/>
    </Panel>
  </div>
</template>
<script>
  import NoticeApi from "@/api/base/sysm/NoticeApi";
  import PageTable from "@/libs/PageTable";
  import SelectorTree from "@/common/SelectorTree";

  export default {
    name: "NoticeUserInfo",
    components: {NoticeApi,SelectorTree},
    props: {
      data:[],
      noticeuuid:"",
    },
    data() {
      return {
        pageTable: new PageTable({
          autoLoad: true,
          doLoad: NoticeApi.queryNoticeUsersInfo,
          data:[],
          size:10,
          param: {uuids:this.data,noticeuuid:this.noticeuuid},
          log: false
        }),
        queryform: {
          usercode: null,
          username: null,
          orgId: null,
        },
      };
    },
    methods: {
      queryUserData() {
        this.pageTable.handleLoad();
      },
    }
  };
</script>
