<template>
  <div class="page_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入账号、手机号和所属组织">
        <template v-slot:left_action>
          <div class="apaas_button">
            <el-button type="primary" @click="exportFile">
              <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-file-send"></bg-icon>
              导出
            </el-button>
            <el-popconfirm
              class="force-modify-btn"
              width="220"
              icon-color="#ff9900"
              title="确认修改密码吗？"
              @confirm="forceModifyPwd">
              <template #reference>
                <el-button slot="reference" type="primary">
                  <span>强制修改密码</span>
                </el-button>
              </template>
            </el-popconfirm>
            <span class="sleceted_tip"
              >已选<span class="num">{{ selectedNum }}</span
              >项</span
            >
            <span class="clean" @click="cleanSelected">清空</span>
          </div>
        </template>

        <template v-slot:filter_group>
          <div class="left-filter filter_list">
            <div class="filter_item">
              <span class="filter_title">上次访问时间</span>
              <el-date-picker
                v-model="filter.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="YYYY-MM-DD"
                style="width: 300px" />
            </div>
            <div class="filter_item">
              <span class="filter_title">活跃度</span>
              <el-select v-model="filter.active" placeholder="请选择" style="width: 300px">
                <el-option v-for="(item, index) in activeOptions" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="filter_item">
              <span class="filter_title">密码强度</span>
              <el-select v-model="filter.pwd_level" placeholder="请选择" style="width: 300px">
                <el-option v-for="(item, index) in pwdLevelList" :key="index" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="right-action apaas_button">
            <el-button type="primary" @click="filterAction"> 查询 </el-button>
            <el-button type="default" @click="filterClear"> 重置 </el-button>
          </div>
        </template>
      </bg-filter-group>
      <div class="table_container">
        <bg-table
          ref="accountTable"
          :headers="headers"
          :rows="tableRows"
          :stripe="true"
          select
          @selectAc="selectChange">
          <template v-slot:active="{ row }">
            <span
              class="active"
              :class="{
                active_weak: row.active === '低',
                active_middle: row.active === '中',
                active_heigh: row.active === '高',
              }"
              >{{ row.active }}</span
            >
          </template>
          <template v-slot:pwd_level="{ row }">
            <div class="pwd_level-sign">
              <span
                :class="{
                  pwd_level: true,
                  pwd_level_weak: row.pwd_level === '弱',
                  pwd_level_middle: row.pwd_level === '中',
                  pwd_level_heigh: row.pwd_level === '强',
                }">
                {{ row.pwd_level === "弱" ? row.pwd_level : "" }}</span
              >
              <span
                :class="{
                  pwd_level: true,
                  pwd_level_middle: row.pwd_level === '中',
                  pwd_level_heigh: row.pwd_level === '强',
                }"
                >{{ row.pwd_level === "中" ? row.pwd_level : "" }}</span
              >
              <span
                :class="{
                  pwd_level: true,
                  pwd_level_heigh: row.pwd_level === '强',
                }"
                >{{ row.pwd_level === "强" ? row.pwd_level : "" }}</span
              >
            </div>
          </template>
        </bg-table>
        <bg-pagination
          :page="filter.page"
          :size="filter.page_size"
          :total="filter.total"
          @change-page="changePage"
          @change-size="changeSize">
        </bg-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, computed, onBeforeMount } from "vue";
import { useStore } from "vuex";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
import { downloadBlob } from "@/services/helper.js";

const { getters } = useStore();

const userTypeList = computed(() => {
  const temp = getters.getUserTypeConfig || {};
  return Object.keys(temp).map((key) => ({
    label: temp[key],
    value: +key,
  }));
});
const accountTable = ref(null);
const state = reactive({
  filter: {
    search: "",
    time: [],
    active: 0,
    pwd_level: "",
    page: 1,
    page_size: 10,
    total: 0,
  },
  activeOptions: [
    { label: "全部", value: "" },
    { label: "低", value: 1 },
    { label: "中", value: 2 },
    { label: "高", value: 3 },
  ],
  pwdLevelList: [
    { label: "全部", value: "" },
    { label: "弱", value: 1 },
    { label: "中", value: 2 },
    { label: "强", value: 3 },
  ],

  headers: [
    {
      label: "账号",
      prop: "system_account",
      // minWidth: 280,
    },
    {
      label: "手机号",
      prop: "contact_phone",
      // minWidth: 360,
    },
    {
      label: "所属组织",
      prop: "name",
      // width: 120,
    },
    {
      label: "活跃度",
      prop: "active",
      // width: 120,
    },
    {
      label: "密码强度",
      prop: "pwd_level",
      width: 240,
    },
    {
      label: "密码使用时长（天）",
      prop: "pwd_is_used",
      width: 240,
    },
    {
      label: "创建时间",
      prop: "created_time",
      width: 240,
    },
  ],

  tableRows: [],
  //选中数量
  selectedNum: 0,
  actionRow: {},
  dialogDetail: false,
  cacheDialog: false,
});

const { filter, activeOptions, pwdLevelList, headers, tableRows, selectedNum } = toRefs(state);
//选择项发生变化
const selectChange = (params) => {
  state.selectedNum = params.allLength;
};
//导出
const exportFile = () => {
  let params = { ...state.filter };
  params.start_at = params.time ? params.time[0] || "" : "";
  params.end_at = params.time ? params.time[1] || "" : "";
  delete params.time;
  axios
    .get(`/v1/api/log/userAccountAudit/list/export`, {
      params,
      responseType: "blob",
    })
    .then((res) => {
      if (res.status === 200) {
        const type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
        downloadBlob(res.data, type);
      } else {
        ElMessage.error(res.statusText);
      }
    });
};

//强制修改密码
const forceModifyPwd = () => {
  const selectedObj = accountTable.value.dealSelectData();
  const selectedRows = Object.values(selectedObj);
  if (!selectedRows.length) return ElMessage.warning("请先选择修改项");
  const ids = selectedRows.map((item) => item.id);
  axios.post("/v1/api/user/resetPwd", { ids }).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success(res.data.msg);
      cleanSelected();
      getTableRows();
    } else {
      ElMessage.error(res.data.data);
    }
  });
};
//清空
const cleanSelected = () => {
  accountTable.value.clearTable();
};
const changeSearch = (val) => {
  state.filter.search = val;
  changePage(1);
};
const changePage = (page) => {
  state.filter.page = page;
  getTableRows();
};
const getTableRows = () => {
  let params = { ...state.filter };
  params.start_at = params.time ? params.time[0] || "" : "";
  params.end_at = params.time ? params.time[1] || "" : "";
  delete params.time;
  axios
    .get(`/v1/api/log/userAccountAudit/list`, {
      params,
    })
    .then((res) => {
      if (res.data.code == 200) {
        state.tableRows = res.data.data || [];
        state.filter.total = res.data.total;
      } else {
        ElMessage.error(res.data.data);
      }
    });
};
const filterAction = () => {
  changePage(1);
};
const changeSize = (size) => {
  state.filter.page_size = size;
  changePage(1);
};
const filterClear = () => {
  state.filter = {
    search: "",
    time: [],
    active: 0,
    pwd_level: "",
    page: 1,
    page_size: 10,
    total: 0,
  };
  changePage(1);
};

onBeforeMount(() => {
  getTableRows();
});
</script>

<style lang="scss" scoped>
.page_container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding: 0 24px;
  min-height: 100%;
  .main_container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-grow: 1;
    width: 100%;
    background-color: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
    border-radius: 6px;
    padding: 0 0 16px 0;
    margin-bottom: 16px;
    position: relative;
    .sleceted_tip {
      margin: 0 24px 0 40px;
      vertical-align: middle;
      font-size: 14px;
      color: #404a62;
      .num {
        margin: 0 3px 0 3px;
        font-weight: 600;
        color: #202531;
      }
    }
    .clean {
      vertical-align: middle;
      font-size: 14px;
      color: #3759be;
      cursor: pointer;
    }
    .filter-group {
      .left-filter {
        flex: 1;
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        .filter_item {
          display: flex;
          align-items: center;
          .filter_title {
            width: 84px;
            white-space: pre-wrap;
            font-weight: normal;
          }
        }
      }
      .right-action {
        width: 144px;
        padding-bottom: 16px;
        .el-button {
          width: 64px;
        }
      }
    }
    .table_container {
      padding: 0 16px;
      .el-table {
        flex: 1;
        :deep() td {
          padding: 9px 0 !important;
        }

        .active {
          display: inline-block;
          width: 48px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          font-size: 12px;
          border-radius: 3px;
          &.active_weak {
            color: #dd6955;
            background-color: #fcf0ee;
            border: solid 1px #eba599;
          }
          &.active_middle {
            color: #ea7d19;
            background-color: #fffae8;
            border: solid 1px #fac066;
          }
          &.active_heigh {
            color: #429e8a;
            background-color: #f1f9f7;
            border: solid 1px #9ad5c8;
          }
        }
        .pwd_level-sign {
          display: flex;
          align-items: center;
        }
        .pwd_level {
          display: inline-block;
          width: 40px;
          height: 14px;
          line-height: 14px;
          color: #fff;
          text-align: center;
          font-size: 12px;
          background-color: #dadee7;
          border-radius: 3px;
          &:not(:first-child) {
            margin-left: 4px;
          }
          &.pwd_level_weak {
            background-color: #dd6955;
          }
          &.pwd_level_middle {
            background-color: #ea7d19;
          }
          &.pwd_level_heigh {
            background-color: #429e8a;
          }
        }
      }
    }
  }
}
</style>
