<!--保证金退款业务部列表页-->
<template>
  <div class="content-main">
    <div class="search-bm-boder">
      <el-row>
        <el-col :span="18">
          <el-form
            :inline="true"
            :model="searchForm"
            ref="searchForm"
            class="demo-form-inline"
          >
            <el-form-item label="合同号:" prop="htbh">
              <el-input
                v-model="searchForm.htbh"
                clearable
                class="input-w-220"
                placeholder="请输入合同号"
              ></el-input>
            </el-form-item>
            <el-form-item label="交易性质:" prop="jylx">
              <el-select
                v-model="searchForm.jylx"
                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-item label="状态:" prop="tkzt">
              <el-select
                v-model="searchForm.tkzt"
                placeholder="请选择状态"
                clearable
                class="input-w-220"
              >
                <el-option
                  v-for="item in ztOptions"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <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="apcc"
          label="场次"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="htbh"
          label="合同号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="dwmc"
          label="交易性质"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>{{ ["采购", "销售"][scope.row.jylx] }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="wtlx"
          label="退款类型"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{
              ["退还", "抵扣粮款", "部分扣除", "全部扣除"][scope.row.tklx]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="jsdw"
          label="退款单位"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="lspzmc"
          label="品种"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="tkztmc"
          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="jumpWTH(scope.row.wthbm, 1)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="查看退款"
              placement="top"
            >
              <el-button
                v-if="scope.row.tkzt != ztOptions[3].value"
                type="primary"
                size="small"
                class="iconfont iconchakan2 operate_edit_btn"
                @click="jumpPage(scope.row.tkbm, 1)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="退款"
              placement="top"
            >
              <el-button
                type="primary"
                v-if="scope.row.tkzt == ztOptions[3].value"
                @click="
                  jumpPage(scope.row.tkbm, 2, scope.row.dwmc, scope.row.wthbm)
                "
                class="operate_edit_btn iconfont icontijiao"
                size="small"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="导出"
              placement="top"
            >
              <el-button
                type="primary"
                v-if="scope.row.tkzt == ztOptions[5].value"
                @click="jumpPage(scope.row.tkbm, 3)"
                class="operate_show_btn iconfont icondaochu11"
                size="small"
              ></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 {
  enumStatus,
  getMarginRefundList,
} from "@/api/transaction/ensureManage";
import { authorityControl } from "@/api/menuList";
import { status } from "@/utils/statusList";

export default {
  name: "marginRefundList",
  data() {
    return {
      searchForm: {
        htbh: "",
        jylx: "",
        tkzt: "",
      },
      options: [
        {
          value: 0,
          label: "采购",
        },
        {
          value: 1,
          label: "销售",
        },
      ],
      tableData: [],
      pageInfo: {
        loading: true,
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
      buttonNameList: [],
      ztOptions: [
        status.djyjb,
        status.djysh,
        status.dcwsp,
        status.djssh,
        status.dcwqp,
        status.cgtk,
      ],
    };
  },
  mounted() {
    this.getresourceCode();
  },
  methods: {
    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.renderPage("start");
      });
    },
    btnSearch() {
      this.renderPage();
    },
    renderPage(type) {
      this.getList(type);
    },
    btnReset(formName) {
      this.$refs[formName].resetFields();
      this.renderPage();
    },
    jumpWTH(code) {
      this.$router.push({
        name: "refundDelegationDetail",
        query: {
          wthbm: code,
          type: 1,
        },
      });
    },
    jumpPage(code, type, dwmc, wthbm) {
      this.$router.push({
        name: "entransactionSettlementDetail",
        query: {
          tkbm: code,
          type: type,
          dwmc: dwmc,
          wthbm: wthbm,
        },
      });
    },
    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,
        htbh: this.searchForm.htbh,
        jylx: this.searchForm.jylx,
        tkzt: this.searchForm.tkzt,
        pageType: 4,
        tkfl: 0,
      };
      if (params.tkzt === "") {
        delete params.tkzt;
      }
      this.pageInfo.loading = true;
      getMarginRefundList(params).then((response) => {
        this.pageInfo.loading = false;
        if (response.infoCode == 200) {
          this.tableData = response.data.items;
          this.pageInfo.total = response.data.total;
        }
      });
      // getMarginRefundList(params)
      //   .then(actionMethod)
      //   .catch(actionMethod);

      // function actionMethod(response) {

      //   if (response && response.infoCode === 200) {
      //     this.tableData = response.data.items;
      //     this.pageInfo.total = response.data.total;
      //   }
      // }
    },
  },
};
</script>

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