<template>
  <div class="content-main">
    <el-form :inline="true" :model="searchForm" class="search-bm-boder">
      <el-row>
        <el-form-item label="承储单位:">
          <el-input v-model="searchForm.dwmc" clearable style="width:170px" placeholder="请输入承储单位"></el-input>
        </el-form-item>
        <el-form-item label="状态:">
          <el-select clearable v-model="searchForm.zt" placeholder="请选择状态" style="width:170px">
            <el-option
              v-for="(item, index) in status"
              :key="index"
              :label="item.ztmc"
              :value="item.zt"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交易性质:">
          <el-select clearable v-model="searchForm.jylx" style="width:170px" placeholder="请选择交易性质">
            <el-option
              v-for="item in statusList"
              :key="item.dictCode"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <div class="search-button">
            <span class="search-line"></span>
            <div class="search-select" @click="searchShowMoreBool = !searchShowMoreBool">
              更多条件
              <i class="el-icon-arrow-up" v-show="searchShowMoreBool"></i>
              <i class="el-icon-arrow-down" v-show="!searchShowMoreBool"></i>
            </div>
            <el-button
              type="primary"
              @click="searchInfo"
              size="small"
              class="iconfont iconchaxun"
            >查询</el-button>
            <el-button
              type="primary"
              @click="chongzhi"
              size="small"
              class="iconfont iconzhongzhi"
            >重置</el-button>
          </div>
        </el-form-item>
      </el-row>
      <el-row v-show="searchShowMoreBool">
        <el-form-item>
          <label slot="label">品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;种:</label>
          <el-select v-model="searchForm.pzbm" style="width:170px" clearable placeholder="请选择品种">
            <el-option
              v-for="item in variety"
              :key="item.dictCode"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>

    <el-row class="addBtnBg">
      <el-button
        type="primary"
        class="iconfont iconshanchu"
        size="small"
        @click="handleMultipleDel"
        :disabled="!multipleSelection.length"
      >批量删除</el-button>
      <!-- <el-button type="primary" class="iconfont icondaoru1" size="small" @click="handleImport">导入</el-button> -->
      <el-button
        type="primary"
        class="iconfont icondaochu11"
        size="small"
        :disabled="!multipleSelection.length"
        @click="exportFile"
      >导出</el-button>
      <!-- <el-button
        type="primary"
        class="iconfont iconxiazaimoban"
        size="small"
        @click="handleDownloadTemplate"
      >下载模板</el-button>-->
    </el-row>

    <el-table
      :data="tableData"
      border
      stripe
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      id="out-table"
    >
      <el-table-column type="selection" align="center" width="45"></el-table-column>
      <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
      <el-table-column prop="bdh" label="标的号" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="wtbh" label="委托编号" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="jylxmc" label="交易性质" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="dwmc" label="承储单位" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="ccdd" label="仓号" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="pzmc" label="品种" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="lssl" label="数量" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="scnd" label="生产年度" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="ztmc" label="状态" align="center" show-overflow-tooltip width="80"></el-table-column>
      <el-table-column align="center" label="操作" width="180px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="查看" placement="top">
            <el-button
              type="primary"
              size="small"
              @click="showInfo(scope.row)"
              class="operate_show_btn iconfont iconchakan2"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="编辑" placement="top">
            <el-button
              type="primary"
              size="small"
              @click="updateInfoSave(scope.row)"
              class="operate_edit_btn iconfont iconxiugai"
              v-if="scope.row.ztmc == '待提交'"
            ></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="light" content="删除" placement="top">
            <el-button
              type="primary"
              size="small"
              @click="deleteInfo(scope.row)"
              class="operate_delete_btn iconfont iconshanchu"
              v-if="scope.row.ztmc == '待提交'"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="pagination-wrap">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="pageForm.applyNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import {
  getScalePlanUpdate,
  deleteListItem,
  selectOwnList,
  getScalePlanDetails,
  selectParentList,
  excalOut,
  varietys,
  deleteTrade
} from "@/api/transaction/trading/transactionSignupFood/index";
import { transaction } from "@/api/index";
import { statusList, status } from "./zoots4.js";
// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      multipleSelection: [],
      variety: [],
      excalFalse: false,
      exportTable: null,
      searchShowMoreBool: false,
      statusList: statusList, //引用json状态
      // status: status,
      ztOptions: [],
      tableData: [],
      listLoading: true,
      showType: false,
      status: [
        { ztmc: "待提交", zt: "91000001" },
        { ztmc: "已提交", zt: "91000004" }
      ],
      searchForm: { dwmc: null, zt: null, jylx: null, pzbm: null },
      pageForm: {
        pageNum: 1,
        pageSize: 10,
        total: 1
      },
      dcFlag: false
    };
  },
  created() {
    this.getInfo();
    varietys().then(res => {
      this.variety = res.data;
    });
  },
  methods: {
    handleImport() {},
    handleMultipleDel() {
      console.log(this.multipleSelection);
      let arr = [];
      let flag = true;
      this.multipleSelection.map(item => {
        if (item.ztmc != "待提交") {
          this.$message({
            type: "warning",
            message: "已提交数据不能删除！"
          });
          flag = false;
        } else {
          arr.push(item.bdbm);
        }
      });
      let str = arr.toString();
      console.log(str);
      if (flag) {
        deleteTrade(str).then(res => {
          if (res.infoCode == 200) {
            this.$message({
              type: "success",
              message: "删除成功"
            });
            this.getInfo();
          }
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.dcFlag =
        this.multipleSelection.length == this.tableData.length ? true : false;
    },
    handleDownloadTemplate() {
      let a = document.createElement("a");
      a.download = "交易标的模板";
      a.href = transaction + "/trademark/downloadTemplate";
      a.click();
    },
    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.exportExcel();
    },
    chongzhi() {
      this.searchForm = {};
      this.getInfo();
    },
    submitUpload() {
      let list = document.getElementsByClassName(
        "el-upload-list__item is-ready"
      );
      if (list.length == 0) {
        this.$message({
          type: "warning",
          message: "请选择需要导入的模板！"
        });
        return;
      }
      this.$refs.upload.submit();
    },
    uploadSectionFile(param) {
      var fileObj = param.file;
      // FormData 对象
      var form = new FormData();
      // 文件对象
      form.append("file", fileObj);
      form.append("userId", this.userId);
      form.append("userName", this.userName);
      this.GLOBAL.POST("/hqx/knowledge/importKnowledge", form).then(res => {
        if (res.data.success == true) {
          this.$message({
            type: "success",
            message: res.data.msg
          });
          this.fileList = [];
        } else {
          this.$message({
            type: "success",
            message: res.data.msg
          });
          this.fileList = [];
        }
      });
    },
    //初始数据列表请求
    getInfo() {
      if (this.searchForm.ztmc == "待分解") {
        this.searchForm.zt = "91000057";
      }
      if (this.searchForm.ztmc == "已分解") {
        this.searchForm.zt = "91000058";
      }
      if (this.searchForm.jylxmc == "竞购") {
        this.searchForm.jylxbm == 0;
      }
      if (this.searchForm.jylxmc == "竞销") {
        this.searchForm.jylxbm == 1;
      }
      if (this.searchForm.jylxmc == "不限") {
        this.searchForm.jylxbm == null;
      }
      let data = {
        // wtfmc: this.searchForm.wtfmc,
        // zt: this.searchForm.zt,
        // pzbm: this.searchForm.pzbm,
        // jylxbm: this.searchForm.jylxbm,
        ...this.searchForm,
        pageNum: this.pageForm.pageNum,
        pageSize: this.pageForm.pageSize
      };
      selectOwnList(data).then(res => {
        console.log(res, "列表页");
        if (res.infoCode == 200) {
          this.tableData = res.data.items;
          this.tableData.forEach(d => {
            d.jylxmc = d.jylx == 1 ? "竞销" : "竞购";
          });
          this.pageForm.total = Number(res.data.total);
        } else {
          this.$message({
            type: "error",
            message: "获取失败!"
          });
        }
      });
    },
    //点击搜索时
    searchInfo() {
      this.getInfo();
    },
    //点击查看 跳到detail页面
    showInfo(row) {
      this.$router.push({
        name: "transactionSignupFoodDetail",
        query: {
          apbm: row.apbm,
          wtbm: row.wtbm,
          bdbm: row.bdbm,
          type: "show"
        }
      });
    },
    //点击导出
    updateInfo(row) {
      excalOut(row.apbm)
        .then(res => {
          this.tableMrtabl = res.data;
        })
        .then(() => {
          this.exportExcel();
        });
    },
    //去detail页面 进行数据添加
    updateInfoSave(row) {
      this.$router.push({
        name: "transactionSignupFoodDetail",
        query: {
          type: "update",
          bdbm: row.bdbm
        }
      });
    },
    //点击删除按钮
    deleteInfo(row) {
      this.$confirm("此操作将删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            xzbm: row.xzbm
          };
          deleteListItem(data).then(res => {
            if (res.infoCode == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getInfo();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //分页
    handleSizeChange(val) {
      this.pageForm.pageSize = val;
      this.getInfo();
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val;
      this.getInfo();
    },

    biaodi() {
      this.$router.push({
        name: "transactionSignupFoodDetail",
        query: {
          type: "signa"
        }
      });
    },
    //定义导出Excel表格事件
    exportExcel() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(this.exportTable);
      /* 获取二进制字符串作为输出 */
      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;
    }
  }
};
</script>

<style lang="scss" scoped>
.pagination-wrap {
  text-align: right;
  margin-top: 10px;
}

.input-w-220 {
  width: 220px;
}

.iconfont {
  color: white;
}
</style>
