<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 {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: {
    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>
