<template>
    <div>
        <el-container class="visual-project-list-drawer">
          <el-header class="visual-project-list-header" v-if=" $permission('/workspace/project/add') && !show">
            <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-popover:getPopover(1)>新增专题库</el-button>
          </el-header>
          <el-main v-loading="loading" style="padding:0">
            <el-table
                class="project-table"
                :data="tableData"
                header-row-class-name="custom-table-header"
                :row-class-name="tableRowClassName"
                row-key="id"
                :expand-row-keys="expands"
                @cell-click="cellClick"
            >
              <el-table-column label="序号" type="index" align="center" width="50px" show-overflow-tooltip></el-table-column>
              <el-table-column type="expand" width="1">
                <template slot-scope="props">
                  <el-table v-loading="loading2" class="file-table" :data="reportList" stripe header-row-class-name="custom-table-header">
                    <el-table-column type="index" label="序号" align="center" width="50px" show-overflow-tooltip></el-table-column>
                    <el-table-column label="报告名称" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span class="report-name" @click="handleDownload(scope.row)">{{ scope.row.name }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="文件大小" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ renderSize(scope.row.size) }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="createName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column label="创建时间" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span>{{ $d(scope.row.createTime, 'YYYY.MM.DD') }}</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column label="名称(专题库)" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-link @click.native="handleClick(scope.row)" type="primary">
                    <span v-if="scope.row.innerFile">{{ scope.row.innerFile }}- </span>
                    <span>{{ scope.row.name }}</span>
                  </el-link>
                </template>
              </el-table-column>
              <el-table-column label="报告数量" align="center">
                <template slot-scope="scope">
                    <el-link type="primary">{{ scope.row.reportNum }}</el-link>
                </template>
              </el-table-column>
              <!-- <el-table-column
                    prop="reportNum"
                    label="报告文档数量"
                    align="center"
                    min-width="80px"
                >
                <template slot-scope="scope">
                    <div>
                        <el-link type="primary">{{ scope.row.reportNum }}</el-link>
                    </div>
                </template>
                </el-table-column> -->
                <el-table-column
                    prop="event"
                    label="事件"
                    align="center"
                    min-width="80px"
                >
                <template slot-scope="scope">
                    <div>
                        <el-link type="primary" @click="checkVisual(scope.row.scenarioName,121,'事件一')">事件一</el-link>
                    </div>
                </template>
                </el-table-column>
                <el-table-column
                    v-for="column in columnList"
                    :key="column.name"
                    :label="column.name"
                    :prop="column.key"
                    align="center"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                    <span v-if="column.key === 'createTime'">{{
                        $d(scope.row.createTime)
                    }}</span>
                    <template v-else-if="column.key === 'scenarioid'">
                        <span class="cursor_pointer" v-for="item in scope.row.scenarioName" :key="item"  @click="checkVisual([item])">{{ item }} <br />
                        </span>
                    </template>
                    <template v-else-if="column.key === 'typeid'">
                        <span v-for="item in scope.row.typeName" :key="item">{{ item }} <br /> </span>
                    </template>
                    <span v-else>{{ scope.row[column.key] }}</span>
                    </template>
                </el-table-column>
              <!-- <el-table-column prop="clientName" label="客户" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column prop="createName" label="创建人" align="center" show-overflow-tooltip></el-table-column>
              <el-table-column label="创建时间" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ $d(scope.row.createTime, 'YYYY.MM.DD') }}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span class="project-status">{{ scope.row.status === '0' ? '未完成' : '已完成' }}</span>
                </template>
              </el-table-column> -->
            </el-table>
            <div style="display:flex;flex-direction: row-reverse;margin:25px 0" v-if="show">
                <el-link type="primary" style="font-size:16px" @click="checkMore">查看更多>>> </el-link>
            </div>
          </el-main>
          <el-footer v-if="!show">
            <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="prev, pager, next, jumper" background></el-pagination>
          </el-footer>
        </el-container>
  
  
      <project-form-drawer ref="projectFormDrawer" @submit="submitProjectForm" :common-data="commonData" />
    </div>
</template>
  
<script>
  import { downLoad2, renderSize } from '@/utils'
  import ProjectFormDrawer from '@/views/workspace/components/drawer/Form'
  import { mapGetters } from "vuex";
  import { checkVisual } from "@/views/home/components/mixins";
  export default {
    components: {
      ProjectFormDrawer
    },
    // props:['show','params'],
    props:{
        show:{},
        params: {
            default: ()=>{
                return {}
            }
        },
    },
    mixins:[checkVisual],
    data() {
      return {
        commonData: {},
        columnList: [
            // {
            // key: "createName",
            // name: "创建人",
            // type: "project",
            // order: 0,
            // hidden: false,
            // },
            {
            key: "scenarioid",
            name: "应用场景",
            type: "project",
            order: 3,
            hidden: false,
            },
            {
            key: "personnelName",
            name: "专题库负责人",
            type: "project",
            order: 0,
            hidden: true,
            },
            {
            key: "clientName",
            name: "委托方",
            type: "project",
            order: 2,
            hidden: false,
            },
            
            {
            key: "typeid",
            name: "调查类型",
            type: "project",
            order: 4,
            hidden: false,
            },
            {
            key: "technicalTheme",
            name: "技术主题",
            type: "project",
            order: 5,
            hidden: false,
            },
        ],
        expands: [],
        queryParams: {
          group: [],
          type: [],
          scenario: [],
          name: '',
          technicalTheme: '',
          clientName: '',
          size: 10,
          current: 1,
          sort: {
            order: 'desc',
            prop: 'create_time'
          },
          myself: true
        },
        loading: false,
        loading2: false,
        tableData: [],
        reportList: [],
        total: 0,
      }
    },
    computed: {
      ...mapGetters(['userinfo'])
    },
    mounted() {
        this.open(this.params)
    },
    methods: {
        getPopover(val){
            console.log(val)
        },
        //查看更多
        checkMore(){
            this.$router.push({
                path: '/workspace'
            })
        },
      renderSize,
      handleClick(row) {
        const router = this.$router.resolve({
          path: '/workspace/folder',
          query: {
            id: row.id,
          }
        })
        this.$s.setSession('projectName',row.name)
        window.open(router.href, '_blank');
      },
      handleAdd() {
        this.$refs.projectFormDrawer.open({
          update: 0,
          updateTime: '一天',
          status: '0',
          sort: 1,
          eventId:this.queryParams.eventId,
          eventName:this.queryParams.eventName,
          typeList: this.queryParams.type.map(item => parseInt(item)),
          scenarioList: this.queryParams.scenario.map(item => parseInt(item))
        }, '新增专题库')
      },
      handleDownload(row) {
        var FileUrl =  `http://${this.$c.hostname}:8012/onlinePreview?url=`+ btoa(encodeURIComponent(this.$p + row.url))
        const router = this.$router.resolve({
                path: '/checkFile',
                query: {
                  row: JSON.stringify(row),
                  FileUrl: FileUrl,
                  isPicture:0
              }
          })
          window.open(router.href, '_blank');
      },
      async getCommonData() {
        const response = await this.$api.getCommonData({ keys: 'ENTERPRISE_APPLICATION_SCENARIO,INVESTIGATION_TYPE' })
        this.commonData = response.data
      },
      async open(params) {
        var scenarioName = params.scenarioName, 
            typeName = params.typeName, 
            question = params.question
        await this.getCommonData()
        const scenario = this.commonData.ENTERPRISE_APPLICATION_SCENARIO.find(item => item.label === scenarioName)
        if (scenario) {
          this.queryParams.scenario = [scenario.value]
        } else {
        //   return false
        }
        if (typeName) {
          const type = this.commonData.INVESTIGATION_TYPE.find(item => item.label === typeName)
          if (type) {
            this.queryParams.type = [type.value]
          } else {
            return false
          }
        } else {
          this.queryParams.type = []
        }
        if (question) {
          this.queryParams.eventId = question.questionId
          this.queryParams.eventName = question.questionName
        }
        this.queryParams.current = 1
        this.expands = []
        // this.drawer = true
        this.getList()
      },
      submitProjectForm() {
        this.getList()
      },
      getList() {
        this.loading = true
        this.$api.getProjectListV2(this.queryParams).then(response => {
          this.tableData = response.data.records
          this.total = response.data.total
          this.loading = false
        })
      },
      handleCurrentChange(val) {
        this.queryParams.current = val;
        this.getList();
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'height-row'
        }
      },
      getProjectReportList(id) {
        let params = {
          projectId: id,
          current: 1,
          size: 99999
        }
        this.loading2 = true
        this.$api.getProjectFileList(params).then(response => {
          this.reportList = response.data.records
          this.loading2 = false
        })
      },
      cellClick(row, column, cell, event) {
        if (column.label !== '报告数量' || row.reportNum === 0) {
          return false
        }
        const index = this.expands.indexOf(row.id)
        if (index === -1) {
          this.expands = []
          this.expands.push(row.id)
          this.getProjectReportList(row.id)
        } else {
          this.expands.splice(index, 1)
        }
      }
    }
  }
  </script>
  
  <style lang="scss">
  .visual-project-list-drawer {
    .visual-project-list-header {
      padding: 0px !important;
    }
    .custom-table-header > th {
      background: #deedff !important;
      color: #7ba6d5 !important;
      font-weight: 400 !important;
    }
    .project-table {
      color: #000000;
    }
    .file-table .custom-table-header > th {
      background: #ebf4ff !important;
    }
    .project-status {
      font-weight: 400;
      font-size: 14px;
      text-align: center;
      color: #3084e5;
    }
    .height-row {
      background: #f5faff !important;
    }
    .report-num {
      display: inline-block;
      width: 32px;
      height: 32px;
      border-radius: 16px;
      background: #deedff;
      font-weight: bold;
      font-size: 18px;
      text-align: center;
      color: #3084e5;
      line-height: 32px;
      cursor: pointer;
    }
    .report-name {
      cursor: pointer;
    }
    .report-name:hover {
      text-decoration: underline;
      color: #1e9fff;
    }
    .el-table__expand-icon {
      display: none;
    }
  }
  </style>