<!--接收通知单(部分履约)-->
<template>
  <div class="content-main">
    <el-form :inline="true" :model="searchForm" class="search-bm-boder">
      <el-row>
        <el-form-item label="委托单位:" prop="wtfmc">
          <el-input
            v-model="searchForm.wtfmc"
            clearable
            placeholder="请输入委托单位"
            class="input-w-220"
          ></el-input>
        </el-form-item>
        <el-form-item label="合同号:" prop="htbm">
          <el-input
            v-model="searchForm.htbm"
            clearable
            placeholder="请输入合同号"
            class="input-w-220"
          ></el-input>
        </el-form-item>
        <el-form-item label="品种:">
          <el-cascader
            clearable
            class="inputCompatible"
            :options="pzOptions"
            :props="pzProps"
            :show-all-levels="false"
            v-model="searchForm.pzbm"
            placeholder="请选择"
          ></el-cascader>
        </el-form-item>

        <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"
              @click="btnSearch"
              size="small"
              class="iconfont iconchaxun"
              >查询</el-button
            >
            <el-button
              type="primary"
              @click="btnReset"
              size="small"
              class="iconfont iconzhongzhi"
              >重置</el-button
            >
            <!-- <el-button type="primary" @click="biaodi" size="small" class="iconfont iconzhongzhi"> 分解标的</el-button> -->
          </div>
        </el-form-item>
      </el-row>
      <el-row v-show="searchShowMoreBool">
        <el-form-item label="履约截止日期:" class="rangeDate">
          <el-date-picker
            size=""
            style="width: 250px"
            v-model="searchForm.timeList"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="类型:" prop="htlx">
          <el-select
            v-model="searchForm.htlx"
            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-row>
    </el-form>
    <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="wtfmc"
          label="委托单位"
          align="center"
          width="230"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="htbh"
          label="合同号"
          align="center"
          width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="htlx"
          label="类型"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ ["采购", "销售"][scope.row.htlx] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lyjzrq"
          label="履约截止日期"
          width="120"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="pzmc"
          label="品种"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="cjsl"
          label="合同数量(吨)"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              String(scope.row.cjsl).indexOf(".") > -1
                ? Number(scope.row.cjsl).toFixed(3)
                : scope.row.cjsl
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="lysl"
          label="履约数量(吨)"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              String(scope.row.lysl).indexOf(".") > -1
                ? Number(scope.row.lysl).toFixed(3)
                : scope.row.lysl
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="wysl"
          label="违约数量(吨)"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.wysl">
              {{
                String(scope.row.wysl).indexOf(".") > -1
                  ? Number(scope.row.wysl).toFixed(3)
                  : scope.row.wysl
              }}
            </span>
            <span v-else>
              {{
                String(scope.row.cjsl - scope.row.lysl).indexOf(".") > -1
                  ? Number(scope.row.cjsl - scope.row.lysl).toFixed(3)
                  : scope.row.cjsl - scope.row.lysl
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          width="140"
          label="保证金通知"
          class-name="control-btn"
        >
          <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, 1)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="接收"
              placement="top"
              v-if="scope.row.zt == '92000300'"
            >
              <el-button
                type="primary"
                size="small"
                class="iconfont iconjieshou operate_show_btn"
                @click="jumpPage(scope.row, 2)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="打印"
              placement="top"
            >
              <el-button
                type="primary"
                size="small"
                class="iconfont icondaochu11 operate_show_btn"
                @click="jumpPage(scope.row, 4)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          width="140"
          label="未履约说明"
          class-name="control-btn"
        >
          <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="jumpPage2(scope.row, 1)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="接收"
              placement="top"
              v-if="scope.row.refundLetterVO.zt == '92000300'"
            >
              <el-button
                type="primary"
                size="small"
                class="iconfont iconjieshou operate_show_btn"
                @click="jumpPage2(scope.row, 2)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="打印"
              placement="top"
            >
              <el-button
                type="primary"
                size="small"
                class="iconfont icondaochu11 operate_show_btn"
                @click="jumpPage2(scope.row, 4)"
              ></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.pageNum"
        :page-sizes="[5, 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 {
  getRefundNotice,
  getVarietyList,
} from "@/api/transaction/refundDeposit";
import { getParameter } from "@/utils/index";
import { authorityControl } from "@/api/menuList";
export default {
  name: "PartialPerformance",
  data() {
    return {
      pzProps: {
        label: "dictName",
        value: "dictCode",
        children: "subDataDictionarys",
        // checkStrictly: true,
        emitPath: false,
      },
      pzOptions: [], // 品种列表
      searchForm: {
        wtfmc: "",
        htbm: "",
        timeList: [],
        pzbm: "",
        htlx: "",
      },
      options: [
        {
          value: "0",
          label: "采购",
        },
        {
          value: "1",
          label: "销售",
        },
      ],
      searchShowMoreBool: false,
      tableData: [],
      pageInfo: {
        loading: true,
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      buttonNameList: [],
    };
  },
  created() {
    this.getVarieties();
    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");
      });
    },
    btnSearch() {
      this.pageInfo.pageNum = 1;
      this.renderPage();
    },
    renderPage() {
      this.getList();
    },
    btnReset() {
      (this.searchForm = {
        wtfmc: "",
        htbm: "",
        timeList: [],
        pzbm: "",
        htlx: "",
      }),
        this.btnSearch();
    },
    // type : 1查看  2接收  4打印
    jumpPage(row, type) {
      this.$router.push({
        name: "FullPerformanceDetail",
        query: {
          data: JSON.stringify(row),
          type: type,
          tzzw: row.tzzw || "",
          gz: row.gz || "",
        },
      });
    },
    jumpPage2(row, type) {
      this.$router.push({
        name: "PartialPerformanceDetail",
        query: {
          data: JSON.stringify(row),
          type: type,
          tzzw: row.refundLetterVO.tzzw || "",
          gz: row.refundLetterVO.gz || "",
        },
      });
    },
    handleSizeChange(val) {
      this.pageInfo.pageNum = 1;
      this.pageInfo.pageSize = val;
      this.renderPage();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.renderPage();
    },
    getList(type) {
      let self = this,
        data = {
          pageNum: self.pageInfo.pageNum,
          pageSize: self.pageInfo.pageSize,
          wtfmc: self.searchForm.wtfmc,
          htbm: self.searchForm.htbm,
          timeList: self.searchForm.timeList,
          pzbm: self.searchForm.pzbm,
          htlx: self.searchForm.htlx,
          lylx: 1,
          type: 2,
        };
      if (self.searchForm.timeList && self.searchForm.timeList.length) {
        data.kssj = self.searchForm.timeList[0];
        data.jssj = self.searchForm.timeList[1];
      } else {
        data.kssj = null;
        data.jssj = null;
      }
      self.pageInfo.loading = true;
      if (type != "start") {
        //非初始化调用：查询、分页
        sessionStorage.setItem("searchData", JSON.stringify(data));
      } else {
        //初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
        if (JSON.parse(sessionStorage.getItem("searchData"))) {
          //详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
          let searchData = JSON.parse(sessionStorage.getItem("searchData"));
          this.searchForm = getParameter(searchData, [
            "wtfmc",
            "htbm",
            "timeList",
            "pzbm",
            "htlx",
          ]);
          this.pageInfo = getParameter(searchData, ["pageNum", "pageSize"]);
        } else {
          //第一次进去此菜单时，保存上方默认的data
          sessionStorage.setItem("searchData", JSON.stringify(data));
        }
      }
      getRefundNotice(JSON.parse(sessionStorage.getItem("searchData")))
        .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;
        }
      }
    },
    async getVarieties() {
      let res = await getVarietyList();
      if (res.infoCode === 200) {
        this.pzOptions = res.data;
        return;
      }
      this.$message.error(res.msg || "获取品种列表失败");
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.input-w-220 {
  width: 100%;
}
/deep/ .control-btn {
  .cell {
    display: flex;
    justify-content: center;
  }
}
/deep/ .ht-dialog {
  .el-form-item {
    margin-bottom: 10px;
  }
  .dialog-btn {
    display: flex;
    justify-content: right;
    padding: 0 0 15px;
  }
}
</style>
