<template>
  <div style="padding:10px">
    <q-card inline class="fit shadow-6">
      <q-card-main style="height:80%">
        <q-table
          ref="table"
          color="primary"
          :data="serverData"
          :columns="columns"
          :selected.sync="selected"
          row-key="id"
          :pagination.sync="serverPagination"
          @request="request"
          :loading="loading"
          :rows-per-page-label="$t('Rows per page')"
          :no-data-label="$t('No data')"
          v-permission="['user_view	']"
        >
            <template slot="top-left" slot-scope="props">账户信息
            <!-- <q-input v-model="filter.username" type="text" prefix="用户名：" />&nbsp;&nbsp;
            <q-input v-model="filter.account" type="text" prefix="工号：" />&nbsp;&nbsp;
            <q-input v-model="filter.phoneNumber" type="text" prefix="手机：" />&nbsp;&nbsp;
            <q-btn push dense color="primary" icon="search" @click="search">{{$t('Search')}}</q-btn>&nbsp;&nbsp;
            <q-btn push dense color="primary" icon="add" @click="addUser">{{$t('Add')}}</q-btn>&nbsp;&nbsp;
            <q-btn push dense color="primary" icon="swap horiz" @click="synchronousAvatar">同步微信头像</q-btn> -->
          </template> 
          <template slot="top-right" slot-scope="props">
            <q-btn
              flat
              round
              dense
              :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'"
              @click="props.toggleFullscreen"
            />
          </template>
         
          <q-td slot="body-cell-id" slot-scope="props" :props="props" style="width:200px">
            <q-btn
              small
              icon="info"
              push
              glossy
              dense
              color="primary"
              label="查看"
              @click="editUser(props.value)"
            />
            <q-btn
              small
              icon="create"
              push
              glossy
              dense
              color="red"
              label="修改密码"
              @click="editpassword(props.value)"
            />
          </q-td>
        </q-table>
      </q-card-main>
    </q-card>
    <q-modal v-model="editModal" maximized>
      <q-modal-layout>
        <q-toolbar slot="header">
          <q-btn flat round dense @click="editModal = false" icon="reply" />
          <q-toolbar-title v-if="subtype=='edit'">查看</q-toolbar-title>
          <q-toolbar-title v-if="subtype=='add'">{{$t('Add')}}</q-toolbar-title>
        </q-toolbar>
        <q-toolbar slot="footer">
          <q-toolbar-title></q-toolbar-title>
          <!-- <q-btn round @click="saveUser" v-if="subtype=='edit'">{{$t('Save')}}</q-btn>
          <q-btn round @click="saveUser" v-if="subtype=='add'">{{$t('Add')}}</q-btn>-->
          <q-btn round color="red" @click="editModal = false">返回</q-btn>
        </q-toolbar>

        <div class="layout-padding">
          <q-field :count="15" class="liststype">
            <q-input v-model="tempUser.account" :float-label="$t('工号')" readonly />
          </q-field>
          <q-field :count="20" class="liststype">
            <q-input v-model="tempUser.username" float-label="用户名" readonly />
          </q-field>
          <!-- <q-field :count="20" class="liststype" v-if="subtype=='add'">
            <q-input v-model="tempUser.password" type="password" :float-label="$t('Password')" />
          </q-field>-->

          <q-field :count="30" class="liststype">
            <q-input v-model="tempUser.email" :float-label="$t('Email')" readonly />
          </q-field>
          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.phoneNumber" type="number" float-label="手机" readonly />
          </q-field>
          <q-field class="liststype">
            <q-select v-model="tempUser.sex" :options="sexOptions" float-label="性别" readonly />
          </q-field>
          <q-field :count="13" class="liststype">
            <q-datetime v-model="tempUser.birthday" type="date" float-label="生日" readonly />
          </q-field>
          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.telNumber" float-label="座机号码" readonly />
          </q-field>
          <!-- <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.nickname" float-label="微信昵称" />
          </q-field>-->
          <!-- <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.avatar" float-label="头像" />
          </q-field>-->
          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.address" float-label="地址" readonly />
          </q-field>
          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.mobile" float-label="移动小号" readonly />
          </q-field>
          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.telecom" float-label="电信小号" readonly />
          </q-field>
          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.office" float-label="办公地点" readonly />
          </q-field>

          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.position" float-label="职务" readonly />
          </q-field>
          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.identity" float-label="身份" readonly />
          </q-field>
          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.departmentname" float-label="部门" readonly />
            <!-- <q-btn class="bg-brown-5 text-white" label="选择部门" @click="selectModule" /> -->
          </q-field>
          <!-- <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.rolename" float-label="角色" />
            <q-btn class="bg-brown-5 text-white" label="选择角色" @click="selectroleModule" />
          </q-field>-->
          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.fuzename" float-label="负责部门" readonly />
            <!-- <q-btn class="bg-brown-5 text-white" label="选择负责部门" @click="selectroleModule" /> -->
          </q-field>
          <!-- <q-field :count="13" class="liststype">
            <q-datetime v-model="tempUser.addtime" type="date" float-label="生日" />
          </q-field>-->
          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.credit" float-label="信用分" readonly />
          </q-field>
          <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.political" float-label="政治面貌" readonly />
          </q-field>
          <!-- <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.auth" float-label="角色权限" />
          </q-field>-->
          <!-- <q-field :count="13" class="liststype">
            <q-input v-model="tempUser.appId" float-label="应用权限" />
          </q-field>-->
          <q-field :count="13" class="liststype">
            <q-select v-model="tempUser.paizhu" :options="yeornoOptions" float-label="派驻" readonly />
          </q-field>

          <!-- <q-field class="liststype">
            <q-select v-model="tempUser.synchronous" :options="yeornoOptions" float-label="微信同步" />
          </q-field>-->
          <!-- <q-field class="liststype">
            <q-select v-model="tempUser.isadmin" :options="yeornoOptions" float-label="管理员" readonly/>
          </q-field>-->

          <q-field class="liststype">
            <q-select v-model="tempUser.status" :options="yeornoOptions" float-label="启用" readonly />
          </q-field>
        </div>
      </q-modal-layout>
    </q-modal>

    <!-- 修改密码 -->
    <q-modal v-model="editpasswordModal" maximized>
      <q-modal-layout>
        <q-toolbar slot="header">
          <q-btn flat round dense @click="editpasswordModal = false" icon="reply" />
          <q-toolbar-title>修改密码</q-toolbar-title>
        </q-toolbar>
        <q-toolbar slot="footer">
          <q-toolbar-title></q-toolbar-title>
          <q-btn round @click="saveUser">{{$t('Save')}}</q-btn>
          <q-btn round color="red" @click="editpasswordModal = false">{{$t('Cancel')}}</q-btn>
        </q-toolbar>

        <div class="layout-padding">
          <q-field :count="20" class="liststype">
            <q-input v-model="tempUser.password_old" float-label="原密码" />
          </q-field>
          <q-field :count="20" class="liststype">
            <q-input v-model="tempUser.password_new" float-label="新密码" />
          </q-field>
          <q-field :count="20" class="liststype">
            <q-input v-model="tempUser.password_check" float-label="确认密码" />
          </q-field>
        </div>
      </q-modal-layout>
    </q-modal>
  </div>
</template>

<script>
import {
  pagedlistByToken,
  checkpassword,
  updatepassword
} from "@/service/user/user";
export default {
  name: "user",
  data() {
    return {
      serverData: [],
      menuModal: false,
      tempFunction: {
        id: 0,
        name: "",
        moduleId: 0,
        module: "",
        code: "",
        description: ""
      },
      menuList: [],
      roleList: [],
      menuSelected: 0,
      roleSelected: [],
      menuModal: false,
      roleModal: false,
      serverPagination: {
        page: 1,
        rowsNumber: 0, // specifying this determines pagination is server-side
        rowsPerPage: 10 // current rows per page being displayed
      },
      selectOptions: [
        {
          label: "启用",
          value: "1"
        },
        {
          label: "停用",
          value: "0"
        }
      ],
      yeornoOptions: [
        {
          label: "是",
          value: "1"
        },
        {
          label: "否",
          value: "0"
        }
      ],
      sexOptions: [
        {
          label: "男",
          value: "1"
        },
        {
          label: "女",
          value: "2"
        }
      ],
      columns: [
        {
          name: "account",
          label: "工号",
          field: "account",
          sortable: true,
          align: "left"
        },
        {
          name: "username",
          required: true,
          label: "用户",
          align: "center",
          field: "username",
          sortable: true
        },
        {
          name: "phoneNumber",
          label: "手机",
          field: "phoneNumber",
          sortable: true,
          align: "center"
        },
        {
          name: "telNumber",
          label: "座机",
          field: "telNumber",
          sortable: true,
          align: "center"
        },
        {
          name: "email",
          label: "邮箱",
          field: "email",
          sortable: true,
          align: "center"
        },

        {
          name: "position",
          required: true,
          label: "岗位",
          align: "center",
          field: "position"
        },
        {
          name: "mobile",
          required: true,
          label: "移动小号",
          align: "center",
          field: "mobile"
        },
        {
          name: "telecom",
          required: true,
          label: "电信小号",
          align: "center",
          field: "telecom"
        },
        {
          name: "id",
          required: true,
          label: this.$t("ID"),
          align: "center",
          field: "id"
        }
      ],
      filter: {
        username: "",
        phoneNumber: "",
        account: ""
      },
      selected: [],
      loading: false,
      editModal: false,
      editpasswordModal: false,
      subtype: "add",
      tempUser: {
        id: 0,
        password_old: "",
        password: "",
        password_new: "",
        password_check: ""
      }
    };
  },
  methods: {
    async request(props) {
      this.loading = true;
      this.serverPagination = props.pagination;
      let table = this.$refs.table,
        { page, rowsPerPage, sortBy, descending } = props.pagination;
      let query = {
        pageIndex: page,
        pageSize: rowsPerPage,
        sortBy: sortBy,
        descending: descending
      };
      let dataRes = await pagedlistByToken(query);
      let data = dataRes.data.data;
      this.serverPagination.rowsNumber = data.total;
      this.serverData = data.list;
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    /**用户修改 */
    editUser(id) {
      this.subtype = "edit";
      let editRole = this.serverData.filter(s => {
        return s.id === id;
      });
      if (editRole && editRole.length > 0) {
        this.tempUser = JSON.parse(JSON.stringify(editRole[0]));
        if (this.subtype == "add") {
          this.tempUser.avatar =
            "https://open.work.weixin.qq.com/wwopen/userQRCode?vcode=vcd8e47e71bd07fc16";
          this.tempUser.synchronous = "0";
        }
      } else {
        return true;
      }
      this.editModal = true;
    },
    /**修改密码 */
    editpassword(id) {
      this.subtype = "editpassword";
      let editRole = this.serverData.filter(s => {
        return s.id === id;
      });
      if (editRole && editRole.length > 0) {
        this.tempUser = JSON.parse(JSON.stringify(editRole[0]));
      } else {
        return true;
      }
      this.editpasswordModal = true;
    },
    /**
     * 更新用户
     */
    async saveUser() {
      
      if (this.tempUser.password_new == this.tempUser.password_check) {
        let data = await checkpassword(this.tempUser.password_old);
        let reslut = data.data.data;
        
        if (reslut) {
          let data_1 = await updatepassword(this.tempUser.password_new);
          if (data_1.data.data) {
            this.$q.notify({
              type: "positive",
              message: this.$t("Successfully"),
              position: "bottom-right"
            });
          } else {
               this.$q.notify({
              type: "warning",
              message: this.$t("Successfully"),
              position: "bottom-right"
            });
          }

          this.editpasswordModal = false;
        } else {
          this.$q.notify({
            type: "warning",
            message: this.$t("Old password error"),
            position: "bottom-right"
          });
        }
      } else {
        this.$q.notify({
          type: "warning",
          message: "Your confirmed password and new password do not mat",
          position: "bottom-right"
        });
      }
    }
  },
  mounted() {
    this.request({
      pagination: this.serverPagination,
      filter: this.filter
    });
  }
};
</script>
<style scoped>
.liststype {
  width: 98%;
  /* padding-left: 4%; */
  /* float: left; */
}
</style>
