<template>
  <div class="project">
    <div class="project-container">
      <div class="search">
        <el-row class="title" align="center" type="flex">
          <el-col :span="18">项目应用</el-col>
          <el-col :span="6">
            <el-input autofocus placeholder="请输入筛选关键字" v-model="keyword" />
            <!-- <el-button type="primary" @click="onAddMenu">加菜单</el-button> -->
          </el-col>
        </el-row>
      </div>
      <tf-table :columns="columns" :data="computedTableData" border style="padding-top: 0; max-height: 80vh">
        <template v-slot:name="{ row }">
          <el-button type="text" @click="() => onProjectSelect(row)">{{ row.name }}</el-button>
        </template>
      </tf-table>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import { ElTableColumn } from 'element-ui/types/table-column'
  import { elTableAlignLeft } from '@/utils/constant'
  import { fetchProjects, IOrgProjectCombine, setProjectKey, addMenu } from '@/api/common'
  import { setParams } from 'staticPub/config'
  import { setSessionStorage } from '@/utils/auth'

  @Component({ name: 'ProjectList', components: {} })
  export default class ProjectList extends Vue {
    columns: (Partial<ElTableColumn> & { _slot?: boolean })[] = [
      { type: 'index', label: '序号', width: '60px' },
      { prop: 'orgName', label: '区域总部', minWidth: '120px', ...elTableAlignLeft() },
      { prop: 'gcfw', label: '省市', width: '100px' },
      { prop: 'unit', label: '项目公司', minWidth: '120px', ...elTableAlignLeft() },
      { prop: 'code', label: '项目编号', width: '100px' },
      { prop: 'name', label: '项目名称', minWidth: '150px', ...elTableAlignLeft(), _slot: true }
    ]
    keyword: string = ''
    tableData: Partial<IOrgProjectCombine>[] = []

    get computedTableData() {
      if (!this.keyword) return this.tableData
      const searchKeys = ['orgName', 'gcfw', 'unit', 'code', 'name']
      return this.tableData.filter((item) =>
        searchKeys.some((key) => String(item[key]).toUpperCase().includes(this.keyword.toUpperCase()))
      )
    }

    async fetchProject() {
      const { result } = await fetchProjects()
      this.tableData = result
        .map(({ id: orgId, prjList, ...org }) => {
          return (prjList || []).map((item) => ({ ...item, ...org, orgId }))
        })
        .flat()
    }

    async onProjectSelect(row: IOrgProjectCombine) {
      // 这里设置当前项目
      setParams(row.gcfw)
      const { id } = row || {}
      this.$store.commit('project/UPDATE', row)
      setSessionStorage('initPosition', row.geo_info) //项目初始位置
      setSessionStorage('currentPrj', row.id) //项目ID
      if (id) {
        const { result } = await setProjectKey(id)
        if (result) {
          this.$router.push('/dashboard')
        }
      }
    }

    // async onAddMenu() {
    //   const data = [
    //     { key: 'query', name: '数据查询' },
    //     { key: 'statistics', name: '数据统计' },
    //     { key: 'connectivity', name: '管网连通性分析' },
    //     { key: 'relevance', name: '数据关联分析' },
    //     { key: 'flaw', name: '缺陷特征库' }
    //   ].map(({ key, name }, index) => {
    //     const path = `/spectrum/reform/${key}`.replace(/\/$/, '')
    //     return {
    //       sort: 1 + index,
    //       name: path,
    //       path: path,
    //       parentId: 4402,
    //       type: 'gis',
    //       statusFlag: '1',
    //       sysId: 52,
    //       meta: JSON.stringify({ title: name }),
    //       component: path,
    //       label: name,
    //       widgetid: 'FullPanel',
    //       pathId: path,
    //       parentPathid: '/spectrum'
    //     }
    //   })
    //   for await (let item of data) {
    //     await addMenu(item)
    //   }
    // }

    created() {
      this.$store.commit('project/RESET')
      this.fetchProject()
    }
  }
</script>

<style lang="scss" scoped>
  .project {
    width: 100%;
    height: 100%;
    background-image: url(./images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    .search {
      padding: 15px;
    }
    &-container {
      width: 80vw;
      height: 90vh;
      background-color: #fff;
      .title {
        font-size: 24px;
        color: $--color-text-primary;
      }
    }
  }
</style>
