<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="formInline" class="demo-form-inline"  label-width="120px">
            <el-form-item label="人员名称：">
                <span>{{formInline.realName}}</span>
            </el-form-item>
            <el-form-item label="身份证号：">
                <span>{{formInline.cardNumber}}</span>
            </el-form-item>
            <el-form-item label="归属月：">
                <span>{{formInline.month}}</span>
            </el-form-item><br />
            <el-form-item label="应发工资：">
                <span v-if="formInline.wage && formInline.wage!= 0">{{formInline.wage}}</span>
                <span v-else>--</span>
            </el-form-item>
            <el-form-item label="实发工资：">
                <span v-if="formInline.wageReal && formInline.wageReal!= 0">{{formInline.wageReal}}</span>
                <span v-else>--</span>
            </el-form-item>
            <el-form-item label="预扣个税：" v-show="flagyk">
                <span v-if="formInline.tax && formInline.tax!= 0">{{formInline.tax}}</span>
                <span v-else>--</span>
            </el-form-item><br v-show="flagyk"/>
            <el-form-item label="确定时间：" v-show="flag">
                <span v-if="formInline.updateTime">{{formInline.updateTime}}</span>
                <span v-else>--</span>
            </el-form-item>
            <el-form-item label="发放时间：" v-show="flag">
                <span v-if="formInline.payTime">{{formInline.payTime}}</span>
                <span v-else>--</span>
            </el-form-item>
            <el-form-item label="到账时间：">
                <span v-if="formInline.accountTime">{{formInline.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="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 {getHisListDetails} from "@/api/manage/agentpay";//api

export default {
  data () {
    return {
      flag:true,
      flagyk:true,
        formInline: {
            user: '',
            region: ''
        },
      isIndeterminate: false,
      checkAll: false,
      checked: false,
      missionId: "",
      missionTitle: "",
      stime: "",
      drawer: false,
      selectionList: [],
      loading: false,
      query: {},
      page: {
        pageSize: 100,
        currentPage: 1,
        total: 0,
      },
      // personListOption: {
        
      // },
      excelBox: false,
      data: [],
      column:[
        {
            label: "任务编号",
            prop: "missionNo",
            span: 24,
          },
          {
            label: "岗位名称",
            prop: "missionTitle",
            span: 24,
          },
          {
            label: "用工单位",
            prop: "companyName",
            span: 24,
          },
          {
            label: "行业类型",
            prop: "tradeName",
            span: 24,
          },
          {
            label: "工种类型",
            prop: "worktypeName",
            span: 24,
          },{
            label: "任务起止日期",
            prop: "mtime",
            span: 24,
          },{
            label: "应发工资",
            prop: "wage",
            span: 24,
          },{
            label: "实发工资",
            prop: "wageReal",
            span: 24,
          },
          {
            label: "预扣个税",
            prop: "tax",
            span: 24,
          },
      ]
    };
  },
  components: {
    Resume,
  },
  watch: {},
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    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(",");
    },
    personListOption(){
      return{
        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:this.column,
      }
    }
  },
  methods: {
    idNumberDDesensitization,
    //导出
    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,flag,flagyk) {
      this.id = row.id;
      this.onLoad(this.id);
      this.drawer = true;
      this.flag = flag;
      this.flagyk = flagyk;
      if(!flagyk){
        this.column = [
        {
            label: "任务编号",
            prop: "missionNo",
            span: 24,
          },
          {
            label: "岗位名称",
            prop: "missionTitle",
            span: 24,
          },
          {
            label: "用工单位",
            prop: "companyName",
            span: 24,
          },
          {
            label: "行业类型",
            prop: "tradeName",
            span: 24,
          },
          {
            label: "工种类型",
            prop: "worktypeName",
            span: 24,
          },{
            label: "任务起止日期",
            prop: "mtime",
            span: 24,
          },{
            label: "应发工资",
            prop: "wage",
            span: 24,
          },{
            label: "实发工资",
            prop: "wageReal",
            span: 24,
          },
          
      ]
      }
    },
    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;
      getHisListDetails(
        id
      ).then((res) => {
        this.data = [];
        const data = res.data.data;
        this.formInline = data.order;
        this.data.push(data.mission);
        this.loading = false;
        this.selectionClear();
      });
    },
  },
};
</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>