
<template>
  
  <div class="Echarts">
    <div v-if="echartsShow==1">
      <div class="gva-search-box">
      <el-form ref="searchForm" :inline="true" :model="searchInfo">
        <el-form-item label="表格类型">
          <el-select v-model="searchInfo.state" clearable placeholder="请选择状态">
            <el-option value='1' label="汇总表">汇总表</el-option>
            <el-option value='2' label="成绩表">成绩表</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-cascader filterable clearable v-model="searchVersion.deaprtid" :options="departmentList" :show-all-levels="false" :props="props1"></el-cascader>
          
        </el-form-item>
        <!-- <el-form-item label="考核维度状态">
          <el-select v-model="searchInfo.state" clearable placeholder="请选择状态">
            <el-option :value=1 label="正常">正常</el-option>
            <el-option :value=2 label="禁止">禁止</el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="main" style="width: 80%;height: 800px;"></div>
    </div>
    <div v-if="echartsShow==2" style="padding:50px;">
      <div class="gva-search-box">
        <el-form ref="searchForm" :inline="true" :model="searchVersion">
        <el-form-item label="表格类型">
          <el-select v-model="searchVersion.state" clearable placeholder="请选择状态">
            <el-option value='1' label="汇总表">汇总表</el-option>
            <el-option value='2' label="成绩表">成绩表</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属公司">
          <el-select filterable v-model="searchVersion.group" clearable placeholder="请选择" @change="selectGroup">
            <el-option
              v-for="item in companyList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门">
          <el-cascader filterable clearable v-model="searchVersion.deaprtid" :options="departmentList" :show-all-levels="false" :props="props1"></el-cascader>
        </el-form-item>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
      </el-form>
      </div>
      <el-table style="width: 100%" :data="data" border :span-method="objectSpanMethod" :cell-style="{padding:'0px'}" >
        <el-table-column prop="departmentname" align="center" label="部门"></el-table-column>
        <el-table-column prop="dimensionname" align="center" label="考核维度"></el-table-column>
        <el-table-column prop="dimensionweight" label="维度权重" align="center"></el-table-column>
        <el-table-column prop="targetname" align="center" label="考核指标">
          <template slot-scope="scope">
            <el-link v-if="scope.row.type==1" type="primary" >{{scope.row.targetname}}</el-link>
            <div v-if="scope.row.type==2">{{scope.row.targetname}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="targetweight" label="指标权重" align="center"></el-table-column>
        
        <el-table-column prop="unit" label="单位" align="center"/>
        
        <el-table-column  prop="cycle" label="周期" align="center"> 
          <template slot-scope="scope">
            <el-tag v-if="scope.row.cycle==1">班</el-tag>
            <el-tag v-if="scope.row.cycle==2">天</el-tag>
            <el-tag v-if="scope.row.cycle==3">周</el-tag>
            <el-tag v-if="scope.row.cycle==4">月</el-tag>
            <el-tag v-if="scope.row.cycle==5">季度</el-tag>
            <el-tag v-if="scope.row.cycle==6">年</el-tag>
            <el-tag v-if="scope.row.cycle==7">半年</el-tag>
          </template>
        </el-table-column>
         <el-table-column align="center" prop="cycleattr" label="频次">
          <template slot-scope="scope">
            <div v-if="scope.row.cycle==1">每班{{scope.row.cycleattr}}次</div>
            <div v-if="scope.row.cycle==2">每天{{scope.row.cycleattr}}次</div>
            <div v-if="scope.row.cycle==3">每周{{scope.row.cycleattr}}次</div>
            <div v-if="scope.row.cycle==4">每月{{scope.row.cycleattr}}次</div>
            <div v-if="scope.row.cycle==5">每季度{{scope.row.cycleattr}}次</div>
            <div v-if="scope.row.cycle==6">每年{{scope.row.cycleattr}}次</div>
            <div v-if="scope.row.cycle==7">每半年{{scope.row.cycleattr}}次</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="执行部门">
            <template #default="scope">
              <el-collapse>
                <el-collapse-item title="详情">
                  <div v-for="(iteam,index) in scope.row.executivedepartment" :key="index">
                    {{iteam}}
                  </div>
                </el-collapse-item>
              </el-collapse>
              <!-- <div v-for="item in scope.row.relevantdepartmentsmap" :key="item.key">{{item.title}}</div> -->
            </template>
        </el-table-column>
         <!-- <el-table-column align="center" label="分值名称" width="70">
            <template #default="scope">
              <div style='border-bottom: 1px solid #EBEEF5;' v-for='(item,index) in scope.row.statisticsname' :key='index'>
                {{item}}
              </div>
            </template>
        </el-table-column> -->
        
        <!-- <el-table-column align="center" v-for="(iteam,index) in yueList" :key="index" :label="iteam">
           <template slot-scope="scope">
             <el-descriptions direction="vertical" :column="1" border>
                <el-descriptions-item :label="全奖值">{{scope.row}}</el-descriptions-item>
              </el-descriptions>
          </template>
        </el-table-column> -->
        <el-table-column align="center" v-for="(iteam,index) in yueList" :key="index" :label="iteam.title"  width="60">
          <!-- <el-table-column
            v-for="(iteam1,index1) in iteam.child"
            :key="index1"
            :label="iteam1.title"
            >
            <template slot-scope="scope">
              <template  v-for="(g,index2) in scope.row.score" >
                {{g.class[1]}}
              </template>
            </template>
          </el-table-column> -->
          
          <template slot-scope="scope">
             <!-- <div style='border-bottom: 1px solid #EBEEF5;'>
              {{scope.row.score[index].allprize}}
            </div>
            <div style='border-bottom: 1px solid #EBEEF5;'>
              {{scope.row.score[index].zeroprize}}
            </div>
            <div style='border-bottom: 1px solid #EBEEF5;'>
              {{scope.row.score[index].scoreval}}
            </div>
            <div style='border-bottom: 1px solid #EBEEF5;'>
              {{scope.row.score[index].achievement}}
            </div> -->
            <div v-if="scope.row.manualgear==1" style=''>
              {{scope.row.score[index].actualscore}}
            </div>
            <div v-if="scope.row.manualgear==2" style='color: blue;'>
              {{scope.row.score[index].actualscore}}
            </div>
          </template>
          <!-- <el-descriptions :column="1" border>
                <el-descriptions-item ></el-descriptions-item>
                <el-descriptions-item >{{scope.row.score[index].zeroprize}}</el-descriptions-item>
                <el-descriptions-item >{{scope.row.score[index].scoreval}}</el-descriptions-item>
                <el-descriptions-item >{{scope.row.score[index].achievement}}%</el-descriptions-item>
                <el-descriptions-item >{{scope.row.score[index].actualscore}}</el-descriptions-item>
              </el-descriptions> -->
        </el-table-column>
       </el-table>
    </div>
    <!-- 得分弹框 -->
      <!-- <el-dialog :visible.sync="showUser" title="得分详情" width="50%">
        
        <el-table
          :data="userlistary"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="头像">
            <template slot-scope="scope">
              <el-avatar shape="square" size="large" :src="scope.row.icon"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="工号">
          </el-table-column>
          <el-table-column
            prop="address"
            label="部门">
            <template slot-scope="scope">
              {{scope.row.groupname}}{{scope.row.departmentname}}
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
        </el-table>
      </el-dialog> -->
  </div>
</template>
 
<script>
import {getquantechartorgandyear,getplanversionvalid} from '@/api/echarts/echarts'
import {
  grouplist,
  departmentlist,
  getgroupdepartmap,
  getgroupuser
} from '@/api/duty/group'
import { gettarget,addtarget,gettargetinfo,eiteassessinfo,eitetarget,deltarget } from '@/api/duty/project'
export default {
  name: 'Echarts',
  data(){
    return{
      lengthList:[],
      props1: {
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children",
        emitPath:false,
      },
      // 新条件查询变量
      searchVersion: {
        group: 2,
        deaprtid:'',
        year: "", //年
        class:'',
        title:''
      },
      
      yueList:[
        {
          title:'1月',
          
        },
         {
          title:'2月',
          
        },
         {
          title:'3月',
          
        },
         {
          title:'4月',
          
        },
        {
          title:'5月',
          
        },
        {
          title:'6月',
          
        },
        {
          title:'7月',
          
        },
        {
          title:'8月',
          
        },
        {
          title:'9月',
          
        },
        {
          title:'10月',
          
        },
        {
          title:'11月',
          
        },
        {
          title:'12月',
          
        },
        //  {
        //   title:'五月',
        //   child:[
        //     {title:'全奖值',prop:'scoreval'},
        //     {title:'零奖值',prop:'zeroprize'},
        //     {title:'封顶值',prop:'cappingval'},
        //     {title:'实际得分',prop:'actualscore'}
        //   ]
        // },
      ],
      yearList:[{
          value: '2021',
          label: '2021'
        }, {
          value: '2022',
          label: '2022'
        }, {
          value: '2023',
          label: '2023'
        }, {
          value: '2024',
          label: '2024'
        }, {
          value: '2025',
          label: '2025'
        }, {
          value: '2026',
          label: '2026'
        }, {
          value: '2027',
          label: '2027'
        }, {
          value: '2028',
          label: '2028'
        }, {
          value: '2029',
          label: '2029'
        }, {
          value: '2030',
          label: '2030'
        }],
      // 公司列表
      companyList:[],
      departmentList:[],
      fenShow:false,
      data:[],
      echartsShow:2,
      tableData:[],
      searchInfo:{},
      searchData:'',
      pos:'',
      pos1:'',
      pos2:'',
      spanArr:[],
      spanArr1:[],
      spanArr2:[],
      lieArr:[],
      liePos:''
    }
  },
  created(){
    this.getDataList()
    this.getData1()
    this.getGrouplist()
    this.initialDepartment()
  },
  // 监听数据
  watch: {
    data() {

      this.$nextTick(() => {
        this.spanArr=[],
        this.spanArr1=[],
        this.spanArr2=[],
        this.pos2='',
        this.pos='',
        this.pos1='',
        this.lieArr=[],
        this.liePos=''
        //此时就可以获取到在created赋值后的dataList了
        this.getSpanArr(this.data);
        this.getSpanArr1(this.data);
        this.getSpanArr2(this.data);
        // this.getLieArr(this.data);
      });
    },
  },
  methods: {
    // 条件搜索
    onSubmit() {
      // this.searchInfo.page = 1
      // this.searchInfo.pagesize = 10
      // this.searchInfo.parentId=this.childInfo.outId
      this.getData()
    },
    // 初始化部门
    async initialDepartment(){
      
      const departmentFrom={
        // id:2
      }
      const res = await departmentlist(departmentFrom)
      this.departmentList=res.data
      
      
    },

    // 获取公司
    async getGrouplist(){
      const idFrom = {
        id:1
      }
      const res = await getgroupdepartmap(idFrom)
      this.companyList=res.data

    },
    // 选中的公司值
    async selectGroup(val){
      if (val!='') {
      const departmentFrom={
        id:parseInt(val)
      }
      const res = await departmentlist(departmentFrom)
      this.departmentList=res.data
      }
      
    },
    // 查看分数
    showFenList(row){
      this.fenShow=true
    },
    
    // 通过周期列合并
    getLieArr(data) {
      this.lieArr = [];
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          // 如果是第一条记录（即索引是0的时候），向数组中加入１
          this.lieArr.push(1);
          this.liePos = 0;
        } else {
          // console.log(data[i].id, data[i - 1].id)
          if (data[i].cycle === data[i - 1].cycle) {
            // 如果parent相等就累加，并且push 0  这里是根据一样的parent匹配
            this.lieArr[this.liePos] += 1;
            this.lieArr.push(0);
          } else {
            // 不相等push 1
            this.lieArr.push(1);
            this.liePos = i;
          }
        }
      }
      console.log("this.lieArr")
      console.log(this.lieArr)
    },
    // 部门合并
    getSpanArr(data) {
        // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].departmentid === data[i - 1].departmentid) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
      console.log("hangArr")
      console.log(this.spanArr)
    },
    // 纬度合并
    getSpanArr1(data) {
        // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr1.push(1);
          this.pos1 = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].dimension === data[i - 1].dimension) {
            this.spanArr1[this.pos1] += 1;
            this.spanArr1.push(0);
          } else {
            this.spanArr1.push(1);
            this.pos1 = i;
          }
        }
      }
    },
    // 指标合并
    getSpanArr2(data) {
        // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr2.push(1);
          this.pos2 = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].target === data[i - 1].target) {
            this.spanArr2[this.pos2] += 1;
            this.spanArr2.push(0);
          } else {
            this.spanArr2.push(1);
            this.pos2 = i;
          }
        }
      }
    },
    // 合并列
    // spanMethod({ row, column, rowIndex, columnIndex }) {
    //   if(columnIndex === 0) {
    //     const _row = this.lieArr[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     }
    //   }
    // },
    //  spanMethod({ row, column, rowIndex, columnIndex }) {
       
    //       if (columnIndex === 0) {
    //         const _row = this.lieArr[rowIndex];
    //           const _col = _row > 0 ? 1 : 0;
    //           return {
    //             rowspan: _row,
    //             colspan: _col
    //           }
    //       }
        
    //   },
    // 合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 1||columnIndex === 2) {
        const _row = this.spanArr1[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 3||columnIndex === 4||columnIndex === 5||columnIndex === 6||columnIndex === 7||columnIndex === 8||columnIndex === 9||columnIndex === 10) {
        const _row = this.spanArr2[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
      //  if (columnIndex === 10||columnIndex === 11||columnIndex === 12||columnIndex === 13) {
      //       const _col = this.lieArr[rowIndex];
      //         const _row = _col > 0 ? 1 : 0;
      //         return {
      //           rowspan: _row,
      //           colspan: _col
      //         }
      //     }
    },
    
    // 查询
    // onSubmit(){
      
    // },
    async clickTarget(val){
      const from = {
        targetid:val
      }
      const res = await getquantechartorgandyear(from)
      this.searchData = res.data.list
    },
    // 月份数据处理
    monthProcess(){

    },
    // 获取初始表格数据
    async getData1() {
      var userInfo=JSON.parse(sessionStorage.getItem('userinfo')); 
      this.searchVersion.group=userInfo.company
      this.searchVersion.deaprtid=userInfo.deparment
    //   if (this.searchVersion.deaprtid!=null) {
    //     this.searchVersion.deaprtid=this.searchVersion.deaprtid.toString()
    //   }
      console.log("this.searchVersion")
      console.log(this.searchVersion)
      const res = await getplanversionvalid(this.searchVersion)
      this.data = res.data
      console.log(this.data)
      this.data.forEach(ele=>{
        // 未知的话
        if (ele.cycle==0) {
          
          for (let i = 0; i < 12; i++) {
            if (ele.score.length>11) {
              return;
            }
              let newObj = {
                class: ele.type,
                scoreval:'-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              ele.score.push(newObj);
          }
        }
        // 月份的话
        if (ele.cycle==4) {
          
          for (let i = 0; i < 12; i++) {
            if (ele.score.length>11) {
              return;
            }
              let newObj = {
                class: ele.type,
                scoreval: '-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              ele.score.push(newObj);
          }
        }
        // 季度的话
        if (ele.cycle==5) {
           let newObj = {
                class: ele.type,
                scoreval: '-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              ele.score.splice(0,0,newObj);
              ele.score.splice(1,0,newObj);
              ele.score.splice(3,0,newObj);
              ele.score.splice(4,0,newObj);
              ele.score.splice(6,0,newObj);
              ele.score.splice(7,0,newObj);
              ele.score.splice(9,0,newObj);
              ele.score.splice(10,0,newObj);
          
        }
        // 半年的话
        if (ele.cycle==7) {
           let newObj = {
                class: ele.type,
                scoreval: '-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              ele.score.splice(0,0,newObj);
              ele.score.splice(1,0,newObj);
              ele.score.splice(2,0,newObj);
              ele.score.splice(3,0,newObj);
              ele.score.splice(4,0,newObj);
              ele.score.splice(6,0,newObj);
              ele.score.splice(7,0,newObj);
              ele.score.splice(8,0,newObj);
              ele.score.splice(9,0,newObj);
              ele.score.splice(10,0,newObj);
          
        }
        // 年度的话
        if (ele.cycle==6) {
           let newObj = {
                class: ele.type,
                scoreval: '-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              for (let i = 0; i < 12; i++) {
            if (ele.score.length>11) {
              return;
            }
              let newObj = {
                class: ele.type,
                scoreval: '-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              ele.score.unshift(newObj);
          }
          
        }
        console.log("ele.score.length")
        console.log(ele.score.length)
        this.lengthList.push(ele.score.length)
        
      })
      console.log("this.lengthList")
      console.log(this.lengthList)
      console.log("this.data")
      console.log(this.data)
      var scoreLength = []
      this.data.forEach(a=>{
        scoreLength.push(a.score.length)
        
      })
      console.log("scoreLength")
      console.log(scoreLength)
      this.searchVersion.group=2
      // this.searchVersion= {
      //   group: 2,
      //   deaprtid:'',
      //   year: "", //年
      // }
    },
    // 获取初始表格数据
    async getData() {
      this.searchVersion.group=this.searchVersion.group.toString()
      if (this.searchVersion.deaprtid!=null) {
        this.searchVersion.deaprtid=this.searchVersion.deaprtid.toString()
      }
      console.log("this.searchVersion")
      console.log(this.searchVersion)
      const res = await getplanversionvalid(this.searchVersion)
      this.data = res.data
      console.log(this.data)
      this.data.forEach(ele=>{
        // 未知的话
        if (ele.cycle==0) {
          
          for (let i = 0; i < 12; i++) {
            if (ele.score.length>11) {
              return;
            }
              let newObj = {
                class: ele.type,
                scoreval:'-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              ele.score.push(newObj);
          }
        }
        // 月份的话
        if (ele.cycle==4) {
          
          for (let i = 0; i < 12; i++) {
            if (ele.score.length>11) {
              return;
            }
              let newObj = {
                class: ele.type,
                scoreval: '-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              ele.score.push(newObj);
          }
        }
        // 季度的话
        if (ele.cycle==5) {
           let newObj = {
                class: ele.type,
                scoreval: '-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              ele.score.splice(0,0,newObj);
              ele.score.splice(1,0,newObj);
              ele.score.splice(3,0,newObj);
              ele.score.splice(4,0,newObj);
              ele.score.splice(6,0,newObj);
              ele.score.splice(7,0,newObj);
              ele.score.splice(9,0,newObj);
              ele.score.splice(10,0,newObj);
          
        }
        // 半年的话
        if (ele.cycle==7) {
           let newObj = {
                class: ele.type,
                scoreval: '-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              ele.score.splice(0,0,newObj);
              ele.score.splice(1,0,newObj);
              ele.score.splice(2,0,newObj);
              ele.score.splice(3,0,newObj);
              ele.score.splice(4,0,newObj);
              ele.score.splice(6,0,newObj);
              ele.score.splice(7,0,newObj);
              ele.score.splice(8,0,newObj);
              ele.score.splice(9,0,newObj);
              ele.score.splice(10,0,newObj);
          
        }
        // 年度的话
        if (ele.cycle==6) {
           let newObj = {
                class: ele.type,
                scoreval: '-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              for (let i = 0; i < 12; i++) {
            if (ele.score.length>11) {
              return;
            }
              let newObj = {
                class: ele.type,
                scoreval: '-',
                allprize: '-',
                zeroprize: '-',
                cappingval: '-',
                actualscore: '-',
                achievement: '-'
              };
              ele.score.unshift(newObj);
          }
          
        }
        console.log("ele.score.length")
        console.log(ele.score.length)
        this.lengthList.push(ele.score.length)
        
      })
      console.log("this.lengthList")
      console.log(this.lengthList)
      console.log("this.data")
      console.log(this.data)
      var scoreLength = []
      this.data.forEach(a=>{
        scoreLength.push(a.score.length)
        
      })
      console.log("scoreLength")
      console.log(scoreLength)
      this.searchVersion.group=2
      // this.searchVersion= {
      //   group: 2,
      //   deaprtid:'',
      //   year: "", //年
      // }
    },
    // 获取初始数据
    async getDataList() {
        var userInfo=JSON.parse(sessionStorage.getItem('userinfo')); 
      const searchInfo = {
         page: 1,
         pagesize: 10000
      }
      
      const res = await gettarget(searchInfo)
      this.tableData = res.data
    },
  },
  mounted(){
    // this.myEcharts();
    
  },
  
}
</script>
 
<style lang="scss" scoped>
 ::v-deep.el-table .cell{
   padding-right: 0px !important;
   padding-left: 0px !important;
 }
</style>