<template>
  <div class="app-container circleButton">
    <!-- 资讯项目页面 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      v-show="showSearch"
      label-width="100px"
      style="background-color: white;padding: 20px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label-width="100" prop="name">
            <div style="float: left">
              <span slot="label" class="font">咨询项目:</span>
            </div>
            <el-input style="width:260px;margin-left:10px;margin-right: 10px;"
                      v-model="queryParams.searchValue"
                      placeholder="请输入项目名称/项目编号"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
                      @blur="handleQuery"
            />
            <el-button
              type="cyan"
              icon="el-icon-search"
              size="mini"
              @click="handleNameQuery">图表</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="100" prop="userName">
            <div style="float:left;">
              <span slot="label" class="font">项目负责人:</span>
            </div>
            <el-input style="width:260px;margin-left:10px;margin-right: 10px"
                      v-model="queryParams.userName"
                      placeholder="请输入负责人名称"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
                      @blur="handleQuery"/>
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleUserNameQuery">图表</el-button>
            <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport" class="button-import">导入</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

          </el-form-item>
        </el-col>

      </el-row>


      <el-form-item label-width="100" prop="yearRadio2">
        <div class="lab">
          <span slot="label" class="font">项目年份:</span>
        </div>
        <el-radio-group v-model="queryParams.yearRadio2" @change="handleQuery">
          <el-radio-button label="0" border><span class="fontT">全部</span></el-radio-button>
          <el-radio-button label="999" border ><span class="fontT">2016年至今</span></el-radio-button>

          <el-radio-button
            v-for="dict in yearOptions"
            :key="dict"
            :label="dict"
            border
          ><span class="fontT">{{ dict }}</span></el-radio-button
          >
          <el-radio-button label="2015" border><span class="fontT">2016年以前</span></el-radio-button>

        </el-radio-group>
      </el-form-item>
      <el-form-item label-width="100" prop="secrecyLevel" >
        <div class="lab">
          <span slot="label" class="font">秘密级别:</span>
        </div>
        <el-radio-group v-model="queryParams.secrecyLevel" size="small" @change="handleQuery">
          <el-radio-button label="0" border><span class="fontT">全部</span></el-radio-button>
          <el-radio-button label="1" border><span class="fontT">机密</span></el-radio-button>
          <el-radio-button label="2" border><span class="fontT">秘密</span></el-radio-button>
          <el-radio-button label="4" border><span class="fontT">内部</span></el-radio-button>
          <el-radio-button label="3" border><span class="fontT">非密</span></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label-width="100" prop="departmentId">
        <div class="lab">
          <span slot="label" class="font">联系部门:</span>
        </div>
        <el-radio-group v-model="queryParams.departmentId" size="small" @change="handleQuery">
          <el-radio-button label="0" border
          ><span class="fontT">全部</span></el-radio-button>
          <el-radio-button label="25" border
          ><span class="fontT">机械学部</span></el-radio-button
          >
          <el-radio-button label="26" border
          ><span class="fontT">信息学部</span></el-radio-button
          >
          <el-radio-button label="27" border
          ><span class="fontT">化工学部</span></el-radio-button
          >
          <el-radio-button label="28" border
          ><span class="fontT">能源学部</span></el-radio-button
          >
          <el-radio-button label="29" border
          ><span class="fontT">土木学部</span></el-radio-button
          >
          <el-radio-button label="30" border
          ><span class="fontT">环境学部</span></el-radio-button
          >
          <el-radio-button label="31" border><span class="fontT">农业学部</span></el-radio-button>
          <el-radio-button label="32" border><span class="fontT">医药学部</span></el-radio-button>
          <el-radio-button label="33" border><span class="fontT">工管学部</span></el-radio-button>
          <el-radio-button label="149" border><span class="fontT">战略咨询中心</span></el-radio-button>
          <el-radio-button label="998" border><span class="fontT">行业研究院</span></el-radio-button>
          <el-radio-button label="999" border><span class="fontT">其他</span></el-radio-button>
          <el-radio-button label="40" border><span class="fontT">地方研究院</span></el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label-width="100" prop="type">

        <div class="lab">
          <span slot="label" class="font">项目类型:</span>
        </div>
        <el-radio-group v-model="queryParams.type" @change="handleQuery">
          <el-radio-button label="0" border ><span class="fontT">全部</span></el-radio-button>
          <el-radio-button label="2" border ><span class="fontT">重点</span></el-radio-button>
          <el-radio-button label="1" border><span class="fontT">重大</span></el-radio-button>
          <el-radio-button label="17" border><span class="fontT">学部重大</span></el-radio-button>
          <el-radio-button label="19" border><span class="fontT">学部重点</span></el-radio-button>
          <el-radio-button label="18" border><span class="fontT">行业院重点</span></el-radio-button>
          <el-radio-button label="16" border><span class="fontT">行业院重大</span></el-radio-button>
          <el-radio-button label="6" border><span class="fontT">高端智库</span></el-radio-button>

          <el-radio-button label="20" border><span class="fontT">地方研究院重点</span></el-radio-button>
          <el-radio-button label="21" border><span class="fontT">地方研究院重大</span></el-radio-button>
          <el-radio-button label="22" border><span class="fontT">地方研究院</span></el-radio-button>
          <el-radio-button label="999" border><span class="fontT">其他</span></el-radio-button>
        </el-radio-group>
      </el-form-item>


    </el-form>
    <div class="dtable" style="margin-top: 25px">
      <div style="height: 60px;background-color: rgb(242,247,253);margin-top: 20px;margin-bottom: 20px">
        <div style="background-color: rgb(18,107,199);height:100%;width: 4px;float: left;"></div>
        <h2 style="margin-bottom: 20px;position: relative ;top: 18px;margin-left: 20px" class="color333">
          <span>项目数&nbsp;&nbsp;:&nbsp;&nbsp;<span style="color: #ce2700;">{{total}}</span></span>
          <span style="margin-left: 20px">项目经费（万元）:&nbsp;&nbsp;<span style="color: #ce2700;">{{zjf}}</span></span>
        </h2>
      </div>

      <el-table
        v-loading="loading"
        :data="infoList"
        @selection-change="handleSelectionChange"
        @sort-change="sortChange"
        :header-cell-style="{background:'#fff'}"
        :row-class-name="tableRowClassName"
      >
        <el-table-column label="序号" align="center" type="index"  width="80">

          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
        </el-table-column>
        <el-table-column
          label="项目编号"
          align="left"
          width="120"

        >
          <template slot-scope="scope">
            <span >{{scope.row.code}}</span>
            <!--          <span @click="dialogFormVisible = true">{{scope.row.code}}</span>-->
          </template>
        </el-table-column>
        <el-table-column
          label="项目名称"
          align="left"
          prop="name"
          width="400"

        />
        <el-table-column label="类型" align="center" prop="type" width="120" :formatter="typeFormat" />
        <el-table-column
          label="密级"
          align="left"
          width="80"
          prop="secrecyLevel"
          :formatter="secretFormat"
        />
        <el-table-column label="联系部门" align="left" prop="departmentName" />
        <!--      <el-table-column label="项目联系部门" align="center" prop="departmentId" />-->
        <el-table-column label="负责人" align="left" prop="userName" width="110" />

        <el-table-column
          label="经费"
          align="left"
          width="80"
          prop="totalBudget"
        />
        <el-table-column label="依托单位" align="left" prop="yituoUnit" />
        <el-table-column
          label="状态"
          align="left"
          prop="status"
          width="90"
          :formatter="statusFormat"
        />

        <el-table-column label="成果" align="left" :show-overflow-tooltip="true" width="110" >
          <!--        <template slot-scope="scope" v-if="scope.row.annexName != null">-->
          <template slot-scope="scope" v-if="scope.row.annexName != null &&scope.row.annexName != '[]'">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="viewAnnexBookFile(scope.row)"
            >成果附件</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="explore_right_pages"  style="background-color: white;height: 70px;border: 1px solid white">
      <pagination

        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 用户导入对话框 -->
    <el-dialog
      :title="uploadProject.title"
      :visible.sync="uploadProject.open"
      width="790px"
      append-to-body>
      <div style="margin-bottom: 20px;">
        <el-radio-group v-model="uploadProject.type">
          <el-radio-button v-for="(item) in excelType" :label="item.value" :key="item.id" class="import-btn" >{{item.name}}</el-radio-button>

        </el-radio-group>

        <div style="margin-top: 3%">
          <el-radio v-model="uploadProject.option" :label="item.value"  :key="item.id" border v-for="(item) in excelOption" @change="changUrl(item.url)">{{item.name}}</el-radio>

        </div>
      </div>
          <el-upload
            ref="uploadProject"
            :limit="1"
            accept=".xls,.xlsx"
            :headers="uploadProject.headers"
            :action="
              uploadProject.url + '?updateSupport=' + uploadProject.updateSupport+'&exportName='+uploadProject.type
            "
            :disabled="uploadProject.isUploading"
            :on-progress="handleProjectFileUploadProgress"
            :on-success="handleProjectFileSuccess"
            :before-upload="beforeProjectFileUpload"
            :auto-upload="false"
            drag>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              <!--<el-checkbox v-model="uploadProject.updateSupport" />是否更新已经存在的用户数据-->
              <!--<el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>-->
            </div>
            <div class="el-upload__tip" style="color: red" slot="tip">
              提示：仅允许导入excel文件！
            </div>
          </el-upload>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="uploadProject.open = false">取 消</el-button>
          </div>
    </el-dialog>

    <el-dialog title="附件" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        disabled
        :action="upload.url"
        :headers="upload.headers"
        :file-list="upload.fileList"
        :on-preview="handlePreview"
      >
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="upload.open = false">关 闭</el-button>
      </div>
    </el-dialog>

    <el-dialog  :modal="false" title="" :show-close="false" :close-on-click-modal="false" :visible="nameTuOpen" width="600px" class="rightDialog"    >
      <el-row>
        <el-col>
          <div class="chart-wrapper" v-if="blSer.length">
            <BarLineChart :blXData="blX" :blLgData="blLg" :otTitle="otTitle" :blSerData="blSer" @yearToPage="toYearPage"/>
          </div>
        </el-col>
      </el-row>
      <br/><br/>
      <el-row>
        <el-col >
          <div class="chart-wrapper" >
            <BLYiTuoChart :xAxisDataLeft7="xAxisCenter7" :otTitle="otTitle" :seriesData1="seriesCenter7"  @yituoUnitPage="toyituoUnitPage"/>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="nameTuOpen = false">关 闭</el-button>
      </div>
    </el-dialog>

    <el-dialog :modal="false" title="" :show-close="false" :close-on-click-modal="false" :visible="userNameTuOpen" width="600px" class="rightDialog"  append-to-body>
      <el-row>
        <el-col >
          <div class="chart-wrapper" >
            <BarChart3 :xAxisDataLeft8="xAxisCenter8" :otTitle="otTitle" :seriesDataLeft8="seriesCenter8" @userNamePage="toUserNamePage"/>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="userNameTuOpen = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- Form -->


    <el-dialog title="项目详情" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="formCounten" :label-width="formLabelWidth">
        <el-form-item label="项目名称">
          <el-col :span="20">
            <el-input v-model="formCounten.name"></el-input>
          </el-col>
        </el-form-item>

        <el-col :span="9">
          <el-form-item label="项目编号" style="margin-top: 10px">
            <el-input v-model="formCounten.name"></el-input>
          </el-form-item>
        </el-col>
        <el-form-item label="类型" style="margin-top: 10px;">
          <el-col :span="9" style="margin-left: 20px">
            <el-input v-model="formCounten.name"></el-input>
          </el-col>
        </el-form-item>

        <el-col :span="9">
          <el-form-item label="联系部门" style="margin-top: 10px">
            <el-input v-model="formCounten.name"></el-input>
          </el-form-item>
        </el-col>
        <el-form-item label="依托单位" style="margin-top: 10px">
          <el-col :span="9" style="margin-left: 20px">
            <el-input v-model="formCounten.name"></el-input>
          </el-col>
        </el-form-item>

        <el-col :span="7">
          <el-form-item label="负责人" style="margin-top: 10px">
            <el-input v-model="formCounten.name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="项目经费" style="margin-top: 10px">
            <el-input v-model="formCounten.name"></el-input>
          </el-form-item>
        </el-col>
        <el-form-item label="状态" style="margin-top: 10px">
          <el-col :span="5">

            <el-input v-model="formCounten.name"></el-input>

          </el-col>
        </el-form-item>

        <el-form-item label="密级" style="margin-top: 10px">
          <el-radio-group v-model="formCounten.resource" style="font-size: 50px">
            <el-radio label="1" size="medium"><span class="font">秘密</span></el-radio>
            <el-radio label="2" size="medium "><span class="font">机密</span></el-radio>
            <el-radio label="3"><h2 class="font">非密</h2 ></el-radio>
            <el-radio label="4"><span class="font">内部</span></el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listInfo,
    getInfo,
    delInfo,
    addInfo,
    updateInfo,
    exportInfo,
    importTemplate,
  } from "@/api/project/info2";
  import { getToken } from "@/utils/auth";
  import BLYiTuoChart from "../../dashboard/BLYiTuoChart";
  import BarChart3 from "../../dashboard/BarChart3";
  import BarLineChart from "../../dashboard/BarLineChart";
  import {totalBugetData,left1Data, left7Data,center8Data,left7Data2,statistics} from "@/api/project/info3";
  export default {
    name: "Info",
    components: {
      BLYiTuoChart,
      BarChart3,
      BarLineChart
    },
    data() {
      return {
        zjf:0,
        // 上传参数
        uploadProject: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/upload/addProject",

          type:'all',

          option:'inset',
        },
        // 上传参数
        upload: {
          title: "",
          open: false,
          // 是否禁用上传
          isUploading: false,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/project/info/common/upload",
          // 上传的文件列表
          fileList: [],
        },
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 【请填写功能名称】表格数据
        infoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        nameTuOpen:false,
        userNameTuOpen:false,
        totalBuget:null,
        dialogFormVisible:false,
        statusOptions: [],
        typeOptions: [],
        secretOptions: [],
        sourceOptions: [],
        categoryOptions: [],
        yesNoOptions: [],
        yearOptions: [],
        xAxisCenter8:[],
        seriesCenter8:[],
        xAxisCenter7:[],
        seriesCenter7:[],
        blX:[],
        blLg:[],
        blSer:[],
        otTitle:"",
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          category: null,
          code: null,
          name: null,
          userName:null,
          type: null,
          departmentId: null,
          userId: null,
          deadline: null,
          totalOutlay: null,
          firstOutlay: null,
          secondOutlay: null,
          status: null,
          beginDate: null,
          completeDate: null,
          beginDateLX: null,
          completeDateLX: null,
          endDate: null,
          approvalDate: null,
          isSecrecy: null,
          secrecyLevel: null,
          secrecyTerm: null,
          isTopic: null,
          taskTarget: null,
          resultTarget: null,
          methodRoute: null,
          plan: null,
          spendExplain: null,
          relyId: null,
          lastDate: null,
          reviewStatusXb: null,
          reviewStatusCw: null,
          totalBudget: null,
          firstBudget: null,
          secondBudget: null,
          applyId: null,
          projectSource: null,
          projectSourceCompany: null,
          reviewStatusZwh: null,
          isAgreement: null,
          relyUnitHead: null,
          relyUnitHeadtocw: null,
          taskPeriod: null,
          otherplan: null,
          point: null,
          result: null,
          introduction: null,
          proprotion: null,
          term: null,
          pishiStatus: null,
          yearRadio2: null,
          proPeopName:null,
          yituoArea:null,
          isResult:null,
          importantKey:null,
          searchValue:null

        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        formCounten: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px',
        excelType:[
          {
            name:'ALL',
            value: 'all'
          },
          {
            name:'项目',
            value:'projectExport'
          },
          {
            name:'课题',
            value:'topicExport',
          },
          {
            name:'专题',
            value: 'specialExport'
          },
          {
            name:'依托单位',
            value: 'deptExport'
          },
          {
            name:'参与人员信息',
            value: 'participantsExport'
          },
          {
            name:'管理报告',
            value: 'reportExport'
          },
          {
            name:'任务书',
            value:'bookExport'

          },
          {
            name:'管理报告补全',
            value:'complementReportExport'

          },
          {
            name:'成果详情导入',
            value:'achievementsExport'

          }

        ],
        excelOption:[
          {
            name:'添加',
            value:'inset',
            url:'/upload/addProject'
          },
          {
            name:'修改',
            value:'update',
            url:'/upload/modifyData'
          }
        ]


      };
    },
    created() {
      if(this.$route.query.yearRadio2 ){
        this.queryParams.yearRadio2 = this.$route.query.yearRadio2 ;
      }else{
        this.queryParams.yearRadio2 = "0" ;
      }

      if(this.$route.query.secrecyLevel){
        this.queryParams.secrecyLevel = this.$route.query.secrecyLevel;
      }else{
        this.queryParams.secrecyLevel = "0" ;
      }
      if(this.$route.query.type){
        this.queryParams.type = this.$route.query.type;
      }else{
        this.queryParams.type = "0" ;
      }
      if(this.$route.query.departmentId){
        this.queryParams.departmentId = this.$route.query.departmentId;
      }else{
        this.queryParams.departmentId = "0" ;
      }
      this.queryParams.yituoUnit = this.$route.query.yituoUnit;
      this.queryParams.userName = this.$route.query.userName;
      this.queryParams.importantKey = this.$route.query.importantKey;
      this.queryParams.yituoArea = this.$route.query.yituoArea;
      // this.queryParams.yearRadio = this.$route.query.yearRadio;
      //
      // this.queryParams.isResult = this.$route.query.isResult;
      // this.queryParams.status = this.$route.query.status;

      //

      //

      var date = new Date();
      var year = date.getFullYear();

      this.yearOptions[0] = year;
      this.yearOptions[1] = year - 1;
      this.yearOptions[2] = year - 2;
      this.yearOptions[3] = year - 3;
      this.yearOptions[4] = year - 4;
      this.yearOptions[5] = year - 5;
      this.getList();

      this.getDicts("pro_type").then((response) => {
        this.typeOptions = response.data;
      });
      this.getDicts("pro_secret_level").then((response) => {
        this.secretOptions = response.data;
      });
      this.getDicts("pro_source").then((response) => {
        this.sourceOptions = response.data;
      });
      this.getDicts("pro_category").then((response) => {
        this.categoryOptions = response.data;
      });
      this.getDicts("pro_status").then((response) => {
        this.statusOptions = response.data;
      });
      this.getDicts("sys_yes_no").then((response) => {
        this.yesNoOptions = response.data;
      });

    },
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if ((rowIndex + 1) % 2 === 0) {
          return "warning-row"; //类名
        } else {
          return "success-row"; //类名
        }

      },
      sortChange(column, prop, order) {
        if (column.prop == "category") {
          this.queryParams.categoryOrder = "1";
          this.queryParams.codeOrder = "";
          this.queryParams.nameOrder = "";
          this.queryParams.typeOrder = "";
          this.queryParams.deadlineOrder = "";
          this.queryParams.totalOutlayOrder = "";
          this.queryParams.projectSourceOrder = "";
        } else if (column.prop == "code") {
          this.queryParams.categoryOrder = "";
          this.queryParams.codeOrder = "1";
          this.queryParams.nameOrder = "";
          this.queryParams.typeOrder = "";
          this.queryParams.deadlineOrder = "";
          this.queryParams.totalOutlayOrder = "";
          this.queryParams.projectSourceOrder = "";
        } else if (column.prop == "name") {
          this.queryParams.categoryOrder = "";
          this.queryParams.codeOrder = "";
          this.queryParams.nameOrder = "1";
          this.queryParams.typeOrder = "";
          this.queryParams.deadlineOrder = "";
          this.queryParams.totalOutlayOrder = "";
          this.queryParams.projectSourceOrder = "";
        } else if (column.prop == "type") {
          this.queryParams.categoryOrder = "";
          this.queryParams.codeOrder = "";
          this.queryParams.nameOrder = "";
          this.queryParams.typeOrder = "1";
          this.queryParams.deadlineOrder = "";
          this.queryParams.totalOutlayOrder = "";
          this.queryParams.projectSourceOrder = "";
        } else if (column.prop == "deadline") {
          this.queryParams.categoryOrder = "";
          this.queryParams.codeOrder = "";
          this.queryParams.nameOrder = "";
          this.queryParams.typeOrder = "";
          this.queryParams.deadlineOrder = "1";
          this.queryParams.totalOutlayOrder = "";
          this.queryParams.projectSourceOrder = "";
        } else if (column.prop == "totalOutlay") {
          this.queryParams.categoryOrder = "";
          this.queryParams.codeOrder = "";
          this.queryParams.nameOrder = "";
          this.queryParams.typeOrder = "";
          this.queryParams.deadlineOrder = "";
          this.queryParams.totalOutlayOrder = "1";
          this.queryParams.projectSourceOrder = "";
        } else if (column.prop == "projectSource") {
          this.queryParams.categoryOrder = "";
          this.queryParams.codeOrder = "";
          this.queryParams.nameOrder = "";
          this.queryParams.typeOrder = "";
          this.queryParams.deadlineOrder = "";
          this.queryParams.totalOutlayOrder = "";
          this.queryParams.projectSourceOrder = "1";
        }

        if (column.order == "ascending") {
          this.queryParams.orderSort = "asc";
        } else if (column.order == "descending") {
          this.queryParams.orderSort = "desc";
        }
        this.getList();
      },
      isTopicFormat(row, column) {
        return this.selectDictLabel(this.yesNoOptions, row.isTopic);
      },
      isSecrecyFormat(row, column) {
        return this.selectDictLabel(this.yesNoOptions, row.isSecrecy);
      },
      typeFormat(row, column) {
        return this.selectDictLabel(this.typeOptions, row.type);
      },
      secretFormat(row, column) {
        return this.selectDictLabel(this.secretOptions, row.secrecyLevel);
      },
      categoryFormat(row, column) {
        return this.selectDictLabel(this.categoryOptions, row.category);
      },
      statusFormat(row, column) {
        return this.selectDictLabel(this.statusOptions, row.status);
      },
      sourceFormat(row, column) {
        return this.selectDictLabel(this.sourceOptions, row.projectSource);
      },
      getStatistics(queryParams){

        statistics(queryParams).then(resp=>{
          this.zjf=resp.data.zjf;

        });
      },
      /** 导入按钮操作 */
      handleImport() {
        this.uploadProject.title = "项目导入";
        this.uploadProject.open = true;
      },
      /** 查询【请填写功能名称】列表 */
      getList() {
        this.loading = true;

        listInfo(this.queryParams).then((response) => {
          this.infoList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
        this.getStatistics(this.queryParams)
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          category: null,
          code: null,
          name: null,
          type: null,
          departmentId: null,
          userId: null,
          deadline: null,
          totalOutlay: null,
          firstOutlay: null,
          secondOutlay: null,
          status: 0,
          beginDate: null,
          completeDate: null,
          endDate: null,
          approvalDate: null,
          isSecrecy: null,
          secrecyLevel: null,
          secrecyTerm: null,
          isTopic: null,
          taskTarget: null,
          resultTarget: null,
          methodRoute: null,
          plan: null,
          spendExplain: null,
          relyId: null,
          lastDate: null,
          reviewStatusXb: null,
          reviewStatusCw: null,
          totalBudget: null,
          firstBudget: null,
          secondBudget: null,
          applyId: null,
          projectSource: null,
          projectSourceCompany: null,
          reviewStatusZwh: null,
          isAgreement: null,
          relyUnitHead: null,
          relyUnitHeadtocw: null,
          taskPeriod: null,
          otherplan: null,
          point: null,
          result: null,
          introduction: null,
          proprotion: null,
          term: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          delFlag: null,
        };
        this.resetForm("form");
      },
      async logout() {
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/index';
          })
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
        this.getLeft7(this.queryParams);
        this.getCenter8(this.queryParams);
        this.getLeft1(this.queryParams);
      },
      handleNameQuery(){
        this.nameTuOpen = true;
        this.queryParams.pageNum = 1;
        this.getList();
        this.getLeft7(this.queryParams);
        this.getLeft1(this.queryParams);
        // this.getCenter8(this.queryParams);
      },
      handleUserNameQuery(){
        this.userNameTuOpen = true;
        this.queryParams.pageNum = 1;
        this.getList();
        this.getTotalBuget(this.queryParams);

        this.getCenter8(this.queryParams);
      },
      getTotalBuget(queryParams){
        totalBugetData(queryParams).then(
          resp=>{

            this.totalBuget = resp.data.totalBudget
          }
        );
      },
      getLeft1(queryParams){

        let param=queryParams.yearRadio2
        if(param=='0'){
          param='999'
        }
        left1Data({yearRadio2:param}).then(
          resp=>{
            if(queryParams.yearRadio2 == '0'){
              this.otTitle = '2016-今'
            }
            else if(queryParams.yearRadio2 =='2015'){
              this.otTitle="2016年以前"
            }else {
              this.otTitle="2016-今"
            }
            this.blLg = ['项目数', '经费数'];
            this.blX =resp.data.yearArray;
            let temp = [];
            let item = {};
            item.name = '项目数';
            item.type='bar';
            item.barWidth=50;
            item.data=resp.data.numArray;
            item.itemStyle={
              normal: {
                //这里是重点
                color: '#5470c6'
              }

            };
            temp.push(item);
            let item1 = {};
            item1.name = '经费数';
            item1.type='line';
            item1.yAxisIndex= 1;
            item1.data=resp.data.bugetArray;
            item1.itemStyle={
              normal: {
                //这里是重点
                color: '#ffa200'
              }

            };
            temp.push(item1);
            this.blSer=temp;

          }
        );
      },
      getLeft7(queryParams){
        left7Data(queryParams).then(
          resp => {

            if(queryParams.yearRadio2 == '0'){
              this.otTitle = "至今"
            }
            else if(queryParams.yearRadio2 =='2015'){
              this.otTitle="2016年以前"
            }else if(queryParams.yearRadio2 =='999'){
              this.otTitle="2016-今"
            }else{
              this.otTitle=queryParams.yearRadio2 +"年"
            }

            let temp = [];
            let item = {};
            item.name = '经费数';
            item.type='bar';
            item.barGap="-100%";
            item.data=resp.data.yjfArray;
            item.itemStyle={
              normal: {
                //这里是重点
                color: '#f8622f'
              }

            };
            temp.push(item);
            let item1 = {};
            item1.name = '实际经费';
            item1.type='bar';
            item1.yAxisIndex= 1;
            item1.barGap="-100%";
            item1.data=resp.data.ySjjfArray;
            item1.itemStyle={
              normal: {
                //这里是重点
                color: '#5470c6'
              }

            };
            temp.push(item1);
            let item2 = {};
            item2.name = '项目数';
            item2.type='line';
            item2.yAxisIndex= 2;
            item2.data=resp.data.yNumArray;
            item2.itemStyle={
              normal: {
                //这里是重点
                color: '#ffa200'
              }

            };
            temp.push(item2);
            this.seriesCenter7 = temp;
            this.xAxisCenter7 = resp.data.xAxisArray;

          }
        );
      },
      getCenter8(queryParams){
        center8Data(queryParams).then(
          resp => {
            if(queryParams.yearRadio2 == '0'){
              this.otTitle = "至今"
            }
            else if(queryParams.yearRadio2 =='2015'){
              this.otTitle="2016年以前"
            }else if(queryParams.yearRadio2 =='999'){
              this.otTitle="2016-今"
            }else{
              this.otTitle=queryParams.yearRadio2 +"年"
            }
            this.seriesCenter8 = resp.data.xAxisArray;
            this.xAxisCenter8 = resp.data.yAxisArray;
          }
        );
      },
      toYearPage(year){
        // this.$router.push({path:"/project/infoShow/query",query:{yearRadio2:year}} );
      },
      toyituoUnitPage(unit){
        // let yearRadio = this.yearRadio2;
        // this.$router.push({path:"/project/infoShow/query",query:{yituoUnit:unit,yearRadio2:yearRadio}} );

      },

      toUserNamePage(userName){
        // let yearRadio = this.yearRadio2;
        // this.$router.push({path:"/project/infoShow/query",query:{userName:userName,yearRadio2:yearRadio}} );

      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.yearRadio2 = "0" ;
        this.queryParams.secrecyLevel = "0" ;
        this.queryParams.type = "0" ;
        this.queryParams.departmentId = "0" ;
        this.queryParams.searchValue=null;
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加【请填写功能名称】";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        getInfo(id).then((response) => {
          this.form = response.data;
          this.open = true;
          this.title = "修改【请填写功能名称】";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate((valid) => {
          if (valid) {
            if (this.form.id != null) {
              updateInfo(this.form).then((response) => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addInfo(this.form).then((response) => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id;
        this.$confirm(
          '是否确认删除项目编号为"' + row.code + '"的数据项?',
          "警告",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(function () {
            return delInfo(ids);
          })
          .then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          })
          .catch(function () {});
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm("是否确认导出所有【请填写功能名称】数据项?", "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(function () {
            return exportInfo(queryParams);
          })
          .then((response) => {
            this.download(response.msg);
          })
          .catch(function () {});
      },
      // 文件上传中处理
      handleProjectFileUploadProgress(event, file, fileList) {
        this.uploadProject.isUploading = true;
      },
      beforeProjectFileUpload(file) {
        const isLt200M = file.size / 1024 / 1024 < 300;
        if (!isLt200M) {
          this.$message.error("上传大小不能超过 200MB!");
        }
        return isLt200M;
      },
      // 文件上传成功处理
      handleProjectFileSuccess: function(response, file, fileList) {
        this.uploadProject.open = false
        this.uploadProject.isUploading = false
        this.$refs.uploadProject.clearFiles()
        let msg=''
        response.msg.split(';').forEach( item=>{
          msg +=item +`<br/>`
        })
        this.$alert(msg, '导入结果', { dangerouslyUseHTMLString: true })
        this.getList()
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.uploadProject.submit();
      },
      importTemplate() {
        importTemplate().then((response) => {
          this.download(response.msg);
        });
      },
      viewAnnexBookFile(row){
        this.upload.fileList = [];
        this.formatUploadAnnex(row.annexName,row.annexPath);
        this.upload.open = true;
      },
      //格式化上传附件
      formatUploadAnnex(annexName,annexPath){
        this.upload.fileList = [];
        if (annexPath != null && annexPath !== ''){
          let a = [],b = [];
          try {
            a = JSON.parse(annexName) ;
            b = JSON.parse(annexPath) ;
          }catch (e){
            a=[];
            b=[];
          }
          for (let i = 0;i<a.length;i++){
            this.upload.fileList.push({
              'name':a[i],
              'url':process.env.VUE_APP_BASE_API + b[i]
            })
          }
        }else {
          this.upload.fileList = [];
        }


      },
      handlePreview(file) {
        var a = document.createElement('a');
        var event = new MouseEvent('click');
        a.download = file.name;
        a.target = '_blank';
        a.href = file.url;
        a.dispatchEvent(event);

      },
      changUrl(url){
        this.uploadProject.url= process.env.VUE_APP_BASE_API+url;
      }
    },
  };
</script>
<style lang="scss" scoped>
  .app-container{
    background-color: rgb(246,247,251);

  }
  .circleButton {
    /deep/  .el-radio-button__inner {
      padding: 6px 17px;
      font-size: 20px;
      margin: 16px 10px 4px;
      border: 1px;
      border-radius: 17px  !important;
      /*background-color: #f2f1f5;*/
    }
    /deep/  .el-input__inner {
      border-color: #ddd !important;
      padding: 10px;
    }
    .el-form-item{
      margin-bottom: 0;
    }
    /*修改提示文字的颜色*/
    ::-webkit-input-placeholder {
      color: #999 !important;
      font-size: 16px;
    }
    .import-btn /deep/ .el-radio-button--medium .el-radio-button__inner{
      padding: 8.2px !important;
    }

  }
  // 分页
  .explore_right_pages {


    /deep/.el-pagination .el-pagination__total {
      color: #999999;
      font-size: 18px;
    }

    /deep/.el-pagination .el-pagination__jump {
      color: #999999;
      font-size: 18px;

      .input{
        margin-left: 10px;
        margin-right: 10px;
      }
      .el-pagination__editor{
        margin-left: 10px;
        margin-right: 10px;
        .el-input__inner{
          height: 26px;
          margin-top: 2px;
        }
      }
    }



  }


  .rightDialog{
    right: 0;
    margin-right: 0;
    left:auto;
  }
  .font{
    font-size: 18px;
    font-weight: 700;
    color: #333;
  }
  .lab{
    float: left;
    margin-top: 10px
  }
  .fontT{
    font-size: 18px;

  }

  /deep/ .dtable{
    border: 1px solid white;
    background-color: white;
    .el-table .warning-row {
      background: white;
    }

    .el-table .success-row {
      background: #f5f6fa;
    }
  }
</style>
