<template>
  <div class="ContainerBox">
    <!-- 备注区域 -->
    <section class="remarkBox">
      <div class="remarkInfo">
        <i class="el-icon-warning-outline el-icon-flag"></i>
        <span>
          1. 您可以为在职{{ $SuperviseStr.employee }}在线签订{{
            $SuperviseStr.employee
          }}合同，点击数据看板的标签卡可以快速筛选。<br />
          2.
          合同录入支持先批量导入基本信息，再上传电子合同文件，减少管理员工作量。
        </span>
      </div>
    </section>

    <!-- 按钮区域 -->
    <section class="buttonBox">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="12">
          <div>
            <el-button type="primary" @click="addContract">添加合同</el-button>
            <el-button @click="importContract">导入合同</el-button>
            <el-button @click="exportExcel">导出</el-button>
            <el-button type="danger" :disabled="disabled" @click="patchDel">批量删除</el-button
        >
          </div>
        </el-col>
        <el-col :span="12">
          <div class="rightBox">
            <el-input
              v-model="params.keyword"
              placeholder="输入姓名/账号/手机号/证件号码"
              clearable
              style="width: 45%"
              v-show="!HighSearchFlag"
            />
             <el-button type="primary" @click="search" v-if="!HighSearchFlag">查询</el-button>
             <el-button @click="switchHigh">高级<i class="el-icon-arrow-down" v-if="!HighSearchFlag"></i><i class="el-icon-arrow-up" v-if="HighSearchFlag"></i></el-button>
             <el-button @click="HighDataFlag=!HighDataFlag;DataBoard()">数据看板<i class="el-icon-arrow-down" v-if="!HighDataFlag"></i><i class="el-icon-arrow-up" v-if="HighDataFlag"></i></el-button>

          </div>
        </el-col>
      </el-row>
    </section>

    <!-- 高级搜索区域 -->
    <section class="HighSearchBox" v-show="HighSearchFlag">
        <el-row>
            <el-form :inline="true" :model="params" ref="ruleForm"  >
                <el-form-item label="关键词：" prop="keyword" >
                    <el-input v-model="params.keyword" placeholder="姓名/账号/手机号/证件号码" clearable></el-input>
                </el-form-item>               
                <el-form-item label="职业类型：" prop="occupationTypes">
                    <el-select v-model="params.occupationTypes" multiple collapse-tags placeholder="请选择" @change="changeTypes()">
                         <el-option v-for="(item,index) in occupationTypeArr" :label="item.label" :value="item.value" :key="index"></el-option>  
                    </el-select>
                </el-form-item>
                
                <el-form-item label="在职状态：" prop="employmentStatus">
                    <el-select v-model="params.employmentStatus" placeholder="请选择" clearable @change="changeEmploymentStatusStatus()">
                         <el-option v-for="(item,index) in employmentStatusArr" :label="item.label" :value="item.value" :key="index"></el-option>  
                    </el-select>
                </el-form-item>
                <el-form-item label="合同有效期开始：" prop="beginDate">
                    <el-date-picker
                        @input="changeBeginDate()"
                        v-model="params.beginDate"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        style="width:100%"
                        placeholder="合同有效期开始日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="合同有效期结束：" prop="endDate">
                    <el-date-picker
                       @input="changeEndDate()"
                        v-model="params.endDate"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        style="width:100%"
                        placeholder="合同有效期结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="departlabel" prop="departIds">
                    <selectTree
                    ref="selectTree"
                    @getValue="checkChange"
                    @selectClickT="selectClickT"
                    :curValue="defaulData"
                    :data="getTreeDepartlist"     
                    :obj="{                  
                        id: 'id',
                        label: 'name',
                        children: 'children',
                    }"
                    checkStrictly 
                    clearable	
                    filterable	
                    multiple		
                    collapseTags	
                    ></selectTree>
                </el-form-item>
                <el-form-item label="合同状态：" prop="status">
                    <el-select v-model="params.status"   placeholder="请选择" clearable  @change="changeStatus()">
                         <el-option v-for="(item,index) in statusArry" :label="item.label" :value="item.value" :key="index"></el-option>  
                    </el-select>
                </el-form-item>
                <el-form-item label="创建日期：" prop="startEndCreatedTime">
                    <el-date-picker
                        style="width:100%"
                        v-model="params.startEndCreatedTime"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        format='yyyy-MM-dd'
                        range-separator="至"
                        start-placeholder="开始创建日期"
                        end-placeholder="结束创建日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="highSearchButton">查询</el-button>
                    <el-button @click="resetSearchForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </section>

    <!-- 维度统计区域 -->
    <section class="DataTBox" v-if="HighDataFlag">
        <div class="tj">
           <span class="countstj" :class="index==0?'active':''"  @click="DataTjclick(0,'occupationTypes',[])"><em>合同总数</em><strong>{{tjObj.total}}</strong></span>
           <span :class="index==1?'active':''" @click="DataTjclick(1,'status',0)"><em>待完善</em><strong>{{tjObj.incompleteCount}}</strong></span>
           <span :class="index==2?'active':''" @click="DataTjclick(2,'status',1)"><em>待生效</em><strong>{{tjObj.beEffectCount}}</strong></span>
           <span :class="index==3?'active':''" @click="DataTjclick(3,'status',2)"><em>生效中</em><strong>{{tjObj.effectCount}}</strong></span>
           <span :class="index==4?'active':''" @click="DataTjclick(4,'status',3)"><em>终止</em><strong>{{tjObj.stopCount}}</strong></span>
           <span :class="index==5?'active':''" @click="DataTjclick(5,'status',4)"><em>即将到期</em><strong>{{tjObj.dueCount}}</strong></span>          
           <span :class="index==6?'active':''" @click="DataTjclick(6,'employmentStatus',1)"><em>离职人员的合同</em><strong>{{tjObj.leaveCount}}</strong></span>
        </div>        
    </section>    

    <!-- 选中表格内容展示区域 -->
    <section class="TableSelectBox">
       <span><i class="el-icon-warning-outline el-icon-flag"></i><span v-for="(item,index) in multipleSelection" :key="index">{{item.employeeName}}<b v-if="index!=multipleSelection.length-1">,</b></span></span>
    </section>

    <!-- 内容区域 -->
    <section class="contentBox">
      <el-table
        :data="tableDataContract"
        ref="districtTable"
        max-height="500"
        default-expand-all
        row-key="id"
        @selection-change="handleSelectionChange"
        @select-all="handleSelectionAllChange"
      >
        <el-table-column  type="selection"   width="55">
            </el-table-column>
        <el-table-column
          v-for="(item, index) in tableColumn"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          v-if="item.show"
          :fixed='item.label=="姓名"'
        >
          <template slot-scope="scope">
            <span v-if="item.prop == 'attachment'">
              <span v-if="scope.row.contractStatusDesc == '待完善'"
                ><el-button type="text" @click="Edit(scope.row, 2)"
                  >上传</el-button
                ></span
              >
              <span v-else>
                <!-- <el-button type="text" @click="download(scope.row)">预览</el-button> -->
                <el-button type="text" @click="download(scope.row)"
                  >下载</el-button
                >
              </span>
            </span>

            <span v-else-if="item.prop == 'employeeOccupationType'">
              {{ scope.row[item.prop] == "Normal" ? "一般职员" : "" }}
              {{ scope.row[item.prop] == "SecurityGuard" ? "保安员" : "" }}
              {{ scope.row[item.prop] == "Police" ? "警官" : "" }}
            </span>

            <span v-else-if="item.prop == 'credentialType'">
              {{ scope.row[item.prop] == "IdCard" ? "居民身份证/户口簿" : "" }}
              {{ scope.row[item.prop] == "IdCardOfXiangGang" ? "香港特区护照/身份证明" : "" }}
              {{ scope.row[item.prop] == "IdCardOfAoMen" ? "澳门特区护照/身份证明" : "" }}
              {{ scope.row[item.prop] == "IdCardOfTaiwan" ? "台湾居民来往大陆通行证" : "" }}
              {{ scope.row[item.prop] == "Passport" ? "外国护照" : "" }}
              {{ scope.row[item.prop] == "Arms" ? "退伍军人证" : "" }}
              {{ scope.row[item.prop] == "PoliceNo" ? "警号" : "" }}
            </span>

            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" min-width="180">
          <template slot-scope="scope">
            <el-button
              @click="Edit(scope.row)"
              type="text"
              size="small"
              class="primaryColor"
              >编辑</el-button
            >
            <el-button
              @click="Del(scope.row)"
              type="text"
              size="small"
              class="dangerColor"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页页签 -->
      <pages
        :total="params.total"
        :currentPage.sync="params.pageIndex"
        :pageSize="params.pageSize"
        @handleCurrentChangeSub="handleCurrentChange"
        @handleSizeChangeSub="handleSizeChange"
      ></pages>
    </section>

    <!-- 添加合同弹窗 -->
    <ContractDialog
      :showdialog.sync="showdialog"
      :getTreeDepartlist="tableData"
      @refurlist="refurlist"
      ref="popChildren"
    ></ContractDialog>
    <!-- 办理离职弹窗 -->
    <!-- <UserEmployeeBackDialog :showdialogBack.sync="showdialogBack" :getTreeDepartlist="tableData" @refurlist="refurlist" ref="popChildrenBack"></UserEmployeeBackDialog> -->
    <!-- 导入合同弹窗 -->
    <ImportContractDialog
      :showdialogImport.sync="showdialogImport"
      :getTreeDepartlist="tableData"
      @refurlist="refurlist"
      ref="ImportpopChildren"
    ></ImportContractDialog>
  </div>
</template>
<script>
import {
  StaffDepartmentListApi,
  contractListSearchKeywordApi,
  contractListSearchApi,
  delContractApi,
  exportContractExcelApi,
  highSearchContractApi,
  contractTableBoardListApi,
  delcontractsApi
} from "@/api/staffApi.js";
import ContractDialog from "./components/ContractDialog.vue";
import UserEmployeeBackDialog from "./components/UserEmployeeBackDialog.vue";
import ImportContractDialog from "./components/ImportContractDialog.vue";
import selectTree from "@/components/SelectTree";
export default {
  data() {
    return {
      tableData: [],
      tableDataContract: [],
      multipleSelection: [], //全选列表
      tableColumn: [
        { prop: "employeeName", label: "姓名", width: "100", show: true },
        {
          prop: "employeeTelephone",
          label: "手机号",
          width: "180",
          show: true,
        },     
        {
          prop: "employeeStatusDesc",
          label: "在职状态",
          width: "180",
          show: true,
        },
        {
          prop: "employeeDepartName",
          label: `所在${$SuperviseStr.depart}`,
          width: "180",
          show: true,
        },
        {
          prop: "employeeOccupationType",
          label: "职业类型",
          width: "180",
          show: true,
        },
        { prop: "dateRang", label: "合同有效期", width: "180", show: true },
        {
          prop: "contractStatusDesc",
          label: "合同状态",
          width: "180",
          show: true,
        },
        { prop: "attachment", label: "电子合同文件", width: "180", show: true },
        { prop: "operator", label: "更新人", width: "180", show: true },
        { prop: "operatorTime", label: "更新时间", width: "180", show: true },
        { prop: "createTime", label: "创建日期", width: "180", show: true },
      ],
      params: {
        //搜索条件
        pageIndex: 1,
        pageSize: 10,
        keyword: "",
        total: 0,
      },
      showdialog: false,
      showdialogBack: false,
      disabled: true, //默认禁用
      isAllSelect: false, //是否全选
      displayOrderShow: false,
      showdialogImport: false, //导入合同
      credentialTypesoptions: [
        //证件类型
        { value: "IdCard", label: "居民身份证/户口簿" },
        { value: "IdCardOfXiangGang", label: "香港特区护照/身份证明" },
        { value: "IdCardOfAoMen", label: "澳门特区护照/身份证明" },
        { value: "IdCardOfTaiwan", label: "台湾居民来往大陆通行证" },
        { value: "Passport", label: "外国护照" },
        { value: "Arms", label: "退伍军人证" },
        { value: "PoliceNo", label: "警号" },
      ],
      occupationTypesoptions: [
        //职业类型
        { value: "Normal", label: "一般职员" },
        { value: "SecurityGuard", label: "保安员" },
        { value: "Police", label: "警官" },
      ],
      authenticatedStatusesoptions: [
        //实名状态
        { value: "UnAuthenticated", label: "未认证" },
        { value: "Authenticating", label: "认证中" },
        { value: "Failed", label: "认证失败" },
        { value: "Passed", label: "已认证" },
      ],
      statusArry:[
         { value: '', label: "全部" },
         { value: 0, label: "待完善" },
         { value: 1, label: "待生效" },
         { value: 2, label: "有效" },
         { value: 3, label: "终止" },
         { value: 4, label: "即将到期" },
      ],
      employmentStatusArr:[
          { value: 0, label: "在职" },
          { value: 1, label: "离职" },
          { value: 2, label: "待入职" },
          { value: 3, label: "申请离职中" },
          { value: 4, label: "其他" },
      ],
      defaulData: [],
      departlabel:`所在${$SuperviseStr.depart}：`,
      occupationTypeArr:[],
      getTreeDepartlist:[],      
      HighSearchFlag: false, //默认不显示高级搜索    
      homeTemplateBoradType:localStorage.getItem("homeTemplateBoradType") || "",  
      HighDataFlag:false,
      index:'',//数据看板索引
      tjObj:{},
    };
  },
  components: {
    selectTree, //注册组件
    ContractDialog,
    UserEmployeeBackDialog,
    ImportContractDialog,
  },
  mounted() {
    //  if(localStorage.getItem('institutionalCode')=='省级保安监管机构'||localStorage.getItem('institutionalCode')=='市级保安监管机构'||localStorage.getItem('institutionalCode')=='省级保安协会'||localStorage.getItem('institutionalCode')=='市级保安协会'){
    //      this.occupationTypeArr=[{label:'一般职员',value:'Normal'},{label:'保安员',value:'SecurityGuard'},{label:'警官',value:'Police'}]
    //  }
     if(this.homeTemplateBoradType=='rtpayTemplate'){
         this.occupationTypeArr=[{label:'一般职员',value:'Normal'}]

         this.tableColumn=[
                { prop: "employeeName", label: "姓名", width: "100", show: true },
                {
                  prop: "employeeTelephone",
                  label: "账号",
                  width: "180",
                  show: true,
                },             
                {
                  prop: "employeeStatusDesc",
                  label: "在职状态",
                  width: "180",
                  show: true,
                },
                {
                  prop: "employeeDepartName",
                  label: `所在${$SuperviseStr.depart}`,
                  width: "180",
                  show: true,
                },
                {
                  prop: "employeeOccupationType",
                  label: "职业类型",
                  width: "180",
                  show: true,
                },
                { prop: "dateRang", label: "合同有效期", width: "180", show: true },
                {
                  prop: "contractStatusDesc",
                  label: "合同状态",
                  width: "180",
                  show: true,
                },
                { prop: "attachment", label: "电子合同文件", width: "180", show: true },
                { prop: "operator", label: "更新人", width: "180", show: true },
                { prop: "operatorTime", label: "更新时间", width: "180", show: true },
                { prop: "createTime", label: "创建日期", width: "180", show: true },
            ]
     }else if(localStorage.getItem('appidSupervise')&&JSON.parse(localStorage.getItem('appidSupervise')).appId=='__d1qEDy3wYq8VF5KvUoE'){//监控端--机构用户管理
         this.occupationTypeArr=[{label:'一般职员',value:'Normal'},{label:'保安员',value:'SecurityGuard'},{label:'警官',value:'Police'}]
         this.tableColumn=[
                { prop: "employeeName", label: "姓名", width: "100", show: true },
                {
                  prop: "employeeTelephone",
                  label: "账号",
                  width: "180",
                  show: true,
                },      
                 {
                  prop: "credentialType",
                  label: "证件类型",
                  width: "180",
                  show: true,
                },
                 {
                  prop: "idNum",
                  label: "证件号码",
                  width: "180",
                  show: true,
                },       
                {
                  prop: "employeeStatusDesc",
                  label: "在职状态",
                  width: "180",
                  show: true,
                },
                {
                  prop: "employeeDepartName",
                  label: `所在${$SuperviseStr.depart}`,
                  width: "180",
                  show: true,
                },
                {
                  prop: "employeeOccupationType",
                  label: "职业类型",
                  width: "180",
                  show: true,
                },
                { prop: "dateRang", label: "合同有效期", width: "180", show: true },
                {
                  prop: "contractStatusDesc",
                  label: "合同状态",
                  width: "180",
                  show: true,
                },
                { prop: "attachment", label: "电子合同文件", width: "180", show: true },
                { prop: "operator", label: "更新人", width: "180", show: true },
                { prop: "operatorTime", label: "更新时间", width: "180", show: true },
                { prop: "createTime", label: "创建日期", width: "180", show: true },
            ]
     }
     else{
         this.occupationTypeArr=[{label:'一般职员',value:'Normal'},{label:'保安员',value:'SecurityGuard'}]
         this.tableColumn=[
                { prop: "employeeName", label: "姓名", width: "100", show: true },
                {
                  prop: "employeeTelephone",
                  label: "手机号",
                  width: "180",
                  show: true,
                },      
                 {
                  prop: "credentialType",
                  label: "证件类型",
                  width: "180",
                  show: true,
                },
                 {
                  prop: "idNum",
                  label: "证件号码",
                  width: "180",
                  show: true,
                },       
                {
                  prop: "employeeStatusDesc",
                  label: "在职状态",
                  width: "180",
                  show: true,
                },
                {
                  prop: "employeeDepartName",
                  label: `所在${$SuperviseStr.depart}`,
                  width: "180",
                  show: true,
                },
                {
                  prop: "employeeOccupationType",
                  label: "职业类型",
                  width: "180",
                  show: true,
                },
                { prop: "dateRang", label: "合同有效期", width: "180", show: true },
                {
                  prop: "contractStatusDesc",
                  label: "合同状态",
                  width: "180",
                  show: true,
                },
                { prop: "attachment", label: "电子合同文件", width: "180", show: true },
                { prop: "operator", label: "更新人", width: "180", show: true },
                { prop: "operatorTime", label: "更新时间", width: "180", show: true },
                { prop: "createTime", label: "创建日期", width: "180", show: true },
            ]
     }
    //this.tableDatalist()//部门列表
    this.contractList(); //列表表格
    this.contractTableBoardList()//数据看板数据总量
  },
  watch: {
    multipleSelection() {
      if (this.multipleSelection.length) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
  },
  methods: {
    DataTjclick(inx,item,value){
      this.index=inx
      this.params={}
      this.$set(this.params,'pageIndex',1)
      this.$set(this.params,'pageSize',10)
      this.$set(this.params,'keyword','')
      this.$set(this.params,'total',0)
      
      this.$set(this.params,item,value)
      this.highSearch()
    },
    selectClickT(val){
        console.log(val)
        this.getTreeDepartlist=val
    },
    exportExcel() {
      //导出
      let obj2 = { domainId: this.$route.query.domainId };
      exportContractExcelApi(this.params, obj2).then((response) => {
        console.log(response);
        const content = response;
        const blob = new Blob([content]);
        const fileName = `导出.xls`;
        if ("download" in document.createElement("a")) {
          // 非IE下载
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    addContract() {
      //添加合同弹窗
      this.showdialog = true;
      this.$refs.popChildren.getTableRow({}, 0);
    },
    Edit(row, flag) {
      //编辑合同弹窗
      this.showdialog = true;
      this.$refs.popChildren.getTableRow(row, 1, flag);
    },
    importContract() {
      //导入合同
      this.showdialogImport = true;
    },
    switchHigh(){//切换高级搜索
        this.$nextTick(()=>{
         this.$set(this.params,"departIds",[])
        })
        this.HighSearchFlag=!this.HighSearchFlag
    },
    search() {
      //查询
      this.params={//搜索条件
        pageIndex:1,
        pageSize:10,
        keyword:this.params.keyword,             
      },
      this.index=-1;
      let obj2 = { domainId: this.$route.query.domainId };
      contractListSearchKeywordApi(this.params, obj2).then((response) => {
        if (response.data) {
          this.tableDataContract = response.data.data;
          this.params.total = response.data.total;
        }
      });
    },
    highSearchButton(){//高级查询
      this.index=-1;
      this.$set(this.params,'pageIndex',1)
      this.highSearch()
    },
    highSearch(){//高级查询
        let obj2={domainId:this.$route.query.domainId}

      console.log("params",this.params.startEndCreatedTime)
      this.$set(this.params,'beginCreatedTime',this.params.startEndCreatedTime&&this.params.startEndCreatedTime[0]||'')
      this.$set(this.params,'endCreatedTime',this.params.startEndCreatedTime&&this.params.startEndCreatedTime[1]||'')
        highSearchContractApi(this.params,obj2).then(response=>{
            if(response.data){
                this.tableDataContract=response.data.data
                this.params.total=response.data.total
            }
        })
    },
    resetSearchForm(){//重置
        this.defaulData=[]          
        this.$nextTick(()=>{
            this.$refs.ruleForm&&this.$refs.ruleForm.resetFields(); //重置输入框提示
            this.$set(this.params,"departIds",[])
            this.$set(this.params,"beginDate",'')
            this.$set(this.params,"endDate",'')
            this.$set(this.params,'keyword','')
            this.highSearch()
            console.log(this.params)
        })
    },
    DataBoard(){      
        this.index=-1
        this.params={}
        this.$set(this.params,'pageIndex',1)
        this.$set(this.params,'pageSize',10)
        this.$set(this.params,'keyword','')
        this.$set(this.params,'total',0)
        this.contractTableBoardList()//数据看板数据总量

        this.highSearch()
    },
    contractTableBoardList(){//数据看板数据总量-查询结果
        let obj2={domainId:this.$route.query.domainId}
        contractTableBoardListApi(this.params,obj2).then(response=>{
            console.log(response)
            this.tjObj=response.data
        
        })
    },
    changeTypes(){
       this.$nextTick(()=>{
       this.$forceUpdate()
      })
    },
    changeEmploymentStatusStatus(){
      this.$nextTick(()=>{
       this.$forceUpdate()
      })
    },
    changeStatus(){
      this.$nextTick(()=>{
       this.$forceUpdate()
      })
    },
    changeBeginDate(){
      this.$nextTick(()=>{
       this.$forceUpdate()
      })
    },
    changeEndDate(){
      this.$nextTick(()=>{
       this.$forceUpdate()
      })
    },
    tableDatalist() {
      //部门列表-表格列表
      let obj = { domainId: this.$route.query.domainId }; //获取url域domainId
      StaffDepartmentListApi(obj).then((response) => {
        if (response.data) {
          this.tableData = response.data;
          this.sortTableData(this.tableData);
        }
      });
    },
    sortTableData(arr) {
      //递归排序
      if (arr.length) {
        arr.forEach((item) => {
          item.displayOrderNumber = item.displayOrder;
          if (item.children.length) {
            this.sortTableData(item.children);
          }
        });
      }
      console.log(this.tableData);
    },
    contractList() {
      //列表表格-查询结果
      let obj2 = { domainId: this.$route.query.domainId };
      contractListSearchApi(this.params, obj2).then((response) => {
        if (response.data.data) {
          this.tableDataContract = response.data.data;
          this.params.total = response.data.total;
        }
      });
    },
    checkChange(key, data) {
      //selectTree组件-复选框选中的数据
      console.log(key);
      console.log(data);
      this.$set(this.params, "departIds", key);
    },
    handleCurrentChange(val) {
      console.log(this.params)
      //分页切换页码
      console.log(val);
      this.params.pageIndex = val;
      this.contractList();
    },
    handleSizeChange(val) {
      //切换每页条数
      console.log(val);
      this.params.pageIndex=1 //重置第一页
      this.params.pageSize = val;
      this.contractList();
    },
    handleSelectionChange(val) {
      //选中全选
      console.log(val);
      this.multipleSelection = val;
    },
    handleSelectionAllChange(selection, first) {
      //全选
      if (!first) {
        this.isAllSelect = !this.isAllSelect;
      }
      selection.map((el) => {
        if (el.children) {
          el.children.map((j) => {
            this.toggleSelection(j, this.isAllSelect);
          });
          if (el.children.length > 0) {
            this.handleSelectionAllChange(el.children, true);
          }
        }
      });
    },
    toggleSelection(row, select) {
      //全选选中与取消选中
      if (select) {
        this.$refs.districtTable.toggleRowSelection(row, select); //全选选中
      } else {
        this.$refs.districtTable.clearSelection(); //取消选中
      }
    },
    addDept() {
      //新增
      this.showdialog = true;
      this.$refs.popChildren.getTableRow({}, 0);
    },
    BackEmp(row) {
      //编辑
      this.showdialogBack = true;
      this.$refs.popChildrenBack.getTableRow(row, 1);
    },
    Del(row) {
      //删除
      //删除选中表格数据
      let id = row.id;
      let obj2 = { domainId: this.$route.query.domainId }; //获取url域domainId
      if (Object.keys(row) != "") {
        this.$confirm("此操作将永久删除此对应数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delContractApi(id, obj2).then(() => {
              this.contractList(); //表格列表
            });
          })
          .catch(() => {});
      }
    },
    download(row) {
      if (row.attachment) {
        window.open(row.attachment);
      }
    },
    patchDel() {
      //批量删除
      let obj2 = { domainId: this.$route.query.domainId }; //获取url域domainId
      if (this.multipleSelection.length) {
        this.$confirm("此操作将永久删除此对应数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            console.log("删除")
            let ids = [];
            this.multipleSelection.forEach((item) => {
              ids.push(item.id);
            });
            console.log(this.multipleSelection)
            console.log(ids)
            delcontractsApi(ids,obj2).then(() => {
              this.contractList(); //表格列表
            });
          })
          .catch(() => {
            // this.radio = ""; //清空选中
          });
      }
    },
    importEmployee() {
      this.showdialogImport = true;
    },
    moveDept() {
      this.showdialogMove = true;
      this.$refs.MovepopChildren.getTableRow(this.multipleSelection, 0);
    },
    ImDept() {
      this.showdialogIm = true;
      this.$refs.ImpopChildren.getTableRow(this.multipleSelection, 0);
    },
    refurlist() {
      //弹窗后刷新列表
      this.contractList(); //表格列表
      this.index=-1
    },
    
  },
};
</script>
<style lang="scss">
.ContainerBox {
  .remarkBox {
    .remarkInfo {
      background: #fafafa;
      color: #666666;
      border: 1px solid #ebeef5;
      border-radius: 4px;
      line-height: 30px;
      padding: 10px;
      display: flex;
      .el-icon-flag {
        margin-top: 9px;
        color: #ffc108;
        margin-right: 10px;
      }
    }
  }
  .rightBox {
    display: flex;
    justify-content: flex-end;
    .el-input {
      margin-right: 10px;
    }
  }
  .HighSearchBox {
    margin-top: 15px;
  }
  .primaryColor {
    color: #108ee9;
  }
  .dangerColor {
    color: red;
  }
  .bluelink {
    color: #409eff;
  }
  .TableSelectBox {
    display: flex;
    background: #e6f3fc;
    color: #666666;
    border: 1px solid #d4f0fc;
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 0;
    span {
      line-height: 20px;
      i {
        margin-left: 5px;
        margin-right: 5px;
        color: #2e8ad7;
      }
    }
  }
}

.displayOrderInput {
  display: flex;
  align-items: center;
  // .el-input{width: 80%;}
  i {
    margin-left: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
}


.DataTBox{
  display: flex;
  flex-direction: column;
  .tj{
    display: flex;
    margin-bottom: 10px;
    span{
      flex:1;
      display: flex;
      flex-direction: column;
      border: 1px solid #DCDFE6;
      color: #606266;
      cursor: pointer;
      padding: 10px;
      &.active{
          color: #fff;
          background: #2e8ad7;
      }
      &:hover{
          color: #fff;
          background: #2e8ad7;
      }
      &.countstj{margin-right:10px;}      
    }
  }
}
</style>
