<template>
  <div>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="obj"
      @row-del="rowDel"
      @row-update="rowUpdate"
      @row-save="rowSave"
      :before-open="beforeOpen"
      :page.sync="page"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      @selection-change="selectionChange"
    >
        <!-- 应发工资 -->
        <template slot="wage" slot-scope="{ row }">
            <span>{{moneyFormat(row.wage) }}</span>
        </template>
        <!-- 个税 wageReal-->
        <template slot="tax" slot-scope="{ row }">
            <span>{{moneyFormat(row.taxTotal) }}</span>
        </template>
         <!-- 实发工资-->
        <template slot="wageReal" slot-scope="{row }">
            <span>{{moneyFormat(row.wageReal) }}</span>
        </template>
        <!-- 归属月 -->
        <template slot="belongMonth" slot-scope="{row }">
            <span>{{row.belongYear}}-{{row.belongMonth}}</span>
        </template>
      <!--自定义按钮-->
      <!-- <template slot="menuLeft">
        <el-button @click="excelBox = true" size="small" type="primary"
          >批量校准</el-button>
      </template> -->
      <!--/自定义按钮-->
      <!--自定义操作栏-->
      <div slot="menu" slot-scope="{row}">
        <!-- <el-button type="text" size="mini" @click="downloadEsignature(row)"
          >下载申请表</el-button
        > -->
        <el-button type="text" size="mini" @click.stop="calibration(row)"
          >查看</el-button
        >
      </div>
    </avue-crud>
    <!-- 查看详情dialog -->
    <check ref="check" v-show="false"></check>
    <!-- /查看详情dialog -->
    <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="35%"
        :modal=false
        :before-close="handleClose">
        <div>
          <img class="" :src="'data:image/png;base64,'+imgStr" width="100%"/>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="downLoadContract">下载合同</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import {excelImportOrder} from "@/api/manage/agentpay";//apitenantList
import {managerList,signSealImg,downloadEsignature,signSeal,signSeals,viewContractImg,contractDownload} from "@/api/manage/esignature";//api
import Check from "../Dialog/IncomeTaxCheck";//查看详情
import SelectMap from "@/components/map/selectLocation";
import { mapGetters } from "vuex";
import { moneyFormat } from "@/util/money";
import { dateFormat } from "@/util/date";
import saveButton from "./saveButton";
import { excelAccept } from "@/common/accept";
import httpRequest from "../httpRequest";
const accept = ["image/png", "image/jpeg", "image/svg+xml", "image/gif"];

export default {
  components: {
    SelectMap,
    saveButton,
    Check
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 15) {
        return value.slice(0, 14) + "...";
      }
      return value;
    },
  },
  data() {
    let taxReal=(rule, value, callback)=>{
      let reg = new RegExp("[\\u4E00-\\u9FFF]+","g");
      let reg1 = new RegExp("/[a-z]/i;");
      if(reg.test(value)){
        this.btnClickFlag = false;
          callback(new Error('只能输入数字!'))
      }else if (reg1.test(value)) {
          this.btnClickFlag = false;
          callback(new Error('只能输入数字!'))
      }else{
        this.btnClickFlag = true;
        callback()
      }
    }
    return {
      calibrationDialog:false,
      contractId:'',
      excelBox: false,
      dialogVisible: false,
      imgStr:'',
      excelForm: {},
      imageUrl: "/img/scimg.png",
      imgFile:'',
      btnClickFlag:false,
      formLabelWidth: '120px',
      form:{
        num:30,
      },
      rules: {
          taxReal: [
            { validator: taxReal , trigger: ['blur', 'change'] },
          ],
      },
      formSubmit:{
        id:111,
        taxReal:111,
      },
      ceNum:0,
      taxReal:0,
      // status: 1,
      selectionList: [],
      viewDrawer: false,
      view: {},
      loading: false,
      tradeData: [],
      tradeId: "",
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
      },
      query: {
        // status: 2,
      },
      data: [],
      obj: {},
      missionNo:'',
      leibie:'wait',//查询类别（必填，取值范围：=all 代表返回所有,=wait 待确定，=ing 发放中,=success 发放成功,fail=失败，pause 暂不发放；）
    };
  },
  created() {},
  watch: {
  },
  computed: {
    ...mapGetters(["permission"]),
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids;
    },
    wageRealTotal () {
      let wageRealTotal = 0;
      this.selectionList.forEach(ele => {
        wageRealTotal += ele.wageReal;
      });
      return wageRealTotal;
    },
    excelOption() {
      return {
        submitBtn: false,
        emptyBtn: false,
        column: [
          {
            prop: "excelFile",
            type: "upload",
            drag: true,
            loadText: "文件上传中，请稍等",
            span: 24,
            propsHttp: {
              res: "data",
            },
            accept: excelAccept,
            tip: "请上传 .xls,.xlsx 标准格式文件",
            action: excelImportOrder(this.excelForm),
          },
        ],
      };
    },
    /*计算时间*/
    option() {
      return {
        height: "auto",
        calcHeight: 40,
        menuWidth: 400,
        align: "center",
        menuAlign: "center",
        tip: false,
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false,
        excelBtn: false,
        columnBtn: false,
        searchBtn: false,
        searchShow: false,
        border: true,
        index: true,
        esignatureId:'',
        imageUrl: "/img/license.png",
        indexLabel: "序号",
        // selection: true,
        dialogType: "drawer",
        dialogWidth: "60%",
        delBtnText: "取消",
        dialogClickModal: false,
        column: [
          {
            label: "合同编号",
            prop: "contractNo",
            display: false,
          },
          {
            label: "企业",
            prop: "companyName",
            display: false,
          },
          {
            label: "任务名称",
            prop: "servicesName",
            display: false,
          },
          {
            label: "员工名称",
            prop: "userName",
            display: false,
          },
          {
            label: "合同开始日期",
            prop: "stime",
            type: "datetime",
            format: "yyyy-MM-dd",
            display: false,
          },
          {
            label: "合同结束日期",
            prop: "etime",
            type: "datetime",
            format: "yyyy-MM-dd",
            display: false,
          },
        ],
      };
    },
  },
  methods: {
    //批量签发
    batchIssue(){
      let fd = new FormData();
      fd.append('ids',this.ids.join(","));
      signSeals(fd)
      .then(() => {
        this.onLoad(this.page, this.params);
      })
      .catch(() => {
        
      });
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(()=> {
            done();
          })
          .catch(() => {});
      },
    /**上传图片**/
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$set(this.form, "authUrlId", res.data.link);
      this.uploading = false;
    },
    beforeAvatarUpload(file) {
      const isJPG = accept.includes(file.type);
      this.imgFile = file;
      let fd = new FormData();
      fd.append('file',file);
      fd.append('id',this.form.id);
      if (!isJPG) {
        this.$message.error("图片格式不正确!");
      }
      signSealImg(fd)
      .then(() => {
      })
      .catch(() => {
        
      });
      return isJPG;
    },
    /**上传图片*/
    httpRequest,
    moneyFormat,
     //下载建行客户端工资发放模板
    uploadAfter(res, done) {
      this.onLoad(this.page, this.params);
      done();
      if (!(res instanceof Error)) {
        this.excelBox = false;
      }
    },
    uploadError(error) {
      if (error) {
        this.$message.error(error);
      }
    },
    //单挑数据发起校准确定按钮
    drawbackClick(){
      let fd = new FormData();
      fd.append('id',this.form.id);
      signSeal(fd)
      .then(() => {
        this.onLoad(this.page, this.params);
      })
      .catch(() => {
        
      });
     this.calibrationDialog = false;
    },
    taxRealChaneg(){
      this.form.taxReal = this.taxReal;
      this.formSubmit.taxReal = this.taxReal*100;
      this.ceNum = this.form.taxTotal - this.formSubmit.taxReal ;
    },
    selectionChange (list) {
      this.selectionList = list;
    },
    format(date) {
      if (date) {
        return dateFormat(new Date(date), "yyyy/MM/dd");
      }
    },
    //查看
    calibration(row){
      this.form = row;
      this.contractId = row.id;
      viewContractImg(row.id).then((res) => {
        this.imgStr = res.data.data;
        this.dialogVisible = true;
      })
      .catch(() => {
        
      });
      //contractDetailsImg()
    },
    //下载合同
    downLoadContract(){
      window.open(contractDownload(this.contractId))
    },
    //下载申请表
    downloadEsignature(row){
      window.open(downloadEsignature(row.id))
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    /*刷新本页 带搜索参数*/
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    /*加载数据*/
    onLoad(page, params = {}) {
      this.loading = true;
      managerList(
        page.currentPage,
        page.pageSize,
        Object.assign(this.query, params)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
    /*返回首页*/
    backIndex() {
      this.$emit("refresh");
    },
    
  },
};
</script>
<style scoped>
.companyInfo-upload-image {
  height: 160px;
  width: 160px;
}
.el-col,
.el-form-item {
  margin-bottom: 0px;
}
.map {
  width: 100%;
  height: 300px;
}
</style>
<style scoped>
.slotForm {
  font-size: 12px;
}
.calibrationForm .el-form{
  padding-bottom: 0 !important;
}
.calibrationForm .el-dialog--center .el-dialog__body{
  padding: 0 10px !important;
}
.calibrationForm .el-dialog--center .el-dialog__body .el-input__inner{
  padding: 0 !important;
  height:30px !important;
  line-height: 30px !important;
}
.excelBox .el-dialog__body{
  padding: 0 10px!important;
}
.excelBox .el-form-item__content{
    margin-left: 0 !important;
    text-align: center;
}
.excelBox .el-dialog{
  width:360px !important;
}
</style>