<template>
  <div class="root_container">
    <div class="header">
      <div class="form_container">
        <el-form
          :inline="true"
          :model="formData"
          class="demo-form-inline"
        >
          <el-form-item label="筛选条件">
            <el-input
              v-model="formData.title"
              placeholder="请输入标题"
              @input="onContentChange(1)"
              @change="onDoSearch"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input
              v-model="formData.userId"
              @input="onContentChange(2)"
              @change="onDoSearch"
              placeholder="请输入用户ID"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              @change="onDoSearch"
              v-model="formData.status"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onDoSearch"
            >查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="pager">
        <span style="color:#999999;display:inline-block;padding-top:9px">共 {{totalCount}} 条数据，每页 {{pageSize}} 条</span>
        <div
          class="pager_item"
          style="display:inline-block"
        >
          <el-pagination
            background
            :page-size="pageSize"
            @current-change="pageChange"
            layout="prev, pager, next"
            :total="totalCount"
            :current-page="currentPage"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="table_container">
      <el-table
        :data="tableData"
        :height="tableHeight"
        border
      >
        <el-table-column
          prop="index"
          label=""
          width="60"
        >
        </el-table-column>
        <el-table-column
          prop="user_id"
          label="用户ID"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="unique_id"
          label="设备ID"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="title"
          label="异常标题"
        >
        </el-table-column>
        <el-table-column
          prop="content"
          label="异常内容"
        >
        </el-table-column>

        <el-table-column
          prop="add_time"
          label="创建时间"
          width="170"
        >
        </el-table-column>
        <el-table-column
          label="是否验证/处理"
          width="120"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              @change="onEditConfig(scope.row.excess_id,scope.row.status)"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getExcessWarningList,excessHandle } from "./../../api/log/excess";
import { Message } from "element-ui";
export default {
  data() {
    return {
      formData: {
        title: "",
        userId: "",
        status: "0",
      },
      tableData: [],

      // 选择项
      options: [
        {
          value: "0",
          label: "所有数据",
        },
        {
          value: "1",
          label: "未经验证",
        },
        {
          value: "2",
          label: "已经验证",
        },
      ],

      //记录高度
      tableHeight: "",

      //分页数据
      totalCount: 0,
      currentPage: 1,
      pageSize: 20,

      //新增用户
      showAddUserDialog: false,

      destroyOnClose: true,
    };
  },
  watch: {
    "$store.state.screenHeight": function (val) {
      this.tableHeight = val - 98 - 50;
    },
  },
  mounted: function () {
    //获取数据
    this.obtainUserList();

    this.tableHeight = this.$store.state.screenHeight - 98 - 50;
  },
  methods: {
    // page, size, userId, title, status,appId
    //获取列表信息
    obtainUserList() {
      getExcessWarningList(
        this.currentPage,
        this.pageSize,
        this.formData.userId,
        this.formData.title,
        this.formData.status,
        this.$route.query.app_id
      )
        .then((result) => {
          this.tableData = result.data.data.list;

          this.totalCount = result.data.data.total;
          this.currentPage = result.data.data.currentPage;
          console.log(result);
        })
        .catch((err) => {});
    },
    //点击页面切换
    pageChange(page) {
      this.currentPage = page;
      this.obtainUserList();
    },
    //搜索数据
    onDoSearch() {
      this.currentPage = 1;
      this.obtainUserList();
    },
    //内容改变
    onContentChange(type) {
      console.log(type);
      if (type == 2 && !this.formData.userId) {
        this.onDoSearch();
      }

      if (type == 1 && !this.formData.backup) {
        this.onDoSearch();
      }
    },
    //更新配置
    onEditConfig(excess_id,status) {
      //excessId, status
      excessHandle(excess_id,status?"1":"0")
        .then((result) => {
          Message.success("修改成功");
        })
        .catch((err) => {});
    },
    //删除用户
    onDeleteConfig(data) {
      this.$confirm("此操作将删除已配置的用户，且不可逆?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUserConfig(data.app_id, data.user_id)
            .then((result) => {
              Message.success("删除成功");

              this.obtainUserList();
            })
            .catch((err) => {});
        })
        .catch(() => {});
    },
    //点击添加
    addUserBtn() {
      this.showAddUserDialog = true;
    },
    //真正的添加用户
    onAddUser() {
      if (!this.formData.add_user_id) {
        Message.warning("请输入用户ID");
        return;
      }
      addUserConfig(
        this.$route.query.pro_id,
        this.formData.add_user_id,
        this.formData.add_backup,
        this.formData.log_cache_day,
        this.formData.add_exception_count_limit,
        this.formData.add_page_statistics ? "1" : "0",
        this.formData.add_launch_statistics ? "1" : "0",
        this.formData.add_device_statistics ? "1" : "0",
        this.formData.add_upload ? "1" : "0",
        this.formData.add_online_debug ? "1" : "0"
      )
        .then((result) => {
          Message.success("添加成功");
          this.showAddUserDialog = false;

          //重新拉取列表数据
          this.obtainUserList();
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.root_container {
  position: relative;
}
.header {
  margin-left: 18px;
  margin-top: 18px;
  position: relative;
}
.table_container {
  margin-left: 18px;
  margin-right: 18px;
}
.header_contianer {
  top: 0;
  position: absolute;
  right: 18px;
}
.pager {
  position: absolute;
  top: 6px;
  right: 18px;
  display: flex;
}
.dialog_container {
}

.dialog_footer {
  display: flex;
  text-align: right;
  padding-bottom: 18px;
}

.dialog_footer .dialog_footer_item {
  margin-left: auto;
  padding-right: 18px;
}

.switch_tips {
  padding-left: 18px;
  padding-right: 10px;
  display: inline-block;
}
</style>