<!--接收保证金委托函列表-->
<template>
  <div class="content-main">
    <div class="search-bm-boder">
      <el-row>
        <el-col :span="14">
          <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
            <el-form-item label="委托函编号:" prop="wthbh">
              <el-input v-model="searchForm.wthbh" clearable class="input-w-220"></el-input>
            </el-form-item>
            <el-form-item label="类 型:" prop="wtlx">
              <el-select v-model="searchForm.wtlx" placeholder="请选择" clearable class="input-w-220">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="10">
          <div class="search-button">
            <span class="search-line"></span>
            <!--          <div class="search-select" @click="searchShowMore">更多条件 <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="btnSearch" size="small" class="iconfont iconchaxun">查询</el-button>
            <el-button
              type="primary"
              @click="btnReset('searchForm')"
              size="small"
              class="iconfont iconzhongzhi"
            >重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-table
        :data="tableData"
        border
        stripe
        v-loading="pageInfo.loading"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <!--<el-table-column type="selection" label="全选" width="55" align="center"></el-table-column>-->
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column prop="wthbh" label="委托函编号" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="tzbt" label="通知标题" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="wtlx" label="类型" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.wtlx ? "采购" : "销售" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bzr" label="发送单位" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="bzsj" label="发送时间" align="center" show-overflow-tooltip width="180"></el-table-column>
        <el-table-column prop="ztmc" label="状态" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" content="查看" placement="top">
              <el-button
                type="primary"
                size="small"
                class="iconfont iconchakan2 operate_show_btn"
                @click="jumpPage(scope.row.wthbm, 1)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-row class="pagination-wrap">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageIndex"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import { getReceiveDelegationList } from "@/api/transaction/ensureManage";
export default {
  name: "refundDelegationList",
  data() {
    return {
      searchForm: {
        wthbh: "",
        wtlx: ""
      },
      options: [
        {
          value: "0",
          label: "销售"
        },
        {
          value: "1",
          label: "采购"
        }
      ],
      tableData: [],
      pageInfo: {
        loading: true,
        pageIndex: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  mounted() {
    this.renderPage("start");
  },
  methods: {
    btnSearch() {
      this.renderPage();
    },
    renderPage(type) {
      this.getList(type);
    },
    btnReset(formName) {
      this.$refs[formName].resetFields();
      this.renderPage();
    },
    jumpPage(code, type) {
      this.$router.push({
        name: "refundDelegationDetail",
        query: {
          wthbm: code,
          type: type,
          backUrl: "receiveDelegationList"
        }
      });
    },
    handleSizeChange(val) {
      this.pageInfo.pageIndex = 1;
      this.pageInfo.pageSize = val;
      this.renderPage();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageIndex = val;
      this.renderPage();
    },
    getList(type) {
      if (type != "start") {
        //非初始化调用：查询、分页
        sessionStorage.setItem("searchData", JSON.stringify(this.searchForm));
        sessionStorage.setItem("pageData", JSON.stringify(this.pageInfo));
      } else {
        //初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
        if (JSON.parse(sessionStorage.getItem("searchData"))) {
          //详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
          this.searchForm = JSON.parse(sessionStorage.getItem("searchData"));
          this.pageInfo = JSON.parse(sessionStorage.getItem("pageData"));
        } else {
          //第一次进去此菜单时，保存上方默认的data
          sessionStorage.setItem("searchData", JSON.stringify(this.searchForm));
          sessionStorage.setItem("pageData", JSON.stringify(this.pageInfo));
        }
      }
      let params = {
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
        wthbh: this.searchForm.wthbh,
        wtlx: this.searchForm.wtlx
      };
      this.pageInfo.loading = true;
      getReceiveDelegationList(params).then(response => {
        this.pageInfo.loading = false;
        if (response.infoCode == 200) {
          this.tableData = response.data.items;
          this.pageInfo.total = response.data.total;
        }
      });
      // getReceiveDelegationList(params)
      //   .then(actionMethod)
      //   .catch(actionMethod);

      // function actionMethod(response) {
      //   self.pageInfo.loading = false;
      //   if (response && response.infoCode === 200) {
      //     self.tableData = response.data.items;
      //     self.pageInfo.total = response.data.total;
      //   }
      // }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.input-w-220 {
  width: 100%;
}
</style>
