<template>
  <a-drawer title="数据权限规则" :width="drawerWidth" @close="onClose" :visible="visible">
    <!-- 抽屉内容的border -->
    <div
      :style="{
        padding: '10px',
        border: '1px solid #e9e9e9',
        background: '#fff',
      }"
    >
      <div class="table-page-search-wrapper">
        <!-- <a-form @keyup.enter.native="searchQuery">
          <a-row :gutter="12">
            <a-col :md="8" :sm="8">
              <a-form-item label="规则名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14, offset: 1 }">
                <a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-item label="规则值" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14, offset: 1 }">
                <a-input placeholder="请输入规则值" v-model="queryParam.ruleValue"></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="7" :sm="8">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
          <a-row>
            <a-col :md="24" :sm="24">
              <a-button style="margin-bottom: 10px" @click="addPermissionRule" type="primary" icon="plus"
                >添加</a-button
              >
            </a-col>
          </a-row>
        </a-form> -->
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper search_box">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item label="规则名称" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14, offset: 1 }">
                  <a-input placeholder="请输入规则名称" v-model="queryParam.ruleName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="9">
                <div class="for_item2">
                  <a-form-item label="规则值" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14, offset: 1 }">
                    <a-input-search
                      placeholder="请输入规则值"
                      size="large"
                      v-model="queryParam.ruleValue"
                      @search="searchQuery"
                    >
                      <a-button slot="enterButton" class="searchBut">搜索</a-button>
                    </a-input-search>
                    <!-- </a-input-search> -->
                  </a-form-item>
                </div>
              </a-col>
              <a-col :span="2">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button @click="searchReset" class="resetBut">重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 查询区域-END -->
        <a-row :gutter="15" type="flex" justify="space-between" align="middle">
          <a-col> </a-col>
          <a-col>
            <div class="table-operator">
              <a-button style="margin-bottom: 10px" @click="addPermissionRule" type="primary" icon="plus"
                >添加</a-button
              >
            </div>
          </a-col>
        </a-row>
        <a-table
          ref="table"
          rowKey="id"
          size="middle"
          :columns="columns"
          :dataSource="dataSource"
          :loading="loading"
          :rowClassName="getRowClassname"
        >
          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)"> <a-icon type="edit" />编辑 </a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </a-table>
      </div>
    </div>
    <permission-data-rule-modal @ok="modalFormOk" ref="modalForm"></permission-data-rule-modal>
  </a-drawer>
</template>
<script>
import { getPermissionRuleList, queryPermissionRule } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import PermissionDataRuleModal from './modules/PermissionDataRuleModal'

const columns = [
  {
    title: '规则名称',
    dataIndex: 'ruleName',
    key: 'ruleName',
  },
  {
    title: '规则字段',
    dataIndex: 'ruleColumn',
    key: 'ruleColumn',
  },
  {
    title: '规则值',
    dataIndex: 'ruleValue',
    key: 'ruleValue',
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
  },
]
export default {
  name: 'PermissionDataRuleList',
  mixins: [JeecgListMixin],
  components: {
    PermissionDataRuleModal,
  },
  data() {
    return {
      queryParam: {},
      drawerWidth: 650,
      columns: columns,
      permId: '',
      visible: false,
      form: this.$form.createForm(this),
      loading: false,
      url: {
        list: '/sys/permission/getPermRuleListByPermId',
        delete: '/sys/permission/deletePermissionRule',
      },
    }
  },
  created() {
    this.resetScreenSize()
  },
  methods: {
    loadData() {
      //20190908 scott for: 首次进入菜单列表的时候，不加载权限列表
      if (!this.permId) {
        return
      }
      let that = this
      this.dataSource = []
      var params = this.getQueryParams() //查询条件
      getPermissionRuleList(params).then((res) => {
        if (res.success) {
          that.dataSource = res.result
        }
      })
    },
    edit(record) {
      if (record.id) {
        this.visible = true
        this.permId = record.id
      }
      this.queryParam = {}
      this.queryParam.permissionId = record.id
      this.visible = true
      this.loadData()
      this.resetScreenSize()
    },
    addPermissionRule() {
      this.$refs.modalForm.add(this.permId)
      this.$refs.modalForm.title = '新增'
    },
    searchQuery() {
      var params = this.getQueryParams()
      params.permissionId = this.permId
      queryPermissionRule(params).then((res) => {
        if (res.success) {
          this.dataSource = res.result
        }
      })
    },
    searchReset() {
      this.queryParam = {}
      this.queryParam.permissionId = this.permId
      this.loadData(1)
    },
    onClose() {
      this.visible = false
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 650
      }
    },
    getRowClassname(record) {
      if (record.status != 1) {
        return 'data-rule-invalid'
      }
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/shaDow.less';
@import '~@assets/less/tableCommon.less';
// 搜索框
.search_box {
  ::v-deep .ant-input-group .ant-input {
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    border-radius: 2px;
  }

  .searchBut {
    
    border-radius: 0px 2px 2px 0px;
    opacity: 1;
    

    height: 38px;
    line-height: 38px;
    font-size: 14px;
  }

  .resetBut {
    width: 60px;
    height: 38px;
    line-height: 38px;
    background: #dbdbdb;
    border-radius: 2px;
    color: #000;
    opacity: 1;
    padding: 0;
    border: 1px solid #b6b6b6;
  }
}
// 操作按钮
.table-operator {
  .ant-btn {
    width: 68px;
    height: 38px;
    line-height: 38px;
    
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    
    font-size: 14px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
    font-weight: 400;
    
    margin: 0 16px 8px 0;
    padding: 0;
  }
}
.myPagination {
  margin-top: 40px;
  display: flex;
  justify-content: end;

  ::v-deep .el-pagination {
    font-weight: 600;

    .btn-sure {
      background: #dbdbdb;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #b6b6b6;
      padding: 0;
      color: #000;
      margin: 0 20px 0 10px;
      width: 50px;

      // &:hover {
      //   // background: none;
      // }

      // &:focus {
      //   // background: none;
      // }
    }

    .el-select .el-input .el-input__inner {
      color: #000;
      font-size: 14px;
      padding-right: 17px;
      font-weight: 400;
      border-radius: 2px;
    }

    .el-pager li {
      font-size: 16px;
      color: #888888;
      width: 34px;

      &:hover {
        opacity: 0.9;
      }
    }

    .el-pagination span:not([class*='suffix']) {
      font-size: 14px;
      color: #888888;
    }

    .el-pager li:not(.disabled).active {
      color: #fff;
    }
  }

  .ant-pagination {
    color: #888888;
  }

  ::v-deep .ant-select-selection--single {
    height: 28px !important;
  }

  ::v-deep .ant-select-selection__rendered {
    line-height: 28px !important;
  }

  ::v-deep .ant-pagination.mini .ant-pagination-options-quick-jumper input {
    height: 28px;
  }

  ::v-deep .ant-pagination.mini .ant-pagination-item {
    font-size: 16px;
    height: 28px;
    line-height: 28px;
    width: 34px;
  }
}

::v-deep ::-webkit-scrollbar-thumb {
  
  border-radius: 9px 9px 9px 9px;
}
.action a {
  
}
</style>