<template>
  <div class="container">
    <!-- 查询配置 -->
    <div style="padding: 0px 20px 20px 20px;background: #EFF2F9;">
      <!-- <div @click='logout'>退出</div> -->
      <el-row :gutter="20" class='elrows'>
        <el-col :span="12">
          <div ref="lxTable" class="table-tree">
            <div
              style="display:flex;justify-content: space-between;;padding: 15px;padding-left: 20px;background-color: #fff;"
              class="form-sub-title">
              <el-link type="primary" icon="el-icon-s-data" style="font-size:18px"
                href="#/dashboard/article">资讯动态</el-link>
            </div>
            <div class="overall">
              <el-carousel height="330px">
                <el-carousel-item v-for="item in articleSwiper" :key="item.id">

                  <div>
                    <el-image
                           @click="showDashboardArticle(item.id)"
                          style="width: 100%; height: 100%;cursor: pointer;"
                          :src="item.image.url"></el-image>
                  </div>
                  <h3 style="position: absolute;bottom: 0;width: 100%;padding: 10px;color: #fff;background: rgba(0, 0, 0, 0.4);" class="small">{{ item.title }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-col>

        <el-col :span="12">
          <div ref="lxTable" class="table-tree" style="padding: 15px;background-color: #fff;">
            <div style="padding-bottom: 15px;background-color: #fff;display: flex;align-items: center;"
              class="form-sub-title">
              <el-link icon="el-icon-s-opportunity" type="primary" style="font-size:18px;margin-right:5px"
                href="#">工作动态</el-link>
            </div>
            <div>
             <div>
               <div class="active_info" style="height:330px">
                 <li class="active_li" @click="showActiveInfo(item)" v-for="item in activeAllList">
                   <div class="active_div">{{item.title?item.title:''}}</div>
                   <div class="active_div2">{{item.created_at?item.created_at.substr(0,11):''}}</div>
                 </li>
               </div>
               <!-- <el-carousel arrow="nerver" trigger="click" height="310px" :autoplay='isautoplay' :interval="5000" direction="vertical">
                  <el-carousel-item v-for="item in activeAllList"> -->
                     <!-- <xy-table :list="activeAllList" stripe ref="activeTable" :isPage="false" :height="'330px'" id="boxed"
                        :table-item="activeTable">
                        <template v-slot:btns>
                          <el-table-column align='center' label="操作" width="80" header-align="center">
                            <template slot-scope="scope">
                              <Button v-if="scope.row.is_id=='mission'" type="primary" size="small" @click="checkUnits(scope.row.mission_id,'show')">查看</Button>
                              <Button v-else-if="scope.row.is_id=='plan'" type="primary" size="small" @click="showPlan(scope.row.mission_id,'show')">查看</Button>

                              <Button v-else type="primary" size="small" @click="showArticle(scope.row.id)">查看</Button>

                            </template>
                          </el-table-column>
                        </template>
                      </xy-table> -->
                  <!-- </el-carousel-item>
                </el-carousel> -->
              </div>



            </div>
          </div>
        </el-col>



        <el-col :span="24">
          <div ref="lxTable" stripe class="table-tree">
            <div style="padding: 15px;background-color: #fff;padding-bottom:5px;" class="form-sub-title">
              <el-link icon='el-icon-user-solid' type="primary" style="font-size:18px">待办事项</el-link>
            </div>
            <div style="height:420px;background-color: #fff;padding: 15px;padding-top:0">
              <el-tabs v-model="activeName">
                <el-tab-pane name="first">
                  <span slot="label">
                    我的待办任务
                    <el-badge :value="myselfTotal" class="item"></el-badge>
                  </span>
                  <div style="height:350px">
                   <xy-table :list="myselfList" :defaultExpandAll="false" :showIndex="false"
                    :treeProps="treeProps" stripe :isPage="false" :height="'350px'" :table-item="myselfTable">

                      <template v-slot:btns>
                        <el-table-column align='center' label="操作" width="100" header-align="center">
                          <template slot-scope="scope">
                            <div>
                              <Button style='margin-right:5px;margin-bottom:5px;' type="primary" size="small"
                                @click="goMyunit(scope.row.id)">去办理</Button>
                            </div>
                          </template>
                        </el-table-column>
                      </template>
                    </xy-table>

                  </div>
                </el-tab-pane>
              </el-tabs>


            </div>

          </div>
        </el-col>
        <el-col :span="24">

          <div ref="lxTable" stripe class="table-tree">
            <div style="display:flex;justify-content: space-between;padding: 15px;background-color: #fff;padding-bottom:5px;" class="form-sub-title">
              <el-link icon='el-icon-user-solid' type="primary" style="font-size:18px">科室任务统计</el-link>
              <div>
                <el-date-picker
                  @change="changeDepYear"
                  v-model="depYear"
                  type="year"
                  format="yyyy"
                  value-format="yyyy"
                  placeholder="选择年">
                </el-date-picker>
              </div>
            </div>
            <div style="height:450px;background-color: #fff;padding: 15px;padding-top:0">
              <div style="height:450px">
                <!-- :showSummary='true' :summaryMethod="summaryDep" -->
                <xy-table :list="depList" :showIndex="false" stripe :isPage="false" :height="'423px'" :table-item="depTable">
                  <template v-slot:btns>
                    <div></div>
                  </template>
                </xy-table>
              </div>
            </div>

          </div>
        </el-col>
        <el-col :span="12">
          <div ref="lxTable" class="table-tree">
            <div
              style="display:flex;justify-content: space-between;;padding: 15px;padding-left: 20px;background-color: #fff;"
              class="form-sub-title">
              <el-link type="primary" icon="el-icon-s-data" style="font-size:18px"
                href="#/lawsfile/article">综合数据</el-link>
              <el-radio-group v-model="showData" size="small">
                <el-radio-button label="month">月度</el-radio-button>
                <el-radio-button label="dep">科室</el-radio-button>
                <el-radio-button label="mission">任务类型</el-radio-button>
              </el-radio-group>
            </div>
            <div class="overall">
              <el-descriptions title="" :column="3" class="margin-top"
                :labelStyle="{'color':'#2c2d2f','font-size':'16px'}"
                :contentStyle="{'color':'#333333','font-size':'16px'}">
                <el-descriptions-item label="" span='1'>
                  <template slot='label'>
                    <div style='display: flex;'>
                      <p>
                        年度计划任务
                      </p>
                    </div>
                  </template>
                  <div>{{overallObj.mission_plan.total}}项</div>
                </el-descriptions-item>
                <el-descriptions-item label="" span='1'>
                  <template slot='label'>
                    <img src="icon1" alt="">
                    已完成/已开展
                  </template>
                  <div>
                    <p>{{overallObj.mission_plan.end}}/{{overallObj.mission_plan.ing}}项</p>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="" span='1'>
                  <template slot='label'>
                    未按时完成
                  </template>
                  <div>
                    <p>{{overallObj.mission_plan.no_end}}项</p>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="" span='1'>
                  <template slot='label'>
                    <img src="icon1" alt="">
                    专项专题任务
                  </template>
                  <div>
                    <p>{{overallObj.mission.total}}项</p>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="" span='1'>
                  <template slot='label'>
                    <img src="icon1" alt="">
                    当前开展
                  </template>
                  <div>
                    <p>{{overallObj.mission.ing}}项</p>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="" span='1'>
                  <template slot='label'>
                    <img src="icon1" alt="">
                    未按时完成
                  </template>
                  <div>
                    <p>{{overallObj.mission.no_end}}项</p>
                  </div>
                </el-descriptions-item>
              </el-descriptions>

              <myecharts v-if="showData==='month'" :width="'100%'" :height="'272px'" :data="overall_month_data"></myecharts>
              <myecharts v-if="showData==='dep'" :width="'100%'" :height="'272px'" :data="overall_dep_data">
              </myecharts>
              <myecharts v-if="showData==='mission'" :width="'100%'" :height="'272px'" :data="overall_type_data">
              </myecharts>

            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div ref="lxTable" class="table-tree">
            <div style="padding: 15px;background-color: #fff;" class="form-sub-title">
              <div style="display: flex;justify-content: space-between;">
                <el-link icon="el-icon-s-marketing" type="primary" style="font-size:18px">检查整改</el-link>
                <el-radio-group v-model="showAskData" size="small">
                  <el-radio-button :label="false">责任科室</el-radio-button>
                  <el-radio-button :label="true">问题类型</el-radio-button>
                </el-radio-group>
              </div>
              <div>
              </div>
            </div>
            <div style="display: flex;">
              <myecharts v-if="!showAskData" :width="'60%'" :height="'345px'" :data="inspection_dep_data"></myecharts>
              <myecharts v-if="showAskData" :width="'60%'" :height="'345px'" :data="inspection_ask_data"></myecharts>
              <myecharts :width="'40%'" :height="'345px'" :data="inspection_all_data"></myecharts>
            </div>

          </div>
        </el-col>
      </el-row>
      <showPlan ref='showPlan'></showPlan>
      <checkUnit ref='checkUnit' @refresh='getMyselfList'></checkUnit>
      <addPatrol ref='addPatrol' @refresh='getMyselfList'></addPatrol>

      <answerQuestion ref='answerQuestion' @refresh='getMyselfList'></answerQuestion>
      <!-- <showPatrol ref='showPatrol' @refresh='getMyselfList'></showPatrol> -->

      <showArticle ref='showArticle' @refresh="refreshIsshow"></showArticle>
      <showDashboardArticle ref="showDashboardArticle"></showDashboardArticle>
      <addUnit ref='addUnit' @refresh='getMyselfList'></addUnit>
    </div>
  </div>
</template>

<script>
import {
  getparameteritem
} from "@/api/system/dictionary.js";
import {
  getInfo
} from "@/api/user.js";
import {
  listunit,
  updatemission
} from '@/api/task/unit.js'
import {
  updateplan
} from '@/api/task/plan.js'
import {
  listarticle,
  get
} from "@/api/lawsfile/article.js";

import {
  listnotice,
  listoverall,
  chartinspection,
  chartDepartment
} from "@/api/chart.js";
  import {
    index as indexSwiper
  } from '@/api/task/newplan.js'
import {
  mapGetters
} from 'vuex'
import myecharts from '@/components/myecharts';
import viewInfo from '../lawsfile/index/components/viewInfo.vue'
import checkUnit from '@/views/task/list/components/checkUnit.vue'
import addPatrol from '@/views/task/list/components/addPatrol.vue'
import answerQuestion from '@/views/task/list/components/answerQuestion.vue'
import showPlan from '@/views/task/list/components/showPlan.vue'
import showArticle from '@/views/dashboard/components/showArticle.vue'
import showDashboardArticle from '@/views/dashboard/components/showDashboardArticle.vue'

import state from '@/store/modules/user.js'
import addUnit from '@/views/task/list/components/addUnit.vue'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  components: {
    viewInfo,
    myecharts,
    checkUnit,
    addPatrol,
    answerQuestion,
    showArticle,
    showDashboardArticle,
    showPlan,
          addUnit,
  },
  data() {
    return {
      login_id: '',
      department_id: '',
      isautoplay:true,
      articleSwiper:[],
      activeCount:1,
      activeName: 'first',
      activeAllList:[],
      activeList: [],
      articleList:[],
      lawList:[],
      filesList:[],
      planStatus:["未完成","发起了一项","开展了一项","完成了一项"],
      missionStatus:['完成',"开展了一项","未完成","完成了一项任务","发起了一项"],
      activeAllObj:{
        inspection_id:"检查",
        mission_plan_id:"年度计划任务",
        mission_study_feedback_id:"学习",
        mission_ask_id:"答题",
        mission_material_feedback_id:'资料收集',
        mission_train_feedback_id:'培训反馈',
        id:"专项专题任务",

      },
      activeTable: [{
          prop: "created_at",
          label: "日期",
          width: 170,
          align: "center",
          formatter: (cell, data, value, index) => {
            return value ? value.substring(0, 16) : ''
          }
        },
        {
          prop: "active_type",
          label: "类型",
          width: 120,
          align: "center",
        },
        {
          prop: "department.name",
          label: "部门",
          width: 120,
          align: "center",
        },
        {
          prop: "admin.name",
          label: "操作人",
          width: 120,
          align: "center",
        },
        {
          prop: "title",
          label: "详情",
          align: "left"
        }
      ],

      // 我的任务
      unitTypeList: [],
      myselfList: [],
      myselfTotal: '',
      stateObj:{},
      auditStatusList: [{
          id:4,
          value:'待办',
          type:'info'
        },{
          id:1,
          value:'办理中',
          type:''
        },{
          id:5,
          value:'已归档',
          type:'success'
        },{
          id:3,
          value:'已完成',
          type:'danger'
        }],
        treeProps:{children: 'mychildren', hasChildren: 'hasChildren'},
      myselfTable: [{
          label: "",
          prop: 'pindex',
          // fixed:'left',
          width:80
        },{
            label: "任务名称",
            prop: 'name',
            width: 200,
            // fixed:'left',
            align: 'left',
          }, {
            label: "任务内容及要求",
            prop: 'content',
            minWidth: 200,
            align: 'left',
          }, {
            label: "开始日期",
            prop: 'start_date',
            width: 120,
            align: 'center'
          }, {
            label: "要求完成日期",
            prop: 'end_date',
            width: 120,
            align: 'center'
          }, {
            label: "状态",
            prop: 'audit_status',
            width: 120,
            align: 'center',
            customFn: (row) => {
              return (  <div> {
				  // 有转办人，转办人不显示 已转办 任务为结束。
				 //  row.do_admin_ids.length>0 && !row.do_admin_ids.includes(this.stateObj.login_id) && !(row.audit_status==3||row.audit_status==5)?
					// <el-tag type ='info'>已转办</el-tag>
				 //  :
                  this.auditStatusList.map(item => {
                      if (item.id == row.audit_status) {
                        return ( <el-tag type = {
                            item.type
                          }> {
                            item.value
                          } </el-tag>)
                        }
                      })
                  } </div>)
                }
              },
              // {
              //   label: "责任人(科室)",
              //   prop: 'main_admin.name',
              //   width: 120,
              //   align: 'center',
              // },
              ],
      depYear:'',
      depList:[],
      auditTable:{
        1:'办理中',
        3:'已完成',
        4:'待办',
        5:'已归档'
      },
      depTable:[{
        prop:'name',
        label:'月份/科室',
      },{
        prop:'01',
        label:'一月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['01']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['01']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}</div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['01']['data']}</span>
              </el-popover>

              :<span>{row['01']['data']}</span>
            }
          </div>)
        }
      },{
        prop:'02',
        label:'二月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['02']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['02']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}</div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['02']['data']}</span>
              </el-popover>

              :<span>{row['02']['data']}</span>
            }
          </div>)
        }
      },{
        prop:'03',
        label:'三月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['03']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['03']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}</div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['03']['data']}</span>
              </el-popover>

              :<span>{row['03']['data']}</span>
            }
          </div>)
        }
      },{
        prop:'04',
        label:'四月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['04']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['04']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}</div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['04']['data']}</span>
              </el-popover>

              :<span>{row['04']['data']}</span>
            }
          </div>)
        }
      },{
        prop:'05',
        label:'五月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['05']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['05']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}</div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['05']['data']}</span>
              </el-popover>

              :<span>{row['05']['data']}</span>
            }
          </div>)
        }
      },{
        prop:'06',
        label:'六月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['06']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['06']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}</div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['06']['data']}</span>
              </el-popover>

              :<span>{row['06']['data']}</span>
            }
          </div>)
        }
      },{
        prop:'07',
        label:'七月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['07']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['07']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}</div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['07']['data']}</span>
              </el-popover>

              :<span>{row['07']['data']}</span>
            }
          </div>)
        }
      },{
        prop:'08',
        label:'八月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['08']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['08']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}</div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['08']['data']}</span>
              </el-popover>

              :<span>{row['08']['data']}</span>
            }
          </div>)
        }
      },{
        prop:'09',
        label:'九月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['09']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['09']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}</div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['09']['data']}</span>
              </el-popover>

              :<span>{row['09']['data']}</span>
            }
          </div>)
        }
      },{
        prop:'10',
        label:'十月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['10']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['10']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}</div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['10']['data']}</span>
              </el-popover>

              :<span>{row['10']['data']}</span>
            }
          </div>)
        }
      },{
        prop:'11',
        label:'十一月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['11']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['11']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}
                      </div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['11']['data']}</span>
              </el-popover>

              :<span>{row['11']['data']}</span>
            }
          </div>)
        }
      },{
        prop:'12',
        label:'十二月',
        customFn:row=>{
          return(<div>
            {
              parseInt(row['12']['data'])>0?
              <el-popover
                  placement={'top'}
                  width={'300'}
                  trigger={'click'}>
                  {
                    row['12']['mission'].map((item,index)=>{
                      return(<div
                      style={{'margin':'5px','cursor': 'pointer'}}
                      on={
                        {
                          ['click']: (e) => {
                            this.checkUnits(item.id,'show')
                          }
                        }
                      }
                      >{index+1}、({this.auditTable[item.audit_status]})-{item.name}</div>)
                    })
                  }
                  <span slot={"reference"} style={{'color':'blue','cursor': 'pointer'}}>{row['12']['data']}</span>
              </el-popover>

              :<span>{row['12']['data']}</span>
            }
          </div>)
        }
      }],
      icon1: require('@/assets/index/icon1.png'),
      icon2: require('@/assets/index/icon2.png'),
      icon3: require('@/assets/index/icon3.png'),
      icon4: require('@/assets/index/icon4.png'),
      icon5: require('@/assets/index/icon5.png'),
      icon6: require('@/assets/index/icon6.png'),
      icon7: require('@/assets/index/icon7.png'),
      icon8: require('@/assets/index/icon8.png'),
      icon9: require('@/assets/index/icon9.png'),


      showData:'month',
      monthArr:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
      overallObj:{
        mission:{
          total:0,
          ing:0,
          no_end:0
        },
        mission_plan:{
          total:0,
          ing:0,
          no_end:0,
          end:0
        }
      },
      overall_month_data: {},
      overall_dep_data: {},
      overall_type_data: {},
      showAskData: false,
      inspection_dep_data: {},
      inspection_ask_data: {},

      inspection_all_data: {},
    }
  },
  created() {
    // this.initLoad();
    // this.getLeads()
    this.depYear = (new Date()).getFullYear() + ''
    console.log(this.depYear)
    this.stateObj = state.state
    console.log("this.stateObj",this.stateObj)
    // this.updateMissionPlan()
    this.getUserId()
    this.getUnitTypeList()
    this.getSwiperList()
    // this.getQuestion()

    // this.getActiveList()
    this.loadChartDepartment()
    this.getArticleList()
    this.getMyselfList()
    this.getOverAllData()
    this.getInspectionAll()
    // this.load();

  },
      methods: {
        goMyunit(id){
          this.$router.push('/task/list/unit_5?dashboardId='+id)
        },
        showActiveInfo(item){
          console.log(item)
          if(item.is_id==='mission'){
            this.checkUnits(item.mission_id,'show')
          }else if(item.is_id==='plan'){
            this.showPlan(item.mission_id,'show')
          }else{
            this.checkUnits(item.mission_id,'show')
          }

        },
        // 资讯动态
        async getSwiperList() {
          const res = await indexSwiper({
            page:1,
            page_size:5,
            table_name: 'articles',
            with_relations:['image']
          })
          this.articleSwiper = res.data
        },
        async logout(){
          await this.$store.dispatch("user/logout")
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        },
        async getLeads(){
          await this.$store.dispatch("user/getLeads")
        },
        async updateMissionPlan(){
         await updatemission()
         // await updateplan()
        },
        async getUserId() {
          let res = await getInfo()
          this.login_id = res.id
          this.department_id = res.department_id
        },
        async getUnitTypeList() {
          const res = await getparameteritem('unitTypeList')
          this.unitTypeList = res.detail
        },
        // 科室任务
        changeDepYear(e){
          if(e){
            this.depYear = e
            this.loadChartDepartment()
          }
        },
        summaryDep(val){
          const { columns, data } = val;
          const sums = [];
          columns.forEach((item, index) => {
            if (index === 0) {
              sums[index] = '总计';
              return;
            }
            console.log(data,item,columns)
            const values = data.map(item => Number(item[columns.property]['data'].split('/')[1]));

            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              sums[index] += ' 元';
            } else {
              sums[index] = 'N/A';
            }

          });
          return sums
        },
        async loadChartDepartment(){

          await chartDepartment({
            year:this.depYear
          }).then(res=>{
            // 遍历数组并处理每个对象
            let arr = res.department.map(obj => {
                let newData = obj.data;
                // let sumTotal = 0
                // let sumNodo = 0
                for(let key in newData) {
                    // 提取月份数字作为新键名
                    let monthNumber = key.split("-")[1];
                    let total = newData[key]['type_1_total']+newData[key]['type_4_total']
                    let noDo = newData[key]['audit_status_1_total']
                    let mission = newData[key]['mission']
                    // sumTotal+=total
                    // sumNodo+=noDo
                    // obj['sumTotal'] = sumTotal
                    // obj['sumNodo'] = sumNodo
                    obj[monthNumber] = {
                      'data':total>0?total + '/' + noDo:'',
                      'mission':mission
                    }
                }
                return obj;
            });
            this.depList = arr
          }).catch(error => {

          });
        },
        // 动态信息
       async getActiveList() {
         // let arr = ["完成了一项任务", "提交了一条检查", "发起了一项任务", "上传了一条附件"]
         // for (var k of res.data) {
         //   this.activeList.push({
         //     created_at: '2023-04-24 12:00:00',
         //     admin: k.admin,
         //     department:k.department,

         //     active_type: k.unit_type_detail ? k.unit_type_detail.value : '',
         //     title: `${k.department?k.department.name:''}${k.admin.name}${arr[Math.floor(Math.random() * arr.length)]}`
         //   })
         // }



         // console.log("res",res)

        },
        async getArticleList(){
          let allArr = []

          await listarticle(1, '', '', 20, '').then(res => {
            let arr = []
            for(var k of res.data){
              k.title = k.title + '已归档'
              arr.push({active_type:k.menu?k.menu.name:'',...k})
            }
            this.articleList = arr;
            allArr.push(...arr)
          }).catch(error => {

          });
          // await listarticle(1, '', '', 6, 1).then(res => {
          //   let arr = []
          //   for(var k of res.data){
          //     arr.push({active_type:k.menu?k.menu.name:'',...k})
          //   }
          //   this.lawList = arr;
          //   allArr.push(...arr)
          // }).catch(error => {

          // });
          // await listarticle(1, '', '', 6, 3).then(res => {
          //   let arr1 = []
          //   for(var k of res.data){
          //     arr1.push({active_type:k.menu?k.menu.name:'',...k})
          //   }
          //   this.filesList = arr1;
          //   allArr.push(...arr1)
          // }).catch(error => {

          // });
          const res = await listnotice()
          let active_arr = []

          for(var k of res){
            for(var a in this.activeAllObj){
               let status_name = '提交了一条'
               let toid = k.mission_id?k.mission_id:''
               let is_mission = 'mission'
              if(Object.prototype.hasOwnProperty.call(k,a)){
                 if(a=="mission_plan_id"){
                   status_name = this.planStatus[k.status]
                   toid = k.mission_plan_id
                   is_mission = 'plan'
                 }
                 if(a=="id"){
                   status_name = this.missionStatus[k.audit_status]
                   // status_name = '归档'
                   toid = k.id
                 }
                this.activeList.push({
                  created_at: k.created_at,
                  admin: {
                    name:k.admin
                  },
                  department:{
                    name:k.department
                  },
                  is_id:is_mission,
                  mission_id:toid,
                  active_type:this.activeAllObj[a],
                  title: `${k.department?k.department:''}${k.admin}${status_name}${this.activeAllObj[a]}`
                })
              }
            }
          }
          allArr.push(...this.activeList)
          let arrs = allArr.sort(this.dateData("created_at",false))
          // this.activeAllList = this.division(arrs,6)
          if(arrs.length>30){
            arrs.splice(30,arrs.length-1)
          }

          this.activeAllList = arrs
        },
        dateData(property, bol) {
        	return function(a, b) {
        		var value1 = a[property];
        		var value2 = b[property];
        		if (bol) {
        			// 升序
        			return Date.parse(value1) - Date.parse(value2);
        		} else {
        			// 降序
        			return Date.parse(value2) - Date.parse(value1)
        		}
        	}
        },
        division(arr, N) {
          var result = [];
            for (var i = 0; i < arr.length; i += N) {
              result.push(arr.slice(i, i + N));
            }
            return result
        },
        showPlan(id) {
          this.$refs.showPlan.id = id
          this.isautoplay = false
          this.$refs.showPlan.isShow = true
        },
        showArticle(id){
          this.$refs.showArticle.id = id
          this.isautoplay = false
          this.$refs.showArticle.isShow = true
        },
        showDashboardArticle(id){
          this.$refs.showDashboardArticle.id = id
          this.$refs.showDashboardArticle.isShow = true
        },
        refreshIsshow(e){
          if(!e){
            this.isautoplay = true
          }
        },
        // 我的任务
        async getMyselfList() {
          const res = await listunit({
            page: 1,
            page_size: 999,
            myself: 1,
            audit_status: '',
            pid:'',
            sort_name: 'start_date',
            sort_type: 'DESC',
            year: new Date().getFullYear(),
            month: '',
          })
          // 我的任务中 选择accept_department_ids部门的，只有选择到的科室负责人能看到 is_manger = true
          //  且具体执行人为空
          let spliceIndex = []
          let _arr = []
          res.data.map((r,index)=>{
            let doAdmins = r.do_admin_ids ? r.do_admin_ids : []
            if(r.accept_department_ids.length > 0){
              let isDepartment = r.accept_department_ids.indexOf(this.stateObj.department_id)!=-1 ? true : false
              let isDomains = doAdmins.indexOf(this.stateObj.login_id)!=-1 ? true : false
              if(doAdmins.length==0){
                if(!(isDepartment && this.stateObj.is_manger)){
                  spliceIndex.push(index)
                }
              }else{
                if(!((isDepartment && this.stateObj.is_manger)||isDomains)){
                  spliceIndex.push(index)
                }
              }
            }
          })
            const newArr = res.data.filter((_, index) => !spliceIndex.includes(index));

            newArr.map(item=>{
              if(item.audit_status==5 || item.audit_status==3){

              }else{
                _arr.push(item)
              }
            })
			  this.myselfTotal = _arr.length
              _arr = this.buildTree(_arr)
              _arr.map((r,index)=>{
                r.pindex = index+1
              })
          this.myselfList = _arr
          // this.myselfTotal = res.total

          // this.activeCount  = parseInt(this.activeList.length/6)==1?1:parseInt(this.activeList.length/6)+1
          // this.autoScroll()
        },
        buildTree(items) {
          const tree = [];
          const map = {};

          items.forEach(item => {
            map[item.id] = item;
          });

          items.forEach(item => {
            const parent = map[item.pid];
            if (parent) {
              (parent.mychildren || (parent.mychildren = [])).push(item);
            } else {
              tree.push(item);
            }
          });

          return tree;
        },
        editorUnit(id, type , formtype) {
          if (id) {
            this.$refs.addUnit.id = id
          }
          if(formtype){
            this.$refs.addUnit.setType(4)
          }

          this.$refs.addUnit.type = type
          this.$refs.addUnit.unitTypeList = this.unitTypeList
          this.$refs.addUnit.department_id = this.stateObj.department_id
          this.$refs.addUnit.isShow = true
        },
        openMyMission(remark, e) {
          switch (remark) {
            case '检查':
              this.addPatrol(e)
              break;
            case '学习':
              this.openStudy(e)
              break;
            case '答题':
              this.openAnswers(e)
              break;
            case '培训':
              this.openTrain(e)
              break;
            case '资料收集':
              this.openUploads(e)
              break;
          }
        },
        checkUnits(id, type,url_type) {
          if(url_type){
            this.$refs.checkUnit.url_type = url_type
          }
          this.$refs.checkUnit.id = id
          this.$refs.checkUnit.type = type

          this.isautoplay = false
          this.$refs.checkUnit.isShow = true
        },
        addPatrol(scope) {
          this.$refs['addPatrol'].login_id = this.login_id
          this.$refs['addPatrol'].department_id = this.department_id
          this.$refs['addPatrol'].mission_id = scope.id
          this.$refs['addPatrol'].isShow = true
          this.$refs['addPatrol'].type = 'add'
        },
        openAnswers(scope) {
          this.$refs['answerQuestion'].mission_id = scope.id
          this.$refs['answerQuestion'].askList = scope.ask
          this.$refs['answerQuestion'].isShow = true
        },
        openTrain(e) {
          this.$refs.checkUnit.id = e.id
          this.$refs.checkUnit.type = 'train'
          this.$refs.checkUnit.isShow = true
        },
        openUploads(e) {
          this.$refs.checkUnit.id = e.id
          this.$refs.checkUnit.type = 'uploads'
          this.$refs.checkUnit.isShow = true
        },
        openStudy(e) {
          this.$refs.checkUnit.id = e.id
          this.$refs.checkUnit.type = 'study'
          this.$refs.checkUnit.isShow = true
        },
        // 综合数据
        async getOverAllData(){
          let that = this
          const res = await listoverall()
          this.overallObj = res.list
          // 月份
          let all_mon = []
          let end_mon=[]
          let no_mon = []
          let x_mon = []
          for(var m in res.month){
            let monIndex = parseInt(m.split("-")[1])-1
            x_mon.push(this.monthArr[monIndex])
            all_mon.push({
              value:res.month[m].mission.total+res.month[m].mission_plan.total,
              plan:res.month[m].mission_plan.total,
              unit:res.month[m].mission.total
            })
            end_mon.push(res.month[m].mission.end+res.month[m].mission_plan.end)
            no_mon.push(res.month[m].mission.no_end+res.month[m].mission_plan.no_end)
          }
          this.overall_month_data = {
            xShow: true,
            yShow: true,
            rotate: 0,
            formatter:function(params){
              return that.chartFomatter(params)
            },
            x: x_mon,
            list: [{
              name: "总数",
              data: all_mon,
              type: 'bar',
              barGap:'0%',
            }, {
              name: "已完成",
              data: end_mon,
              type: 'bar',
              barGap:'0%',
            }, {
              name: "未完成",
              data: no_mon,
              type: 'bar',
              barGap:'0%',
            }]
          }
          // 科室
          let all_dep = []
          let end_dep=[]
          let no_dep = []
          let x_dep = []
          for(var d of res.department){
            x_dep.push(d.name)
            all_dep.push({
              value:d.mission.total+d.mission_plan.total,
              plan:d.mission_plan.total,
              unit:d.mission.total
            })
            end_dep.push(d.mission.end+d.mission_plan.end)
            no_dep.push(d.mission.no_end+d.mission_plan.no_end)
          }
          this.overall_dep_data = {
            xShow: true,
            yShow: true,
            rotate: 50,
            formatter:function(params){
              return that.chartFomatter(params)
            },
            x: x_dep,
            list: [{
              name: "总数",
              data: all_dep,
              type: 'bar',
              barGap:'0%',
            }, {
              name: "已完成",
              data: end_dep,
              type: 'bar',
              barGap:'0%',
            }, {
              name: "未完成",
              data: no_dep,
              type: 'bar',
              barGap:'0%',
            }]
          }
          // 类型
          let all_type = []
          for(var t of res.type){
            all_type.push({
              name:t.value,
              value:t.mission.total
            })
          }
          this.overall_type_data = {
            trigger: 'item',
            xShow: false,
            yShow: false,
            list: [{
              name: '任务类型',
              type: 'pie',
              radius: '65%',
              data: all_type,
            }]
          }
        },
        // 检查整改
        async getInspectionAll(){
          const res = await chartinspection()
          // 完成情况
          this.inspection_all_data = {
            trigger: 'item',
            xShow: false,
            yShow: false,
            list: [{
                name: '完成情况',
                type: 'pie',
                radius: '80%',
                // center:['20%','20%'],
                data: [{
                    value: res.list.end,
                    name: '已完成'
                  },
                  {
                    value: res.list.no_end,
                    name: '未完成'
                  }
                ],
                label: {
                  show: false,
                  position: 'center'
                },
              }
            ]
          }
          // 责任科室
          let x_dep = []
          let all_dep = []
          let end_dep = []
          let no_dep = []
          for(var d of res.department){
            if(d.name!="处长室"){
              x_dep.push(d.name)
              all_dep.push(d.total)
              end_dep.push(d.end)
              no_dep.push(d.no_end)
            }

          }
          this.inspection_dep_data = {
            xShow: true,
            yShow: true,
            rotate: 30,
            x: x_dep,
            list: [{
              name: "合计",
              data: all_dep,
              type: 'bar',
              unit: "件",
              barGap:'0%',
            }, {
              name: "已完成",
              data: end_dep,
              type: 'bar',
              unit: "件",
              barGap:'0%',
            }, {
              name: "未完成",
              data: no_dep,
              type: 'bar',
              unit: "件",
              barGap:'0%',
            }]
          }
          // 问题类型
          let ask_arr = []
          for(var ask of res.type){
            ask_arr.push({
              name:ask.value,
              value:ask.total
            })
          }
          this.inspection_ask_data = {
            trigger: 'item',
            xShow: false,
            yShow: false,
            list: [{
              name: '问题类型',
              type: 'pie',
              radius: '65%',
              data: ask_arr,
            }]
          }
        },
        chartFomatter(params){
            let content = ''
            params.forEach((item) => {
              // 提示框的内容样式及数据
              content += `<div style="color:#fff;line-height: 25px;">
                <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
                <span>${item.seriesName}:</span>
                <span>${item.value}项</span></div>
              `;
              if(item.seriesName=='总数'){
                content += `<div>
                <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
                <span>年度计划任务:</span>
                <span>${item.data.plan}项</span></div>
                <div>
                <span style="display: inline-block; margin-right: 10px; border-radius: 50%; width: 8px; height: 8px;background-color: ${item.color};"></span>
                <span>专项专题任务:</span>
                <span>${item.data.unit}项</span></div>`
              }
            });
            return content

        }
      }
    }
</script>

<style lang="scss" scoped>
  ::v-deep .el-table .cell.el-tooltip {
    white-space: normal !important;
        width: 100% !important;
  }
.labelClass {
  img {
    vertical-align: sub;
    margin-right: 5px;
  }

  >span {
    color: #5b5d61;
    font-weight: normal;
  }
}

.contentClass {

  span {
    color: #9c9ea4;
    font-size: 16px;
    margin-left: 5px;
  }
}

.progress-card {
  display: flex;

  &-item {
    text-align: center;
    flex: 1;

    &__label {
      font-size: 14px;
    }

    &__num {
      font-size: 20px;
      font-weight: 600;

      padding: 6px 0;
    }
  }
}

::v-deep .elrows {
  .el-col {
    padding: 10px !important
  }

}

.index_top {
  display: flex;
  justify-content: space-between;

  &>div {
    width: 49.5%
  }
}

.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dialogConcent {
  overflow-y: auto;
}

.overall {
  background-color: #fff;
  height: 345px;
  padding: 15px;
  padding-left: 20px;
  padding-top: 0;
  font-size: 18px;

  >div {
    // display: flex;
    // justify-content: space-between;

    >p {
      max-width: 50%;
      width: 50%;
      margin-bottom: 60px;
    }
  }

}
  .active_info{
    overflow-y: scroll;
  }
  .active_li{
    padding: 5px;
    /* box-sizing: border-box; */
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    cursor: pointer;
    font-size: 15px;

  }
  .active_li:hover{
    color:#0077CC
  }
  .active_div{
    width: calc(100% - 120px);
  }
  .active_div2{
    width:100px;
    text-align: right;
  }
</style>
