<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="cc">
            <el-input class="inputCompatible" clearable v-model="formInline.cc" placeholder="请输入场次"></el-input>
          </el-form-item>
          <!-- <el-form-item label="报名单位:" prop="bmdw">
						<el-input
							class="inputCompatible"
							clearable
							v-model="formInline.bmdw"
							placeholder="请输入报名单位"
						></el-input>
          </el-form-item>-->
          <el-form-item label="报名日期:" prop="bmsj">
            <el-date-picker
              class="dateInputCompatible"
              v-model="formInline.bmsj"
              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>
      <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 align="center" prop="apcc" label="场次" width="90"></el-table-column>
        <el-table-column label="客户名称" prop="dwmc" align="center" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column label="交易性质" prop="jylxmc" align="center" show-overflow-tooltip></el-table-column> -->
        <el-table-column align="center" prop="jyfxmc" label="交易方向" width="90"></el-table-column>
        <el-table-column align="center" prop="jyfsmc" label="交易方式" width="90"></el-table-column>
        <!-- <el-table-column label="交易日期" prop="jyrq" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="交易时间" prop="jysj" align="center" show-overflow-tooltip></el-table-column> -->
        <el-table-column label="品种" prop="lspzmc" align="center" 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 label="交易保证金" prop="jybzj" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="履约保证金" prop="lybzj" align="center" show-overflow-tooltip></el-table-column> -->
        <el-table-column label="报名日期" prop="bmrq" align="center" width="90"></el-table-column>
        <el-table-column label="状态" prop="shztmc" align="center" width="90"></el-table-column>
        <!-- <el-table-column align="center" prop="dwmc" label="报名单位"></el-table-column>
				<el-table-column align="center" prop="lxdh" label="联系电话"></el-table-column>
				<el-table-column align="center" prop="je" label="金额"></el-table-column>
				<el-table-column align="center" prop="sxfl" label="手续费率"></el-table-column>
				<el-table-column align="center" prop="bmrq" label="报名日期"></el-table-column>
        <el-table-column align="center" prop="skztmc" 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 iconqueren"
                @click="handleDetail(scope.row, 'edit')"
                size="small"
                v-if="scope.row.shztmc == '待付款确认'"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <!-- <h2>金额单位: 元; 数量单位: 吨</h2> -->
      <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 } from "@/api/transaction/registrationFee/transactionSignup/index";
import { authorityControl } from "@/api/menuList";
export default {
  // components: {},
  // name: 'userInfo',
  data() {
    return {
      listLoading: false,
      formInline: {
        cc: null,
        bmdw: null,
        bmsj: []
      },
      pageForm: {
        page: 1,
        size: 10,
        total: 0
      },
      tableData: [],
      multipleSelection: [],
      dialogTableVisible: false,
      formDetail: {},
      buttonNameList: []
    };
  },
  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.getList("start");
      });
    },
    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,
        pageType: 3,
        dwmc: this.formInline.bmdw,
        apcc: this.formInline.cc,
        shsjStart: this.formInline.bmsj
          ? this.formInline.bmsj.length != 0
            ? this.formInline.bmsj[0]
            : null
          : null,
        shsjEnd: this.formInline.bmsj
          ? this.formInline.bmsj.length != 0
            ? this.formInline.bmsj[1]
            : null
          : null
      };
      console.log(data);
      selectTransactionSignUpPageList(data).then(res => {
        if (res.infoCode == 200) {
          this.tableData = res.data.items;
          this.tableData.forEach(d => {
            d.jylxmc = ["采购", "销售"][d.jylx];
            if (d.shztmc == "审核通过") {
              d.shztmc = "待付款确认";
            }
          });
          this.pageForm.total = res.data.total;
        }
      });
    },
    isDisabled(row) {
      if (row.skzt == 1) {
        return false;
      } else {
        return true;
      }
    },
    resetInfo(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClick() {
      this.$router.push({ name: "remittanceConfirmDetail" });
    },
    handleDetail(row, state) {
      this.$router.push({
        name: "remittanceConfirmDetail",
        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>
