<template>
  <basic-container>
    <el-drawer
      title="月工资详情页"
      append-to-body
      :visible.sync="drawer"
      size="80%"
      class="drawer"
    >
    
        <div class="title">基本信息</div>
        <div class="jbxxBox">
        <el-form :inline="true" :model="formdata" class="demo-form-inline "  label-width="150px">
            <el-form-item label="人员名称：">
                <span>{{formdata.realName}}</span>
            </el-form-item>
            <el-form-item label="身份证号：">
                <span>{{formdata.cardNumber}}</span>
            </el-form-item>
            <el-form-item label="归属月：">
                <span>{{formdata.belongYear}}-{{formdata.belongMonth}}</span>
            </el-form-item><br />
            <el-form-item label="应发工资总额：">
               
                <span v-if="formdata.wage && formdata.wage != -1">{{moneyFormat(formdata.wage ? formdata.wage : 0)}}</span>
                 <span v-else>--</span>
            </el-form-item>
            <el-form-item label="实发工资总额：">
                <span v-if="formdata.wageReal && formdata.wageReal != -1">{{moneyFormat(formdata.wageReal ? formdata.wageReal : 0)}}</span>
                 <span v-else>--</span>
            </el-form-item>
            <el-form-item label="最终实发总额：">
                <span v-if="formdata.wageTotal && formdata.wageTotal != -1">{{moneyFormat(formdata.wageTotal ? formdata.wageTotal : 0)}}</span>
                <span v-else>--</span>
            </el-form-item><br />
            <el-form-item label="预扣总额：">
                <span v-if="formdata.taxTotal && formdata.taxTotal != -1">{{moneyFormat(formdata.taxTotal ? formdata.taxTotal : 0)}}</span>
                 <span v-else>--</span>
            </el-form-item>
            <el-form-item label="已申报：">
                <span v-if="formdata.taxReal && formdata.taxReal != -1">{{moneyFormat(formdata.taxReal ? formdata.taxReal : 0)}}</span>
                 <span v-else>--</span>
            </el-form-item>
             <el-form-item label="校准差额：">
                <span v-if="formdata.tax && formdata.tax != -1">{{moneyFormat(formdata.tax ? formdata.tax : 0)}}</span>
                 <span v-else>--</span>
            </el-form-item><br />
            <el-form-item label="校准完成时间：">
                <span v-if="formdata.reviewTime && formdata.reviewTime != -1">{{formdata.reviewTime}}</span>
                 <span v-else>--</span>
            </el-form-item>
            <el-form-item label="差额补发时间：">
                <span  v-if="formdata.payTime && formdata.payTime != -1">{{formdata.payTime}}</span>
                 <span v-else>--</span>
            </el-form-item>
            <el-form-item label="差额到账时间：">
                <span v-if="formdata.accountTime && formdata.accountTime != -1">{{formdata.accountTime}}</span>
                 <span v-else>--</span>
            </el-form-item>
        </el-form>
        </div>
      <avue-crud
        :option="personListOption"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        ref="crud"
        :permission="permissionList"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        class="customPage"
      >
      <template slot="menuLeft">
        <div class="title">关联任务</div>
      </template>
        <!-- 应发工资 -->
        <template slot="wage" slot-scope="{ row }">
            <span v-if="row.wage && row.wage != -1">{{ moneyFormat(row.wage) }}</span>
            <span v-else>--</span>
        </template>
        <!-- 个税 wageReal-->
        <template slot="tax" slot-scope="{ row }">
            <span  v-if="row.tax && row.tax != -1">{{ moneyFormat(row.tax) }}</span>
            <span v-else>--</span>
        </template>
         !-- 实发工资-->
        <template slot="wageReal" slot-scope="{row }">
            <span v-if="row.wageReal && row.wageReal != -1">{{ moneyFormat(row.wageReal) }}</span>
            <span v-else>--</span>
        </template>
        <template slot="startEndingTime" slot-scope="{row }">
            <span>{{ row.stime +" 到 "+ row.etime}}</span>
        </template>
        <!--自定义列-->
        <template slot="resume" slot-scope="{ row }">
          <div>
            <el-button
              type="text"
              @click="$refs.resume.openDialog(row)"
              v-if="row.userId && row.userId !== '0'"
              >查看简历</el-button
            >
            <div v-else>暂无简历</div>
          </div>
        </template>
        <template slot="recommend" slot-scope="{ row }">
          <div>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="rowRecommend(row)"
              v-if="row.isApply === 0 && row.telphone != ''"
              >邀请</el-button
            >
            <!-- v-show="row.isApply === 1 && row.telphone == ''" -->
            <el-button
              type="info"
              disabled
              size="mini"
              icon="el-icon-plus"
              
              v-else
              style="margin-left: 0px"
              >邀请</el-button
            >

            <!-- <el-button type="primary" size="mini" disabled v-show="row.count>=2">已邀请</el-button> -->
          </div>
        </template>
        <template slot="count" slot-scope="{ row }">{{
          2 - row.count
        }}</template>
      </avue-crud>
      <Resume ref="resume"></Resume>
    </el-drawer>
  </basic-container>
</template>

<script>
import {recommendExportList, } from "@/api/tenant/mission";
import Resume from "@/components/resume/index";
import { mapGetters } from "vuex";
import { idNumberDDesensitization } from "@/util/util";
import { moneyFormat } from "@/util/money";//
import {getDrawbackOrderDetail,getDrawbackOrderAbout} from "@/api/manage/agentpay";//api

export default {
  data () {
    return {
      formdata:{},
      isIndeterminate: false,
      checkAll: false,
      checked: false,
      missionId: "",
      missionTitle: "",
      stime: "",
      drawer: false,
      selectionList: [],
      loading: false,
      query: {},
      page: {
        pageSize: 100,
        currentPage: 1,
        total: 0,
      },
      personListOption: {
        height: "auto",
        dialogWidth: "30%",
        align: "center",
        menuAlign: "center",
        rowKey: "id",
        tip: false,
        menu: false,
        addBtn: false,
        columnBtn: false,
        searchBtn: false,
        searchShow: false,
        menuPosition: "center",
        labelPosition: "right",
        selectable: function (row) {
          return row.isApply === 0;
        },
        viewBtn: false,
        dialogType: "dialog",
        dialogClickModal: false,
        column: [
          {
            label: "任务编号",
            prop: "missionNo",
            span: 24,
          },
          {
            label: "任务名称",
            prop: "missionTitle",
            search: false,
            span: 24,
            // dicData: [
            //   {
            //     label: "男",
            //     value: 1,
            //   },
            //   {
            //     label: "女",
            //     value: 2,
            //   },
            // ],
          },
          {
            label: "公司名称",
            prop: "companyName",
            search: false,
            span: 24,
          },
          {
            label: "行业类型",
            prop: "tradeNames",
            search: false,
            span: 24,
          },
          {
            label: "工种类型",
            prop: "worktypeNames",
            search: false,
            span: 24,
          },{
            label: "任务起止日期",
            prop: "startEndingTime",
            search: false,
            span: 24,
            slot: true
          },{
            label: "应发工资",
            prop: "wage",
            search: false,
            type: "input",
            slot: true,
          },{
            label: "实发工资",
            prop: "wageReal",
            search: false,
            type: "input",
            slot: true,
          },
          {
            label: "预扣个税",
            prop: "tax",
            search: false,
            type: "input",
            slot: true,
          },
          {
            label: "发放时间",
            prop: "accountTime",
            search: false,
            span: 24,

          },
          
        ],
      },
      excelBox: false,
      data: [],
    };
  },
  components: {
    Resume,
  },
  watch: {},
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    // permissionList() {
    //   return {
    //     addBtn: this.vaildData(this.permission.user_add, false),
    //     viewBtn: this.vaildData(this.permission.user_view, false),
    //     delBtn: this.vaildData(this.permission.user_delete, false),
    //     editBtn: this.vaildData(this.permission.user_edit, false)
    //   };
    // },
    ids () {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.userId);
      });
      return ids.join(",");
    },
    phones () {
      let phones = [];
      this.selectionList.forEach((ele) => {
        phones.push(ele.telphone);
      });
      return phones.join(",");
    },
  },
  methods: {
    idNumberDDesensitization,
    moneyFormat,
    //导出
    handleExport(){
      window.open(recommendExportList(this.missionId,this.query.name?this.query.name:"",this.query.worktypes?this.query.worktypes:"",this.query.groupId?this.query.groupId:""));
    },
    /*打开drawer*/
    openDialog (row) {
      this.id = row.id;
      this.onLoad(this.id);
      this.drawer = true;
    },
    selectionChange (list) {
      this.selectionList = list;
    },
    selectionClear () {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange () {
    //   this.page.currentPage = currentPage;
    //   this.onLoad(this.page);
    },
    // 加载列表数据
    onLoad (id) {
      this.loading = true;
      getDrawbackOrderDetail(
        id
      ).then((res) => {
        const data = res.data.data;
        // this.page.total = data.total;
        // this.data = data.records;
        this.formdata = data
      });
      getDrawbackOrderAbout(id).then((res) => {
        this.data = res.data.data;
        this.loading = false;
      });
    },
    
  },
};
</script>
<style>
    .el-drawer__header{
        margin-bottom: 0;
    }
    .el-drawer__body .title{
        border-left: 5px solid#409EFF;
        font-size: 16px;
        margin: 0 0 20px 0 ;
        padding-left: 10px;
    }
    .el-form--inline .el-form-item{
        margin-right: 50px;
        margin-bottom: 5px;
    }
    .el-form{
        padding-bottom: 20px;
    }
    .jbxxBox .el-form--inline .el-form-item{
      width:300px;
      margin-right: 0; 
    }
</style>