<template>
  <div>
    <div class="table-header table-div el-scrollbar">
      <ListLayout :table-columns="tableColumns">
        <div slot="search" style="margin-top: 5px">
          <!--这里放顶部搜索-->
          <!-- 搜索部分开始 -->
          <el-form
            label-width="90px"
            :inline="true"
            :model="page"
            class="search-form"
            :size="$store.getters.size"
          >
            <el-form-item>
              <el-select
                v-model="page.params.eq_id"
                clearable
                filterable
                remote
                reserve-keyword
                placeholder="编码/手机/昵称"
                :remote-method="userRemoteMethod"
                @keyup.enter.native="getByPage"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="
                    item.phone +
                    '(' +
                    (item.nickName ? item.nickName + '-' : '') +
                    item.userCode +
                    ')'
                  "
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-select
                v-model="page.params.eq_globalEnable"
                placeholder="全局禁用启用"
                clearable
                @keyup.enter.native="getByPage"
              >
                <el-option label="禁用" :value="0" />
                <el-option label="启用" :value="1" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-select
                v-model="page.params.eq_registerMode"
                placeholder="用户注册方式"
                clearable
                @keyup.enter.native="getByPage"
              >
                <el-option label="主动注册" value="1" />
                <el-option label="广告宣传" value="2" />
                <el-option label="二维码推广" value="3" />
                <el-option label="司机推广" value="4" />
                <el-option label="推客推广" value="5" />
                <el-option label="系统同步" value="6" />
                <el-option label="其他" value="7" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="page.params.eq_userSource"
                placeholder="用户系统来源"
                clearable
                @keyup.enter.native="getByPage"
              >
                <el-option label="星油运营管理系统" value="XO_OMS" />
                <el-option label="星油androidAPP" value="XO_APP_AND" />
                <el-option label="星油IOSAPP" value="XO_APP_IOS" />
                <el-option label="星油微信小程序" value="XO_APPLET_WC" />
                <el-option label="星卡互联运营管理系统" value="XK_OMS" />
                <el-option label="星卡互联IOSAPP" value="XK_APP_IOS" />
                <el-option label="星卡互联微信小程序" value="XK_APPLET_WC" />
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 搜索部分结束 -->
        </div>

        <el-row slot="button-group" style="margin-top: 5px">
          <el-col :span="16" class="tal">
            <el-button
              class="group-item"
              type="danger"
              :size="$store.getters.size"
              @click="toForbid"
              ><svg-icon icon-class="iconchahao" /> 禁用</el-button
            >
            <el-button
              class="group-item"
              :size="$store.getters.size"
              type="success"
              @click="toStartUsing"
              ><svg-icon icon-class="iconduihao" /> 启用</el-button
            >
            <el-button
              class="group-item"
              :size="$store.getters.size"
              type="primary"
              @click="toAdd"
              ><svg-icon icon-class="iconxinzeng" /> 添加</el-button
            >
          </el-col>
          <el-col :span="8">
            <el-button
              type="primary"
              :size="$store.getters.size"
              icon="el-icon-search"
              @click="search"
              >查询</el-button
            >
            <el-button
              type="info"
              :size="$store.getters.size"
              icon="el-icon-refresh"
              @click="page.params = {}"
              >重置</el-button
            >
          </el-col>
        </el-row>

        <div slot="table">
          <!--这里放表格和分页-->
          <!-- 列表开始 -->
          <el-table
            :max-height="tableHeight"
            :data="dataPage.list"
            fit
            stripe
            style="width: 100%"
            :size="$store.getters.size"
            @sort-change="sortHandler"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" type="index" :index="indexMethod" />
            <template v-for="(item, index) in tableColumns">
              <el-table-column
                v-if="item.show"
                :key="index"
                :fixed="item.fixed"
                :align="item.align"
                :show-overflow-tooltip="true"
                :min-width="item.minWidth"
                :width="item.width"
                :prop="item.prop"
                :sortable="item.sortable"
                :label="item.label"
                :formatter="item.render"
              />
            </template>

            <el-table-column fixed="right" label="操作" width="150px">
              <template slot-scope="scope">
                <el-button
                  :size="$store.getters.size"
                  type="text"
                  @click="handleDetail(scope.row.id)"
                  ><svg-icon icon-class="iconxiangqing1" /> 详情</el-button
                >
                <el-dropdown>
                  <el-button type="text">
                    更多<i class="el-icon-arrow-down el-icon--right" />
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="toUpdate(scope.row.id)">
                      <el-button :size="$store.getters.size" type="text"
                        ><svg-icon icon-class="iconicon-" /> 编辑</el-button
                      >
                    </el-dropdown-item>
                    <el-dropdown-item
                      @click.native="toUpdatePwd(scope.row.userCode)"
                    >
                      <el-button :size="$store.getters.size" type="text"
                        ><svg-icon icon-class="iconicon-" /> 修改密码</el-button
                      >
                    </el-dropdown-item>
                    <el-dropdown-item @click.native="toDelete(scope.row.id)">
                      <el-button :size="$store.getters.size" type="text"
                        ><svg-icon icon-class="iconlajitong" /> 删除</el-button
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <!-- 列表结束 -->

          <!-- 分页组件开始 -->
          <div class="page-div">
            <el-pagination
              :current-page="page.currentPage"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <!-- 分页组件结束 -->
        </div>
      </ListLayout>

      <!-- 修改密码弹窗 -->
      <el-dialog
        v-el-drag-dialog
        destroy-on-close
        title="修改密码"
        :visible.sync="updatePwdDialog"
        @closeDialog="closeDialog"
        width="55%"
        :before-close="handleClose"
      >
        <el-form
          ref="form"
          :model="updatePwd"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="新密码" prop="encryptPsw">
            <el-input v-model="updatePwd.encryptPsw" style="width: 50%" />
          </el-form-item>
        </el-form>
        <div style="text-align: right">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="updatePwdSubmit">提交</el-button>
        </div>
      </el-dialog>

      <!-- 添加弹窗 -->
      <el-dialog
        v-el-drag-dialog
        destroy-on-close
        title="添加"
        :visible.sync="addDialog"
        width="55%"
      >
        <SysCustomerInfoAdd @getByPage="getByPage" @closeDialog="closeDialog" />
      </el-dialog>

      <!-- 登录授权弹窗 -->
      <el-dialog
        v-el-drag-dialog
        destroy-on-close
        title="登录授权"
        :visible.sync="authDialog"
        width="55%"
      >
        <loginSystem
          :active-id="activeId"
          @getByPage="getByPage"
          @closeDialog="closeDialog"
        />
      </el-dialog>

      <!-- 导出弹窗 -->
      <el-dialog
        v-el-drag-dialog
        title="导出"
        :visible.sync="outPutDialog"
        width="55%"
      >
        <SysCustomerInfoOutput
          @getByPage="getByPage"
          @closeDialog="closeDialog"
        />
      </el-dialog>

      <!-- 导入弹窗 -->
      <el-dialog
        v-el-drag-dialog
        title="导入"
        :visible.sync="importDialog"
        width="55%"
      >
        <SysCustomerInfoImport
          @getByPage="getByPage"
          @closeDialog="closeDialog"
        />
      </el-dialog>

      <!-- 修改弹窗 -->
      <el-dialog
        destroy-on-close
        title="修改"
        :visible.sync="updateDialog"
        width="55%"
      >
        <SysCustomerInfoUpdate
          v-if="updateDialog"
          :sys-customer-info="sysCustomerInfo"
          @getByPage="getByPage"
          @closeDialog="closeDialog"
        />
      </el-dialog>

      <!-- 详情抽屉 -->
      <el-drawer
        title="详情"
        class="table-detail-drawer"
        :visible.sync="showTableDrawer"
        direction="ltr"
        size="50%"
      >
        <SysCustomerInfoInfo
          v-if="showTableDrawer"
          :sys-customer-info="sysCustomerInfo"
        />
      </el-drawer>
    </div>
  </div>
</template>
<script>
import sysCustomerInfoApi from "@/api/user/sysCustomerInfo";
import sysSecurityUserPswApi from "@/api/user/sysSecurityUserPsw";
import loginSystem from "./LoginSystem";
import md5 from "js-md5";

import SysCustomerInfoAdd from "./SysCustomerInfoAdd";
import SysCustomerInfoUpdate from "./SysCustomerInfoUpdate";
import SysCustomerInfoInfo from "./SysCustomerInfoInfo";
import SysCustomerInfoImport from "./SysCustomerInfoImport";
import SysCustomerInfoOutput from "./SysCustomerInfoOutput";
import { mapGetters } from "vuex";
export default {
  components: {
    SysCustomerInfoAdd,
    SysCustomerInfoUpdate,
    SysCustomerInfoInfo,
    SysCustomerInfoImport,
    loginSystem,
    SysCustomerInfoOutput,
  },
  data() {
    return {
      userList: [],
      rules: {
        encryptPsw: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
      updatePwdDialog: false, // 修改密码弹窗
      multipleSelection: [], // 选择表格数据集合
      importDialog: false, // 导入弹窗
      outPutDialog: false, // 导出弹窗
      authDialog: false, // 登录授权弹窗
      activeId: null,
      showTableDrawer: false,
      page: {
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: {}, // 查询参数
        sorted: {
          createTime: "desc",
        },
        columns: [],
      },
      updatePwd: {
        userCode: undefined,
        encryptPsw: undefined,
        pswType: "LOGIN_PSW",
      },
      tableHeight: document.documentElement.clientHeight - 300 - 60,
      filters: this.$options.filters,
      dataPage: {
        // 分页显示page
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: {
          // 查询参数
        },
        sorted: {},
      },
      tableColumns: [
        {
          prop: "id",
          sortable: "custom",
          label: "账户编码",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        {
          prop: "phone",
          sortable: "custom",
          label: "手机号码",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        {
          prop: "nickName",
          sortable: "custom",
          label: "用户昵称",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },

        {
          prop: "globalEnable",
          sortable: "custom",
          label: "禁用启用",
          show: true,
          render: (row, column, cell) => {
            return (
              <el-switch
                v-model={row.globalEnable}
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value={1}
                inactive-value={0}
                onChange={() => this.globalEnableClike(row)}
              ></el-switch>
            );
          },
        },
        {
          prop: "createTime",
          sortable: "custom",
          label: "创建时间",
          show: true,
          render: (row, column, cell) => {
            return cell;
          },
        },
        {
          prop: "registerMode",
          sortable: "custom",
          label: "注册方式",
          show: true,
          render: (row, column, cell) => {
            if (cell === "1") {
              return "主动注册";
            }
            if (cell === "2") {
              return "广告宣传";
            }
            if (cell === "3") {
              return "二维码推广";
            }
            if (cell === "4") {
              return "司机推广";
            }
            if (cell === "5") {
              return "推客推广";
            }
            if (cell === "6") {
              return "系统同步";
            }
            if (cell === "7") {
              return "其他";
            }
            return cell;
          },
        },

        {
          prop: "userSource",
          sortable: "custom",
          label: "系统来源",
          show: true,
          render: (row, column, cell) => {
            if (cell === "XO_OMS") {
              return "星油运营管理系统";
            }
            if (cell === "XO_APP_AND") {
              return "星油androidAPP";
            }
            if (cell === "XO_APP_IOS") {
              return "星油IOSAPP";
            }
            if (cell === "XO_APPLET_WC") {
              return "星油微信小程序";
            }
            if (cell === "XK_OMS") {
              return "星卡互联运营管理系统";
            }
            if (cell === "XK_APP_AND") {
              return "星卡互联androidAPP";
            }
            if (cell === "XK_APP_IOS") {
              return "星卡互联IOSAPP";
            }
            if (cell === "XK_APPLET_WC") {
              return "星卡互联微信小程序";
            }
            return cell;
          },
        },
      ],
      addDialog: false, // 添加弹窗
      updateDialog: false, // 修改弹窗
      sysCustomerInfo: {},
    };
  },
  computed: {
    ...mapGetters(["sysUserList"]),
  },
  created() {
    this.getByPage();
    // 增加监听事件，窗口变化时得到高度。
    window.addEventListener("resize", this.getHeight, false);
  },
  methods: {
    userRemoteMethod(value) {
      // 远程搜索
      if (value) {
        sysCustomerInfoApi.liekQuery(value).then((res) => {
          this.userList = res.data;
        });
      }
    },
    globalEnableClike(row) {
      // 启用禁用点击事件
      const data = [row];
      sysCustomerInfoApi.updateBatchEnalbe(data).then((res) => {
        if (res.code === 20000) {
          this.$message.success(res.msg);
        }
        this.getByPage();
      });
    },
    updatePwdSubmit() {
      // 修改密码提交
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const updatePwd = { ...this.updatePwd };
          updatePwd.encryptPsw = md5(this.updatePwd.encryptPsw);
          sysSecurityUserPswApi.updatePsw(updatePwd).then((res) => {
            this.updatePwd.encryptPsw = "";
            this.$message.success(res.msg);
            this.getByPage();
            this.updatePwdDialog = false;
          });
        }
      });
    },
    toUpdatePwd(userCode) {
      // 修改密码弹窗
      this.updatePwdDialog = true;
      this.updatePwd.userCode = userCode;
    },
    handleClose() {
      this.updatePwd.encryptPsw = "";
      this.updatePwdDialog = false;
    },
    indexMethod(index) {
      return (index + 1) * 1;
    },
    handleSelectionChange(val) {
      // 选择表格数据
      this.multipleSelection = val;
    },
    toForbid() {
      // 禁用
      if (!this.multipleSelection || this.multipleSelection.length < 1) {
        this.$message.error("请选择需要操作的数据");
        return;
      }
      this.multipleSelection.forEach((item) => {
        item.globalEnable = 0;
      });
      sysCustomerInfoApi
        .updateBatchEnalbe(this.multipleSelection)
        .then((res) => {
          if (res.code === 20000) {
            this.$message.success(res.msg);
          }
          this.getByPage();
        });
    },
    toStartUsing() {
      // 启用
      if (!this.multipleSelection || this.multipleSelection.length < 1) {
        this.$message.error("请选择需要操作的数据");
        return;
      }
      this.multipleSelection.forEach((item) => {
        item.globalEnable = 1;
      });
      sysCustomerInfoApi
        .updateBatchEnalbe(this.multipleSelection)
        .then((res) => {
          if (res.code === 20000) {
            this.$message.success(res.msg);
          }
          this.getByPage();
        });
    },
    toImport() {
      // 导入
      this.importDialog = true;
    },
    toOutPut() {
      // 导出
      this.outPutDialog = true;
    },
    handleDetail(id) {
      // 查看行 详情
      sysCustomerInfoApi.get(id).then((res) => {
        this.sysCustomerInfo = res.data;
        this.showTableDrawer = true;
      });
    },
    getHeight() {
      // 获取浏览器高度并计算得到表格所用高度。
      this.tableHeight = document.documentElement.clientHeight - 300 - 60;
    },
    search() {
      // 搜索
      this.page.currentPage = 1;
      this.getByPage();
    },
    toggleSearchAdvance() {
      this.searchAdvice = !this.searchAdvice;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getByPage();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getByPage();
    },
    sortHandler(column) {
      // 排序查询
      console.log(column);
      const key = column.prop;
      const value = column.order;
      this.page.sorted = {};
      this.page.sorted[key] = value;
      this.getByPage();
    },
    toAdd() {
      // 跳转到添加
      this.sysCustomerInfo = {};
      this.addDialog = true;
    },
    toUpdate(id) {
      // 跳转到更新
      sysCustomerInfoApi.get(id).then((res) => {
        this.sysCustomerInfo = res.data;
        this.updateDialog = true;
      });
    },
    toDelete(id) {
      // 删除
      this.$confirm("确定删除?", "提示", { type: "error" }).then(() => {
        sysCustomerInfoApi.deleteById(id).then((res) => {
          this.$message.success(res.msg);
          this.getByPage();
        });
      });
    },
    getByPage() {
      // 分页查询
      this.addDialog = false;
      sysCustomerInfoApi.getByPage(this.page).then((res) => {
        this.dataPage = res.data;
        this.page.totalCount = this.dataPage.totalCount;
        this.page.totalPage = this.dataPage.totalPage;
      });
    },
    closeDialog() {
      this.addDialog = false;
      this.updateDialog = false;
      this.updatePwdDialog = false;
    },
  },
};
</script>

<style scoped>
.handle-button-group {
  margin-bottom: 10px;
}
.table-div {
  min-height: calc(100vh - 150px);
  max-height: calc(100vh - 110px);
  position: relative;
  overflow-y: scroll;
  margin-bottom: 20px;
}
.table-div >>> .header-container {
 /* position: sticky;
  top: 0rem; */
  min-height: 152px;
  z-index: 4;
  background: #fff;
}
.table-div .el-table__footer-wrapper {
  position: fixed !important;
}
.page-div {
  /* position: fixed; */
  background: #fff;
  bottom: 0rem;
  z-index: 4;
  min-width: 100%;
}
</style>
