<template>
    <div>
      <!--搜索区-->
      <el-button
        type="primary"
        icon="el-icon-plus"
        class="margin-left"
        @click="addOrUpdate"
      >添加
      </el-button
      >

      <template>
        <el-select
          v-model="page.data.accountId"
          placeholder="请选择账号"
          class="margin-left"
        >
          <el-option
            v-for="item in user_list"
            :key="item.adminId"
            :label="item.username"
            :value="item.adminId"
          >
          </el-option>
        </el-select>
        <el-select
          filterable
          clearable
          v-model="page.data.status"
          placeholder="请选择启用状态"
          class="margin-left input"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <el-button
          type="primary"
          icon="el-icon-search"
          class="margin-left"
          @click="getList"
        >搜索
        </el-button
        >
      </template>
      <!-- 表格 -->
      <el-table
        class="table"
        ref="table_form"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="序号" align="center" width="80px" type="index"/>
        <el-table-column label="账号名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.account | matchNull }}
          </template>
        </el-table-column>
        <el-table-column label="停用/启用" align="center">
          <template slot-scope="scope">
            <el-tag type="warning" effect="dark" v-if="scope.row.status === 0 ">停用</el-tag>
            <el-tag type="success" effect="dark" v-else-if="scope.row.status === 1 ">启用</el-tag>
            <el-tag type="info" effect="plain" v-else >未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime | matchNull }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作区" width="200">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="deleteUser(scope.row.id)"
            >删除
            </el-button
            >
            <el-button type="primary" size="small" @click="addOrUpdate(scope.row)"
            >修改
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        :total="total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getList"
      />
      <!-- 弹出框 -->
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px">
        <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="120px"
          label-position="left"
        >
          <el-form-item label="绑定账号" prop="adminId">
            <el-select
              :disabled="dialogTitle === '修改'"
              filterable
              clearable
              v-model="form.adminId"
              placeholder="请选择账号"
            >
              <el-option
                v-for="item in user_list"
                :key="item.adminId"
                :label="item.username"
                :value="item.adminId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="停用/启用" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="0">停用</el-radio>
              <el-radio :label="1">启用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="查询密码" prop="password">
            <el-input type="password"
                      show-word-limit
                      show-password
                      v-model.trim="form.password"/>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false"> 取消</el-button>
          <el-button
            type="primary"
            @click="dialogTitle === '添加' ? add() : doUpdate()"
          >
            确定
          </el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    import Pagination from "@/components/Pagination/index";
    import {addOrUpdateCheckContent, deleteCheckContent, getCheckContentList} from "@/api/old_api_pengwenbing";
    import {getUserListSearch} from "@/api/user_manage";

    export default {
      name: "pass_records_search",
      filters: {
        matchNull(str) {
          if (!str) {
            return "暂无";
          } else {
            return str;
          }
        },
      },
      components: {
        Pagination
      },
      data() {
        return {
          // 加载状态
          listLoading: true,
          // 表格
          list: [],
          dialogVisible: false,
          // 弹出框标题
          dialogTitle: "",
          // 添加的参数
          form: {
            adminId: null,
            status: 1,
            password: null
          },
          formCopy: {},
          //搜索停用启用
          statusList: [
            {value: "0", label: "停用"},
            {value: "1", label: "启用"},
          ],
          // 分页参数
          page: {
            data: {
              adminId: null,
              status: null,
              type: null,
            },
            pageNum: 1,
            pageSize: 10,
          },
          total: 0, // 验证规则
          rules: {
            adminId: [{required: true, message: "请选择账号", trigger: "blur"}],
            password: [{required: true, message: "请设置密码", trigger: "blur"}],
            status: [{required: true, message: "请选择是否启用", trigger: "blur"}],
          },
          // 账号
          user_list: []
        };
      },
      methods: {
        // 列表数据
        async getList() {
          this.listLoading = true;
          const a = await getCheckContentList(this.page);
          const {list, total} = a.data;
          this.list = list;
          this.total = total;
          this.listLoading = false;
        },
        // 账号列表
        getUserListSearch() {
          getUserListSearch().then(res => {
            this.user_list = res.data
          })
        },
        // 删除
        deleteUser(id) {
          this.$confirm("确定要删除此条信息吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          }).then(() => {
            deleteCheckContent(id).then((res) => {
              this.getList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
          });
        },
        // 添加或修改
        addOrUpdate(row) {
          this.dialogVisible = true;
          if (row.id) {
            this.dialogTitle = "修改";
            Object.assign(this.form, row)
          } else {
            this.dialogTitle = "添加";
            this.form = JSON.parse(JSON.stringify(this.formCopy));
          }
          this.$nextTick(() => {
            this.$refs["form"].clearValidate();
          });
        },
        // 确认新增
        add() {
          this.$refs["form"].validate((valid) => {
            if (valid) {
              addOrUpdateCheckContent(this.form).then((res) => {
                this.dialogVisible = false;
                this.getList();
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
              });
            }
          });
        },
        // 确认修改
        doUpdate() {
          this.$refs["form"].validate((valid) => {
            if (valid) {
              addOrUpdateCheckContent(this.form).then((res) => {
                this.dialogVisible = false;
                this.getList();
                this.$message({
                  type: "success",
                  message: "编辑成功!",
                });
              });
            }
          });
        },
      },
      created() {
        this.getList();
        this.getUserListSearch()
        this.formCopy = JSON.parse(JSON.stringify(this.form))
      },
    }
</script>

<style scoped>
  .table {
    margin-top: 15px;
  }

  .flex {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .margin-left {
    margin: 10px 0 0 10px;
  }

  .input {
    width: 200px;
  }
</style>
