<template>
  <div class="project-tag">
    <div class="header">
      <span>{{labelName}}</span>
      <el-popover placement="bottom-start"
                  width="300"
                  v-model="labelSetShow"
                  trigger="click">
        <div class="new-tag-dialog">
          <div class="title">
            <span>标签设置</span>
            <span class="el-icon-close rt"
                  @click="labelSetShow = false"></span>
          </div>
          <div class="search">
            <el-input size="mini"
                      placeholder="输入标签名"
                      v-model="editLabelName"></el-input>
            <span class="checked-color"
                  :style="{'background': editLabelColor}"></span>
          </div>
          <div class="color-box">
            <span v-for="(item, index) in colorList"
                  :key="index"
                  :style="{'background': item}"
                  @click="editLabelColor = item">
            </span>
          </div>
          <div class="footer">
            <el-button type="primary"
                       size="medium"
                       @click="labelSetSave">保存</el-button>
            <el-button size="medium"
                       @click="labelSetShow = false">取消</el-button>
          </div>
        </div>
        <img src="@/assets/img/project/t_set.png"
             slot="reference"
             class="img-set"
             @click="labelSetClick">
      </el-popover>
    </div>
    <div v-loading="loading"
         class="content">
      <div v-empty="taskList.length == 0 && loading == false"
           class="content-body-items">
        <el-collapse v-model="collapseNames">
          <el-collapse-item :name="item.work_id"
                            v-for="(item, index) in taskList"
                            :key="index"
                            class="list-box">
            <i slot="title"
               class="wukong wukong-subproject"
               :style="{color : item.color ? item.color : '#4AB8B8'}"></i>
            <span slot="title"
                  class="title">{{item.work_name}}</span>
            <task-cell v-for="(taskItem, taskIndex) in item.list"
                       :key="taskIndex"
                       class="item-list"
                       :data="taskItem"
                       :dataSection="index"
                       :dataIndex="taskIndex"
                       @on-handle="taskCellHandle"></task-cell>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <!-- 详情 -->
    <particulars v-if="taskDetailShow"
                 ref="particulars"
                 :id="taskID"
                 :detailIndex="detailIndex"
                 :detailSection="detailSection"
                 @on-handle="detailHandle"
                 @close="closeBtn">
    </particulars>
  </div>
</template>

<script>
// API
import {
  workTasklableReadAPI,
  workTasklableGetWokListAPI,
  workTasklableUpdateAPI
} from '@/api/projectManagement/tag'
import TaskCell from '@/views/projectManagement/components/taskCell'
import particulars from '../components/particulars'

export default {
  components: {
    particulars,
    TaskCell
  },
  data() {
    return {
      loading: true,
      labelID: '',
      taskList: [],
      colorList: [
        '#53D397',
        '#20C1BD',
        '#58DADA',
        '#0FC9E7',
        '#3498DB',
        '#4586FF',
        '#8983F3',
        '#AEA1EA',
        '#FF6699',
        '#F24D70',
        '#FF6F6F'
      ],
      labelName: '',
      labelColor: '#53D397',
      // 展开的面板
      collapseNames: [],
      // 编辑
      editLabelName: '',
      editLabelColor: '',
      labelSetShow: false,
      // 详情数据
      taskID: '',
      detailIndex: -1,
      detailSection: -1,
      taskDetailShow: false
    }
  },

  beforeRouteUpdate(to, from, next) {
    this.labelID = to.params.id
    this.taskList = []
    this.collapseNames = []
    this.getDetail({ lable_id: to.params.id })
    this.getList()
    next()
  },

  created() {
    this.labelID = this.$route.params.id
    this.getDetail({ lable_id: this.$route.params.id })
    this.getList()
  },

  mounted() {
    document
      .getElementById('project-main-container')
      .addEventListener('click', this.taskShowHandle, false)
  },

  methods: {
    /**
     * 获取详情
     */
    getDetail(params) {
      workTasklableReadAPI(params)
        .then(res => {
          this.labelName = res.data.name
          this.labelColor = res.data.color
        })
        .catch(err => {})
    },

    /**
     * 页面数据
     */
    getList() {
      this.loading = true
      workTasklableGetWokListAPI({
        lable_id: this.labelID
      })
        .then(res => {
          this.taskList = res.data || []
          this.collapseNames = res.data.map(item => {
            return item.work_id
          })
          this.loading = false
        })
        .catch(err => {
          this.loading = false
        })
    },

    /**
     * 标签设置保存
     */
    labelSetSave() {
      workTasklableUpdateAPI({
        name: this.editLabelName,
        lable_id: this.labelID,
        color: this.editLabelColor
      }).then(res => {
        this.labelName = this.editLabelName
        this.labelColor = this.editLabelColor
        this.labelSetShow = false
      })
    },

    /**
     * 标签设置
     */
    labelSetClick() {
      this.editLabelName = this.labelName
      this.editLabelColor = this.labelColor
    },

    /**
     * 列表操作
     */
    taskCellHandle(data) {
      if (data.type == 'view') {
        let dataCell = data.data
        this.taskID = dataCell.item.task_id
        this.detailIndex = dataCell.index
        this.detailSection = dataCell.section
        this.taskDetailShow = true
      }
    },

    /**
     * 关闭详情页
     */
    closeBtn() {
      this.taskDetailShow = false
    },

    /**
     * 详情操作
     */
    detailHandle(data) {
      if (data.index == 0 || data.index) {
        // 是否完成勾选
        if (data.type == 'title-check') {
          this.$set(
            this.taskList[data.section].list[data.index],
            'checked',
            data.value
          )
        } else if (
          data.type == 'delete' ||
          data.type == 'activate-task' ||
          data.type == 'recover-task' ||
          data.type == 'thorough-delete-task'
        ) {
          this.taskList.splice(data.index, 1)
        } else if (data.type == 'change-stop-time') {
          let stopTime = parseInt(data.value) + 86399
          if (stopTime > new Date(new Date()).getTime() / 1000) {
            this.taskList[data.section].list[data.index].is_end = false
          } else {
            this.taskList[data.section].list[data.index].is_end = true
          }
          this.taskList[data.section].list[data.index].stop_time = data.value
        } else if (data.type == 'change-priority') {
          this.taskList[data.section].list[data.index].priority = data.value.id
        } else if (data.type == 'change-name') {
          this.taskList[data.section].list[data.index].task_name = data.value
        } else if (data.type == 'change-comments') {
          let commentcount = this.taskList[data.section].list[data.index]
            .commentcount
          if (data.value == 'add') {
            this.taskList[data.section].list[data.index].commentcount =
              commentcount + 1
          } else {
            this.taskList[data.section].list[data.index].commentcount =
              commentcount - 1
          }
        } else if (data.type == 'change-sub-task') {
          this.taskList[data.section].list[data.index].subdonecount =
            data.value.subdonecount
          this.taskList[data.section].list[data.index].subcount =
            data.value.allcount - data.value.subdonecount
        }
      }
    },

    /**
     * 点击空白处关闭详情
     */
    taskShowHandle(e) {
      if (
        this.$refs.particulars &&
        !this.$refs.particulars.$el.contains(e.target)
      ) {
        let hidden = true
        let items = document.getElementsByClassName('board-column')
        for (let index = 0; index < items.length; index++) {
          const element = items[index]
          if (element.contains(e.target)) {
            hidden = false
            break
          }
        }
        this.taskDetailShow = !hidden
      }
    }
  }
}
</script>

<style scoped lang="scss">
.project-tag {
  height: 100%;
  overflow: hidden;
  position: relative;
  .header {
    height: 60px;
    line-height: 60px;
    position: relative;
    z-index: 100;
    padding: 0 20px;
    font-size: 18px;
    span {
      margin-right: 5px;
    }
    .img-set {
      width: 15px;
      vertical-align: middle;
      margin-right: 5px;
      cursor: pointer;
    }
  }
  .content {
    background-color: white;
    position: absolute;
    top: 60px;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 3px;
    overflow-y: auto;
    border: 1px solid #e6e6e6;

    .content-body-items {
      height: 100%;
    }

    .el-collapse {
      border: none;
    }

    .el-collapse /deep/ .el-collapse-item__wrap {
      border: 0;
    }
    .el-collapse /deep/ .el-collapse-item__header {
      padding-left: 20px;
      border: 0;
      .el-icon-arrow-right {
        float: none;
        margin: 0;
      }
      .wukong-subproject {
        font-size: 20px;
        margin-right: 5px;
      }
      .title {
        float: left;
        margin-right: 20px;
      }
    }
    .list-box {
      font-size: 14px;
      color: #333;
    }
  }
}
.new-tag-dialog {
  .title {
    padding: 10px;
    border-bottom: 1px solid#E6E6E6;
    margin-bottom: 20px;
    .el-icon-close {
      margin-right: 0;
      cursor: pointer;
    }
    .el-icon-arrow-left {
      cursor: pointer;
    }
  }
  .search {
    position: relative;
    .el-input {
      width: 90%;
      margin: 0 5%;
    }
    .el-input /deep/ .el-input__inner {
      padding-left: 40px;
    }
    .checked-color {
      position: absolute;
      left: 5%;
      top: 0;
      display: inline-block;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      margin: 6px 10px;
    }
  }
  .footer {
    text-align: right;
    margin: 20px;
  }
  .color-box {
    margin: 10px 5%;
    span {
      display: inline-block;
      width: 15px;
      height: 15px;
      margin-right: 8px;
      border-radius: 50%;
      cursor: pointer;
    }
    span:last-child {
      margin: 0;
    }
  }
}
</style>

