<template>
  <div class="auth">
    <p-card title="数据权限管理">
      <span slot="extra">
        <p-button type="primary" @click="handleAdd"> 新增 </p-button>
      </span>
      <p-form
        layout="inline"
        :form="form"
        class="plg-form"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        @submit="handleSubmit"
      >
        <p-form-item label="权限名称" :span="8">
          <p-input v-decorator="['authName']" placeholder="请输入权限名称" />
        </p-form-item>
        <p-button type="primary" html-type="submit" style="margin-left: 10px; margin-top: 4px"> 查询 </p-button>
        <p-button :style="{ marginLeft: '8px' }" @click="handleReset" style="margin-top: 4px"> 重置 </p-button>
      </p-form>
      <p-spin size="small" :spinning="spinning">
        <p-table
          row-key="id"
          :columns="columns"
          @change="changePagination"
          :pagination="pagination"
          bordered
          :rowSelectType="false"
          :data-source="dataSource"
        >
          <span slot="age5" slot-scope="text, record">
            {{ text == '1' ? '启用' : '停用' }}
            <!-- <p-switch
              checked-children="开"
              un-checked-children="关"
              @change="changeSwitch(text, record)"
              :default-checked="text == '1' ? true : false"
            /> -->
          </span>
          <span slot="action" slot-scope="text, record">
            <a @click="detialClick(record)" style="margin-right: 10px" href="javascript:;">详情</a>
            <a @click="changeClick(record)" style="margin-right: 10px" href="javascript:;">修改</a>
            <a @click="delFunction(record)" style="margin-right: 10px" href="javascript:;">删除</a>
            <a @click="authClick(record)" href="javascript:;">数据权限</a>
          </span>
        </p-table>
      </p-spin>
    </p-card>
    <plgDetial :visibleDetial="visibleDetial" :setRecord="getRecord" @requestDetial="requestDetial" />
    <changeDetial
      :visibleDetial="visibleChange"
      :setRecord="getRecord"
      @successChange="successChange"
      @requestChange="requestChange"
    />
    <sourceAuth
      :visibleDetial="visibleAuth"
      :setRecord="getRecord"
      :title="titleModal"
      @successAuth="successAuth"
      @requestAuth="requestAuth"
    />
    <addAuth :visibleAdds.sync="visibleAdd" @requestAdd="requestAdd" />
  </div>
</template>
<script>
// const items = ;
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    title: '权限名称',
    // slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '是否启用',
    dataIndex: 'enabled',
    key: 'enabled',
    scopedSlots: { customRender: 'age5' }
  },
  {
    title: '权限描述',
    dataIndex: 'remark',
    key: 'remark',
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 200,
    scopedSlots: { customRender: 'action' }
  }
]
import plgDetial from './components/detial.vue'
import changeDetial from './components/changeDetial.vue'
import sourceAuth from './components/sourceAuth.vue'
import addAuth from './components/addAuth.vue'
import { listDataAuthHdr, deleteDataAuthHdr, updateDataAuthHdr } from './api/addAuth.js'
export default {
  data() {
    return {
      columns,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      visibleDetial: false, // 详情弹窗
      visibleChange: false, // 修改弹窗
      visibleAuth: false, // 数据权限弹窗
      visibleAdd: false, // 新增权限弹窗
      authName: '', // 权限名称
      getRecord: {},
      spinning: false,
      titleModal: '',
      dataSource: [], // 数据
      pagination: {
        total: 0,
        pageSize: 10, //每页中显示10条数据
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20', '50', '100'], //每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
      }
    }
  },
  components: {
    plgDetial,
    changeDetial,
    sourceAuth,
    addAuth
  },
  created() {
    this.getlistDataAuthHdr() // 根据权限名称查询汇总权限列表
  },
  methods: {
    handleAdd() {
      // 新增
      this.visibleAdd = true
    },
    getlistDataAuthHdr() {
      // 查询
      let params = {
        name: this.authName,
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize
      }
      this.spinning = true
      listDataAuthHdr(params).then(res => {
        this.spinning = false
        if (res.success) {
          console.log(res)
          this.pagination.total = Number(res.data.totalCount)
          this.dataSource = res.data.list
        } else {
          this.$message.warn(res.message)
        }
      })
    },
    handleReset() {
      this.form.resetFields()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.authName = values.authName
          this.getlistDataAuthHdr()
        }
      })
    },
    changeSwitch(text, record) {
      //是否启用
      this.setUpdateDataAuthHdr(record, text)
    },
    requestDetial(val) {
      // 详情返回
      this.visibleDetial = val
    },
    requestAdd(val) {
      // 新增自定义事件返回值
      console.log('新增自定义事件返回：', val)
    },
    requestChange(val) {
      // 修改返回
      this.visibleChange = val
    },
    successChange(val) {
      // 修改成功
      this.visibleChange = val
      this.getlistDataAuthHdr()
    },
    requestAuth(val) {
      // 权限返回
      this.visibleAuth = val
    },
    successAuth(val) {
      this.visibleAuth = val
      this.getlistDataAuthHdr()
    },
    detialClick(record) {
      // 详情
      this.visibleDetial = true
      this.getRecord = record
    },
    changeClick(record) {
      // 修改
      this.visibleChange = true
      this.getRecord = record
    },
    delFunction(record) {
      // 删除
      console.log(record, '删除删除删除')
      // this.com
      let that = this
      this.$confirm({
        title: '是否删除?',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          that.deleteAuthHdr(record)
        }
      })
    },
    deleteAuthHdr(record) {
      // 删除权限
      let params = [
        {
          id: record.id
        }
      ]
      deleteDataAuthHdr(params).then(res => {
        if (res.success) {
          this.getlistDataAuthHdr()
          this.$message.success('权限删除成功！')
        } else {
          this.$message.warn(res.message)
        }
      })
    },
    setUpdateDataAuthHdr(record, text) {
      // 修改
      let params = {
        id: record.id,
        enabled: record.enabled ? 0 : 1,
        name: record.name,
        remark: record.remark
      }
      updateDataAuthHdr(params).then(res => {
        if (res.success) {
          this.confirmLoading = false
          record.age5 = !text
          this.getlistDataAuthHdr()
          // this.$emit('successChange', false)
        } else {
          this.$message.warn(res.message)
        }
      })
    },
    authClick(record) {
      // 数据权限
      console.log(record)
      this.getRecord = record
      this.titleModal = `[${record.name}]分配数据权限`
      this.visibleAuth = true
    },
    changePagination(pagination, filters, sorter) {
      // 分页变化
      console.log(pagination, filters, sorter, '分页变化分页变化')
      this.pagination = pagination
      this.getlistDataAuthHdr()
    }
  }
}
</script>
<style lang="less" scoped>
.auth {
  background: #fff;
}
.plg-form {
  padding: 0 0 18px 0;
  background: #fff;
}
</style>
