<template>
  <div class="content-main">
    <div class="search-bm-boder">
      <el-row>
        <el-form :inline="true" ref="formInline" :model="formInline" class="demo-form-inline search-form">
          <el-form-item label="场次:" prop="apcc">
            <el-input class="inputCompatible" clearable v-model="formInline.apcc" placeholder="请输入场次"></el-input>
          </el-form-item>
          <el-form-item label="客户名称:" prop="dwmc">
            <el-input class="inputCompatible" clearable v-model="formInline.dwmc" placeholder="请输入报名单位"></el-input>
          </el-form-item>
          <el-form-item label="报名日期:" prop="bmrq">
            <el-date-picker class="dateInputCompatible" v-model="formInline.bmrq" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <div class="search-button">
            <span class="search-line"></span>
            <el-button type="primary" size="small" class="iconfont iconchaxun" @click="getList">查询</el-button>
            <el-button type="primary" @click="resetInfo('formInline')" size="small" class="iconfont iconzhongzhi">重置</el-button>
          </div>
        </el-form>
      </el-row>
    </div>
    <el-row class="addBtnBg">
      <el-button type="primary" class="iconfont icondaochu11" size="small" :disabled="!tableData.length" @click="exportFile">
        导出</el-button>
    </el-row>
    <el-row>
      <el-table :data="tableData" stripe v-loading="listLoading" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="序号" width="50" type="index"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="apcc" label="场次" width="90"></el-table-column>
        <el-table-column align="center" prop="dwmc" label="客户名称" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column align="center" prop="jylxmc" label="交易性质" show-overflow-tooltip></el-table-column> -->
        <el-table-column align="center" prop="jyfxmc" label="交易方向" width="100"></el-table-column>
        <el-table-column align="center" prop="jyfsmc" label="交易方式" width="80"></el-table-column>
        <el-table-column align="center" prop="lspzmc" label="品种"></el-table-column>
        <!-- <el-table-column align="center" prop="jyrq" label="交易日期" show-overflow-tooltip></el-table-column> -->
        <!-- <el-table-column align="center" prop="lspzmc" label="品种" show-overflow-tooltip></el-table-column> -->
        <el-table-column align="center" prop="yxsl" label="意向数量（吨）" width="110">
          <template slot-scope="scope">
            {{
              String(scope.row.yxsl).indexOf(".") > -1
                ? Number(scope.row.yxsl).toFixed(3)
                : scope.row.yxsl
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="jkje" label="缴款额(元)" width="90">
          <template slot-scope="scope">
            {{
              String(scope.row.jkje).indexOf(".") > -1
                ? Number(scope.row.jkje).toFixed(2)
                : scope.row.jkje
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="jybzj" label="交易保证金" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="lybzj" label="履约保证金" show-overflow-tooltip></el-table-column> -->
        <el-table-column align="center" prop="bmrq" label="报名日期" width="90"></el-table-column>
        <el-table-column align="center" prop="shztmc" label="状态" width="90"></el-table-column>
        <!-- <el-table-column align="center" prop="dwmc" label="报名单位" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="lxdh" label="联系电话"></el-table-column>
        <el-table-column align="center" prop="lslbmc" label="品种"></el-table-column>
        <el-table-column align="center" prop="sl" label="数量"></el-table-column>
        <el-table-column align="center" prop="je" label="金额"></el-table-column>
        <el-table-column align="center" prop="bmrq" label="报名时间"></el-table-column>
        <el-table-column align="center" prop="shztmc" label="审核状态"></el-table-column>
        <el-table-column align="center" prop="shsj" label="审核时间"></el-table-column>-->
        <el-table-column align="center" label="操作" width="90">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" content="查看" placement="top">
              <el-button type="primary" size="small" class="operate_show_btn iconfont iconchakan2" @click="handleDetail(scope.row, 'detail')"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="light" content="审核" placement="top" v-if="buttonNameList.indexOf('审核') > -1">
              <el-button type="primary" class="operate_show_btn iconfont iconshenhe" @click="handleDetail(scope.row, 'edit')" v-if="scope.row.shzt == status1.toBeReview.value" size="small"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-table v-show="false" :data="tableDataDaochuList" id="out-table" stripe border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="序号" width="70" type="index"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="apcc" label="场次"></el-table-column>
        <el-table-column align="center" prop="dwmc" label="报名单位" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="jyfxmc" label="交易方向"></el-table-column>
        <el-table-column align="center" prop="jylxmc" label="交易性质" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="jyrq" label="交易日期" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column align="center" prop="lspzmc" label="品种" show-overflow-tooltip></el-table-column> -->
        <el-table-column align="center" prop="yxsl" label="意向数量（吨）">
          <template slot-scope="scope">
            {{
              String(scope.row.yxsl).indexOf(".") > -1
                ? Number(scope.row.yxsl).toFixed(3)
                : scope.row.yxsl
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="jkje" label="缴款额(元)" show-overflow-tooltip>
          <template slot-scope="scope">
            {{
              String(scope.row.jkje).indexOf(".") > -1
                ? Number(scope.row.jkje).toFixed(2)
                : scope.row.jkje
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" prop="jybzj" label="交易保证金" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="lybzj" label="履约保证金" show-overflow-tooltip></el-table-column> -->
        <el-table-column align="center" prop="bmrq" label="报名时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="shztmc" label="状态" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column align="center" prop="dwmc" label="报名单位" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="lxdh" label="联系电话"></el-table-column>
        <el-table-column align="center" prop="lslbmc" label="品种"></el-table-column>
        <el-table-column align="center" prop="sl" label="数量"></el-table-column>
        <el-table-column align="center" prop="je" label="金额"></el-table-column>
        <el-table-column align="center" prop="bmrq" label="报名时间"></el-table-column>
        <el-table-column align="center" prop="shztmc" label="审核状态"></el-table-column>
        <el-table-column align="center" prop="shsj" label="审核时间"></el-table-column>-->
        <!-- </el-table-column> -->
      </el-table>
    </el-row>
    <el-row>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageForm.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageForm.size" layout="total, sizes, prev, pager, next, jumper" :total="pageForm.total"></el-pagination>
    </el-row>
  </div>
</template>

<script>
import {
  selectTransactionSignUpPageList,
  selectTransactionSignUp,
  deleteTransactionSignUp,
} from "@/api/transaction/registrationFee/transactionSignup/index";
import { status1 } from "@/utils/statusList.js";
import { authorityControl } from "@/api/menuList";
// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  // components: {},
  // name: 'userInfo',
  data() {
    return {
      tableDataDaochuList: [],
      status1: status1,
      listLoading: false,
      formInline: {
        apcc: null,
        jhnd: null,
        ssqy: null,
        dwmc: null,
        bmrq: null,
        // bmrq: []
      },
      pageForm: {
        page: 1,
        size: 10,
        total: 0,
      },
      bmrqEnd: "",
      bmrqStart: "",
      tableData: [],
      dialogTableVisible: false,
      formDetail: {},
      buttonNameList: [],
      dcFlag: false,
    };
  },
  methods: {
    //导出
    exportFile() {
      // this.exportTable = null;
      // let $outTable = $("#out-table");
      // let $thread = $("#out-table")
      //   .find("table")
      //   .eq(0);

      // this.exportTable = $thread.clone();
      // this.exportTable
      //   .find("tr")
      //   .children("th:first,th:last")
      //   .remove();
      // if (
      //   this.exportTable
      //     .find("tr")
      //     .children("th")
      //     .last()
      //     .text() == "操作"
      // ) {
      //   this.exportTable
      //     .find("tr")
      //     .children()
      //     .last()
      //     .remove();
      // }
      // // if (
      // //   this.exportTable
      // //     .find("tr")
      // //     .last()
      // //     .find("th")
      // //     .eq(-2)
      // //     .text() == "操作"
      // // ) {
      // //   console.log("哈哈");
      // //   this.exportTable
      // //     .find("tr")
      // //     .last()
      // //     .remove();
      // // }
      // // console.log($outTable);
      // let $tbody = $outTable.find(".el-checkbox.is-checked").parents("tr");
      // this.exportTable.append($tbody.clone());
      // this.exportTable.find("td:first-child,td:last-child").remove();
      // // console.log(this.exportTable);
      // if (this.dcFlag) {
      //   this.exportTable
      //     .find("tr")
      //     .last()
      //     .remove();
      // }

      // // this.exportTable.find("tr").reverse();
      // // console.log(this.exportTable);
      // this.exportTable = this.exportTable[0];
      // // console.log(this.exportTable);
      this.dcFlag
        ? this.exportExcel()
        : this.$message({
          message: "请稍后再试",
          type: "success",
        });
    },
    //定义导出Excel表格事件
    exportExcel() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          "报名列表.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    getresourceCode() {
      let codeData = {
        resourceCode: sessionStorage.getItem("resourceCode"),
        userId: sessionStorage.getItem("userCode"),
      };
      authorityControl(codeData).then((res) => {
        this.buttonNameList = [];
        res.data.forEach((item) => {
          this.buttonNameList.push(item.resourceName);
        });
        this.getList("start");
      });
    },
    getList(type) {
      // console.log(this.formInline.bmrq, "999");
      if (type != "start") {
        //非初始化调用：查询、分页
        sessionStorage.setItem("searchData", JSON.stringify(this.formInline));
        sessionStorage.setItem("pageData", JSON.stringify(this.pageForm));
      } else {
        //初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
        if (JSON.parse(sessionStorage.getItem("searchData"))) {
          //详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
          this.formInline = JSON.parse(sessionStorage.getItem("searchData"));
          this.pageForm = JSON.parse(sessionStorage.getItem("pageData"));
        } else {
          //第一次进去此菜单时，保存上方默认的data
          sessionStorage.setItem("searchData", JSON.stringify(this.formInline));
          sessionStorage.setItem("pageData", JSON.stringify(this.pageForm));
        }
      }

      if (this.formInline.bmrq) {
        this.bmrqEnd = this.formInline.bmrq[1];
        this.bmrqStart = this.formInline.bmrq[0];
      } else {
        this.bmrqEnd = "";
        this.bmrqStart = "";
      }
      let data = {
        pageNum: this.pageForm.page,
        pageSize: this.pageForm.size,
        pageType: 2,
        dwmc: this.formInline.dwmc,
        apcc: this.formInline.apcc,
        // bmrq: this.formInline.bmrq,
        bmrqEnd: this.bmrqEnd,
        bmrqStart: this.bmrqStart,
      };
      selectTransactionSignUpPageList(data).then((res) => {
        if (res.infoCode == 200) {
          this.tableData = res.data.items;
          this.tableData.forEach((d) => {
            d.jylxmc = ["采购", "销售"][d.jylx];
          });
          this.pageForm.total = res.data.total;
        }
      });
      selectTransactionSignUp(data).then((res) => {
        this.dcFlag = false;
        if (res.infoCode == 200) {
          this.tableDataDaochuList = res.data;
          this.tableDataDaochuList.forEach((d) => {
            d.jylxmc = ["采购", "销售"][d.jylx];
          });
          this.dcFlag = true;
        }
      });
    },
    resetInfo(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    handleClick() {
      this.$router.push({ name: "signupExamineDetail" });
    },
    handleDetail(row, state) {
      this.$router.push({
        name: "signupExamineDetail",
        query: { id: row.jybm, state: state, jybm: row.jybm, ccbm: row.ccbm },
      });
    },
    submit(row) { },
    handleSizeChange(val) {
      this.pageForm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageForm.page = val;
      this.getList();
    },
  },
  created() {
    this.getresourceCode();
  },
  mounted() { },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.line {
  border-bottom: 1px solid #000;
}
.title {
  margin-bottom: 20px;
  text-align: center;
  font-size: 16px;
}
.text {
  text-align: center;
}
</style>
<style>
#nibansealpostion {
  position: relative;
}
#websignPlan {
  left: 100px !important;
  top: -100px !important;
}
</style>
