<template>
  <!-- 项目流程 -->
  <div class="projectPath" style="width: 100%;height:100%;">
    <span>项目流程</span>
    <el-divider></el-divider>
    <svg v-if="isShow" viewBox="0 0 1800 400" width="100%" height="100%">


      <g transform=translate(0,0) class="svgG">
        <g @click="toDrawer('创新点梳理', 1)">
          <rect width="200" height="120" :fill="getColor('创新点梳理',1)"> </rect>
          <text x="30" y="65">创新点梳理</text>
        </g>
        <!-- <g @click="toFilePage('创新点梳理', 1,'任务')"> -->
        <g>
          <text x="120" y="45">任务：</text>
          <circle cx="180" cy="40" r="16" stroke-width="1" stroke="#fff" :fill="getColor('创新点梳理',1)"/>
          <text :x="getNumber('创新点梳理',1) > 9 ? '175' : '170'" y="45" fill="#fff">{{ getNumber('创新点梳理',1, 'taskCount') }}</text>
          
          <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        </g>
        <!-- <g @click="toFilePage('创新点梳理', 1,'文件')"> -->
        <g>
          <text x="120" y="85">文件：</text>
          <circle cx="180" cy="80" r="16" stroke-width="1" stroke="#fff" :fill="getColor('创新点梳理',1)" />
          <text :x="getNumber('创新点梳理',1) > 9 ? '175' : '175'" y="85" fill="#fff">{{ getNumber('创新点梳理',1 , 'fileCount') }}</text>
          <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        </g>
        <polygon points="350,55,360,60,350,65"></polygon>
      </g>


      <g transform="translate(360,0)" class="svgG">
        <g @click="toDrawer('查新检索', 2)">
          <rect width="200" height="120" :fill="getColor('查新检索',2)"> </rect>
          <text x="30" y="65">查新检索</text>
        </g>
        <!-- <g @click="toFilePage('查新检索', 2,'任务')"> -->
        <g>
          <text x="120" y="45">任务：</text>
          <circle cx="180" cy="40" r="15" stroke-width="1" stroke="#fff" :fill="getColor('查新检索',2)" />
          <text :x="getNumber('查新检索',2) > 9 ? '170' : '175'" y="45" fill="#fff">{{ getNumber('查新检索',2,'taskCount') }}</text>
          <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        </g>
        <!-- <g @click="toFilePage('查新检索', 2,'文件')"> -->
        <g>
          <text x="120" y="85">文件：</text>
          <circle cx="180" cy="80" r="15" stroke-width="1" stroke="#fff" :fill="getColor('查新检索',2)" />
          <text :x="getNumber('查新检索',2) > 9 ? '170' : '175'" y="85" fill="#fff">{{ getNumber('查新检索',2,'fileCount') }}</text>
          <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        </g>
        <polygon points="350,55,360,60,350,65"></polygon>
      </g>


      <g transform="translate(720,0)" class="svgG">
        <g @click="toDrawer('保护主题规划', 3)">
          <rect width="200" height="120" :fill="getColor('保护主题规划',3)"> </rect>
          <text x="30" y="65">保护主题规划</text>
        </g>
        <!-- <g @click="toFilePage('保护主题规划', 3,'任务')"> -->
        <g>
          <text x="120" y="45">任务：</text>
          <circle cx="180" cy="40" r="15" stroke-width="1" stroke="#fff" :fill="getColor('保护主题规划',3)" />
          <text :x="getNumber('保护主题规划',3) > 9 ? '170' : '175'" y="45" fill="#fff">{{ getNumber('保护主题规划',3,'taskCount') }}</text>
          <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        </g>
        <!-- <g @click="toFilePage('保护主题规划', 3,'文件')"> -->
        <g>
          <text x="120" y="85">文件：</text>
          <circle cx="180" cy="80" r="15" stroke-width="1" stroke="#fff" :fill="getColor('保护主题规划',3)" />
          <text :x="getNumber('保护主题规划',3) > 9 ? '170' : '175'" y="85" fill="#fff">{{ getNumber('保护主题规划',3,'fileCount') }}</text>
          <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        </g>
        <polygon points="350,55,360,60,350,65"></polygon>
      </g>


      <g transform="translate(1080,0)" class="svgG">
        <g @click="toDrawer('独权撰写', 4)">
          <rect width="200" height="120" :fill="getColor('独权撰写',4)"> </rect>
          <text x="30" y="65">独权撰写</text>
        </g>
        <!-- <g @click="toFilePage('独权撰写', 4,'任务')"> -->
        <g>
          <text x="120" y="45">任务：</text>
          <circle cx="180" cy="40" r="15" stroke-width="1" stroke="#fff" :fill="getColor('独权撰写',4)" />
          <text :x="getNumber('独权撰写',4) > 9 ? '170' : '175'" y="45" fill="#fff">{{ getNumber('独权撰写',4,'taskCount') }}</text>
          <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        </g>
        <!-- <g @click="toFilePage('独权撰写', 4,'文件')"> -->
        <g>
          <text x="120" y="85">文件：</text>
          <circle cx="180" cy="80" r="15" stroke-width="1" stroke="#fff" :fill="getColor('独权撰写',4)" />
          <text :x="getNumber('独权撰写',4) > 9 ? '170' : '175'" y="85" fill="#fff">{{ getNumber('独权撰写',4,'fileCount') }}</text>
          <line x1="200" y1="60" x2="350" y2="60" stroke='#333'></line>
        </g>

        <polygon points="350,55,360,60,350,65"></polygon>
      </g>


      
      <g transform="translate(1440,0)" class="svgG">
        <g @click="toDrawer('从权撰写', 5)">
          <rect width="200" height="120" :fill="getColor('从权撰写',5)"> </rect>
          <text x="30" y="65">从权撰写</text>
        </g>
        <!-- <g @click="toFilePage('从权撰写', 5,'任务')"> -->
        <g>
          <text x="120" y="45">任务：</text>
          <circle cx="180" cy="40" r="15" stroke-width="1" stroke="#fff" :fill="getColor('从权撰写',5)" />
          <text :x="getNumber('从权撰写',5) > 9 ? '170' : '175'"  y="45" fill="#fff">{{ getNumber('从权撰写',5,'taskCount') }}</text>
          <line x1="100" y1="120" x2="100" y2="190" stroke='#333'></line>
        </g>
        <!-- <g @click="toFilePage('从权撰写', 5,'文件')"> -->
        <g>
          <text x="120" y="85">文件：</text>
          <circle cx="180" cy="80" r="15" stroke-width="1" stroke="#fff" :fill="getColor('从权撰写',5)" />
          <text :x="getNumber('从权撰写',5) > 9 ? '170' : '175'"  y="85" fill="#fff">{{ getNumber('从权撰写',5,'fileCount') }}</text>
          <line x1="100" y1="120" x2="100" y2="190" stroke='#333'></line>
        </g>
        <polygon points="95,190,100,200,105,190"></polygon>
      </g>
      <!-- <g transform="translate(1080,200)" class="svgG">
        <rect width="200" height="120" :fill="getColor('从权撰写')" @click="toDrawer('从权撰写')">  </rect>
        <text x="30" y="65">从权撰写</text>
        <circle cx="150" cy="60" r="15" stroke-width="1" stroke="#fff" :fill="getColor('从权撰写')" />
        <text x="145" y="65" fill="#fff">{{ getNumber('从权撰写') }}</text>
        <line x1="0" y1="60" x2="-150" y2="60" stroke='#333'></line>
        <polygon points="-150,55,-160,60,-150,65"></polygon>
      </g> -->
      <g transform="translate(1440,200)" class="svgG">
        <g @click="toDrawer('申请文件定稿', 6)">
          <rect width="200" height="120" :fill="getColor('申请文件定稿',6)"> </rect>
          <text x="30" y="65">申请文件定稿</text>
        </g>
        <!-- <g @click="toFilePage('申请文件定稿', 6,'任务')"> -->
        <g>
          <text x="120" y="45">任务：</text>
          <circle cx="180" cy="40" r="15" stroke-width="1" stroke="#fff" :fill="getColor('申请文件定稿',6)" />
          <text :x="getNumber('申请文件定稿',6) > 9 ? '170' : '175'" y="45" fill="#fff">{{ getNumber('申请文件定稿',6,'taskCount') }}</text>
          <line x1="0" y1="60" x2="-150" y2="60" stroke='#333'></line>
        </g>
        <!-- <g @click="toFilePage('申请文件定稿', 6,'文件')"> -->
        <g>
          <text x="120" y="85">文件：</text>
          <circle cx="180" cy="80" r="15" stroke-width="1" stroke="#fff" :fill="getColor('申请文件定稿',6)" />
          <text :x="getNumber('申请文件定稿',6) > 9 ? '170' : '175'" y="85" fill="#fff">{{ getNumber('申请文件定稿',6,'fileCount') }}</text>
          <line x1="0" y1="60" x2="-150" y2="60" stroke='#333'></line>
        </g>
        <polygon points="-150,55,-160,60,-150,65"></polygon>
      </g>


      <g transform="translate(1080,200)" class="svgG" @click="toDrawer('说明书规划撰写', 7)">
        <rect width="200" height="120" :fill="getColor('说明书规划撰写',7)"> </rect>
        <text x="15" y="65" xml:space='preserve'>说明书规划撰写
        </text>
        <!-- <g @click="toFilePage('说明书规划撰写', 7,'任务')"> -->
        <g>
          <text x="120" y="45">任务：</text>
          <circle cx="180" cy="40" r="15" stroke-width="1" stroke="#fff" :fill="getColor('说明书规划撰写',7)" />
          <text :x="getNumber('说明书规划撰写',7) > 9 ? '170' : '175'" y="45" fill="#fff">{{ getNumber('说明书规划撰写',7,'taskCount') }}</text>
        </g>
        <!-- <g @click="toFilePage('说明书规划撰写', 7,'文件')"> -->
        <g>
          <text x="120" y="85">文件：</text>
          <circle cx="180" cy="80" r="15" stroke-width="1" stroke="#fff" :fill="getColor('说明书规划撰写',7)" />
          <text :x="getNumber('说明书规划撰写',7) > 9 ? '170' : '175'" y="85" fill="#fff">{{ getNumber('说明书规划撰写',7,'fileCount') }}</text>
        </g>
      </g>
    </svg>

  </div>
</template>

<script>
import { optionsData } from '../../mixins/index2'
export default {
  mixins: [optionsData],
  props: ['id','isClose'],
  data() {
    return {
      numObj: {
        '创新点梳理': {'task':0,'file':2},
        '查新检索': {'task':0,'file':0},
        '保护主题规划': {'task':0,'file':0},
        '独权撰写': {'task':0,'file':0},
        '从权撰写': {'task':0,'file':0},
        '申请文件定稿': {'task':0,'file':0},
        '说明书规划撰写': {'task':0,'file':0},
      },
      isShow:false,
    }
  },
  watch: {
    isClose(val) {
      this.getFileNumber()
    },
  },
  computed: {},
  async mounted() {
    await this.getFileNumber()
  },
  methods: {
    // 获取流程节点及相对应的文件
    async getFileNumber() {
      let params = {
        projectId: this.id,
      }
      await this.$api.getCountOfProcess(params).then(response => {
        if (response.code == 200) {
          this.numObj = response.data
          this.isShow=true
        }
      }).catch(error => {
        this.numObj = {}
      })
    },
    // 获取文件数量
    getNumber(str, id, type) {
      if(this.numObj[id]){
        var num = this.numObj[id][type]
        return num?num:0
      }
      return 0
      
    },
    // 获取背景颜色
    getColor(str,id) {
      var num = 0
      if(this.numObj[id]){
        var taskCount = this.numObj[id].taskCount
        var fileCount = this.numObj[id].fileCount
        num = taskCount + fileCount
      }
      return num > 0 ? '#5ed325' : 'pink'
    },
    // 打开抽屉弹窗
    toDrawer(str, id) {
      let obj = {
        pathName: str,
        pathId: id
      }
      this.$emit('on-drawer',obj)
    },
    // 跳转文件列表界面
    toFilePage(str, id , type) {
      let obj = {
        pathName: str,
        pathId: id,
        type:type
      }
      this.$emit('grandson',obj)
    },
  },
}
</script>

<style lang="scss">
.projectPath {
  .el-divider--horizontal {
    margin: 10px 0;
  }
}
</style>
<style lang="scss" scoped>
.projectPath {
  .svgG {
    cursor: pointer;
  }
}
</style>