<template>
    <el-main class="ryjcxx">
        <div class="search">
          <el-row>
            <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="库别">
                  <el-select style="width:180px;" v-model="form.groupType" clearable placeholder="请选择" multiple>
                    <el-option :label="item.label" :value="item.value" v-for="(item,index) in groupTypeData" :key="index"></el-option>
                  </el-select>
                </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="角色分类">
                  <el-select style="width:180px;" v-model="form.roleType" clearable placeholder="请选择" multiple>
                    <el-option :label="item.label" :value="item.value" v-for="(item,index) in roleTypeData" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="原工作地">
                  <el-select style="width:180px;" ref="selectProvince" v-model="form.workAd" clearable  @change="select_handler_province">
                    <el-option
                      v-for="item in provList"
                      :key="item.adCode"
                      :label="item.adName"
                      :value="item.adCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
<!--            <el-col :span="6">-->
<!--              <el-form-->
<!--                :inline="true"-->
<!--                size="small"-->
<!--                class="demo-form-inline"-->
<!--              >-->
<!--                <el-form-item label="流域机构">-->
<!--                  <el-select style="width:180px;" v-model="form.orgCode" clearable multiple>-->
<!--                    <el-option-->
<!--                      v-for="item in lyjgData"-->
<!--                      :key="item.id"-->
<!--                      :label="item.pnm"-->
<!--                      :value="item.id"-->
<!--                      style="height: 5vh"-->
<!--                    ></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--            </el-col>-->
            <el-col :span="6">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="人员姓名">
                  <el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="在职情况">
                  <el-select style="width:180px;" v-model="form.isOffice" clearable placeholder="请选择">
                    <el-option  v-for="item in sfType" :label="item.label" :value="item.value" :key="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="associatedResume">批量关联简历</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="学历">
                  <el-select style="width:180px;" v-model="form.education" clearable placeholder="请选择" multiple>
                    <el-option label="专科及以下" value="1"></el-option>
                    <el-option label="本科" value="2"></el-option>
                    <el-option label="研究生" value="3"></el-option>
                    <el-option label="博士" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="个人职称">
                  <el-select style="width:180px;" v-model="form.titles" clearable placeholder="请选择" multiple>
                    <el-option label="正高" value="1"></el-option>
                    <el-option label="副高" value="2"></el-option>
                    <el-option label="中级" value="3"></el-option>
                    <el-option label="县市级" value="4"></el-option>
                    <el-option label="会计师" value="5"></el-option>
                    <el-option label="高工" value="6"></el-option>
                    <el-option label="教高" value="7"></el-option>
                    <el-option label="助理会计师" value="8"></el-option>
                    <el-option label="工程师" value="9"></el-option>
                    <el-option label="助工" value="10"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="单位职级">
                  <el-select style="width:180px;" v-model="form.unitRanks" clearable placeholder="请选择" multiple>
                    <el-option label="省部级" value="1"></el-option>
                    <el-option label="地市级" value="2"></el-option>
                    <el-option label="县市级" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="6">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="入库时间">
                  <!--<el-date-picker-->
                    <!--v-model="form.sttm"-->
                    <!--type="date"-->
                    <!--value-format="yyyy-MM-dd"-->
                    <!--placeholder="选择日期">-->
                  <!--</el-date-picker>-->
                  <el-date-picker
                    style="width: 200px;"
                    v-model="valueSt"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="是否培训">
                  <el-select style="width:180px;" v-model="form.isTraining" clearable>
                    <el-option  v-for="item in sfType" :label="item.label" :value="item.value" :key="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="2">
              <el-button type="info" @click="changeView" :icon="Sort">视图切换</el-button>
              <!--<el-button type="info">打印</el-button>-->
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="年龄" clearable>
                  <el-select style="width:180px;" v-model="form.ageLimits" clearable placeholder="请选择" multiple>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="30岁以下" value="30"></el-option>
                    <el-option label="31-35岁" value="31-35"></el-option>
                    <el-option label="36-40岁" value="36-40"></el-option>
                    <el-option label="41-45岁" value="41-45"></el-option>
                    <el-option label="46-50岁" value="46-50"></el-option>
                    <el-option label="51-55岁" value="51-55"></el-option>
                    <el-option label="56-60岁" value="56-60"></el-option>
                    <el-option label="61-65岁" value="61-65"></el-option>
                    <el-option label="66-70岁" value="66-70"></el-option>
                    <el-option label="71岁以上" value="71"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="个人专长">
                  <el-select style="width:180px;" v-model="form.isAll" clearable placeholder="请选择" multiple>
                    <el-option label="全部" value=""></el-option>
                    <el-option label="A类项目" value="a"></el-option>
                    <el-option label="B类项目" value="b"></el-option>
                    <el-option label="C类项目" value="c"></el-option>
                    <el-option label="D类项目" value="d"></el-option>
                    <el-option label="E类项目" value="e"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="从事专业">
                  <el-input v-model="form.professional" placeholder="请输入从事专业" clearable></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="6">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
              <el-form-item label="工作单位">
                <el-input v-model="form.workDpNm" placeholder="请输入工作单位" clearable></el-input>
              </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4" v-if="isJx">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="是否外聘">
                  <el-select style="width:180px;" ref="isExternal" v-model="form.isExternal" clearable @change="$forceUpdate()">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-col>
            <!-- <el-col :span="4">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item :label="'查询结果共' + total + '条记录'"></el-form-item>
              </el-form>
            </el-col> -->


          </el-row>
          <el-row>
            <el-col :span="24" style="padding-bottom: 10px;text-align: right;">
              <el-button type="primary" :icon="Search" @click="searchJcXxData">查询</el-button>
              <el-button type="primary" :icon="Plus" @click="addPers">添加人员</el-button>
              <el-button type="success" @click="exportExcel" :icon="SortUp">导出Excel</el-button>
              <el-button type="success" @click="downloadTemplateConfirm" :icon="SortDown">批量导入人员信息</el-button>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-table
            v-if="!changeViewInfo"
            v-loading="loading"
            border
            ref="multipleTable"
            :height="tableHeight"
            :data="jichuData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column align="center" type="index" label="序号" min-width="25">
              <template #default="scope">{{ (form.pageNum - 1) * form.pageSize + (scope.$index + 1) }}</template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="100"
              prop="roleTypeList"
              label="角色"
              show-overflow-tooltip
            >
                <template #default="scope">
                    <span v-if="scope.row.roleTypeList">
                      <span v-for="(item,index) in scope.row.roleTypeList" :key="index">
                        {{roleType(item.value) + '  '}}
                      </span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="100"
              prop="name"
              label="姓名"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="120"
              prop="sex"
              label="性别"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="80"
              show-overflow-tooltip
              prop="age"
              label="年龄"
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="200"
              label="工作单位"
              show-overflow-tooltip
              prop="workDpNm"
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="100"
              label="职务"
              show-overflow-tooltip
              prop="duty"
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="100"
              prop="titles"
              label="职称"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span v-if="scope.row.titles == '1'">正高</span>
                <span v-if="scope.row.titles == '2'">副高</span>
                <span v-if="scope.row.titles == '3'">中级</span>
                <span v-if="scope.row.titles == '4'">初级</span>
                <span v-if="scope.row.titles == '5'">会计师</span>
                <span v-if="scope.row.titles == '6'">高工</span>
                <span v-if="scope.row.titles == '7'">教高</span>
                <span v-if="scope.row.titles == '8'">助理会计师</span>
                <span v-if="scope.row.titles == '9'">工程师</span>
                <span v-if="scope.row.titles == '10'">助工</span>
              </template>
            </el-table-column>
            <!--<el-table-column-->
              <!--header-align="center"-->
              <!--align="center"-->
              <!--min-width="150"-->
              <!--prop="telnumb"-->
              <!--label="电话"-->
              <!--show-overflow-tooltip-->
            <!--&gt;</el-table-column>-->
            <el-table-column
              header-align="center"
              align="center"
              min-width="100"
              prop="isOffice"
              label="在职情况"
            >
              <template #default="scope">
                <span v-if="scope.row.isOffice == '1'">是</span>
                <span v-if="scope.row.isOffice == '2'">否</span>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="120"
              prop="education"
              label="学历"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span v-if="scope.row.education == '1'">专科及以下</span>
                <span v-if="scope.row.education == '2'">本科</span>
                <span v-if="scope.row.education == '3'">研究生</span>
                <span v-if="scope.row.education == '4'">博士</span>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="80"
              prop="workAdNm"
              label="原工作地"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="150"
              prop="professional"
              label="从事专业"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="120"
              prop="recommendedUnits"
              label="推荐单位"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="80"
              prop="unitRanks"
              label="单位职级"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span v-if="scope.row.unitRanks == '1'">省部级</span>
                <span v-if="scope.row.unitRanks == '2'">地市级</span>
                <span v-if="scope.row.unitRanks == '3'">县市级</span>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="120"
              label="库别"
              show-overflow-tooltip
            >
              <template #default="scope">
                {{groupType(scope.row.groupType)}}
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="120"
              prop="inTm"
              label="入库时间"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="80"
              prop="orgNm"
              label="流域机构"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="80"
              prop="oe"
              label="体检结果"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              min-width="80"
              prop="isTraining"
              label="培训情况"
              show-overflow-tooltip
            >
              <template #default="scope">
                <span v-if="scope.row.isTraining == '1'">是</span>
                <span v-if="scope.row.isTraining == '2'">否</span>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              width="120"
              v-if="isJx"
              prop="isExternal"
              label="是否外聘"
              show-overflow-tooltip>
              <template #default="scope">
                <span v-if="scope.row.isExternal == '1'">是</span>
                <span v-if="scope.row.isExternal == '0'">否</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              min-width="220"
              label="操作"
              fixed="right"
            >
              <template #default="scope">
                <span>
                  <el-button type="primary" size="small" @click.stop="renYuanModifyThe(scope.row)">编辑</el-button>
                  <el-button type="danger" size="small" @click.stop="renYuanDelete(scope.row)">删除</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin: 10px auto"
            v-if="!changeViewInfo"
            background
            :pager-count="5"
            :current-page="form.pageIndex"
            :page-size="form.pageSize"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            layout="sizes, total, prev, pager, next"
            :total="total"
            @current-change="pageIndexChange"
            @size-change="handleSizeChange"
          ></el-pagination>
          <el-tabs v-model="activeName" @tab-click="handleClick" v-if="changeViewInfo" :style="{'height':tableHeight + 'px'}">
            <el-tab-pane label="地区分布" name="first">
              <div v-if="activeName == 'first'" ref="bar_dv1" :style="{width:100 + '%',height:tableHeight - 80 + 'px'}"></div>
            </el-tab-pane>
            <el-tab-pane label="职称情况" name="second">
              <div v-if="activeName == 'second'" ref="bar_dv2" :style="{width:100 + '%',height:tableHeight - 80 + 'px'}"></div>
            </el-tab-pane>
            <el-tab-pane label="角色分类" name="third">
              <div v-if="activeName == 'third'" ref="bar_dv3" :style="{width:100 + '%',height:tableHeight - 80 + 'px'}"></div>
            </el-tab-pane>
            <el-tab-pane label="学历情况" name="fourth">
              <div v-if="activeName == 'fourth'" ref="bar_dv4" :style="{width:100 + '%',height:tableHeight - 80 + 'px'}"></div>
            </el-tab-pane>
            <el-tab-pane label="年龄分布" name="five">
              <div v-if="activeName == 'five'" ref="bar_dv5" :style="{width:100 + '%',height:tableHeight - 80 + 'px'}"></div>
            </el-tab-pane>
            <el-tab-pane label="在职情况" name="six">
              <div v-if="activeName == 'six'" ref="bar_dv6" :style="{width:100 + '%',height:tableHeight - 80 + 'px'}"></div>
            </el-tab-pane>
          </el-tabs>
          <el-row>
            <el-col :span="24">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="一般库：">
                  <span>没有特殊属性现役普通库</span>
                </el-form-item>
                <el-form-item label="备用库：">
                  <span>以备不时之需</span>
                </el-form-item>
                <el-form-item label="退役库：">
                  <span>已离开稽察队伍</span>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form
                :inline="true"
                size="small"
                class="demo-form-inline"
              >
                <el-form-item label="蓝名单：">
                  <span>违反相关规定</span>
                </el-form-item>
                <el-form-item label="金名单：">
                  <span>测评优秀人员</span>
                </el-form-item>
                <el-form-item label="红名单：">
                  <span>公认优秀人员</span>
                </el-form-item>
                <el-form-item label="见习专家库：">
                  <span>未参加过稽察</span>
                </el-form-item>

              </el-form>
            </el-col>
          </el-row>
        </div>
      <!-- 导出人员信息 -->
      <el-dialog title="请选择导出人员信息" v-model="ExcelDialogVisible" :close-on-click-modal="false" :append-to-body="true" width="40%">
        <el-tree
          style="height: 50vh;overflow: auto;"
          ref="roleTree"
          show-checkbox
          highlight-current
          node-key="code"
          :data="roleData"
          :props="roleProps"
          :default-checked-keys="defaultCheckedKeys"
          :expand-on-click-node="false"
          default-expand-all
          @check="handleCheck">
        </el-tree>
        <template #footer class="dialog-footer">
          <el-button @click="ExcelDialogVisible = false">取 消</el-button>
          <el-button type="primary"  @click="exportPlan" >确 定</el-button>
        </template>
      </el-dialog>
      <!-- 添加人员 -->
      <el-dialog :title="dialogFaTitle + '人员信息'" v-model="addPlanDialogVisible" :close-on-click-modal="false" :append-to-body="true">
        <el-form :model="renyuanForm" ref="renyuanForm" :label-width="FormlableWidth" class="renyuan_form" :rules="rulesry">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="renyuanForm.name" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <template>
              <el-radio v-model="renyuanForm.sex" label="男">男</el-radio>
              <el-radio v-model="renyuanForm.sex" label="女">女</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="身份证号" prop="idNo">
            <el-input v-model="renyuanForm.idNo" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobilenumb">
            <el-input v-model="renyuanForm.mobilenumb" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="学历" prop="education">
            <el-select style="width:180px;" v-model="renyuanForm.education">
              <el-option label="专科及以下" value="1"></el-option>
              <el-option label="本科" value="2"></el-option>
              <el-option label="研究生" value="3"></el-option>
              <el-option label="博士" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色" prop="roleType">
            <el-select style="width:180px;" v-model="renyuanForm.roleType" clearable placeholder="请选择" multiple>
              <el-option :label="item.label" :value="item.value" v-for="(item,index) in roleTypeData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="库别" prop="groupType">
            <el-select style="width:180px;" v-model="renyuanForm.groupType" clearable placeholder="库别">
              <el-option :label="item.label" :value="item.value" v-for="(item,index) in groupTypeData" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="入库时间" prop="inTm">
            <el-date-picker
              v-model="renyuanForm.inTm"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="在职情况" prop="isOffice">
            <el-select style="width:180px;" v-model="renyuanForm.isOffice">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否外聘" prop="isExternal" v-if="isJx">
            <el-select style="width:180px;" v-model="renyuanForm.isExternal" @change="$forceUpdate()">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否培训" prop="isTraining">
            <el-select style="width:180px;" v-model="renyuanForm.isTraining">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="推荐单位">
            <el-input v-model="renyuanForm.recommendedUnits" placeholder="请输入推荐单位"></el-input>
          </el-form-item>
          <!--<el-form-item label="原工作地" prop="workAdNm">-->
            <el-form-item label="原工作地" prop="workAd">
              <el-select style="width:180px;" ref="workSelect" v-model="renyuanForm.workAd" clearable @change="workChange">
                <el-option
                  v-for="item in provList"
                  :key="item.adCode"
                  :label="item.adName"
                  :value="item.adCode">
                </el-option>
              </el-select>
            </el-form-item>
            <!--<el-input v-model="renyuanForm.workAdNm" placeholder="请输入内容"></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="工作单位" prop="workDpNm">
            <el-input v-model="renyuanForm.workDpNm" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="单位职级" prop="unitRanks">
            <el-select style="width:180px;" v-model="renyuanForm.unitRanks" clearable placeholder="请选择">
              <el-option label="省部级" value="1"></el-option>
              <el-option label="地市级" value="2"></el-option>
              <el-option label="县市级" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职称" prop="titles">
            <el-select style="width:180px;" v-model="renyuanForm.titles" clearable placeholder="请选择">
              <el-option label="正高" value="1"></el-option>
              <el-option label="副高" value="2"></el-option>
              <el-option label="中级" value="3"></el-option>
              <el-option label="县市级" value="4"></el-option>
              <el-option label="会计师" value="5"></el-option>
              <el-option label="高工" value="6"></el-option>
              <el-option label="教高" value="7"></el-option>
              <el-option label="助理会计师" value="8"></el-option>
              <el-option label="工程师" value="9"></el-option>
              <el-option label="助工" value="10"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职务">
            <el-input v-model="renyuanForm.duty" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="从事专业" prop="professional">
            <el-input v-model="renyuanForm.professional" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="流域机构">
            <el-select style="width:180px;" v-model="renyuanForm.orgCode" clearable @change="changeValue">
              <el-option
                v-for="item in lyjgData"
                :key="item.id"
                :label="item.pnm"
                :value="item.id"
                style="height: 5vh"
              ></el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="电话" prop="telnumb">-->
            <!--<el-input v-model="renyuanForm.telnumb" placeholder="请输入内容"></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="Email" prop="email">
            <el-input v-model="renyuanForm.email" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系人">
            <el-input v-model="renyuanForm.emgcCntct" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="紧急联系方式" prop="emgcCntctPhone">
            <el-input v-model="renyuanForm.emgcCntctPhone" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="银行账户">
            <el-input v-model="renyuanForm.bankAccount" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="开户银行">
            <el-input v-model="renyuanForm.bankName" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="体检结果">
            <el-input v-model="renyuanForm.oe" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="简历">
              <el-upload
                ref="upload"
                class="upload-demo"
                :action="UploadUrl()"
                :headers="header"
                accept=".pdf"
                :file-list="fileList"
                :on-error="fileUpErr"
                :on-success="fileSuccess"
                :before-upload="onBeforeUploadpdf"
                :on-change="addFile"
                :auto-upload="false"
                :on-preview="handlePreview"
                :before-remove="beforeRemove"
                >
                <el-button size="small" type="primary">选取文件</el-button>
                <template #tip>
                  <div class="el-upload__tip">只能上传pdf文件</div>
                </template>
              </el-upload>
          </el-form-item>

        </el-form>
        <template #footer class="dialog-footer">
          <el-button @click="addPlanDialogVisible = false">取 消</el-button>
          <el-button type="primary"  @click="appendPlan('renyuanForm')" >确 定</el-button>
        </template>
      </el-dialog>
      <!--简历详情-->
      <el-dialog title="附件详情" v-model="fujianVisible" :close-on-click-modal="false" :append-to-body="true" width="60%" class="fjxq">
        <iframe width="100%" height="100%" :src="pdfTitle" color="white"
                background-color="white" currentScaleValue="page-width">
        </iframe>
      </el-dialog>

      <!--批量导入人员信息-->
      <el-dialog title="批量导入人员信息" v-model="importPersVisible" :close-on-click-modal="false" :append-to-body="true" width="40%">
            <upload
              ref="uploadFile"
              accept=".xls,.xlsx"
              :url="`/pdcApi/tac/worker/b/insertList`"
              @uploadOver="removeNewSupervision"
            ></upload>
        <template #footer class="dialog-footer">
          <el-button @click="importPersVisible = false">取 消</el-button>
          <el-button type="primary" @click="importExcelPlan" >确 定</el-button>
        </template>
      </el-dialog>
      <!--批量关联简历-->
      <el-dialog title="批量关联简历" v-model="associatedResumeVisible" :close-on-click-modal="false" :append-to-body="true" width="40%">
        <upload
          ref="uploadFileJl"
          accept=".zip"
          :url="`/pdcApi/tac/worker/b/uploadBio`"
          @uploadOver="removeNewSupervisionJl"
        ></upload>
        <template #footer class="dialog-footer">
          <el-button @click="associatedResumeVisible = false">取 消</el-button>
          <el-button type="primary" @click="associatedResumePlan" >确 定</el-button>
        </template>
      </el-dialog>
    </el-main>
</template>

<script>
import * as echarts from 'echarts';
import { hostUrl } from '@/utils/global_variable.js';
import request from '@/utils/gw_ajax_request';
import { exportModel } from '@/utils/gw_exportModel';
import addvSearch from './addvSearch.vue';
import { Search, Plus, Sort, SortUp, SortDown } from '@element-plus/icons-vue'
import { jcState } from './jcStore';
export default {
  name: 'jichuxinxi',
  data() {
    var checkTel = (rule, value, callback) => {
      if (!value) {
        callback();
      }
      if (isNaN(value)) {
        callback(new Error('请输入合理电话'));
      }
      var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/; //座机
      var isMob = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; // 手机格式
      if (!isMob.test(value) && !isPhone.test(value)) {
        callback(new Error('请输入合理电话'));
      } else {
        callback();
      }
    };
    var isEmail = (rule, value, callback) => {
      if (!value) {
        callback();
      } else {
        const reg = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/;
        const email = reg.test(value);
        if (!email) {
          callback(new Error('邮箱格式如:admin@163.com'));
        } else {
          callback();
        }
      }
    };
    return {
      tableHeight: window.innerHeight - 450,
      changeViewInfo: false,
      activeName: 'first',
      form: {
        isExternal: '',
        groupType: [],
        roleType: [],
        workAd: '',
        orgCode: [],
        isOffice: '',
        education: [],
        titles: [],
        unitRanks: [],
        // sttm: "",
        isTraining: '',
        isAll: [],
        kbType: '',
        pageSize: 20,
        pageNum: 1,
        name: '',
        ageLimits: [],
      },
      valueSt: [],
      lyjgData: [],
      sfType: [
        {
          label: '是',
          value: '1',
        },
        {
          label: '否',
          value: '2',
        },
      ],
      loading: false,
      jichuData: [],
      total: 0,
      ExcelDialogVisible: false,
      roleLoading: false,
      roleData: [],
      roleProps: {
        label: 'name',
        disabled: 'selectFlag',
      },
      defaultCheckedKeys: [],

      //添加人员
      addPlanDialogVisible: false,
      renyuanForm: {
        name: '',
        sex: '',
        idNo: '',
        mobilenumb: '',
        education: '',
        roleType: [],
        groupType: '',
        inTm: '',
        isOffice: '',
        isTraining: '',
        recommendedUnits: '',
        workAdNm: '',
        workAd: '',
        workDpNm: '',
        unitRanks: '',
        titles: '',
        duty: '',
        professional: '',
        orgCode: '',
        // telnumb: "",
        email: '',
        emgcCntct: '',
        emgcCntctPhone: '',
        bankAccount: '',
        bankName: '',
        oe: '',
        resume: '',
      },
      dialogFaTitle: '添加',
      FormlableWidth: window.innerWidth * 0.15 + 'px',
      rulesry: {
        name: [{ required: true, message: '姓名不能为空' }],
        sex: [{ required: true, message: '性别不能为空' }],
        idNo: [
          { required: true, message: '请填写证件号码', trigger: 'blur' },
          {
            pattern:
              /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: '证件号码格式有误！',
            trigger: 'blur',
          },
        ],
        mobilenumb: [
          { required: true, message: '手机不能为空' },
          { validator: checkTel, trigger: 'blur' },
        ],
        education: [{ required: true, message: '学历不能为空' }],
        roleType: [{ required: true, message: '角色不能为空' }],
        groupType: [{ required: true, message: '库别不能为空' }],
        inTm: [{ required: true, message: '入库时间不能为空' }],
        isOffice: [{ required: true, message: '在职情况不能为空' }],
        isExternal: [{ required: true, message: '是否外聘不能为空' }],
        isTraining: [{ required: true, message: '是否培训不能为空' }],
        workAd: [{ required: true, message: '原工作地不能为空' }],
        unitRanks: [{ required: true, message: '单位职级不能为空' }],
        titles: [{ required: true, message: '职称不能为空' }],
        workDpNm: [{ required: true, message: '工作单位不能为空' }],
        professional: [{ required: true, message: '从事专业不能为空' }],
        // telnumb: [
        //   { required: true, message: '电话不能为空'},
        //   {validator: checkTel, trigger: 'blur'}
        // ],
        email: [{ validator: isEmail, trigger: 'blur' }],
        emgcCntctPhone: [{ validator: checkTel, trigger: 'blur' }],
      },
      url: '',
      header: {
        persId: localStorage.getItem('userid'),
        accessToken: localStorage.getItem('accessToken'),
      },
      fileList: [],
      fileBoolean: false,
      fujianVisible: false,
      pdfTitle: '',
      importPersVisible: false,
      associatedResumeVisible: false,
    };
  },
  components: {
    Search, Plus, Sort, SortUp, SortDown,
    addvSearch: addvSearch,
    upload: () => import('./uploadFile.vue'),
  },
  computed: {
    isJx() {
      return localStorage.getItem('currentRlcode').substring(0, 2) == '36';
    },
    hostUrl() {
      return hostUrl;
    },
    groupTypeData() {
      return jcState.groupTypeData;
    },
    roleTypeData() {
      return jcState.roleTypeData;
    },
    provList() {
      var list = [
        {
          adCode: localStorage.getItem('currentRlcode'),
          adName:
            localStorage.getItem('currentRlcode').substring(0, 2) == '37'
              ? '山东省'
              : localStorage.getItem('currentOrgNm'),
        },
      ];
      return list.concat(jcState.provList);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getRyYjTypeData();
      this.getRyXxData();
      this.getAreaList();
    });
  },
  methods: {
    //获取adCode
    getAreaList() {
      request
        .get('/dc/ad/base/getAdData', { params: { adCode: '000000000000' } })
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              jcState.provList = res.data;
            });
          }
        });
    },
    getRyYjTypeData() {
      request
        .get(`dc/brief/report/getRiverNode?type=1`)
        .then((res) => {
          if (res.success) {
            this.lyjgData = res.data;
          }
        })
        .catch((err) => {});
    },
    //角色
    roleType(row) {
      if (row) {
        jcState.roleTypeData.forEach((ele) => {
          if (ele.value == row) {
            row = ele.label;
          }
        });
        return row;
      } else {
        return '';
      }
    },
    //库别
    groupType(row) {
      if (row) {
        jcState.groupTypeData.forEach((ele) => {
          if (ele.value == row) {
            row = ele.label;
          }
        });
        return row;
      } else {
        return '';
      }
    },
    getTj(val, isExport) {
      const obj = {};
      obj.groupType = this.form.groupType.toString();
      obj.roleType = this.form.roleType.toString();
      // obj.adName = this.form.adName;
      obj.workAd = this.form.workAd;
      obj.orgCode = this.form.orgCode.toString();
      obj.isOffice = this.form.isOffice;
      obj.education = this.form.education.toString();
      obj.titles = this.form.titles.toString();
      obj.unitRanks = this.form.unitRanks.toString();
      obj.sttm = this.valueSt && this.valueSt.length > 0 ? this.valueSt[0] : '';
      obj.entm = this.valueSt && this.valueSt.length > 0 ? this.valueSt[1] : '';
      obj.isTraining = this.form.isTraining;
      obj.pageSize = this.form.pageSize;
      obj.pageNum = this.form.pageNum;
      obj.name = this.form.name;
      obj.ageLimits = this.form.ageLimits.toString();
      obj.isAll = this.form.isAll.toString();
      obj.columns = val;
      obj.isExport = isExport;
      obj.professional = this.form.professional;
      obj.workDpNm = this.form.workDpNm;
      obj.isExternal = this.form.isExternal;
      return obj;
    },
    getRyXxData() {
      this.loading = true;
      const obj = this.getTj();
      request.post(`/tac/worker/b/getWorkerbsPage`, obj).then((res) => {
        if (res.success) {
          this.loading = false;
          this.jichuData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    //查询
    searchJcXxData() {
      if (this.changeViewInfo) {
        if (this.activeName == 'first') {
          this.initDqfbChart();
        } else if (this.activeName == 'second') {
          this.initZcqkChart();
        } else if (this.activeName == 'third') {
          this.initJsflChart();
        } else if (this.activeName == 'fourth') {
          this.initXlqkChart();
        } else if (this.activeName == 'five') {
          this.initNlfbChart();
        } else if (this.activeName == 'six') {
          this.initZzqkChart();
        }
      } else {
        this.getRyXxData();
      }
    },
    changeView() {
      this.changeViewInfo = !this.changeViewInfo;
      if (this.changeViewInfo) {
        this.$nextTick(() => {
          this.activeName = 'first';
          this.tableHeight = window.innerHeight * 0.58;
          this.initDqfbChart();
        });
      } else {
        this.$nextTick(() => {
          this.getRyXxData();
          this.tableHeight = window.innerHeight * 0.5;
        });
      }
    },
    changeValue(value) {
      let obj = {};
      obj = this.lyjgData.find((item) => {
        return item.id === value;
      });
      console.log(obj.pnm);
      this.renyuanForm['orgName'] = obj.pnm;
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.name == 'first') {
        this.$nextTick(() => {
          this.initDqfbChart();
        });
      } else if (tab.name == 'second') {
        this.$nextTick(() => {
          this.initZcqkChart();
        });
      } else if (tab.name == 'third') {
        this.$nextTick(() => {
          this.initJsflChart();
        });
      } else if (tab.name == 'fourth') {
        this.$nextTick(() => {
          this.initXlqkChart();
        });
      } else if (tab.name == 'five') {
        this.$nextTick(() => {
          this.initNlfbChart();
        });
      } else if (tab.name == 'six') {
        this.$nextTick(() => {
          this.initZzqkChart();
        });
      }
    },
    //导出Excel
    exportExcel() {
      request.post(`/tac/worker/b/getExportColumns`).then((res) => {
        if (res.success) {
          this.$nextTick(() => {
            res.data.forEach((item, index) => {
              if (item.selectFlag) {
                this.defaultCheckedKeys.push(item.code);
              }
            });
            this.roleData = res.data;
            console.log(this.defaultCheckedKeys);
            this.ExcelDialogVisible = true;
          });
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 下载批量导入模板
    downloadTemplateConfirm() {
      this.$confirm('请先下载批量导入模板!', '提示', {
        confirmButtonText: '下载模板',
        cancelButtonText: '直接导入',
        type: 'warning',
      })
        .then(() => {
          const url = '/pdcApi/tac/worker/b/downTemplateExcel';
          const downloadName = '人员信息模板.xls';
          const type = 'get';
          exportModel(type, url, downloadName);
        })
        .catch(() => {
          this.importExcel();
        });
    },
    //导入
    importExcel() {
      this.importPersVisible = true;
    },
    //批量关联简历
    associatedResume() {
      this.associatedResumeVisible = true;
    },
    //批量人员导入确定
    importExcelPlan() {
      this.submitUpload();
    },
    //批量简历确定
    associatedResumePlan() {
      this.submitUploadJl();
    },
    //Excel导出保存
    async exportPlan() {
      const data = JSON.stringify(
        this.getTj(this.defaultCheckedKeys.toString(), 1),
      );
      const url = `/pdcApi/tac/worker/b/getWorkerbsPage`;
      const downloadName = '人员信息.xls';
      const type = 'post';
      const result = await exportModel(type, url, downloadName, data);
      if (!result) {
        this.ExcelDialogVisible = false;
      }
    },
    //点击树状菜单
    handleNodeClick(node) {
      console.log(node);
    },
    handleCheck(res) {
      this.defaultCheckedKeys = [];
      const getCheckedNodes = this.$refs.roleTree.getCheckedNodes();
      getCheckedNodes.forEach((item, index) => {
        this.defaultCheckedKeys.push(item.code);
      });
      console.log(this.defaultCheckedKeys);
      console.log(this.$refs.roleTree.getCheckedNodes().length);
    },
    //分页
    pageIndexChange(val) {
      this.$nextTick(() => {
        this.form.pageNum = val;
        this.getRyXxData();
      });
    },
    handleSizeChange(val) {
      this.$nextTick(() => {
        this.form.pageSize = val;
        this.getRyXxData();
      });
    },
    //绘制地区分布
    async initDqfbChart() {
      const xData = [];
      const yData = [];
      await request
        .post(`/tac/worker/b/countByAdCode`, this.getTj())
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              res.data.forEach((item, index) => {
                xData.push(item.name);
                yData.push(item.count);
              });
            });
          }
        });
      const myChart = echarts.init(this.$refs.bar_dv1);
      // 绘制图表
      myChart.setOption({
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              rotate: 45,
              color: '#333',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '数量',
            axisLabel: {
              formatter: `{value} 个`,
            },
            max: (value) => value.max,
            min: (value) => value.min,
          },
        ],
        series: [
          {
            name: '地区分布情况',
            type: 'bar',
            barWidth: '50%',
            data: yData,
          },
        ],
      });
    },
    //绘制职称情况
    async initZcqkChart() {
      const xData = [];
      const bData = [];
      await request
        .post(`/tac/worker/b/countByTitles`, this.getTj())
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              res.data.forEach((item, index) => {
                xData.push(item.name);
                bData.push({ value: item.count, name: item.name });
              });
            });
          }
        });
      const chart = echarts.init(this.$refs.bar_dv2);
      const option = {
        backgroundColor: 'rgba(0,0,0,0)',
        color: ['#0195F2', '#5CE9C7', '#FED172', '#FB6086'],
        title: {
          text: '',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc',
          },
        },
        legend: {
          icon: 'circle',
          orient: 'horizontal',
          textStyle: {
            fontSize: 12,
            color: '#333',
          },
          x: 'center',
          y: 'bottom',
          data: xData,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        series: [
          {
            name: '职称情况',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '35%'],
            data: bData,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                },
                smooth: 0.2,
                length: 10,
                length2: 20,
              },
            },
            animationType: 'expansion',
          },
        ],
        animationDuration: '400',
        animationDurationUpdate: '400',
        animationEasing: 'cubicOut',
        animationEasingUpdate: 'cubicOut',
      };
      chart.setOption(option, true);
    },
    //绘制角色分类
    async initJsflChart() {
      const xData = [];
      const bData = [];
      await request
        .post(`/tac/worker/b/countByRole`, this.getTj())
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              res.data.forEach((item, index) => {
                xData.push(item.name);
                bData.push({ value: item.count, name: item.name });
              });
            });
          }
        });
      const chart = echarts.init(this.$refs['bar_dv3']);
      const option = {
        backgroundColor: 'rgba(0,0,0,0)',
        color: [
          '#C33531',
          '#EFE42A',
          '#64BD3D',
          '#EE9201',
          '#29AAE3',
          '#B74AE5',
          '#0AAF9F',
          '#E89589',
        ],
        title: {
          text: '',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc',
          },
        },
        legend: {
          textStyle: {
            fontSize: 12,
            color: '#333',
          },
          // itemWidth: this.itemWidthChart,  // 设置宽度
          // itemHeight: this.itemHeightChart, // 设置高度
          // top:this.topChart,
          x: 'center',
          y: 'bottom',
          data: xData,
          icon: 'circle',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        series: [
          {
            name: '角色分类',
            type: 'pie',
            radius: '60%',
            center: ['50%', '40%'],
            data: bData,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                },
                smooth: 0.2,
                length: 10,
                length2: 20,
              },
            },

            animationType: 'expansion',
          },
        ],
        animationDuration: '400',
        animationDurationUpdate: '400',
        animationEasing: 'cubicOut',
        animationEasingUpdate: 'cubicOut',
      };
      chart.setOption(option, true);
    },
    //绘制学历情况
    async initXlqkChart() {
      const xData = [];
      const bData = [];
      await request
        .post(`/tac/worker/b/countByEdu`, this.getTj())
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              res.data.forEach((item, index) => {
                xData.push(item.name);
                bData.push({ value: item.count, name: item.name });
              });
            });
          }
        });
      const chart = echarts.init(this.$refs['bar_dv4']);
      const option = {
        backgroundColor: 'rgba(0,0,0,0)',
        color: ['#16A085', '#4A235A', '#C39BD3 ', '#F9E79F'],
        title: {
          text: '',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc',
          },
        },
        legend: {
          textStyle: {
            fontSize: 12,
            color: '#333',
          },
          // itemWidth: this.itemWidthChart,  // 设置宽度
          // itemHeight: this.itemHeightChart, // 设置高度
          // top:this.topChart,
          x: 'center',
          y: 'bottom',
          data: xData,
          icon: 'circle',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        series: [
          {
            name: '学历情况',
            type: 'pie',
            radius: '60%',
            center: ['50%', '40%'],
            data: bData,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                },
                smooth: 0.2,
                length: 10,
                length2: 20,
              },
            },

            animationType: 'expansion',
          },
        ],
        animationDuration: '400',
        animationDurationUpdate: '400',
        animationEasing: 'cubicOut',
        animationEasingUpdate: 'cubicOut',
      };
      chart.setOption(option, true);
    },
    //绘制年龄分布
    async initNlfbChart() {
      const xData = [];
      const bData = [];
      await request
        .post(`/tac/worker/b/countByAge`, this.getTj())
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              res.data.forEach((item, index) => {
                xData.push(item.name);
                bData.push({ value: item.count, name: item.name });
              });
            });
          }
        });
      const chart = echarts.init(this.$refs['bar_dv5']);
      const option = {
        backgroundColor: 'rgba(0,0,0,0)',
        color: [
          '#EAEA26',
          '#906BF9',
          '#FE5656',
          '#01E17E',
          '#3DD1F9',
          '#FFAD05',
          '#0AAF9F',
          '#E89589',
          '#16A085',
          '#4A235A',
          '#C39BD3 ',
          '#F9E79F',
          '#BA4A00',
          '#ECF0F1',
          '#616A6B',
          '#EAF2F8',
          '#4A235A',
          '#3498DB',
        ],
        title: {
          text: '',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc',
          },
        },
        legend: {
          textStyle: {
            fontSize: 12,
            color: '#333',
          },
          // itemWidth: this.itemWidthChart,  // 设置宽度
          // itemHeight: this.itemHeightChart, // 设置高度
          // top:this.topChart,
          x: 'center',
          y: 'bottom',
          data: xData,
          icon: 'circle',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        series: [
          {
            name: '年龄分布',
            type: 'pie',
            radius: '60%',
            center: ['50%', '40%'],
            data: bData,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                },
                smooth: 0.2,
                length: 10,
                length2: 20,
              },
            },

            animationType: 'expansion',
          },
        ],
        animationDuration: '400',
        animationDurationUpdate: '400',
        animationEasing: 'cubicOut',
        animationEasingUpdate: 'cubicOut',
      };
      chart.setOption(option, true);
    },
    //绘制在职情况
    async initZzqkChart() {
      const xData = [];
      const bData = [];
      await request
        .post(`/tac/worker/b/countByOffice`, this.getTj())
        .then((res) => {
          if (res.success) {
            this.$nextTick(() => {
              res.data.forEach((item, index) => {
                xData.push(item.name);
                bData.push({ value: item.count, name: item.name });
              });
            });
          }
        });
      const chart = echarts.init(this.$refs['bar_dv6']);
      const option = {
        backgroundColor: 'rgba(0,0,0,0)',
        color: ['#5CE9C7', '#FEB23A'],
        title: {
          text: '',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#ccc',
          },
        },
        legend: {
          textStyle: {
            fontSize: 12,
            color: '#333',
          },
          // itemWidth: this.itemWidthChart,  // 设置宽度
          // itemHeight: this.itemHeightChart, // 设置高度
          // top:this.topChart,
          x: 'center',
          y: 'bottom',
          data: xData,
          icon: 'circle',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        series: [
          {
            name: '在职情况',
            type: 'pie',
            radius: '60%',
            center: ['50%', '40%'],
            data: bData,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                },
                smooth: 0.2,
                length: 10,
                length2: 20,
              },
            },

            animationType: 'expansion',
          },
        ],
        animationDuration: '400',
        animationDurationUpdate: '400',
        animationEasing: 'cubicOut',
        animationEasingUpdate: 'cubicOut',
      };
      chart.setOption(option, true);
    },
    //  添加人员
    addPers() {
      this.fileList = [];
      for (var obj in this.renyuanForm) {
        this.renyuanForm[obj] = '';
      }
      this.renyuanForm['isExternal'] = '1';
      this.dialogFaTitle = '添加';
      this.addPlanDialogVisible = true;
    },
    appendPlan(from) {
      if (
        this.renyuanForm.roleTypeList == '' ||
        this.renyuanForm.roleTypeList == null ||
        this.renyuanForm.roleTypeList == undefined
      ) {
        this.renyuanForm.roleTypeList = [];
      }
      this.renyuanForm.roleType = this.renyuanForm.roleType.toString();
      if (this.dialogFaTitle == '添加') {
        delete this.renyuanForm['gwComFiles'];
        this.$refs[from].validate((valid) => {
          if (valid) {
            request.post('/tac/worker/b', this.renyuanForm).then((res) => {
              if (res.success) {
                if (this.fileBoolean) {
                  // 文件上传
                  this.url = res.data.id;
                  this.$nextTick(function () {
                    this.$refs.upload.submit();
                  });
                } else {
                  this.getRyXxData();
                  this.$message.success('保存成功');
                  this.addPlanDialogVisible = false;
                }
              } else {
                this.$message.error(res.message);
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      } else {
        if (this.fileBoolean) {
          this.$refs[from].validate((valid) => {
            if (valid) {
              request.post('/tac/worker/b', this.renyuanForm).then((res) => {
                if (res.success) {
                  // 文件上传
                  this.url = res.data.id;
                  this.$nextTick(function () {
                    this.$refs.upload.submit();
                    this.fileBoolean = false;
                  });
                } else {
                  this.$message.error(res.message);
                }
              });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        } else {
          this.$refs[from].validate((valid) => {
            if (valid) {
              request.post('/tac/worker/b', this.renyuanForm).then((res) => {
                if (res.success) {
                  this.$message.success('更新成功');
                  this.addPlanDialogVisible = false;
                  this.getRyXxData();
                } else {
                  this.$message.error(res.message);
                }
              });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }
      }
    },
    //编辑人员
    renYuanModifyThe(row) {
      this.fileList = [];
      request.get(`/tac/worker/b/${row.id}`).then((res) => {
        if (res.success) {
          this.renyuanForm = res.data;
          this.renyuanForm.roleType = res.data.roleType.split(',');
          const data = res.data.gwComFiles;
          if (data) {
            data.forEach((item) => {
              var obj = {};
              obj['name'] = item.fileName;
              obj['url'] = item.filePath;
              obj['bizId'] = item.bizId;
              obj['id'] = item.id;
              this.fileList.push(obj);
            });
          }
        }
      });
      // this.rowId = row.id;
      this.dialogFaTitle = '编辑';
      this.addPlanDialogVisible = true;
    },
    //删除人员
    renYuanDelete(row) {
      this.$confirm('确定要删除该人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          request.get(`/tac/worker/b/del/${row.id}`).then((res) => {
            if (res.success) {
              this.$message({
                type: 'success',
                message: '删除成功',
                duration: 1000,
              });
              this.getRyXxData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
            duration: 1000,
          });
        });
    },
    //简历
    UploadUrl: function () {
      return `/pdcApi/file/insert?bizId=${this.url}`;
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
        .then(() => {
          request.post(`/file/${file.id}`).then((res) => {
            if (res.success) {
              this.$message({
                type: 'success',
                message: '删除成功!',
              });
              console.log(fileList.length);
              if (fileList.length == '0') {
                this.fileList = [];
                this.fileBoolean = false;
              }
              this.getRyXxData();
            } else {
              this.$alert('删除失败！', '提示', {
                confirmButtonText: '确定',
                type: 'warning',
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    fileSuccess() {
      this.getRyXxData();
      this.$message.success('操作成功');
      this.addPlanDialogVisible = false;
    },
    onBeforeUploadpdf(file) {
      var FileExt = file.name.replace(/.+\./, '');
      if (['pdf'].indexOf(FileExt.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请上传后缀名为pdf的附件！',
        });
        this.fileList = [];
        return false;
      }
    },
    addFile(file, fileList) {
      this.fileList = fileList;
      this.fileBoolean = true;
    },
    fileUpErr(err, file, fileList) {
      if (file.status == 413) {
      } else {
        this.$message.warning('上传出错！');
        this.fileList = [];
        return false;
      }
    },
    handlePreview(file) {
      const userAgent = navigator.userAgent;
      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
        this.$message.info('推荐谷歌进行文件预览');
      } else {
        if (file.url) {
          this.fujianVisible = true;
          this.pdfTitle = `${this.hostUrl}/${file.url}`;
        } else {
          this.$message.warning('请先上传再下载');
        }
      }
    },
    // getAreaList(){
    //   request.get('/dc/ad/base/getAdData',{params:{'adCode':'000000000000'}}).then(res=>{
    //     if(res.success){
    //       this.$nextTick(()=>{
    //         this.provList = res.data;
    //       })
    //
    //     }
    //   })
    // },
    select_handler_province() {
      this.$nextTick(() => {
        // console.log(this.$refs.selectProvince.selectedLabel);
        this.form.adName = this.$refs.selectProvince.selectedLabel;
      });
    },
    workChange() {
      this.$nextTick(() => {
        // console.log(this.$refs.selectProvince.selectedLabel);
        this.renyuanForm.workAdNm = this.$refs.workSelect.selectedLabel;
      });
    },

    // 批量导入人员信息上传
    submitUpload() {
      if (this.$refs.uploadFile.submitUpload('')) {
        this.removeNewSupervision();
      }
    },
    // 批量导入简历
    submitUploadJl() {
      if (this.$refs.uploadFileJl.submitUpload('')) {
        this.removeNewSupervisionJl();
      }
    },
    removeNewSupervision(arg) {
      if (arg) {
        if (arg.length) {
          this.$alert(`失败${arg[0].fail}条,成功${arg[0].success}条`, '提示', {
            confirmButtonText: '确定',
          });
        }
        // this.$message.success('上传成功');
        this.$refs.uploadFile.init();
        this.importPersVisible = false;
      }
    },
    removeNewSupervisionJl(arg) {
      if (arg) {
        console.log(arg);
        this.$message.success('上传成功');
        this.$refs.uploadFileJl.init();
        this.associatedResumeVisible = false;
      }
    },
  },
};
</script>

<style>
  .ryjcxx {
    width: 100%;
    height: 100%;
    padding: 5px;
    .el-tree-node__content {
      height: 40px;
    }
    .el-tree-node__label {
       margin-left: 14px;
     }
    .renyuan_form{
        height: 50vh;
        overflow: auto;
      }
    .fjxq .el-dialog__body{height: 60vh;}
    .renyuan_form .el-input,.renyuan_form textarea.el-textarea__inner {
      width: 20vw;
    }
  }
  @media screen and (max-width: 1679px) {
    .ryjcxx .search .el-select{
      width: 130px;
    }
  }
</style>
