<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="报表名称">
              <a-input placeholder="请输入报表名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :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-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="addParams(record)">绑定</a>

          <a-divider type="vertical" />
          <a @click="deleteParams(record)">解绑</a>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <uReportFile-modal ref="modalForm" @ok="modalFormOk"></uReportFile-modal>

    <!--  查看成员,接触绑定 -->
    <a-modal title="解除绑定" v-model="visible" @ok="handleOk" width="800px" class="close-account-my-project">
      <div style="display:flex;line-height:50px;flex-wrap: wrap;">
        <div style="width:25%;text-align:center;" v-for="(item, index) of memberList" :key="index">
          <a-tag color="#2db7f5" @close="log(item.userId)" closable>{{ item.userName }}</a-tag>
        </div>
      </div>
    </a-modal>

    <!--  添加项目成员 -->
    <a-modal title="绑定用户" v-model="visibleAdd" @ok="handleOkAdd" :confirmLoading="confirmLoading">
      <!-- /sys/user/getAllUserList -->
      <a-select
        v-model="appId"
        showSearch
        allowClear
        mode="multiple"
        placeholder="请选择成员"
        optionFilterProp="children"
        style="width: 100%"
        :filterOption="filterOption"
        :maxTagCount="1"
      >
        <a-select-option
          v-for="appModel in options"
          :key="appModel.userId + new Date().getTime()"
          :value="appModel.userId"
        >
          {{ appModel.realName }}
          &#12288;&#12288;{{ appModel.roleName }}</a-select-option
        >
      </a-select>
    </a-modal>
  </a-card>
</template>

<script>
import UReportFileModal from './modules/UReportFileModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { httpAction, getAction, deleteAction } from '@/api/manage'
export default {
  name: 'UReportFileList',
  mixins: [JeecgListMixin],
  components: {
    UReportFileModal
  },
  data() {
    return {
      description: '报表文件存储管理页面',
      // 表头
      columns: [
        {
          title: '报表模板名称',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/ctop/uReportFile/list',
        delete: '/ctop/uReportFile/delete',
        deleteBatch: '/ctop/uReportFile/deleteBatch',
        exportXlsUrl: 'ctop/uReportFile/exportXls',
        importExcelUrl: 'ctop/uReportFile/importExcel'
      },
      visibleAdd: false,
      itemJson: null,
      list: [],
      options: [],
      confirmLoading: false,
      appId: [],
      memberList: [],
      visible: false,
      fileId: ''
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    addParams(item) {
      this.visibleAdd = true
      this.itemJson = item
      getAction('/sys/user/getAllUserList', '').then(res => {
        if (res.success) {
          this.list = res.result
          this.options = res.result
        }
      })
    },
    log(id) {
      httpAction('/ctop/uReportFile/unbindUser', { fileId: this.fileId, userId: id }, 'post').then(res => {
        if (res.success) {
          this.getMemberList(this.fileId)
          this.$message.success('删除成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleOk(e) {
      this.visible = false
    },
    handleOkAdd(e) {
      var params = {}
      params.fileId = this.itemJson.id
      params.userIds = this.appId.join()
      this.confirmLoading = true
      httpAction('/ctop/uReportFile/bindUser', params, 'post').then(res => {
        this.confirmLoading = false
        if (res.success) {
          this.visibleAdd = false
          this.appId = []
          this.$message.success('添加成功')
        } else {
          this.$message.error('添加失败')
        }
      })
    },
    deleteParams(item) {
      this.fileId = item.id
      this.getMemberList(item.id)
    },
    getMemberList(id) {
      this.memberList = []
      httpAction('/ctop/uReportFileBindUser/userList', { fileId: id }, 'post').then(res => {
        if (res.success) {
          this.visible = true
          this.memberList = res.data
        }
      })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
