<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>
    <a-row :gutter="24" style="margin-bottom:10px">
      <a-col :md="6" :sm="8">
        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
          <a-button type="primary" @click="addData">新增</a-button>
        </span>
      </a-col>
    </a-row>
    <!-- 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>
          <a-divider type="vertical" />
          <a @click="editData(record)">修改</a>
          <a-divider type="vertical" />
          <a @click="subscribe(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"
        @search="search"
      >
        <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'
import { postAction } from '../../api/manage'
import qs from 'qs'
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: {
    subscribe(record) {
      console.log(record)
      postAction(
        '/ctop/uReportFileBindUser/subscribe',
        qs.stringify({
          fileId: record.id,
        })
      ).then((res) => {
        console.log(res)
        if (res.success) {
          this.$message.success('订阅成功')
        }
      })
    },
    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
      //   }
      // })
      this.getAllUserList()
    },
    getAllUserList(value) {
      getAction('/sys/user/getAllUserList', { pageSize: 50, pageNo: 1, userName: value }).then((res) => {
        if (res.success) {
          this.list = res.result.list
          this.options = res.result.list
        }
      })
    },
    search(value) {
      this.options = []
      if (value != '') {
        // this.options = this.list.filter(item => {
        //   var data = item.realName + ' ' + item.roleName
        //   return data.toLowerCase().indexOf(value.toLowerCase()) > -1
        // })
        // this.options = [...this.options]
        this.getAllUserList(value)
      } else {
        this.getAllUserList()
      }
    },
    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)
    },
    editData(item) {
      var url = ''
      if (process.env.NODE_ENV === 'development') {
        url = 'http://api.tjyourong.com.cn/jeecg-boot/ureport/designer?_u=mysql:' + item.name
      } else if (process.env.NODE_ENV === 'production') {
        url = 'http://139.186.29.76:8804/jeecg-boot/ureport/designer?_u=mysql:' + item.name
      }
      window.open(url, '_blank')
    },
    addData() {
      var url = ''
      if (process.env.NODE_ENV === 'development') {
        url = 'http://api.tjyourong.com.cn/jeecg-boot/ureport/designer'
      } else if (process.env.NODE_ENV === 'production') {
        url = 'http://139.186.29.76:8804/jeecg-boot/ureport/designer'
      }
      window.open(url, '_blank')
    },
    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>
