<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper" >
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24" v-if="isShow==1||isShow=='1'">
          <a-col :xl="6" :lg="7" :md="8" :sm="24" >
            <a-form-item label="姓名">
              <a-input placeholder="请输入姓名" v-model="queryParam.userName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="部门名称">
              <a-input @click="openModal" placeholder="请点击选择部门" v-model="departNames" readOnly >
                <a-icon slot="prefix" type="cluster" title="部门选择控件"/>
                <a-icon v-if="queryParam.deptId!=null&&queryParam.deptId!=''" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
              </a-input>
             
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="状态">
             <j-dict-select-tag  v-model="queryParam.state" placeholder="请选择类型"
               dictCode="state" />
            </a-form-item>
          </a-col>
            
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" style="margin-left: 30px;" icon="download" @click="handleExportXls('离职信息')" v-has='"change:export"'>导出</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </span>
          </a-col>
        </a-row>
        <template v-if="toggleSearchStatus">
          <a-row>
          <a-col :md="6" :sm="8">
            <a-form-item label="离职日期">
              <a-date-picker valueFormat="YYYY-MM-DD HH:mm:ss"  showTime format='YYYY-MM-DD' v-model="queryParam.newDate"/>
            </a-form-item>
          </a-col>
          </a-row>
        </template>
        <a-row :gutter="24" v-if="isShow==2||isShow=='2'">
          <a-col :xl="6" :lg="7" :md="8" :sm="24" >
            <a-form-item label="姓名">
              <j-input placeholder="请输入姓名" v-model="queryParam2.realname"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="类型">
              <j-dict-select-tag  v-model="queryParam2.type" placeholder="请选择类型"
                dictCode="change_type" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="状态">
             <j-dict-select-tag  v-model="queryParam2.state" placeholder="请选择类型"
               dictCode="state" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuerys()" icon="search">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>


      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="离职">
    <!-- table区域-begin -->
    <div>
     

      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
        :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
         @change="handleTableChange">

        <span slot="action" slot-scope="text, record" v-if="record.status==0||record.status=='0'">
           <span v-if="record.status==0&&record.state!=0">
             <a-popconfirm title="确定取消？" placement="left" @confirm="handleEdits(record,0)"  okText="确定" cancelText="取消" v-has='"change:lzqx"'>
              <a>取消</a>
              </a-popconfirm>
          </span>
          <span v-if="record.status==0&&record.state==0">
          <a-popconfirm title="确定同意？" placement="left" @confirm="handleEdits(record,1)"  okText="确定" cancelText="取消" v-has='"change:lzty"'>
             <a>同意</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a-popconfirm title="确定拒绝？" placement="left" @confirm="handleEdits(record,2)"  okText="确定" cancelText="取消" v-has='"change:lzjj"'>
             <a>拒绝</a>
          </a-popconfirm>
          </span>
        </span>

      <span slot="types" slot-scope="text, record" >
        <a-tag  color="blue" v-if="text=='未审核'" >{{text}}</a-tag>
        <a-tag  color="#87d068" v-if="text=='同意'" >{{text}}</a-tag>
        <a-tag  color="#cd201f" v-if="text=='拒绝'" >{{text}}</a-tag>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
</a-tab-pane>
<a-tab-pane key="2" tab="人事变动">
  <div>
  
    <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns2" :dataSource="dataSources"
      :pagination="ipaginations" :loading="loadings" class="j-table-force-nowrap"
      @change="handleTableChanges">
  
      <span slot="action" slot-scope="text, record" v-if="record.status==0||record.status=='0'">
        <span v-if="record.status==0&&record.state!=0">
          <a-popconfirm title="确定取消？" placement="left" @confirm="changeEdit(record,0)"  okText="确定" cancelText="取消" v-has='"change:qx"'>
           <a>取消</a>
          </a-popconfirm>
        </span>
        <span v-if="record.status==0&&record.state==0">
          <a-popconfirm title="确定同意？" placement="left" @confirm="changeEdit(record,1)"  okText="确定" cancelText="取消" v-has='"change:ty"'>
           <a>同意</a>
          </a-popconfirm>
        <a-divider type="vertical" />
        <a-popconfirm title="确定拒绝？" placement="left" @confirm="changeEdit(record,2)"  okText="确定" cancelText="取消" v-has='"change:jj"'>
          <a>拒绝</a>
        </a-popconfirm>
         </span>
      </span>
      
      <span slot="changeType" slot-scope="text, record" >
        <a-tag  color="blue" v-if="text=='未审核'" >{{text}}</a-tag>
        <a-tag  color="#87d068" v-if="text=='同意'" >{{text}}</a-tag>
        <a-tag  color="#cd201f" v-if="text=='拒绝'" >{{text}}</a-tag>
        </span>
    </a-table>
  </div>
</a-tab-pane>
</a-tabs>

    <!-- 表单区域 -->
    <userContract-modal ref="modalForm" @ok="modalFormOk"></userContract-modal>
    <depart-window ref="departWindow" @ok="modalFormOks"></depart-window>
  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import { httpAction,getAction } from '@/api/manage'
  import UserContractModal from './modules/UserContractModal'
  import departWindow from './modules/DepartWindow'
  import moment from "moment"
  import pick from 'lodash.pick'
  import JInput from '@/components/jeecg/JInput'
  import {
    JeecgListMixin
  } from '@/mixins/JeecgListMixin'

  export default {
    name: "UserContractList",
    mixins: [JeecgListMixin],
    components: {
      UserContractModal,
      JInput,
      departWindow
    },
    data() {
      return {
        description: '人事变动',
        dataSources:[],
        isShow:1,
        loadings:false,
        departNames:null,
        queryParam:{
          deptId:null
        },
        queryParam2:{
         
        },
        // 表头
        columns: [
          {
            title: '姓名',
            align: "center",
            dataIndex: 'userName'
          },
          {
            title: '部门',
            align: "center",
            dataIndex: 'dept',
            ellipsis: true,
          },
          {
            title: '职位',
            align: "center",
            dataIndex: 'post'
          },
          {
            title: '预计离职日期',
            align: "center",
            dataIndex: 'endDate',
            customRender: function(t, r, index) {
              return moment(t).format('YYYY-MM-DD');
            }
          },
          {
            title: '实际离职日期',
            align: "center",
            dataIndex: 'newDate',
            customRender: function(t, r, index) {
              if(t==""||t==null){
                return "-";
              }else{
                 return moment(t).format('YYYY-MM-DD');
              }
             
            }
          },
          {
            title: '备注',
            align: "center",
            dataIndex: 'remarks',
            ellipsis: true,
          },
          {
            title: '提交时间',
            align: "center",
            dataIndex: 'applyTime',
            customRender: function(t, r, index) {
              return moment(t).format('YYYY-MM-DD');
            }
          },
          {
            title: '状态',
            align: "center",
            dataIndex: 'state_dictText',
            ellipsis: true,
            scopedSlots: {
              customRender: 'types'
            },
          },
          
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {
              customRender: 'action'
            },
          }
        ],columns2: [
          {
            title: '姓名',
            align: "center",
            dataIndex: 'realname'
          },
          {
            title: '类型',
            align: "center",
            dataIndex: 'type',
          },
          {
            title: '原部门',
            align: "center",
            dataIndex: 'deptName'
          },
          {
            title: '新部门',
            align: "center",
            dataIndex: 'newDeptName'
          },
          {
            title: '原职位',
            align: "center",
            dataIndex: 'startPost'
          },
          {
            title: '新职位',
            align: "center",
            dataIndex: 'endPost'
          },
          {
            title: '原薪资',
            align: "center",
            dataIndex: 'startWages'
          },
          {
            title: '调整后薪资',
            align: "center",
            dataIndex: 'endWages'
          },
          {
            title: '生效日期',
            align: "center",
            dataIndex: 'time',
            customRender: function(t, r, index) {
              return moment(t).format('YYYY-MM-DD');
            }
          },
          {
            title: '备注',
            align: "center",
            dataIndex: 'demo',
            ellipsis: true,
          },
         {
           title: '状态',
           align: "center",
           dataIndex: 'state_dictText',
           scopedSlots: {
             customRender: 'changeType'
           },
         },
         {
           title: '操作员',
           dataIndex: 'conmitId_dictText',
           align: "center",
           
         },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {
              customRender: 'action'
            },
          }
        ],
        toggleSearchStatus:false,
        ipaginations:{
          current: 1,
          pageSize: 20,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        url: {
          list: "/userquit/userQuit/list",
          list2: "/userchange/userChage/list",
          delete: "/usercontract/userContract/delete",
          deleteBatch: "/usercontract/userContract/deleteBatch",
          exportXlsUrl: "userquit/userQuit/exportXls",
          importExcelUrl: "usercontract/userContract/importExcel",
          update:"/userquit/userQuit/edit",
          updateChage:"/userchange/userChage/edit"
        },
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    methods: {
      modalFormOks(formData) {
        if (formData.departIdList != null && formData.departIdList.length > 0) {
          for (let i = 0; i < formData.departIdList.length; i++) {
            this.queryParam.deptId=formData.departIdList[i].key;
            this.departNames =formData.departIdList[i].title;
          
           }
        
        }
      
      },
      openModal(){
        var ls=[];
        ls.push(this.queryParam.deptId);
        this.$refs.departWindow.add(ls, {});
      },
      handleEmpty(){
        this.queryParam.deptId=null;
        this.departNames=null;
      },
        handleEdits(e,a){
        let formData = Object.assign({},e);
        formData.state=a;
        httpAction(this.url.update,formData,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
          }else{
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.$options.methods.searchQuery.call(this)
        })
      },
      callback(key) {
        this.isShow=key;
        if(key==1||key=='1'){
          this.$options.methods.searchQuery.call(this)
        }else if(key==2||key=='2'){
          this.toggleSearchStatus=false;
          this.querys()
        }
      },
      querys(){
        this.loadings=true;
        let param = Object.assign({},this.queryParam2);
        param.pageNo = this.ipaginations.current;
        param.pageSize = this.ipaginations.pageSize;
        getAction(this.url.list2,param).then((res)=>{
          if(res.success){
           this.dataSources = res.result.records||res.result;
           if(res.result.total)
           {
             this.ipaginations.total = res.result.total;
           }else{
             this.ipaginations.total = 0;
           }
          }
        }).finally(() => {
          this.loadings=false;
        })
      },
      searchQuerys(){
        this.querys();
      },
      changeEdit(e,a){
        this.loadings=true;
        let formData = Object.assign({},e);
        formData.state=a;
        httpAction(this.url.updateChage,formData,"put").then((res)=>{
          if(res.success){
            this.$message.success(res.message);
          }else{
            this.$message.warning(res.message);
          }
        }).finally(() => {
          this.loadings=false;
          this.querys();
        })
      },
      handleTableChanges(pagination, filters, sorter) {
        //分页、排序、筛选变化时触发
        //TODO 筛选
        this.ipagination = pagination;
        this.querys();
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
