<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input
        v-model="meetingId"
        clearable
        size="small"
        placeholder="模糊搜索"
        style="width: 200px"
        class="filter-item"
      />
      <el-button
        type="success"
        class="filter-item"
        :loading="flag"
        @click="searchMetting"
      >搜索</el-button>
      <el-button
        type="warning"
        class="filter-item"
        @click="resertMetting"
      >重置</el-button>
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="meetingName" label="会议议题" />
      <el-table-column prop="room.roomName" label="会议室" />
      <el-table-column prop="meetingDescribe" label="会议介绍" />
      <el-table-column prop="initiatorUser.name" label="发起人" />
      <el-table-column prop="startDate" label="开始时间" />
      <el-table-column prop="endDate" label="结束时间" />
      <el-table-column prop="approveStatus" label="审批状态">
        <template slot-scope="scope">
          {{
            scope.row.approveStatus === 1
              ? "审批通过"
              : scope.row.approveStatus === 0
                ? "审批中"
                : "审批未通过"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="approveSuggest" label="审批者意见" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="meetingMode" label="会议模式">
        <template slot-scope="scope">
          {{
            scope.row.meetingMode === "0"
              ? "线下会议"
              : scope.row.meetingMode === "1"
                ? "线上会议"
                : "线下同步线上会议"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="meetingStatus" label="会议状态">
        <template slot-scope="scope">
          {{
            scope.row.meetingStatus === 0
              ? "未开始"
              : scope.row.meetingStatus === 1
                ? "进行中"
                : "已结束"
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <el-button
            type="warning"
            plain
            size="mini"
            icon="el-icon-download"
            @click="toDownloadFiles(scope.row.meetingId)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <!--    <pagination />-->
    <!--文件列表-->
    <!--    <fileList :params.sync="fileParams" />-->
    <div class="dialog">
      <el-dialog title="会议文件列表" :visible.sync="dialogVisible" width="40%">
        <div class="dialog_serch">
          <el-input
            v-model="dialog.realName"
            clearable
            size="small"
            placeholder="输入会议文件名称搜索"
            class="filter-item"
            @keyup.enter.native="crud.toQuery"
          />
          <el-button
            type="success"
            icon="el-icon-search"
            @click="diaSearch"
          >搜索</el-button>
          <el-button
            type="warning"
            icon="el-icon-refresh"
            :disabled="!dialog.realName"
            @click="reset"
          >重置</el-button>
        </div>
        <!-- <div><crudOperation></crudOperation></div> -->
        <div class="dialog_table">
          <el-table :data="dialog.tableData" style="width: 100%">
            <el-table-column prop="realName" label="文件名称" align="center" />
            <el-table-column
              prop="uploadTime"
              label="上传日期"
              width="200"
              align="center"
            />
          </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <!-- <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          > -->
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import fileList from './file/index-dialog'
import crudDmMeetingFile from '@/api/dm/meeting/dmMeetingFile'
// import pagination from '@crud/Pagination'
import crudDmMeeting from '@/api/dm/meeting/dmMeeting'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { crudDmMeeting, crudDmMeetingFile },
  data() {
    return {
      tableData: null,
      flag: false,
      meetingId: '',
      fileParams: {
        visible: false,
        meetingId: '',
        fileType: ''
      },
      dialogVisible: false,
      dialog: {
        realName: null,
        tableData: [],
        searchId: null
      }
    }
  },
  watch: {},
  created() {
    this.searchMetting()
  },
  methods: {
    // 展示下载页面
    toDownloadFiles(row) {
      console.log(row)
      const _that = this // fileType=0
      _that.dialog.searchId = row
      _that.dialogVisible = true
      const param = 'page=0&size=999&sort=fileId,desc&meetingId=' + row
      crudDmMeetingFile.get(param).then((res) => {
        console.log('文件列表', res.content)
        _that.dialog.tableData = res.content
      })
    },
    searchMetting() {
      const _that = this
      crudDmMeeting.getMettingById(_that.meetingId).then((res) => {
        console.log(res)
        _that.tableData = res.content
        _that.flag = false
      })
    },
    resertMetting() {
      this.meetingId = ''
    },
    // 弹框搜索
    diaSearch() {
      const that = this
      if (that.dialog.realName) {
        that.dialog.tableData = that.dialog.tableData.filter((item) => {
          return item.realName.includes(that.dialog.realName)
        })
      } else {
        that.toDownloadFiles(that.dialog.searchId)
      }
    },
    // 重置
    reset() {
      const that = this
      that.dialog.realName = ''
      that.toDownloadFiles(that.dialog.searchId)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .vue-treeselect__control,
::v-deep .vue-treeselect__placeholder,
::v-deep .vue-treeselect__single-value {
  height: 30px;
  line-height: 30px;
}
.dialog_serch {
  display: flex;
  .filter-item {
    padding: 0 5px;
    width: 40%;
  }
}
</style>
