<template>
  <div class="ContainerBox">
    <!-- 按钮区域 -->
    <section class="buttonBox">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="12">
          <div>
            <el-button type="primary" @click="Added">新增</el-button>
            <el-button type="primary" @click="Refresh">刷新</el-button>
            <el-button type="primary" @click="toChangeLogs">跳转</el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="rightBox">
            <el-input
              v-model="params.keyword"
              placeholder="输入mapKey/note"
              clearable
              style="width: 45%"
            />
            <!-- <el-button type="primary" @click="search">查询</el-button>                 -->
          </div>
        </el-col>
      </el-row>
    </section>
    <section class="contentBox">
      <el-table
        :data="tableDataAll"
        ref="districtTable"
        max-height="800"
        default-expand-all
        row-key="id"
      >
        <el-table-column
          v-for="(item, index) in tableColumn"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          v-if="item.show"
        >
          <template slot-scope="scope">
            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" min-width="180">
          <template slot="header" slot-scope="scope">
            <span class="columnHeader">
              <strong>操作</strong>
            </span>
          </template>
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="primaryColor"
              @click="editor(scope.row)"
              >编辑</el-button
            >
            <!-- <el-button type="text" size="small" class="primaryColor" @click="checkdetails(scope.row)">查看</el-button> -->
            <!--   <el-button @click="resetPWDStaff(scope.row)" type="text" size="small" class="primaryColor" v-if="domainAdmin||permissionsStr.indexOf('ResetPwd')>-1">重置密码</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页页签 -->
      <!-- <pages
        :total='params.total'
        :currentPage.sync='params.pageIndex'
        :pageSize='params.pageSize'
        @handleCurrentChangeSub="handleCurrentChange"
        @handleSizeChangeSub="handleSizeChange"
    ></pages> -->
    </section>
    <!-- 详情 -->
    <!-- <Checkdetails :showdialog.sync="showdialog"  ref="popChildren"></Checkdetails> -->
    <Added
      :Addeddialog.sync="Addeddialog"
      @refurlist="refurlist"
      ref="Children"
    ></Added>
    <Editor
      :showdialog.sync="showdialog"
      @refurlist="refurlist"
      ref="popChildren"
    ></Editor>
  </div>
</template>
<script>
import { getChangeMappingApi } from "@/api/staffApi.js";
// import Checkdetails from './components/checkdetails.vue'
import Editor from "./components/Editordialog.vue";
import Added from "./components/Added.vue";
export default {
  name: "QueryList",
  data() {
    return {
      tableColumn: [
        { prop: "id", label: "id", width: "100", show: true, version: 5 },
        {
          prop: "mapKey",
          label: "选择器",
          width: "300",
          show: true,
          version: 5,
        },
        { prop: "note", label: "业务描述", width: "500", show: true, version: 5 },
        {
          prop: "online",
          label: "启用",
          width: "200",
          show: true,
          version: 5,
        },
      ],
      tableData: [],
      showdialog: false,
      Addeddialog: false,
      id: "",
      params: { keyword: "" },
    };
  },
  components: { Editor, Added },
  mounted() {
        if(localStorage.getItem("bcx-allowed")==null || localStorage.getItem("token")==null){
                  window.location="/";
            return;
        }
    this.getChangeMapping();
  },
  computed: {
    tableDataAll() {
      let search = this.params.keyword;
      if (search) {
        return this.tableData.filter((item) => {
          return Object.keys(item).some((key) => {
            return String(item[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
  methods: {
    getChangeMapping() {
      getChangeMappingApi().then((res) => {
        console.log(res);
        if (res && res.length > 0) {
          this.tableData = res;
        }
      });
    },
    // checkdetails(e){
    //     console.log(e)
    //     this.$refs.popChildren.getChangeMappingDetails(e.id);
    //     this.showdialog = true
    // },
    editor(e) {
      console.log(e);
      let params = JSON.stringify(e);
      this.$refs.popChildren.initialization(params);
      this.showdialog = true;
    },
    Refresh() {
      this.getChangeMapping();
    },
    Added() {
      this.Addeddialog = true;
      this.$refs.Children.initialization();
    },
    toChangeLogs() {
      this.$router.push("ChangeLogs");
    },
    refurlist() {
      //弹窗后刷新列表
      this.getChangeMapping(); //表格列表
    },
  },
};
</script>
<style lang="scss">
.ContainerBox {
  .remarkBox {
    .remarkInfo {
      background: #fafafa;
      color: #666666;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      line-height: 30px;
      padding: 10px;
      display: flex;
      .el-icon-flag {
        margin-top: 9px;
        color: #ffc108;
        margin-right: 10px;
      }
    }
  }
  .rightBox {
    display: flex;
    justify-content: flex-end;
    .el-input {
      margin-right: 10px;
    }
  }
  .HighSearchBox {
    margin-top: 15px;
  }
  .primaryColor {
    color: #108ee9;
  }
  .dangerColor {
    color: red;
  }
  .bluelink {
    color: #409eff;
  }
  .TableSelectBox {
    display: flex;
    background: #e6f3fc;
    color: #666666;
    border: 1px solid #d4f0fc;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 0;
    span {
      line-height: 20px;
      i {
        margin-left: 5px;
        margin-right: 5px;
        color: #2e8ad7;
      }
    }
  }
}
</style>
