<template>
  <div class="check">
    <form-option title="人员管理">
      <el-form :inline="true" :model="formData" ref="form" label-width="80px">
        <el-form-item label="人员名称:" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="操作类型:" prop="oper_type">
          <el-select v-model="formData.oper_type" placeholder="请选择">
            <el-option label="全部" value="null"></el-option>
            <el-option label="冻结" value="freeze"></el-option>
            <el-option label="解冻" value="unfreeze"></el-option>
            <el-option label="停用" value="disable"></el-option>
            <el-option label="启用" value="enable"></el-option>
          </el-select>
        </el-form-item>
        <el-button class="ml" icon="el-icon-refresh-right" @click="resetForm"
          >重置</el-button
        >
        <el-button type="primary" icon="el-icon-search" @click="handleQueryData"
          >查询</el-button
        >
      </el-form>
    </form-option>

    <div class="user-log-custom-table">
      <el-table :data="list" border v-loading="loading">
        <el-table-column prop="no" align="center" label="序号" width="60" />
        <el-table-column
          prop="name"
          show-overflow-tooltip
          label="人员名称"
          align="center"
          width="120"
        />
        <el-table-column
          prop="oper_type"
          label="操作类型"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.oper_type == 'freeze'" type="warning">
              冻结
            </el-tag>
            <el-tag v-else-if="scope.row.oper_type == 'unfreeze'">解冻</el-tag>
            <el-tag v-else-if="scope.row.oper_type == 'disable'" type="danger"
              >停用</el-tag
            >
            <el-tag v-else type="success">启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          show-overflow-tooltip
          label="操作时间"
          align="center"
          width="240"
        />
        <el-table-column
          prop="status_change_reason"
          label="操作原因"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="create_user_name"
          show-overflow-tooltip
          align="center"
          label="操作人"
          width="120"
        />
      </el-table>
      <Page
        :page="query.page"
        :size="query.size"
        :total="total"
        @pageChange="pageChange"
      ></Page>
    </div>
  </div>
</template>

<script>
import FormOption from "@/component/FormOption";
import { notEmpty, formatDate } from "@/utils/tool";
import { getUserStatusHis } from "@/api/user_status_his.js";

export default {
  components: {
    FormOption,
  },
  data() {
    return {
      formData: {
        name: null,
        oper_type: null,
      },
      query: {
        page: 1,
        size: 10,
        sort: "create_time desc",
      },
      total: 0,
      list: [],
      loading: false,
    };
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields();
      this.handleQuery();
    },
    handleQueryData() {
      this.query.page = 1;
      this.handleQuery();
    },
    handleQuery() {
      this.loading = true;
      let query = [];
      if (notEmpty(this.formData.name)) {
        query.push(`name==*${this.formData.name.trim()}*`);
      }
      if (notEmpty(this.formData.oper_type)) {
        query.push(`oper_type==${this.formData.oper_type}`);
      }
      this.query.query = query.join(";");
      console.log(this.query);
      getUserStatusHis(this.query).then((res) => {
        this.total = res.total || 0;
        const list = res.data || [];
        list.map((item, index) => {
          //首列自增序号
          item.no = (this.query.page - 1) * this.query.size + index + 1;

          //格式化记录创建时间
          let create_time = "";
          if (item.create_time) {
            create_time = formatDate(item.create_time, true);
          }
          item.create_time = create_time;

          //冻结需要在说明前加上原因字段，在说明后加上冻结结束时间，组合显示
          let oper_name = null;
          if ("freeze" == item.oper_type) {
            oper_name = "冻结";
          }
          if ("unfreeze" == item.oper_type) {
            oper_name = "解冻";
          }
          if ("disable" == item.oper_type) {
            oper_name = "禁用";
          }
          if ("enable" == item.oper_type) {
            oper_name = "启用";
          }
          item.status_change_reason =
            oper_name +
            "原因：" +
            item.status_change_reason +
            "。 说明: " +
            item.status_change_describe;
          if ("freeze" == item.oper_type) {
            item.status_change_reason =
              item.status_change_reason +
              "。 冻结至" +
              formatDate(item.status_end_time, true);
          }

          if ("系统解冻" == item.status_change_reason) {
            item.create_user_name = "系统解冻";
          }
        });
        this.list = list;
        this.loading = false;
      });
    },
    pageChange(page, size) {
      this.query.page = page;
      this.query.size = size;
      this.handleQuery();
    },
  },
  computed: {
    pageTotal() {
      const page = Math.ceil(this.total / this.query.size);
      return page > 0 ? page : 1;
    },
  },
  mounted() {
    this.handleQuery();
  },
};
</script>

<style lang="scss">
.check {
  .option .el-select .el-input__inner {
    padding-right: 15px;
  }
}
.user-cascader {
  .el-input__inner {
    width: 300px !important;
  }
}

.el-tooltip__popper {
  max-width: 800px;
}
</style>

<style lang="scss" scoped>
.action {
  display: flex;
  &-item:not(:first-child) {
    margin-left: 10px;
  }
}
</style>