<template>
  <a-card :bordered="false">
    <a-row>
      <a-col :span="4">
        <locationaTree ref="locationaTree" :height="640" @onSelect="onSelectTree"></locationaTree>
      </a-col>
      <a-col :span="20">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :xl="5" :lg="7" :md="8" :sm="24">
                <a-auto-complete v-model="queryParam.recipient" :dataSource="UserdataSource" placeholder="请选择领用人"
                  @select="onSelect" @search="onSearch" @change="onChange" />
              </a-col>
              <a-col :xl="7" :lg="7" :md="8" :sm="24">
                <a-form-item label="购置日期">
                  <j-date placeholder="开始日期" class="query-group-cust" v-model="queryParam.purchaseDate_begin"></j-date>
                  <span class="query-group-split-cust"></span>
                  <j-date placeholder="结束日期" class="query-group-cust" v-model="queryParam.purchaseDate_end"></j-date>
                </a-form-item>
              </a-col>
              <a-col :xl="5" :lg="7" :md="8" :sm="24">
                <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-col :xl="2" >
                <img style="height: 55px;" src="@/assets/collegelogo.jpg" alt="image">
              </a-col>
              <a-col :xl="4">
              <p style="font-size: 20px; padding-top: 10px;">学院资产信息</p>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- 查询区域-END -->

        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
          <a-button type="primary" icon="download" @click="handleExportXls('仪器信息表（学院）')">导出</a-button>
          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
            @change="handleImportExcel">
            <a-button type="primary" icon="import">导入</a-button>
          </a-upload>
          <a-button type="primary" icon="zoom-in" @click="showHistoryModal">历史数据</a-button>
          <a-modal v-model="historyModalVisible" title="历史数据" @ok="closeHistoryModal">
            <div class="modal-content">
              <!-- 在这里显示历史数据 -->
              <div v-for="TimestampData in historyData" :key="TimestampData.id" class="container">
                <div class="left">
                  <p style="font-size: 17px;">{{ TimestampData }}</p>
                </div>
                <div class="right">
                  <a-button type="primary" icon="download"
                    @click="ExportData('家具信息表', TimestampData)">导出</a-button>
                </div>
              </div>
            </div>
          </a-modal>
          <!-- 高级查询区域 -->
          <!-- <j-super-query :fieldList="superFieldList" ref="superQueryModal"
            @handleSuperQuery="handleSuperQuery"></j-super-query> -->
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
          </a-dropdown>
        </div>

        <!-- table区域-begin -->
        <!-- table区域-begin -->
        <div>
          <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
            <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
              selectedRowKeys.length }}</a>项
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>

          <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
            :dataSource="dataSource" :pagination="ipagination" :loading="loading"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap"
            @change="handleTableChange">

            <span slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)">编辑</a>

              <a-divider type="vertical" />
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a @click="handleDetail(record)">详情</a>
            </span>
          </a-table>
        </div>
        <rms-instrument-college-modal ref="modalForm" @ok="modalFormOk"></rms-instrument-college-modal>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import RmsInstrumentCollegeModal from './modules/RmsInstrumentCollegeModal.vue'
import { getAction } from '@/api/manage'
import RmsLocationModal from '../LocationList/modules/RmsLocationModal'
import locationaTree from '../components/locationaTree'
export default {
  name: 'RmsInstrumentCollegeList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    RmsInstrumentCollegeModal,
    RmsLocationModal,
    locationaTree
  },
  data() {
    return {
      value: '',
      dataSource: [],
      UserdataSource: [],
      // 表头
      columns: [
        {
          title: '仪器编号',
          align: "center",
          dataIndex: 'instrumentNumber',
          width: 120
        },
        {
          title: '仪器名称',
          align: "center",
          dataIndex: 'instrumentName',
          width: 120
        },
        {
          title: '领用单位号',
          align: "center",
          dataIndex: 'collectingUnitNumber_dictText',
          width: 200
        },

        {
          title: '分类号',
          align: "center",
          dataIndex: 'categoryId',
          width: 120
        },
        {
          title: '型号',
          align: "center",
          dataIndex: 'model',
          width: 120

        },
        {
          title: '规格',
          align: "center",
          dataIndex: 'specifications',
          width: 120
        },
        {
          title: '单价',
          align: "center",
          dataIndex: 'unitPrice',
          width: 120
        },
        {
          title: '厂家',
          align: "center",
          dataIndex: 'manufactuer',
          width: 200
        },
        {
          title: '购置日期',
          align: "center",
          dataIndex: 'purchaseDate',
          customRender: function (text) {
            return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
          },
          width: 120
        },
        {
          title: '领用人',
          align: "center",
          dataIndex: 'recipient_dictText',
          width: 80
        },
        {
          title: '入库时间',
          align: "center",
          dataIndex: 'entryDate',
          customRender: function (text) {
            return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
          },
          width: 80
        },
        {
          title: '单据号',
          align: "center",
          dataIndex: 'documentNumber'
        },
        {
          title: '存放地址',
          align: "center",
          dataIndex: 'locationName',
          width: 120
        },
        {
          title: '备注',
          align: "center",
          dataIndex: 'note',
          width: 120
        },
        {
          title: '审核状态',
          align: "center",
          dataIndex: 'approvalStatus_dictText',
          width: 120
        },
        {
          title: '初审状态',
          align: "center",
          dataIndex: 'initialAudit_dictText',
          width: 120
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 160,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/rms/rmsInstrumentCollege/list",
        delete: "/rms/rmsInstrumentCollege/delete",
        deleteBatch: "/rms/rmsInstrumentCollege/deleteBatch",
        exportXlsUrl: "/rms/rmsInstrumentCollege/exportXls",
        importExcelUrl: "rms/rmsInstrumentCollege/importExcel",
        userUrl: "/sys/user/queryUserComponentData?column=createTime&order=desc&field=id,,username,realname,sex,phone,orgCodeTxt&pageNo=1&pageSize=100",
        timestampUrl: "/rms/rmsInstrumentCollege/getTimestamp",
      },
      UserList: {},
      historyModalVisible: false, // 控制历史数据模态框的显示与隐藏
      historyData: [] // 历史数据数组，用于存储所有历史数据
    }
  },
  created() {
    this.getUserInfo();
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    showHistoryModal() {
      getAction(this.url.timestampUrl).then(res => {
        console.log(res)
        this.historyData = res;
      })

      this.historyModalVisible = true; // 显示历史数据模态框
    },
    closeHistoryModal() {
      this.historyModalVisible = false; // 关闭历史数据模态框
    },
   //获取用户信息
   getUserInfo() {
      getAction(this.url.userUrl).then(res => {
        this.UserList = res.result.records;
      })
    },
    onSearch(query) {
      this.UserdataSource = this.UserList.filter(user =>
        user.username.includes(query) || user.realname.includes(query)
      ).map(user => ({
        value: user.username,
        text: user.realname
      }));
    },
    onSelectTree(selectedRowKeys) {
      //将其切分为字符串
      selectedRowKeys = selectedRowKeys.join(',')
      console.log(selectedRowKeys)
      this.queryParam.locationId = selectedRowKeys
      this.loadData(1)
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.modal-content {
  max-height: 400px; /* 设置最大高度，根据需要进行调整 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
.container {
  display: flex;
  align-items: center;
}

.left {
  flex: 1;
}

.right {
  margin-left: 10px;
}
</style>