<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"
          label-width="80px"
        >
          <el-form-item label="合同编号:" prop="htbh">
            <el-input
              class="inputCompatible"
              clearable
              v-model="formInline.htbh"
              placeholder="请输入合同编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="品种:" prop="pzbm">
            <el-select
              clearable
              class="inputCompatible"
              v-model="formInline.pzbm"
              placeholder="请选择品种"
            >
              <el-option
                v-for="item in pzOptions"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="卖方:" prop="jfkdmc">
            <el-input
              class="inputCompatible"
              clearable
              v-model="formInline.jfkdmc"
              placeholder="请输入卖方"
            ></el-input>
          </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" 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-row v-show="searchShowMoreBool">
            <el-form-item label="买方:" prop="yfkdmc">
              <el-input
                class="inputCompatible"
                clearable
                v-model="formInline.yfkdmc"
                placeholder="请输入买方"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
              <el-select
                clearable
                class="inputCompatible"
                v-model="formInline.status"
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in ztOptions"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>
    </div>
    <el-row>
      <el-table :data="tableData" stripe border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="序号" width="70">
          <template slot-scope="scope">
            <span>{{scope.$index+1}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="htbh" label="合同编号"></el-table-column>
        <el-table-column align="center" prop="bmbh" label="报名编号"></el-table-column>
        <el-table-column align="center" prop="pzmc" label="品种"></el-table-column>
        <el-table-column align="center" prop="jfkdmc" label="卖方"></el-table-column>
        <el-table-column align="center" prop="yfkdmc" label="买方"></el-table-column>
        <el-table-column align="center" prop="htzsl" label="交易数量"></el-table-column>
        <el-table-column align="center" prop="zzjszl" label="完成数量"></el-table-column>
        <el-table-column align="center" prop="zt" label="状态"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="200">
          <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)"
              ></el-button>
            </el-tooltip>
          </template>
        </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 {
  exitDepotPage,
  findByPDictCode
} from "@/api/transaction/registrationFee/outinRecord/index";
export default {
  data() {
    return {
      searchShowMoreBool: false,
      pzOptions: [],
      formInline: {},
      tableData: [],
      pageForm: {
        page: 1,
        size: 10,
        total: 0
      },
      ztOptions: [
        { dictCode: "未开始", dictName: "未开始" },
        { dictCode: "进行中", dictName: "进行中" },
        { dictCode: "已完成", dictName: "已完成" }
      ]
    };
  },
  methods: {
    getList(type) {
      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))
          }
      }
      let data = {
        pageNum: this.pageForm.page,
        pageSize: this.pageForm.size,
        yfkdmc: this.formInline.yfkdmc,
        jfkdmc: this.formInline.jfkdmc,
        status: this.formInline.status,
        htbh: this.formInline.htbh,
        pzbm: this.formInline.pzbm
        // pageType: 3,
        // dwmc: this.formInline.dwmc,
        // apcc: this.formInline.apcc,
        // shsj: this.formInline.shsj
      };
      exitDepotPage(data).then(res => {
        if (res.infoCode == 200) {
          res.data.list.map(item => {
            if (item.zzjszl < item.htzsl) {
              item.zt = "进行中";
            } else if (item.zzjszl == item.htzsl) {
              item.zt = "已完成";
            } else if (item.zzjszl == 0) {
              item.zt = "未开始";
            }
          });
          this.tableData = res.data.list;
          this.pageForm.total = res.data.total;
        }
      });
    },
    handleDetail(row) {
      this.$router.push({
        name: "outinRecordDetail",
        query: { crkid: row.crkid }
      });
    },
    resetInfo(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    handleSizeChange(val) {
      this.pageForm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageForm.page = val;
      this.getList();
    }
  },
  created() {
    this.getList('start');
    findByPDictCode().then(res => {
      if (res.infoCode == 200) {
        this.pzOptions = res.data;
      }
    });
  }
};
</script>
    
    <style>
</style>