<!--fontweight什么意思
/**
 * @fileoverview Expander component
 * @license MIT
 * @author Rafal Pospiech <neuronet.io@gmail.com>
 * @package GanttElastic
 */
-->
<template>
  <div :class="getClassPrefix() + '-wrapper'" :style="{ ...root.style[getClassPrefix(false) + '-wrapper'], ...style }">
    <svg
      v-if="allChildren.length"
      :class="getClassPrefix() + '-content'"
      :style="{ ...root.style[getClassPrefix(false) + '-content'] }"
      :width="options.size"
      :height="options.size"
      @click="toggle"
    >
      <rect
        :class="getClassPrefix() + '-border'"
        :style="{ ...root.style[getClassPrefix(false) + '-border'], ...borderStyle }"
        :x="border"
        :y="border"
        :width="options.size - border * 2"
        :height="options.size - border * 2"
        rx="2"
        ry="2"
      />
      <line
        v-if="allChildren.length"
        :class="getClassPrefix() + '-line'"
        :style="{ ...root.style[getClassPrefix(false) + '-line'] }"
        :x1="lineOffset"
        :y1="options.size / 2"
        :x2="options.size - lineOffset"
        :y2="options.size / 2"
      />
      <line
        v-if="collapsed"
        :class="getClassPrefix() + '-line'"
        :style="{ ...root.style[getClassPrefix(false) + '-line'] }"
        :x1="options.size / 2"
        :y1="lineOffset"
        :x2="options.size / 2"
        :y2="options.size - lineOffset"
      />
    </svg>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Expander',
  inject: ['root'],
  // eslint-disable-next-line vue/require-prop-types
  props: ['tasks', 'options', 'type'],
  data() {
    const border = 0.5
    return {
      border,
      borderStyle: {
        'stroke-width': border
      },
      lineOffset: 5
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ]),
    style() {
      if (this.type !== 'taskList') {
        return {}
      }
      const margin = this.root.state.options.taskList.expander.margin
      const padding = this.tasks[0].parents.length * this.root.state.options.taskList.expander.padding
      return {
        'padding-left': padding + margin + 'px',
        margin: 'auto 0'
      }
    },
    /**
     * Get all tasks
     *
     * @returns {array}
     */
    allChildren() {
      const children = []
      this.tasks.forEach(task => {
        task.allChildren.forEach(childId => {
          children.push(childId)
        })
      })
      return children
    },
    /**
     * Is current expander collapsed?
     *
     * @returns {boolean}
     */
    collapsed() {
      if (this.tasks.length === 0) {
        return false
      }
      let collapsed = 0
      for (let i = 0, len = this.tasks.length; i < len; i++) {
        if (this.tasks[i].collapsed) {
          collapsed++
        }
      }
      return collapsed === this.tasks.length
    }
  },
  methods: {
    // ceshi(task) {
    //   for (let i = 0; i < this.TaskData.length; i++) {
    //     if (task.mark === 1) {
    //       document.getElementById(task.id).getElementsByClassName('gantt-elastic__task-list-item-value')[3].style.color = '#333399'
    //       document.getElementById(task.id).getElementsByClassName('gantt-elastic__task-list-item-value')[3].style.fontWeight = '700'
    //       document.getElementById(task.id).getElementsByClassName('gantt-elastic__task-list-item-value')[3].style.fontSize = '16px'
    //     } else {
    //       console.log(document.getElementById(task.id), 777777)
    //       document.getElementById(task.id).getElementsByClassName('gantt-elastic__task-list-item-value')[3].style.color = 'rgb(96, 96, 96)'
    //       document.getElementById(task.id).getElementsByClassName('gantt-elastic__task-list-item-value')[3].style.fontWeight = 'normal'
    //       document.getElementById(task.id).getElementsByClassName('gantt-elastic__task-list-item-value')[3].style.fontSize = '12px'
    //       // document.getElementById(this.TaskData[i].id).getElementsByClassName('gantt-elastic__task-list-item-value').style.background = 'rgb(255, 255, 255)'
    //     }
    //   }
    // },
    /**
     * Get specific class prefix
     *
     * @returns {string}
     */
    getClassPrefix(full = true) {
      return `${full ? 'gantt-elastic__' : ''}${this.options.type}-expander`
    },
    /**
     * Toggle expander
     */
    toggle() {
      console.log(this.tasks, 33)
      if (this.tasks.length === 0) {
        return
      }
      const collapsed = !this.collapsed
      this.tasks.forEach(task => {
        task.collapsed = collapsed
      })
      var param = []
      param[0] = ['ID', this.tasks[0].id]
      param[1] = ['人员编号', this.id]
      param[2] = ['是否隐藏', this.tasks[0].collapsed]
      var Data = this.CreateData('12', '项目管理_是否隐藏_修改数据', param)
      this.ExecDatabase(Data).then(response => {
        // if (response.data[0].result === '1') {
        //   this.$message({
        //     message: '信息编辑成功',
        //     type: 'success'
        //   })
        //   this.searchTable()
        // } else {
        //   this.$message.error('信息编辑失败')
        // }
        console.log(response.data[0].result)
      })
    }
  }
}
</script>
