<!--
 * @Author: your name
 * @Date: 2022-04-11 15:07:47
 * @LastEditTime: 2022-04-14 18:00:06
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/topChars/left.vue
-->
<template>
  <div class="charsCom all-flex-h">
    <div class="title">特殊用户</div>

    <div class="four all-flex-h">
      <div class="wrapper">
        <div class="top-wrapper flex" style="width: 320px">
          <div class="input-wrapper">
            <el-input
              style="width: 250px"
              v-model="queryParams.nickName"
              placeholder="点击输入用户名称"
              suffix-icon="el-icon-search"
              size="mini"
            />
          </div>
          <div class="enter">
            <el-button size="mini" @click="enter"
            ><span class="text">确认</span></el-button
            >
          </div>
          <div class="reset">
            <el-button size="mini" @click="reset">
              <span class="text">重置</span>
              <i class="el-icon-refresh el-icon--right"></i>
            </el-button>
          </div>
        </div>

        <div class="bottom all-flex-h" style="margin-top: 4px">
          <el-table
            :data="specialuserList"
            border
            style="width: 100%">
            <el-table-column
              prop="nickName"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="userType"
              label="类型" :formatter="userTypeFormat">
            </el-table-column>
            <el-table-column
              prop="conStartTime"
              label="开始时间 ">
            </el-table-column>
            <el-table-column
              prop="conEndTime"
              label="结束时间 ">
            </el-table-column>
          </el-table>
          <div class="page">
            <pagination
              :small="true"
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
              layout="prev, pager, next,total"
            />
          </div>
        </div>
      </div>


      </div>
    </div>
  </div>
</template>

<script>
  import { listSpecialuser } from "@/api/supervise/specialuser";
  export default {
  components: {
  },
    props:{
      annual: {
        type: String,
        default: 2025,
      },
      companyInfoId: {
        type: String,
        default: 23,
      },
    },
  data() {
    return {

      total:4,
      limit:2,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 4,
        enterpriseId:null,
        nickName: null
      },
      // 特殊用户管控表格数据
      specialuserList: [],
      arr: [],
    };
  },
    watch: {
      annual(newVal, oldVal) {
        //console.log(`Message changed from "${oldVal}" to "${newVal}"`);
        this.getList();
      },
      companyInfoId(newVal, oldVal){
        this.getList();
      }

    },
  created() {
    this.getDicts("t_special_user").then(response => {
      this.userTypeOptions = response.data;
  });
    this.getList();
  },
  methods: {
    enter(){
      this.queryParams.pageNum =1;
      this.getList();
    },
    reset(){
      this.queryParams.nickName=null;
      this.getList();
    },
    // 用户类型字典翻译
    userTypeFormat(row, column) {
      return this.selectDictLabel(this.userTypeOptions, row.userType);
    },
    //特殊用户
    getList(){
      this.queryParams.enterpriseId = this.companyInfoId;
      this.queryParams.annual = this.annual;
      listSpecialuser(this.queryParams).then(response => {
        this.specialuserList = response.rows;
        this.total = response.total;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.charsCom {
  width: 100%;
  height: 100%;
}
.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 15px;
}
.two {
  box-shadow: 0px 0px 3px 1px #dddddd;
  height: 28px;
  font-size: 14px;
  margin-bottom: 15px;
  > div {
    line-height: 28px;
    flex: 1;
    text-align: center;
    &.left {
      color: #1f8df3;
    }
    &.middle {
      flex: 1;
      color: #03c4f1;
    }
    &.right {
      color: #ffc337;
    }
  }
}
.three {
  font-size: 16px;
  margin-bottom: 10px;
  > div {
    flex: 1;
    line-height: 24px;
    text-align: center;
  }
}
.four {
  flex: 1;
  font-size: 14px;
  // 这个解决子元素overhidden失效问题
  min-height: 0;
  >.top {
    background: rgba(24, 144, 255, 0.1);
    height: 29px;
    line-height: 29px;
    > div {
      flex: 1;
      text-align: center;
    }
  }
  .scroll-wrapper {
    // font-size: 14px;
    flex: 1;
    // 这个解决子元素overhidden失效问题
    min-height: 0;
    // background: red;
    // overflow: hidden;
    // position:relative;
  }
}

::v-deep .el-table--medium td{
padding: 4px 0;
}
::v-deep .el-table--medium th{
  padding: 4px 0;
  height: 30px;
}
</style>
