<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">校验规则：</span>
        <el-input v-model="query.ruler" placeholder="" class="filter-item input_item"  />
      </div>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleSearch">
        {{ $t('table.search') }}
      </el-button>

    </div>
    <div class="wrapper_table">
      <el-table
        :data="searchData"
        fit
        stripe
        highlight-current-row
        style="width: 100%;"
        :header-cell-class-name="headerStyle"
        :max-height="tableHeight"
      >
        <el-table-column :label="$t('password.rule')"  align="left" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column :label="$t('password.remark')" align="left" prop="desc"></el-table-column>
        <el-table-column :label="$t('password.openClose')"  align="left">
          <template slot-scope="{row}">
            <el-switch v-if="permission.includes('pwd_enable_or_close')" v-model="row.status" :class="row.status ? 'open':'close'" @change="statusChange(row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="value" :label="$t('password.set')"  align="left">
          <template slot-scope="{ row }" v-if="permission.includes('pwd_set')">
            <div class="setInfo">
              <div class="label" v-if="row.code === 'frequency'">密码周期</div>
              <div class="label" v-if="row.code === 'allowableTimes'">逾期登录次数</div>
              <el-input
                v-model="row.value"
                v-if="row.code === 'frequency' || row.code === 'allowableTimes'"
                @input="row.value = row.value.replace(/[^\d]/g,'')"
                @blur="valueChange(row)"></el-input>
            </div>
            <div class="setInfo" v-if="row.code === 'pwdLength'">
              <div class="label" >最少长度(字节)</div>
              <el-input
                v-model="row.value"
                @input="row.value = row.value.replace(/[^\d]/g,'')"
                @blur="valueChange(row)"
                ></el-input>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import http from '@/api/http'
import waves from '@/directive/waves'
export default {
  name: '',
  directives: { waves },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      query:{
        ruler:''
      },
      tableData:[],
      searchData:[],
      tableHeight: 0,
      multipleSelection:[],
    }
  },
  created() {
    this.getData()

  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 250
    })
  },
  methods: {
    handleSearch(){
      if(this.query.ruler){
         this.searchData = this.tableData.filter(item=>{
          return item.name.includes(this.query.ruler)
        })
      } else {
       this.searchData = [...this.tableData]
      }
    },
    getData() {
      http.post(`/sys/pwdStrategy/list`,{}).then((res)=>{
          this.searchData = this.tableData = res.data;
          this.tableData.forEach(item=>{
            item.status = item.status === '1' ? true : false
            item.desc = item.desc ? item.desc : '-'
          })
      }).catch(err=>{});
    },

    // 状态修改
     statusChange(row){
      let status = row.status ? '1' :'0'
      let params = {
        code: row.code,
        status: status,
        strategyType: row.strategyType
      }
      http.post('/sys/pwdStrategy/enableStrategy',params).then(res=>{
        this.$message.success(res.msg.info)
      }).catch(err=>{})
    },

  // 设置密码策略参数值
    valueChange( row ){
      if(row.code === 'pwdLength'){
        let value = parseInt(row.value)
        if(value > 8 || value < 6){
          this.$message.error('最少长度(字节)只能在6-8之间，请重新输入')
          row.value = ''
          return false
        }
      }
      let params = {
        code: row.code,
        strategyType: row.strategyType,
        value: row.value
      }
      http.post('/sys/pwdStrategy/setStrategyValue',params).then(res=>{
        this.$message.success(res.msg.info)
      }).catch(err=>{})
    },

    headerStyle() {
      return 'tableStyle'
    },
  }
}
</script>
<style scoped lang="scss">
  ::v-deep .open{
    .el-switch__core{
      background-color:#95CF3A !important;
      border-color: #95CF3A !important;
    }
  }
  ::v-deep  .close{
    .el-switch__core{
      background-color:#B0BECF !important;
      border-color: #B0BECF !important;
    }
  }
  .setInfo{
    display: flex;
    flex-direction: row;
    align-items: center;
    .label{
      width: 90px;
      color: #212121;
      font-size: 13px;
    }
    ::v-deep .el-input{
      width: 50%;
      border-radius: 2px;
      .el-input__inner{
        box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.4) inset;
      }
    }
  }
</style>
