<template>
  <tf-page>
    <template v-slot:action>
      <ActionHeader
        :kplaceholder="'支持工程名称搜索'"
        :onlySearch="true"
        :actived="isActive"
        :loading="loading"
        @search="onSearch"
      />
    </template>
    <tf-table :columns="tableCols" :data="tableData" v-loading="loading.search">
      <template v-slot:operation="{ row }">
        <el-button type="text" style="padding: 0" @click="editor(row)">编辑</el-button>
      </template>
    </tf-table>
    <ProjectForm
      ref="ProjectForm"
      v-if="visible"
      :visible.sync="visible"
      :loading="loading.add || loading.update"
      :data="current"
      :title="`${current.id ? '编辑' : '新增'}`"
      :modal="false"
      @submit="onSubmit"
    />
  </tf-page>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { ElForm } from 'element-ui/types/form'
import ActionHeader from '../components/ActionHeader.vue'
import { PMTableColumns } from '../commonAPI/settings'
import { ILoading } from '../commonAPI/common'
import { getPbsListWithRange, updatePbsList } from '../commonAPI/request'
import ProjectForm from './ProjectForm.vue'
//工程管理
@Component({
  name: 'IndexManagement',
  components: { ActionHeader, ProjectForm }
})
export default class IndexManagement extends Vue {
  $refs!: { form: ElForm }

  visible: boolean = false

  isActive: boolean = false

  tableCols = PMTableColumns

  tableData: any = []

  loading: ILoading = { search: false, add: false, update: false, delete: false, import: false, export: false }

  current: any = {}

  @Watch('visible')
  onChangeVisibleMethod(val) {
    if (!val) {
      this.$refs['ProjectForm'].destroy()
    }
  }
  get prjId() {
    return this.$store.getters['project/id'].projectId
  }
  mounted() {
    this.isActive = true
  }
  onSearch(data?) {
    this.loading.search = true
    let params = {
      name: data ? data.keyword : '',
      prjId: this.prjId
    }
    getPbsListWithRange(params).then((res) => {
      try {
        this.tableData = res.result[0].structures.map((item) => {
          Object.keys(item).forEach((val) => {
            item[val] = item[val] || '/'
          })
          return { ...item }
        })
      } catch (error) {
        console.log(error)
      }
      this.loading.search = false
    })
  }
  editor(row) {
    this.current = { ...row }
    this.visible = true
  }
  onSubmit(row) {
    updatePbsList(row).then((res) => {
      if (res.code == 1) {
        this.$message.success('修改成功')
        this.visible = false
        this.onSearch()
      } else {
        this.$message.warning('修改失败')
      }
    })
  }
}
</script>

<style lang='scss' scoped>
</style>