<template>
<div class="main">
  <Loader />
  <a-tabs class="chart-tab" defaultActiveKey="1" @change="getData">
    <a-tab-pane tab="基于任务" key="1"/>
    <a-tab-pane tab="基于人员" key="2"/>
    <div slot="tabBarExtraContent">
      <a-input-search class="search-input" @search="handleSearch" :allowClear="true" size="small" placeholder="搜索任务名、人名"/>
      <a-dropdown class="user">
        <span>
          <a-icon type="user" /> <span class="name">{{info.username || '用户名'}}</span>
          <a-icon type="down" />
        </span>
        <a-menu slot="overlay" @click="handleClick">
          <a-menu-item key="logout">退出登录</a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </a-tabs>
  <div class="container">
    <GanttChart @progressChange="handleProgressChange" @taskChange="handleTaskChange" ref="gantt" :tasks="tasks"/>
  </div>
</div>
</template>

<script>
import Loader from '@/components/loader'
export default {
  name: 'Main',
  components: {
    Loader,
  },
  data() {
    return {
      info: {},
      tasks: {
        data: [],
      },
    }
  },
  mounted() {
    this.getInfo()
    this.getData()
  },
  methods: {
    getInfo() {
      this.$ajax.get({
        url: this.$api.GET_INFO,
      }).then(res => {
        this.info = this.$com.confirm(res, 'data.content', {})
      })
    },
    formatDataBaseOnPerson(data) { // 转换人员数据用
      const result = []
      data.forEach(item => {
        // TODO  这里把没有任务的人员去掉了，看以后需不需要
        if (item.tasks && item.tasks.length > 0) {
          result.push({
            name: item.name || '',
            id: item.id,
            text: '',
            start_date: null,
            end_date: null,
          })
          item.tasks.forEach(task => {
            result.push({
              id: task.id,
              name: item.name || '',
              text: task.name || '',
              start_date: this.$com.formatDate(task.start),
              end_date: this.$com.formatDate(task.finish),
              progress: task.speed ? Number(task.speed) : 0,
              parent: item.id,
            })
          })
        }
      })
      return result
    },
    getData(key = '1', id = '329795521284190208') {
      if (key == '2') {
        this.$ajax.all(
          this.$ajax.get({url: this.$api.GET_PLAN_BY_PERSON.replace('{id}', id)}),
          this.$ajax.get({url: this.$api.GET_BASELINE.replace('{planId}', id)})
        ).then(res => {
          const data = this.$com.confirm(res[0], 'data.content', [])
          const baseData = this.$com.confirm(res[1], 'data.content.content2', [])
          const dataList = this.formatDataBaseOnPerson(data)
          const baseList = this.formatDataBaseOnPerson(baseData)
          this.tasks.data = dataList.map(item => {
            const plan = baseList.find(base => base.id === item.id)
            if (plan && plan.start_date && plan.end_date) {
              item.planned_start = this.$com.formatDate(plan.start_date)
              item.planned_end = this.$com.formatDate(plan.end_date)
            }
            return item
          })
          const columns = [
            {name:'name', label:'人员', tree: true, align: 'left', max_width: 200},
            {name:'text', label:'任务名', align: 'center'},
            {name:'start_date', label:'开始日期', align: 'center', max_width: 100},
            {name:'end_date', label:'结束日期', align: 'center', max_width: 100},
            {name:'duration', label:'周期', align: 'center', max_width: 50},
            {name:'add', label:'', max_width: 50},
          ]
          this.$refs.gantt.reset({columns})
        })
        return
      }
      this.$ajax.all(
        this.$ajax.get({url: this.$api.GET_PLAN.replace('{id}', id)}),
        this.$ajax.get({url: this.$api.GET_BASELINE.replace('{planId}', id)})
      ).then(res => {
        const data = this.$com.confirm(res[0], 'data.content', [])
        const baseData = this.$com.confirm(res[1], 'data.content.content1', [])
        this.tasks.data = data.map(item => {
          const plan = baseData.find(base => base.id === item.id)
          const result = {
            id: item.id,
            name: (item.resource && item.resource.name) || '',
            text: item.name || '',
            start_date: this.$com.formatDate(item.start),
            end_date: this.$com.formatDate(item.finish),
            progress: item.speed ? Number(item.speed) : 0,
            parent: item.fid,
          }
          if (plan && plan.start && plan.finish) {
            result.planned_start = this.$com.formatDate(plan.start)
            result.planned_end = this.$com.formatDate(plan.finish)
          }
          return result
        })
        this.$refs.gantt.reset()
      })
    },
    handleProgressChange({dataId, progress}) {
      this.$ajax.post({
        url: this.$api.POST_SPEED.replace('{id}', dataId),
        params: {
          tid: dataId,
          speed: progress,
        },
        hideLoading: true,
      }).then(res => {
        // this.$message.success('调整进度成功')
      })
    },
    handleTaskChange({task, parentTask}) {
      console.log(task, parentTask)
    },
    handleSearch(val) {
      this.$refs.gantt.search(val)
    },
    handleClick({key}) {
      switch (key) {
      case 'logout':
        this.$cookie.remove('token')
        this.$cookie.remove('refresh_token')
        this.$router.replace({name: 'login'})
        break
      default:
        break
      }
    }
  }
}
</script>

<style>
.chart-tab .ant-tabs-bar.ant-tabs-top-bar {
  margin: 0;
  border: none;
  margin-bottom: 1px;
  padding: 0 16px;
}
.gantt_task_line.gantt_bar_task.gantt_split_parent {
  background-color: #000;
  color: #000;
}
</style>
<style scoped>
.main {
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  height: 96%;
}
.user {
  cursor: pointer;
}
.search-input {
  width: 150px;
  margin-right: 50px;
  transition: all 0.5s;
}
.search-input:hover {
  width: 200px;
}
</style>
