<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="apcc">
            <el-input class="inputCompatible" clearable v-model="formInline.apcc" placeholder="请输入场次"></el-input>
          </el-form-item>
          <el-form-item label="报名日期:" prop="bmrq">
            <el-date-picker class="dateInputCompatible" v-model="formInline.bmrq" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="状态" prop="shzt">
            <el-select v-model="formInline.shzt" clearable placeholder="请选择状态" class="inputCompatible">
              <el-option v-for="item in ztOptions" :key="item.value" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </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 show-overflow-tooltip align="center" prop="apcc" label="场次" width="90"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="wtfmc" label="委托单位"></el-table-column>
        <el-table-column align="center" prop="jyfxmc" label="交易方向" width="100">
          <template slot-scope="scope">
            {{ scope.row.jyfsmc == '购销双向' ? "采购、销售" : scope.row.jyfxmc }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="jyfsmc" label="交易方式" width="80"></el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="lspzmc" label="品种"></el-table-column>
        <el-table-column align="center" prop="sl" label="数量（吨）" width="90">
          <template slot-scope="scope">
            {{
              String(scope.row.sl).indexOf(".") > -1
                ? Number(scope.row.sl).toFixed(3)
                : scope.row.sl
            }}
          </template>
        </el-table-column>

        <el-table-column align="center" prop="jyrq" label="交易日期" width="90"></el-table-column>
        <!-- <el-table-column show-overflow-tooltip align="center" prop="jylxmc" label="交易性质"></el-table-column>
        <el-table-column align="center" prop="jysj" label="交易时间"></el-table-column>
        <el-table-column prop="jybzj" label="交易保证金（元/吨）" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="lybzj" label="履约保证金（元/吨）" align="center" show-overflow-tooltip></el-table-column> -->
        <!-- <el-table-column
					align="center"
					prop="sxfl"
					label="手续费率"
        ></el-table-column>-->
        <el-table-column align="center" prop="bmrq" label="报名日期" width="90"></el-table-column>
        <el-table-column align="center" prop="shztmc" label="状态" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.zt == 0 ? "已过期" : scope.row.newztmxc }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
					align="center"
					width="110"
					prop="skztmc"
					label="是否确认收款"
				></el-table-column>
				<el-table-column
					align="center"
					prop="tkztmc"
					label="退款状态"
        ></el-table-column>-->
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <!-- <el-tooltip class="item" effect="light" content="场次信息" placement="top">
              <el-button type="primary" size="small" class="operate_show_btn iconfont iconzhuangtaixiugai" @click="handleDetail(scope.row, 'detail')"></el-button>
            </el-tooltip> -->
            <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" size="small" class="operate_edit_btn iconfont iconxiugai1" v-if="
                  ['未报名', '待提交', '已驳回'].includes(scope.row.shztmc) &&
                  scope.row.zt
                " @click="handleDetail(scope.row, 'edit')"></el-button>
            </el-tooltip>
            <!-- <el-tooltip
              class="item"
              effect="light"
              content="删除"
              placement="top"
              v-if="buttonNameList.indexOf('删除') > -1"
            >
              <el-button
                type="primary"
                size="small"
                v-if="
									['未报名', '待提交'].includes(
										scope.row.shztmc
									) && scope.row.zt
								"
                class="operate_delete_btn iconfont iconshanchu"
                @click="handleDelete(scope.row)"
              ></el-button>
            </el-tooltip>-->
            <el-tooltip class="item" effect="light" content="提交" placement="top" v-if="buttonNameList.indexOf('提交') > -1">
              <el-button type="primary" size="small" v-if="
                  ['91000007', '91000008'].includes(scope.row.shzt) &&
                  scope.row.zt
                " class="operate_show_btn iconfont icontijiao" @click="handleDetail(scope.row, 'submit')"></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 {
  selectTransactionSignUpPageList,
  deleteTransactionSignUp,
  batchSubmitTransactionSignUp,
  valiTurn,
} from "@/api/transaction/registrationFee/transactionSignup/index";
import { status1 } from "@/utils/statusList.js";
import { getParameter } from "@/utils/index";
import { authorityControl } from "@/api/menuList";
export default {
  // components: {},
  // name: 'userInfo',
  data() {
    return {
      isValid: true,
      status1: status1,
      ztOptions: [
        { name: "未报名", value: "1" },
        { name: "待提交", value: "91000001" },
        { name: "审核中", value: "91000002" },
        { name: "审核通过", value: "91000013" },
        { name: "审核不通过", value: "91000008" },
        { name: "确认已付款", value: "91000003" },
        { name: "未付款", value: "91000007" },
        { name: "已成交", value: "91000060" },
        { name: "未成交", value: "91000061" },
        { name: "成交退款", value: "91000055" },
        { name: "未成交退款", value: "91000058" },
        { name: "已过期", value: "91000079" },
      ],
      listLoading: false,
      formInline: {
        bmrq: [],
        apcc: null,
        bmrqStart: null,
        bmrqEnd: null,
        shzt: "",
      },
      pageForm: {
        page: 1,
        size: 10,
        total: 0,
      },
      tableData: [],
      dialogTableVisible: false,
      formDetail: {},
      multipleSelection: [],
      buttonNameList: [],
    };
  },
  created() {
    this.init();
    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.getList("start");
      });
    },
    getList(type) {
      let bmrq = this.formInline.bmrq;
      let bmrqStart = null;
      let bmrqEnd = null;
      if (Array.isArray(bmrq) && bmrq.length == 2) {
        bmrqStart = bmrq[0];
        bmrqEnd = bmrq[1];
      }
      let data = {
        pageNum: this.pageForm.page,
        pageSize: this.pageForm.size,
        pageType: 1,
        bmrqStart: bmrqStart,
        bmrqEnd: bmrqEnd,
        apcc: this.formInline.apcc,
        shzt: this.formInline.shzt,
      };
      if (type != "start") {
        //非初始化调用：查询、分页
        sessionStorage.setItem("searchData", JSON.stringify(data));
      } else {
        //初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
        if (JSON.parse(sessionStorage.getItem("searchData"))) {
          //详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
          let searchData = JSON.parse(sessionStorage.getItem("searchData"));
          this.formInline = getParameter(searchData, ["apcc", "shzt"]);
          this.formInline.bmrq =
            searchData.bmrqStart && searchData.bmrqEnd
              ? [searchData.bmrqStart, searchData.bmrqEnd]
              : "";
          this.pageForm.page = searchData.pageNum;
          this.pageForm.size = searchData.pageSize;
        } else {
          //第一次进去此菜单时，保存上方默认的data
          sessionStorage.setItem("searchData", JSON.stringify(data));
        }
      }
      selectTransactionSignUpPageList(
        JSON.parse(sessionStorage.getItem("searchData"))
      ).then((res) => {
        if (res.infoCode == 200) {
          this.tableData = res.data.items;
          this.pageForm.total = res.data.total;
          this.tableData.forEach((d) => {
            if (!d.shzt) {
              // console.log(d.shzt);
              d.shzt = "1";
              // console.log(d.shzt);
              d.shztmc = "未报名";
              // d.newztmxc = "未报名";
            }
            d.newztmxc = this.ztOptions.find((p) => p.value == d.shzt).name;

            d.jylxmc = ["采购", "销售"][d.jylx];
          });
        }
      });
    },
    resetInfo(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },
    handleClick() {
      this.$router.push({ name: "transactionSignupDetail" });
    },
    handleDetail(row, state) {
      if (["edit", "submit"].includes(state) && !this.isValid) {
        this.$message.warning("当前企业状态为违规, 不能进行报名!!");
        return;
      }
      this.$router.push({
        name: "transactionSignupDetail",
        query: { ccbm: row.ccbm, jybm: row.jybm, state: state },
      });
    },
    deleteTransactionSignUp(row) {
      deleteTransactionSignUp({ jybm: row.jybm }).then((res) => {
        if (res.infoCode == 200) {
          this.$message.success("删除成功!");
          this.getList();
        } else {
          this.$$message.error("删除失败!");
        }
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将删除该报名数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteTransactionSignUp(row);
        })
        .catch(() => { });
    },
    // isDisabled(row, index) {
    // 	if (row.shzt == status1.toBeSubmit.value) {
    // 		return 1
    // 	}
    // 	return 0
    // },
    // handleSelectionChange(val) {
    // 	this.multipleSelection = val
    // },
    submit() {
      let arr = [];
      if (this.multipleSelection.length) {
        this.multipleSelection.map((item) => {
          arr.push(item.jybm);
        });
        batchSubmitTransactionSignUp({
          jybmList: arr,
          shzt: status1.toBeReview.value,
          shztmc: status1.toBeReview.name,
        }).then((res) => {
          if (res.infoCode == 200) {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            this.getList();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      } else {
        this.$message({
          message: "请先选择",
          type: "warning",
        });
      }
    },
    handleSizeChange(val) {
      this.pageForm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageForm.page = val;
      this.getList();
    },
    init() {
      valiTurn().then((res) => {
        if (res.infoCode == 200) {
          this.isValid = res.data;
        }
      });
    },
  },
};
</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>
<style>
#nibansealpostion {
  position: relative;
}
#websignPlan {
  left: 100px !important;
  top: -100px !important;
}
</style>
