<template>
  <div>
    <el-row>
      <el-col :span="5">
        <basic-container>
          <p>服务分组管理</p>
          <div class="box" :style="{ height: leftHeight }">
            <el-scrollbar style="height: 100%">
              <el-tree ref="tree" node-key="id" highlight-current :expand-on-click-node="false" @node-click="nodeClick"
                       :data="treeData" :props="props">
              <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 80%">
                <span style="
                    flex-basis: 80%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    flex-shrink: 1;
                  ">
                  {{ node.label }}
                  （{{ data.sumNum }}个）
                </span>
                <span v-show="data.id && data.id !== '0'" style="flex-basis: 20%">
                  <el-button type="text" icon="el-icon-edit" size="mini"
                             v-if="vaildData(permission.tenant_main_serve_index_groupedit, false)"
                             @click="() => updateGroups('edit', data)">
                  </el-button>
                  <el-button icon="el-icon-delete" type="text" size="mini"
                             v-if="vaildData(permission.tenant_main_serve_index_groupdel, false)"
                             @click="() => removeGroups(data)">
                  </el-button>
                </span>
              </span>
              </el-tree>
              <div class="footer" style="padding-left: 6px">
                <el-button type="text" icon="el-icon-plus"
                           v-if="vaildData(permission.tenant_main_serve_index_groupadd, false)"
                           @click="updateGroups('add')">新建分组
                </el-button>
              </div>
            </el-scrollbar>
          </div>
        </basic-container>
      </el-col>
      <el-col :span="19">
        <basic-container>
          <!--搜索栏-->
          <el-form size="small" label-position="right" :inline="true" style="padding-left: 10px; padding-right: 10px">
            <el-row :span="24">
              <el-form-item label="机构名称:">
                <el-input v-model="query.companyName" placeholder="机构名称" clearable></el-input>
              </el-form-item>
              <el-form-item label="服务名称:">
                <el-input v-model="query.name" placeholder="服务名称" clearable></el-input>
              </el-form-item>

              <div class="searchBtn">
                <el-button type="primary" size="small" icon="el-icon-search" @click="searchChange1">搜 索</el-button>
                <el-button size="small" icon="el-icon-delete" @click="searchReset1">清 空</el-button>
              </div>
            </el-row>
          </el-form>
          <!--/搜索栏-->
          <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" v-model="obj"
                     :permission="permissionList" :before-open="beforeOpen" @row-del="rowDel" @row-update="rowUpdate"
                     @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
                     @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
                     @refresh-change="refreshChange" class="customPage">
            <!--自定义列-->
            <template slot="worktypes" slot-scope="{ row }">
              <el-tooltip effect="dark" :content="row.worktypes" placement="top">
                <div slot="content">
                  <div v-for="(item, index) in clipStr(row.worktypes)" :key="index">
                    <div>{{ item }}</div>
                  </div>
                </div>
                <div>{{ row.worktypes | ellipsis }}</div>
              </el-tooltip>
            </template>
            <template slot="status" slot-scope="{ row }">
              <div>
              <span v-if="row.status == 1" style="color: green">
                <b>{{ statusArr[row.status] }}</b>
              </span>
                <span v-if="row.status == 0" style="color: red">
                <b>{{ statusArr[row.status] }}</b>
              </span>
              </div>
            </template>
            <template slot="resume" slot-scope="{ row }">
              <div>
                <el-button type="text" size="mini" @click="$refs.resume.openDialog(row)"
                           v-if="row.userId && row.userId !== '0'">查看简历
                </el-button>
                <div v-else>暂无简历</div>
              </div>
            </template>
            <template slot="serveLabels" slot-scope="{ row }">
              <el-tooltip effect="dark" placement="top">
                <div slot="content">
                  <div v-for="(item, index) in clipStr(row.serveLabels)" :key="index">
                    <div>{{ item }}</div>
                  </div>
                </div>
                <span>{{
                    row.serveLabels.length > 20 ? `${row.serveLabels.substring(0, 20)}...` : row.serveLabels
                  }}</span>
              </el-tooltip>
            </template>
            <!--/自定义列-->
            <template slot="serveLabelsForm">
              <tag-select v-model="selectLabelNameTypes" :prop="{ label: 'name', value: 'name' }" :data="worktypeData">
              </tag-select>
            </template>
            <!--自定义按钮-->
            <template slot="menuLeft">
              <el-button type="primary" size="small" icon="el-icon-delete"
                         @click="() => { $refs.crud.rowAdd(); selectPolicyTree = []}"
                         v-if="vaildData(permission.tenant_main_serve_index_add, false)">
                新增
              </el-button>
              <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete"
                         :disabled="!selectionList.length" plain
                         v-show="vaildData(permission.tenant_talents_groupdelete, false)">
                删除
              </el-button>
            </template>
            <template slot="name" slot-scope="{row}">
              <span>{{ row.name }}</span>
              <!-- <span v-else>{{ row.name }}（<span style="color: red;">未实名</span>）</span> -->
            </template>
            <template slot="policyIdsForm" slot-scope="{row}">
              <el-cascader
                v-model="selectPolicyTree"
                :options="listAllPolicyTree"
                :props="{ expandTrigger: 'hover', multiple: true, label: 'name', value: 'value', children: 'child'}"
                @change="handleChange"
                filterable
              ></el-cascader>
            </template>
            <!--/自定义按钮-->
            <template slot-scope="{row,index}" slot="menu">
              <el-button type="text"
                         icon="el-icon-document"
                         size="small"
                         v-show="vaildData(permission.tenant_main_serve_index_pushserve, false)"
                         @click="selectPushService(row)"
              >推送服务
              </el-button>
              <el-button type="text"
                         icon="el-icon-document"
                         size="small"
                         @click="showKeyAudience(row)"
              >服务详情
              </el-button>
              <el-button type="text"
                         v-if="row.status == 0"
                         icon="el-icon-video-play"
                         size="small"
                         v-show="vaildData(permission.tenant_main_serve_index_off, false)"
                         @click="playServe(row)"
              >启用
              </el-button>
              <el-button type="text"
                         v-if="row.status == 1"
                         icon="el-icon-video-pause"
                         size="small"
                         v-show="vaildData(permission.tenant_main_serve_index_off, false)"
                         @click="pauseServe(row)"
              >关闭
              </el-button>
            </template>
            <template slot="talentsNamesForm" slot-scope="{row}">
              <el-button type="text"
                         v-if="row.status == 1"
                         icon="el-icon-video-pause"
                         size="small"
                         @click="pauseServe(row)"
              >关闭
              </el-button>
            </template>
            <!--/父子表-->
          </avue-crud>

          <!--批量导入-->
          <el-dialog title="导入" append-to-body :visible.sync="excelBox" :close-on-click-modal="false" width="555px">
            <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter"
                       :upload-before="beforeAvatarUpload" :upload-error="uploadError">
              <template slot="excelTemplate">
                <el-button type="primary" @click="handleTemplate()" :loading="templateLoading">
                  点击下载
                  <i class="el-icon-download el-icon--right"></i>
                </el-button>
              </template>
            </avue-form>
          </el-dialog>
          <!--/批量导入-->
          <!--新建 编辑分组dialog-->
          <add-groups ref="addGroups" @refresh="refresh" :treeData="treeData"></add-groups>
          <!--/新建 编辑分组dialog-->
          <!--转移分组dialog-->
          <transfer-groups ref="transferGroups" @refresh="refresh" :ids="ids"></transfer-groups>
          <!--/转移分组dialog-->
          <resume ref="resume" v-show="false"></resume>
        </basic-container>
        <ied ref="ied"></ied>
      </el-col>

    </el-row>
    <!-- <serveCopy-detail ref="copy" @back="backIndex" v-show="false"></serveCopy-detail> -->
    <el-drawer
      size="85%"
      append-to-body
      title="服务详情"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <avue-crud
        :data="infoData"
        :option="infoOption"
        :search.sync="search"
        :page.sync="infoPage"
        @search-change="serveSearchChange"
        @search-reset="serveResetChange"
        @size-change="infoSizeChange"
        @current-change="infoCurrentChange"
      >
        <template slot-scope="{row,index}" slot="menu">
          <el-button type="text"
                     icon="el-icon-document"
                     size="small"
                     @click="matchWorkStation(row)"
          >匹配任务/岗位
          </el-button>
          <el-button type="text"
                     icon="el-icon-document"
                     size="small"
                     @click="matchPolicy(row)"
          >匹配政策
          </el-button>
          <el-button type="text"
                     icon="el-icon-document"
                     size="small"
                     @click="serveLog(row)"
          >服务日志
          </el-button>
        </template>
      </avue-crud>
      <el-drawer
        title="匹配任务/岗位"
        size="80%"
        :append-to-body="true"
        :before-close="handleCloseWork"
        :visible.sync="innerDrawer1">
        <avue-crud
          :data="workData"
          :option="workOption"
          :page.sync="workPage"
          @size-change="workSizeChange"
          @current-change="workCurrentChange"
        >
          <template slot="missionDesc" slot-scope="{ row }">
            <TextTooltip :content="row.missionDesc"></TextTooltip>
          </template>
          <template slot-scope="{row,index}" slot="menu">
            <el-button type="text"
                       icon="el-icon-document"
                       size="small"
                       @click="toWorkMissionDetail(row)"
            >查看详情
            </el-button>
          </template>
        </avue-crud>
      </el-drawer>
      <el-drawer
        title="匹配政策"
        size="80%"
        :append-to-body="true"
        :before-close="handleClosePolicy"
        :visible.sync="innerDrawer2">
        <avue-crud
          :data="policyData"
          :option="policyOption"
          :page.sync="policyPage"
          @size-change="policySizeChange"
          @current-change="policyCurrentChange"
        >
          <template slot="policyContent" slot-scope="{ row }">
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content">
                <div v-for="(item, index) in clipStr(row.policyContent)" :key="index">
                  <div>{{ item }}</div>
                </div>
              </div>
              <span>{{ row.policyContent.length > 50 ? row.policyContent.substring(0, 50) : row.policyContent }}</span>
            </el-tooltip>
          </template>
          <template slot="labelName" slot-scope="{ row }">
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content">
                <div v-for="(item, index) in clipStr(row.labelName)" :key="index">
                  <div>{{ item }}</div>
                </div>
              </div>
              <span>{{ row.labelName.length > 50 ? row.labelName.substring(0, 50) : row.labelName }}</span>
            </el-tooltip>
          </template>
          <template slot="labelNameForm" slot-scope="{row}">
            <div>
              <el-tag style="margin: 4px 10px" v-for="(item, index) in row.labelName.split(',')" :key="index">{{
                  item
                }}
              </el-tag>
            </div>
          </template>

          <template slot="guidelineContentForm" slot-scope="{row}">
            <div>
              <Tinymce v-model="row.guidelineContent" :visibleToolbar="false" :visibleMenubar="false"></Tinymce>
            </div>
          </template>
          <template slot="policyContentForm" slot-scope="{row}">
            <div>
              <Tinymce v-model="row.policyContent" :visibleToolbar="false" :visibleMenubar="false"></Tinymce>
            </div>
          </template>

        </avue-crud>
      </el-drawer>
      <el-drawer
        title="服务日志"
        size="80%"
        :append-to-body="true"
        :before-close="handleCloseLog"
        :visible.sync="innerDrawer3">
        <!-- <div>
          <span>姓名：</span>
          <span>身份证号：</span>
        </div> -->
        <avue-crud
          :data="logData"
          :option="logOption"
          @row-save="saveLog"
          @row-update="saveUpdateLog"
          @row-del="removeLog"
          :page.sync="logPage"
          @size-change="logSizeChange"
          @current-change="logCurrentChange"
        >
          <!-- <template slot="menuLeft">
            <el-button @click="addNewLog" icon="el-icon-plus" type="primary" size="mini">添加</el-button>
          </template>
          <template slot="menu" slot-scope="{row}">
            <el-button type="text" @click="editLogInfo(row.id)" icon="el-icon-edit" size="mini">修改</el-button>
            <el-button type="text" @click="editLogInfo(row.id)" icon="el-icon-edit" size="mini">查看附件</el-button>
          </template> -->
        </avue-crud>
      </el-drawer>
    </el-drawer>
    <mission-view :visible.sync="viewDrawer" :model="view"></mission-view>
    <work-view :visible.sync="workViewDrawer" :model="workViewModel"></work-view>
    <PushService
      :visible.sync="PushServiceVisible"
      :rowData="selectPushServiceData"
    ></PushService>
  </div>
</template>

<script>
import {
  getList,
  remove,
  update,
  add,
  detail,
  getDept,
  removeDept,
  upload,
  getServeListTalents,
  getMatchWorkStation,
  getMatchPolicy,
  getMatchServeList,
  getListAllPolicy,
  getListAllTalents,
  addServeLog,
  updateServeLog,
  removeServeLog
} from "@/api/tenant/serve";
import {detail as missionDetail} from "@/api/tenant/mission";
import {detail as workDetail} from "@/api/tenant/postzp";
import {getLabelList, getWorkTypes} from "@/api/tenant/common";
import {mapGetters} from "vuex";
import addGroups from "./Dialog/addGroups";
import transferGroups from "./Dialog/transferGroups";
import Resume from "@/components/resume/index";
import {check18IdCardNo, isvalidatemobile, isExcel} from "@/util/validate";
import {getTemplate} from "@/api/resource/template";
import ied from "@/views/util/import-error-dialog";
import {excelAccept} from "@/common/accept";
import missionView from "../../mission/Table/missionView.vue";
import workView from "../../works/Table/missionView.vue"
import {serviceType} from "@/common/dic";
import Tinymce from "@/components/Tinymce";
import {deepClone} from "@/util/util";
import PushService from "@/views/tenant/main/serveCopy/Dialog/pushService.vue";
import TextTooltip from "@/components/text-tooltip/index.vue";

const page = {
  pageSize: 10,
  currentPage: 1,
  total: 0,
}
export default {
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 14) + "...";
      }
      return value;
    },
  },
  name: "tenant_talents",
  data() {
    return {
      search: {
        companyName: '',
        name: ''
      },
      PushServiceVisible: false,
      selectPushServiceData: null,
      viewDrawer: false,
      workViewDrawer: false,
      view: {},
      workViewModel: {},
      statusArr: {
        0: "未启用",
        1: "服务中",
        2: "已完成",
        3: "已关闭",
      },
      direction: 'rtl',
      drawer: false,
      innerDrawer1: false,
      innerDrawer2: false,
      innerDrawer3: false,
      activeNames: "1",
      isIndeterminate: false,
      checkAll: false,
      checked: false,
      selectionList: [],
      loading: true,
      templateLoading: false,
      query: {},
      props: {
        label: "groupName",
        id: "id",
      },
      personTotal: 0,
      treeData: [],
      tenantId: "",
      page: Object.assign({}, page),
      tempWorkType: [],
      worktypeDic: {},
      arr: [],//////
      excelOption: {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            label: "文件上传",
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "文件上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
            },
            tip: "请上传 .xls,.xlsx 标准格式文件",
            accept: excelAccept,
            showFileList: false,
            action: upload(),
          },
          {
            label: "模板下载",
            prop: "excelTemplate",
            formslot: true,
            span: 24,
          },
        ],
      },
      excelBox: false,
      data: [],
      visibleAudience: false,
      selectInfo: null,
      infoData: [],
      workData: [],
      policyData: [],
      logData: [],
      infoPage: Object.assign({}, page),
      workPage: Object.assign({}, page),
      policyPage: Object.assign({}, page),
      logPage: Object.assign({}, page),
      obj: {},
      excelForm: {isCovered: 1},
      listAllPolicyTree: [],
      selectPolicyTree: [],
      talentsList: [],
      selectUserServeLog: null,
    };
  },
  components: {addGroups, transferGroups, Resume, ied, missionView, workView, Tinymce, PushService, TextTooltip},
  watch: {},
  computed: {
    ...mapGetters(["permission", "userInfo"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.tenant_main_serve_index_add, false),
        viewBtn: true,
        delBtn: this.vaildData(this.permission.tenant_main_serve_index_del, false),
        editBtn: this.vaildData(this.permission.tenant_main_serve_index_edit, false),
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
    leftHeight: function () {
      //获取高度值
      if (document.getElementsByClassName("avue-crud__pagination")[0]) {
        let pageHeight = document.getElementsByClassName(
          "avue-crud__pagination"
        )[0].offsetTop;
        return pageHeight - 105 + "px";
      } else {
        return 725 + "px";
      }
    },
    option() {
      const self = this;
      const IdCardNo = (rule, value, callback) => {
        if (check18IdCardNo(value)) {
          callback();
        } else {
          callback(new Error("身份证格式不正确"));
        }
      };
      const validateTel = (rule, value, callback) => {
        if (isvalidatemobile(value)[0]) {
          callback(new Error(isvalidatemobile(value)[1]));
        } else {
          callback();
        }
      };
      console.log(self.talentsList)
      return {
        height: "auto",
        dialogWidth: "60%",
        calcHeight: 180,
        align: "center",
        menuAlign: "center",
        tip: false,
        columnBtn: false,
        searchBtn: true,
        searchShow: true,
        addBtn: false,
        viewBtn: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        indexLabel: "序号",
        selection: true,
        dialogType: "drawer",
        dialogClickModal: false,
        labelWidth: 120,
        column: [
          {
            label: "机构名称",
            prop: "companyName",
            addDisplay: false,
          },

          {
            label: "服务名称",
            prop: "name",
            // search: true,
            span: 24,
            rules: [
              {
                required: true,
                whitespace: true,
                message: "请输入姓名",
                trigger: "blur",
              },
            ],
            slot: true
          },
          {
            label: "服务分组",
            prop: "groupId",
            type: "tree",
            span: 24,
            display: true,
            dicData: self.treeData,
            hide: true,
            props: {
              label: "groupName",
              value: "id",
            },
            rules: [
              {
                required: true,
                message: "请选择分组",
                trigger: "change",
              },
            ],
            placeholder: "请选择 分组",
          },
          {
            label: "政策指南",
            prop: "policyIds",
            // search: true,
            span: 24,
            hide: true,
            // display: false,
            formslot: true,
          },
          {
            label: "用户类型",
            prop: "userId",
            type: "select",
            dicData: [
              {
                value: "0",
                label: "未注册用户",
              },
              {
                value: "1",
                label: "已注册用户",
              },
            ],
            display: false,
            hide: true,
            // search: true
          },
          {
            label: "服务场景",
            prop: "serveLabels",
            rules: [
              {
                required: true,
                message: "请选择标签",
                trigger: ["blur"],
              },
            ],
            slot: true,
            formslot: true,
          },
          {
            label: "重点人群",
            prop: "talentsGroupId",
            type: "select",
            multiple: true,
            hide: true,
            display: true,
            dicData: self.talentsList,
            props: {
              label: "groupName",
              value: "id"
            },
            span: 24,
          },
          {
            label: "服务状态",
            prop: "status",
            display: false,
            span: 24,
            slot: true,
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            slot: true,
            hide: true,
            span: 24,
            maxlength: 100,
            showWordLimit: true,
          },
        ],
      };
    },
    workOption() {
      return {
        editBtn: false,
        delBtn: false,
        addBtn: false,
        border: true,
        index: true,
        indexLabel: "序号",
        refreshBtn: false,
        height: '100',
        column: [{
          label: "名称",
          prop: "missionTitle",
        }, {
          label: "描述",
          prop: "missionDesc",
          slot: true
        }]
      }
    },
    policyOption() {
      return {
        editBtn: false,
        delBtn: false,
        addBtn: false,
        border: true,
        index: true,
        indexLabel: "序号",
        refreshBtn: false,
        height: '100',
        viewBtn: true,
        dialogType: "drawer",
        column: [{
          label: '政策名称',
          prop: 'name'
        },
          {
            label: "政策级别",
            prop: "level",
            span: 12,
            hide: true,
          },
          {
            label: "政策文号",
            prop: "number",
            span: 12,
            hide: true,
          },
          {
            label: "发文机构",
            prop: "issuingAuthority",
            span: 12,
            hide: true,
          },
          {
            label: "分组",
            prop: "groupId",
            type: "tree",
            hide: true,
            span: 12,
            display: true,
            placeholder: "请选择 分组",
          },
          {
            label: "有效性",
            prop: "status",
            type: "tree",
            span: 12,
            hide: true,
            display: true,
            dicData: [{name: "有效", value: 1}, {name: "无效", value: 0}],
            props: {
              label: "name",
              value: "value",
            },
          },
          {
            label: "服务类型",
            prop: "stype",
            type: "tree",
            span: 12,
            display: true,
            hide: true,
            dicData: serviceType,
            props: {
              label: "label",
              value: "value",
            },
            rules: [
              {
                required: true,
                message: "请选择服务类型",
                trigger: "change",
              },
            ],
            placeholder: "请选择 服务类型",
          },
          {
            label: "发文字号",
            prop: "issuingNumber",
            hide: true,
            span: 12,
            // row: true,
            maxlength: 50,
            showWordLimit: true,
          },
          {
            label: "类别",
            prop: "category",
            span: 12,
            hide: true,
            maxlength: 50,
            showWordLimit: true,
          },
          {
            label: "标签",
            prop: "labelName",
            hide: false,
            formslot: true,
            span: 24,
          },
          {
            label: "政策文件名",
            prop: "policyFileName",
            hide: true,
            span: 24,
          },
          {
            label: '政策内容',
            prop: 'policyContent',
            slot: true,
            hide: true,
            formslot: true,
            span: 24,
          },
          {
            label: "指南文件名",
            prop: "guidelineFileName",
            hide: true,
            span: 24,
            maxlength: 50,
            showWordLimit: true,
          },
          {
            label: "指南内容",
            prop: "guidelineContent",
            hide: true,
            formslot: true,
            span: 24,
          },
          {
            label: "备注",
            prop: "remarks",
            type: "textarea",
            hide: true,
            span: 24,
            maxlength: 100,
            showWordLimit: true,
          },
        ]
      }
    },
    logOption() {
      return {
        editBtn: true,
        delBtn: true,
        addBtn: true,
        viewBtn: true,
        border: true,
        index: true,
        indexLabel: "序号",
        refreshBtn: false,
        dialogType: "drawer",
        height: '100',
        column: [{
          label: '服务时间',
          prop: 'createTime',
          type: 'date',
          format: "yyyy-MM-dd",
          valueFormat: "yyyy-MM-dd HH:mm:ss",
        }, {
          label: '服务发起人',
          prop: 'fromName',
          display: false,
        }, {
          label: '服务对象',
          prop: 'toName',
          display: false,
        }, {
          label: '服务主题',
          prop: 'serveTheme'
        }, {
          label: '服务内容',
          span: 24,
          prop: 'serveContent'
        }, {
          label: '备注说明',
          span: 24,
          type: 'textarea',
          prop: 'bak1'
        }]
      }
    },
    infoOption() {
      return {
        dialogWidth: "50%",
        dialogType: "drawer",
        dialogClickModal: false,
        editBtn: false,
        delBtn: false,
        addBtn: false,
        viewBtn: true,
        border: true,
        refreshBtn: false,
        searchBtn: true,
        searchShow: true,
        searchMenuSpan: 6,
        height: '100',
        column: [
          {
            label: "姓名",
            prop: "name",
            search: true
          },
          {
            label: "身份证",
            prop: "idNumber",
            search: true
          },
          {
            label: "手机号",
            prop: "telphone",
          },
          // {
          //   label: "用户类型",
          //   prop: "userId",
          // },
          {
            label: "身份标签",
            prop: "labelsBase",
          },
        ]
      }
    },
    selectLabelNameTypes: {
      get() {
        if (!this.obj.serveLabels) {
          return [];
        }
        const result = [];
        const wt = this.obj.serveLabels ? this.obj.serveLabels.split(",") : [];
        wt.forEach((item) => {
          result.push({name: item});
        });
        return result;
      },
      set(val) {
        const arr = [];
        val.forEach((item) => {
          arr.push(item.name);
        });
        this.obj.serveLabels = arr.join(",");
      },
    },
    worktypeData() {
      let rel = [];
      for (let j = 0; j < this.arr.length; j++) {
        const key = this.arr[j];
        if (this.worktypeDic.hasOwnProperty(key)) {
          rel.push({name: key})
        }
      }
      for (let i = 0; i < this.tempWorkType.length; i++) {
        const key = this.tempWorkType[i];
        if (key && !this.worktypeDic.hasOwnProperty(key)) {
          rel.push({name: key});
        }
      }
      return rel;
    },
  },
  created() {
    this.initDept();
    // this.getWorkTypes();
    this.getLabelList();
    this.getListAllPolicyTree()
    this.ListAllTalents()
  },
  methods: {
    async saveLog(row, index, done, loading) {
      let params = {
        ...row,
        serveId: this.selectInfo.id,
        serveUserId: this.selectUserServeLog.serveUserId,
        talentsId: this.selectUserServeLog.id,
        idNumber: this.selectUserServeLog.idNumber,
        toName: this.selectUserServeLog.name,
        fromName: this.userInfo.real_name
      }
      let resData = await addServeLog(params)
      done()
      if (resData.data.code === 200) {
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        this.serveLog(this.selectUserServeLog)
      }
    },
    async saveUpdateLog(row, index, done, loading) {
      let params = {
        id: row.id,
        createTime: row.createTime,
        fromName: row.fromName,
        toName: row.toName,
        serveTheme: row.serveTheme,
        serveContent: row.serveContent,
        bak1: row.bak1,
      }
      let resData = await updateServeLog(params)
      done()
      if (resData.data.code === 200) {
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        this.serveLog(this.selectUserServeLog)
      }
    },
    removeLog(row, index, done, loading) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return removeServeLog({ids: row.id});
        })
        .then(() => {
          this.serveLog(this.selectUserServeLog)
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    workSizeChange() {
    },
    workCurrentChange() {
    },
    logSizeChange(pageSize) {
      this.logPage.pageSize = pageSize;
      this.serveLog(this.selectUserServeLog)
    },
    logCurrentChange(currentPage) {
      this.logPage.currentPage = currentPage;
      this.serveLog(this.selectUserServeLog)
    },
    async ListAllTalents() {
      let resData = await getListAllTalents()
      if (resData.data.code === 200) {
        this.talentsList = resData.data.data
      }
    },
    selectPushService(row) {
      console.log('点击')
      detail(row.id).then((res) => {
        if (res.data.code === 200) {
          this.selectPushServiceData = res.data.data
          this.PushServiceVisible = true
        }
      })
      // this.selectPushServiceData = deepClone(row)
      // this.PushServiceVisible = true
    },
    handleChange(item) {
      console.log(item)
    },
    async getListAllPolicyTree() {
      let resData = await getListAllPolicy({})
      if (resData.data.code === 200) {
        this.listAllPolicyTree = resData.data.data
      }
    },
    toPolicyDetail(row) {
      console.log(row)
      console.log()
    },
    clipStr(str) {
      const clip = []
      if (str && str.length > 50) {
        for (let i = 0; i < Math.ceil(str.length / 50); i++) {
          clip.push(str.slice(i * 50, i * 50 + 50))
        }
        return clip
      }
      return [str]
    },
    getLabelList() {
      getLabelList().then((res) => {
        const arr = res.data.data.flatMap(obj => obj.child.map(item => item.concatName));
        this.arr = arr.map(concatName => {
          this.worktypeDic[concatName] = 1;
          return concatName;
        });
      });
    },
    showKeyAudience(row) {
      this.selectInfo = row
      this.getKeyAudience({
        id: row.id
      })
      this.drawer = true;
    },
    getKeyAudience(params) {
      const _this = this
      return getServeListTalents(params).then((res) => {
        if (res.data.code === 200) {
          const {records, current, size, total} = res.data.data
          _this.infoData = records
          _this.visibleAudience = true
          _this.infoPage = {
            pageSize: size,
            currentPage: current,
            total: total,
          }
        }
      })
    },
    infoSizeChange(pageSize) {
      const {currentPage, total} = this.infoPage
      this.getKeyAudience({
        pageSize: pageSize,
        current: currentPage,
        total: total,
        id: this.selectInfo.id
      })
    },
    infoCurrentChange(currentPage) {
      const {pageSize, total} = this.infoPage
      this.getKeyAudience({
        pageSize: pageSize,
        current: currentPage,
        total: total,
        id: this.selectInfo.id
      })
    },
    infoRefreshChange() {
      const {currentPage, pageSize, total} = this.infoPage
      this.getKeyAudience({
        pageSize: pageSize,
        current: currentPage,
        total: total,
        id: this.selectInfo.id
      })
    },
    getWorkTypes() {

      getWorkTypes(1).then((res) => {
        for (let i = 0; i < res.data.data.length; i++) {
          const element = res.data.data[i];
          this.worktypeDic[element.name] = 1;
          this.arr.push(element.name)
        }
      });
    },
    /*加载分组*/
    initDept(groupId) {
      getDept().then((res) => {
        const data = res.data.data.list;
        this.treeData = data;
        let treeDataOne = {
          companyId: "",
          createTime: "",
          groupName: "全部",
          id: "",
          remarks: "",
          sort: '',
          sumNum: res.data.data.sum,
          type: '',
        };
        this.treeData.unshift(treeDataOne);
        const column = this.findObject(this.option.column, "groupId");
        column.dicData = this.treeData;
        if (groupId) {
          this.$nextTick(function () {
            this.$refs.tree.setCurrentKey(groupId);
          }); //默认高亮
          this.nodeClick({id: groupId});
        } else {
          if (this.treeData.length) {
            this.$nextTick(function () {
              this.$refs.tree.setCurrentKey(this.treeData[0].id);
            }); //默认高亮第一个
            this.nodeClick({id: this.treeData[0].id});
          }
        }
        this.personTotal = res.data.data.sum;
        this.loading = false;
      });
    },
    /*新建 编辑分组*/
    updateGroups(type, data) {
      this.$refs.addGroups.openDialog(type, data);
    },
    /*删除分组*/
    removeGroups(data) {
      //检验该分组是否存在人员,存在提示无法删除，不存在泽提示确定要删除此分组吗
      const h = this.$createElement;
      this.$confirm(
        h("div", null, [
          h("p", {style: "font-size: 16px"}, "您确定要删除此分组吗? "),
          h("p", {style: "color: red"}, "一旦删除则无法找回"),
        ]),
        {
          type: "warning",
          showClose: false,
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.cancelButtonLoading = true;
              instance.closeOnPressEscape = false;
              instance.closeOnClickModal = false;
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                  instance.cancelButtonLoading = false;
                }, 300);
              }, 1000);
            } else {
              done();
            }
          },
        }
      )
        .then(() => {
          removeDept(data.id).then(
            () => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.refresh("del");
            },
            (error) => {
              window.console.log(error);
            }
          );
        })
        .catch(() => {
        });
    },
    /*批量转移分组 */
    handleTransfer() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$refs.transferGroups.openDialog();
    },
    /*点击分组加载相应人才列表*/
    nodeClick(data) {
      this.tenantId = data.id ? data.id : "";
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
    },
    /*新增 编辑 转移  删除分组 更新人才后*/
    refresh(type) {
      this.page.currentPage = 1;
      this.query = {};
      if (type === "del") {
        //删除分组后重新选中分组为未分组
        this.initDept();
        this.onLoad(this.page, this.query);
      } else {
        this.initDept(this.tenantId);
        this.onLoad(this.page, this.query);
      }
    },
    /*获取人才详情 */
    beforeOpen(done, type) {
      const self = this
      if (["edit", "view", "add"].includes(type)) {
        if (type === "edit" || type === "view") {
          setTimeout(() => {
            detail(this.obj.id).then(
              (res) => {
                this.obj = res.data.data;
                this.tempWorkType = this.obj.serveLabels.split(",");
                const policyIds = self.treeIteration(this.listAllPolicyTree, res.data.data.policyIds.split(','))
                self.selectPolicyTree = policyIds
                done();
              },
              (error) => {
                window.console.log(error);
              }
            );
          }, 0);
        } else {
          this.tempWorkType = [];
          done();
        }
      }
    },
    treeIteration(tree, ids) {
      if (!(tree.length && ids.length)) return;
      let arr = []
      tree.forEach((treeItem) => {
        treeItem.child.forEach((item) => {
          if (ids.some((id) => item.value === id)) {
            arr.push([treeItem.value, item.value])
          }
        })
      })
      return arr;
    },
    /*新增人才*/
    rowSave(row, done) {
      let params = {
        groupId: row.groupId,
        name: row.name,
        serveLabels: row.serveLabels,
        remarks: row.remarks,
        policyIds: this.selectPolicyTree.map((item) => item[1]).join(','),
        talentsGroupId: row.talentsGroupId.join(',')
      }
      add(params).then(
        () => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
          this.selectPolicyTree = []
          this.refresh();
        },
        (error) => {
          this.selectPolicyTree = []
          window.console.log(error);
          done();
        }
      );
    },
    /*编辑人才*/
    rowUpdate(row, index, done) {

      console.log(row)
      update({
        id: row.id,
        groupId: row.groupId,
        name: row.name,
        serveLabels: row.serveLabels,
        remarks: row.remarks,
        policyIds: this.selectPolicyTree.map((item) => item[1]).join(','),
        talentsGroupId: Array.isArray(row.talentsGroupId) ? row.talentsGroupId.join(',') : row.talentsGroupId
      }).then(
        () => {
          done();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.refresh();
        },
        (error) => {
          window.console.log(error);
          done();
        }
      );
    },
    /*删除人才 */
    rowDel(row) {
      const h = this.$createElement;
      this.$confirm(
        h("div", null, [
          h("p", {style: "font-size: 16px"}, "您确定要删除此人才吗? "),
          h("p", {style: "color: red"}, "一旦删除则无法找回"),
        ]),
        {
          type: "warning",
          showClose: false,
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.cancelButtonLoading = true;
              instance.closeOnPressEscape = false;
              instance.closeOnClickModal = false;
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                  instance.cancelButtonLoading = false;
                }, 300);
              }, 1000);
            } else {
              done();
            }
          },
        }
      )
        .then(() => {
          remove(row.id).then(
            () => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.refresh();
            },
            (error) => {
              window.console.log(error);
            }
          );
        })
        .catch(() => {
        });
    },
    /*批量删除人才*/
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      const h = this.$createElement;
      this.$confirm(
        h("div", null, [
          h("p", {style: "font-size: 16px"}, "您确定要批量删除选中人才吗? "),
        ]),
        {
          type: "warning",
          showClose: false,
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          beforeClose: (action, instance, done) => {
            if (action === "confirm") {
              instance.confirmButtonLoading = true;
              instance.cancelButtonLoading = true;
              instance.closeOnPressEscape = false;
              instance.closeOnClickModal = false;
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                  instance.cancelButtonLoading = false;
                }, 300);
              }, 1000);
            } else {
              done();
            }
          },
        }
      )
        .then(() => {
          remove(this.ids).then(
            () => {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.onLoad(this.page);
              this.$refs.crud.toggleSelection();
            },
            (error) => {
              window.console.log(error);
            }
          );
        })
        .catch(() => {
        });
    },
    /*导入人才库*/
    beforeAvatarUpload(file, done, loading) {
      if (!isExcel(file)) {
        loading();
        this.$message.error("上传人才库信息只能是 .xls,.xlsx 标准格式文件!");
      } else {
        done();
      }
    },
    uploadAfter(res, done) {
      if (!(res instanceof Error) && !res.data) {
        this.excelBox = false;
      } else if (res.data && res.data.code === 900) {
        const arr = [];
        const data = res.data.data;
        data.error &&
        data.error.errorList.forEach((item) => {
          arr.push(`${item.name} ${item.remarks}`);
        });
        data.auth &&
        data.auth.authList.forEach((item) => {
          arr.push(`${item.name} ${item.remarks}`);
        });
        this.$refs.ied.show(arr);
      }
      this.refreshChange();
      this.initDept(this.tenantId);
      done();
    },
    uploadError(error) {
      if (error) {
        this.$message.error(error);
      }
    },
    handleImport() {
      this.excelBox = true;
    },
    /*下载人才库模板 */
    handleTemplate() {
      this.templateLoading = true;
      getTemplate("trc")
        .then((rep) => {
          this.templateLoading = false;
          window.open(rep.data.data);
        })
        .catch(() => {
          this.templateLoading = false;
        });
    },
    /*人才列表切换页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.refreshChange();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.refreshChange();
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    /*搜索 */
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    serveSearchChange(params, done) {
      console.log(params);
      this.infoPage.currentPage = 1;
      const {currentPage, pageSize} = this.infoPage
      this.getKeyAudience({
        current: currentPage,
        pageSize,
        id: this.selectInfo.id,
        ...params
      })
      done();
    },
    searchReset1() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange1() {
      this.page.currentPage = 1;
      this.onLoad(this.page, this.query);
    },
    /*人才列表多选 */
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    /*加载人才列表 */
    onLoad(page, params = {}) {
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query),
        this.tenantId
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        console.log(data.records)
        this.data = data.records.map((item) => ({
          ...item, talentsGroupId: item.talentsGroupId.split(',')
        }));
        this.loading = false;
        this.selectionClear();
      });
    },
    // 匹配任务和岗位
    matchWorkStation(row) {
      console.log('匹配任务和岗位')
      getMatchWorkStation({
        serveUserId: row.serveUserId,
        serveId: this.selectInfo.id,
        companyId: this.selectInfo.companyId
      }).then(res => {
        const {records, current, size, total} = res.data.data
        this.innerDrawer1 = true
        this.workData = records
        this.workPage = {
          pageSize: size,
          currentPage: current,
          total: total,
        }
      })
    },
    // 匹配政策
    matchPolicy(row) {
      console.log('匹配政策')
      getMatchPolicy({id: row.id, serveId: this.selectInfo.id, serveUserId: row.serveUserId}).then(res => {
        let _this = this;
        const {records, current, size, total} = res.data.data
        _this.policyData = records
        _this.innerDrawer2 = true
        _this.policyPage = {
          pageSize: size,
          currentPage: current,
          total: total,
        }
      })
    },
    // 服务日志
    serveLog(row) {
      console.log('服务日志', row)
      this.selectUserServeLog = row
      getMatchServeList({
        id: row.id,
        serveId: this.selectInfo.id,
        companyId: this.selectInfo.companyId,
        current: this.logPage.currentPage,
        size: this.logPage.pageSize
      }).then(res => {
        let _this = this;
        const {records, current, size, total} = res.data.data
        _this.logData = records
        _this.innerDrawer3 = true
        _this.logPage = {
          pageSize: size,
          currentPage: current,
          total: total,
        }
      })
    },
    /**/
    handleClose() {
      this.drawer = false;
      this.innerDrawer3 = false
      this.infoData = null;
    },
    handleCloseWork() {
      this.innerDrawer1 = false
    },
    handleClosePolicy() {
      this.innerDrawer2 = false
    },
    handleCloseLog() {
      this.innerDrawer3 = false
    },
    /*查看*/
    toWorkMissionDetail(row) {
      if (row.type == 0) {
        missionDetail(row.missionNo).then((res) => {
          this.viewDrawer = true;
          this.view = res;
        });
      } else if (row.type == 1) {
        workDetail(row.id).then(res => {
          this.workViewDrawer = true;
          this.workViewModel = res;
        })
      }

    },
    // 启用服务
    playServe(row) {
      this.$confirm('是否确认启用该服务？', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return update({id: row.id, status: 1})
      }).then(
        () => {
          this.$message({
            type: "success",
            message: "启用成功!",
          });
          this.refresh();
        },
        (error) => {
          window.console.log(error);
        })
    },
    pauseServe(row) {
      this.$confirm('是否确认关闭该服务？', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return update({id: row.id, status: 0})
      }).then(
        () => {
          this.$message({
            type: "success",
            message: "关闭成功!",
          });
          this.refresh();
        },
        (error) => {
          window.console.log(error);
        })
    },
    addNewLog() {
      console.log('add log')
      this.$router.push({name: '添加/修改日志log', params: {type: 'add', id: null}})
    },
    editLogInfo() {
      console.log('edit log')
      this.$router.push({name: '添加/修改日志log', params: {type: 'edit', id: null}})
    }
  },
};
</script>

<style scoped>
.el-tree {
  font-size: 14px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.el-form-item {
  margin-bottom: 18px;
  padding: 0 10px;
}

.searchBtn {
  display: inline-block;
  margin-bottom: 18px;
}
</style>
