<!--保证金退款通知单(未履约)-->
<template>
  <div class="content-main">
    <div class="search-bm-boder">
      <el-row>
        <el-form
          :inline="true"
          :model="searchForm"
          ref="searchForm"
          class="demo-form-inline"
        >
          <el-row>
            <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="客户:" prop="cjfmc">
              <el-input
                v-model="searchForm.cjfmc"
                clearable
                placeholder="请输入客户名称"
                class="input-w-220"
              ></el-input>
            </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-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
                >
              </div>
            </el-form-item>
          </el-row>
          <el-row v-show="searchShowMoreBool">
            <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-row>
        </el-form>
      </el-row>
    </div>
    <el-row
      style="
        background: rgb(237, 245, 253);
        line-height: 50px;
        margin-bottom: 10px;
        padding-left: 10px;
      "
    >
      <el-button
        type="primary"
        @click="dialogVisible = true"
        size="small"
        class="iconfont iconxinzeng"
        >新增</el-button
      >
    </el-row>
    <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="htbh"
          label="合同号"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="cjfmc"
          label="客户名称"
          width="230"
          align="center"
          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="履约截止日期"
          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
          fixed="right"
          align="center"
          width="150"
          label="保证金通知单"
          class-name="control-btn"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="light"
              content="查看"
              placement="top"
              v-if="scope.row.zt != '92000100' && scope.row.zt != '92000200'"
            >
              <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 == '92000100' || scope.row.zt == '92000201'"
            >
              <el-button
                type="primary"
                size="small"
                class="iconfont iconshengchenghuizong operate_show_btn"
                @click="jumpPage(scope.row, 2)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="盖章"
              placement="top"
              v-if="scope.row.zt == '92000200' || scope.row.zt == '92000500'"
            >
              <el-button
                type="primary"
                size="small"
                class="iconfont icongaizhang operate_show_btn"
                @click="jumpPage(scope.row, 3)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="打印"
              placement="top"
              v-if="scope.row.zt != '92000100' && scope.row.zt != '92000201'"
            >
              <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="150"
          label="未履约说明函"
          class-name="control-btn"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="light"
              content="查看"
              placement="top"
              v-if="
                scope.row.refundLetterVO.zt != '92000100' &&
                scope.row.refundLetterVO.zt != '92000200'
              "
            >
              <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 == '92000100' ||
                scope.row.refundLetterVO.zt == '92000201'
              "
            >
              <el-button
                type="primary"
                size="small"
                class="iconfont iconshengchenghuizong operate_show_btn"
                @click="jumpPage2(scope.row, 2)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="盖章"
              placement="top"
              v-if="
                scope.row.refundLetterVO.zt == '92000200' ||
                scope.row.refundLetterVO.zt == '92000500'
              "
            >
              <el-button
                type="primary"
                size="small"
                class="iconfont icongaizhang operate_show_btn"
                @click="jumpPage2(scope.row, 3)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="打印"
              placement="top"
              v-if="
                scope.row.refundLetterVO.zt != '92000100' &&
                scope.row.refundLetterVO.zt != '92000201'
              "
            >
              <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="[10, 20, 30, 40]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      ></el-pagination>
    </el-row>
    <el-dialog
      title="选择合同"
      :visible.sync="dialogVisible"
      width="1400px"
      class="ht-dialog"
    >
      <el-form :model="contractForm" label-width="110px" ref="contractForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="合同号:">
              <el-input
                size="small"
                class="inputCla"
                style="width: 240px"
                v-model="contractForm.htbm"
                placeholder="请输入合同号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户名称:">
              <el-input
                size="small"
                class="inputCla"
                style="width: 240px"
                v-model="contractForm.cjfmc"
                placeholder="请输入客户名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成交日期:" class="rangeDate">
              <el-date-picker
                size="small"
                style="width: 240px"
                v-model="contractForm.cjtimeList"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="履约截至日期:" class="rangeDate">
              <el-date-picker
                size="small"
                style="width: 240px"
                v-model="contractForm.timeList"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="cascader_width">
            <el-form-item label="品种:">
              <el-cascader
                clearable
                class="inputCompatible"
                :options="pzOptions"
                :props="pzProps"
                :show-all-levels="false"
                v-model="contractForm.pzbm"
                placeholder="请选择"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="场次:">
              <el-input
                size="small"
                class="inputCla"
                style="width: 240px"
                v-model="contractForm.apcc"
                placeholder="请输入场次"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="dialog-btn">
          <el-button
            type="primary"
            @click="contractBtnSearch"
            size="small"
            class="iconfont iconchaxun"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="contractBtnReset"
            size="small"
            class="iconfont iconzhongzhi"
            >重置</el-button
          >
        </el-row>
        <el-row>
          <el-table
            :data="contractList"
            border
            stripe
            v-loading="contractPageInfo.loading"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <!--<el-table-column type="selection" label="全选" width="55" align="center"></el-table-column>-->
            <el-table-column label="" width="50" align="center">
              <template slot-scope="scope">
                <el-radio
                  v-model="currentFactor"
                  :label="scope.row"
                  @input="currentChange"
                  >{{ "" }}</el-radio
                >
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              align="center"
              width="60"
            ></el-table-column>
            <el-table-column
              prop="htbh"
              label="合同号"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="cjfmc"
              label="客户名称"
              width="240"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="apcc"
              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="cjrq"
              label="成交日期"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="lyjzrq"
              label="履约截止日期"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="pzmc"
              label="品种"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
          </el-table>
        </el-row>
        <el-row class="pagination-wrap">
          <el-pagination
            @size-change="contractHandleSizeChange"
            @current-change="contractHandleCurrentChange"
            :current-page="contractPageInfo.pageNum"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="contractPageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="contractPageInfo.total"
          ></el-pagination>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="iconfont iconbaocun"
          size="small"
          @click="addList"
          :disabled="!isSave"
          >选择</el-button
        >
        <el-button
          type="primary"
          class="iconfont iconfanhui"
          size="small"
          @click="dialogVisible = false"
          >返回</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRefundNotice,
  getContractPage,
  addRefundNotice,
  addRefundLetter,
  getVarietyList,
} from "@/api/transaction/refundDeposit";
import { getParameter } from "@/utils/index";
import { authorityControl } from "@/api/menuList";
export default {
  name: "nonPerformanceLetter",
  data() {
    return {
      pzProps: {
        label: "dictName",
        value: "dictCode",
        children: "subDataDictionarys",
        // checkStrictly: true,
        emitPath: false,
      },
      pzOptions: [], // 品种列表
      searchForm: {
        htbm: "",
        cjfmc: "",
        pzbm: "",
        htlx: "",
      },
      options: [
        {
          value: "0",
          label: "采购",
        },
        {
          value: "1",
          label: "销售",
        },
      ],
      tableData: [],
      pageInfo: {
        loading: true,
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      buttonNameList: [],
      dialogVisible: false,
      contractForm: {
        htbm: "",
        cjfmc: "",
        cjtimeList: [],
        timeList: [],
        pzbm: "",
        apcc: "",
      },
      contractList: [],
      contractPageInfo: {
        loading: true,
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
      currentFactor: {}, //选择合同信息
      isSave: false,
      searchShowMoreBool: false,
    };
  },
  created() {
    this.getVarieties();
    this.getresourceCode();
    this.getContractList();
  },
  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 = {
        htbm: "",
        cjfmc: "",
        pzbm: "",
        htlx: "",
      }),
        this.btnSearch();
    },
    async addList() {
      let data = {
        htbm: this.currentFactor.htbm,
        lylx: 1,
		lhxybh:this.currentFactor.lhxybh
      };
      await addRefundNotice(data)
        .then((res) => {})
        .catch((err) => {
          console.log(err);
        });
      await addRefundLetter(data)
        .then((res) => {
          if (res.infoCode == 200) {
            this.$message.success("添加成功");
            this.dialogVisible = false;
            this.getList();
          }
        })
        .catch();
    },
    // 通知单
    jumpPage(row, type) {
      this.$router.push({
        name: "nonPerformanceNoticeDetail",
        query: {
          data: JSON.stringify(row),
          type: type,
          tzzw: row.tzzw || "",
          gz: row.gz || "",
          lysl: row.lysl || "",
        },
      });
    },
    // 说明函详情
    jumpPage2(row, type) {
      this.$router.push({
        name: "nonPerformanceLetterDetail",
        query: {
          data: JSON.stringify(row),
          type: type,
          tzzw: row.refundLetterVO.tzzw || "",
          gz: row.refundLetterVO.gz || "",
          lysl: row.lysl || "",
        },
      });
    },
    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,
          htbm: self.searchForm.htbm,
          cjfmc: self.searchForm.cjfmc,
          pzbm: self.searchForm.pzbm,
          htlx: self.searchForm.htlx,
          lylx: 1,
          type: 1,
        };
      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, [
            "htbm",
            "cjfmc",
            "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 || "获取品种列表失败");
    },
    // 获取合同列表
    getContractList() {
      let self = this,
        data = {
          pageNum: self.contractPageInfo.pageNum,
          pageSize: self.contractPageInfo.pageSize,
          htbm: self.contractForm.htbm,
          cjfmc: self.contractForm.cjfmc,
          pzbm: self.contractForm.pzbm,
          apcc: self.contractForm.apcc,
        };
      if (self.contractForm.cjtimeList && self.contractForm.cjtimeList.length) {
        data.cjkssj = self.contractForm.cjtimeList[0];
        data.cjjssj = self.contractForm.cjtimeList[1];
      } else {
        data.cjkssj = null;
        data.cjjssj = null;
      }
      if (self.contractForm.timeList && self.contractForm.timeList.length) {
        data.kssj = self.contractForm.timeList[0];
        data.jssj = self.contractForm.timeList[1];
      } else {
        data.kssj = null;
        data.jssj = null;
      }
      self.contractPageInfo.loading = true;
      this.isSave = false;
      this.currentFactor = {};
      getContractPage(data).then(actionMethod).catch(actionMethod);

      function actionMethod(res) {
        self.contractPageInfo.loading = false;
        if (res && res.infoCode === 200) {
          self.contractList = res.data.items;
          self.contractPageInfo.total = res.data.total;
        }
      }
    },
    contractBtnSearch() {
      this.contractPageInfo.pageNum = 1;
      this.getContractList();
    },
    contractBtnReset() {
      (this.contractForm = {
        htbm: "",
        cjfmc: "",
        cjtimeList: [],
        timeList: [],
        pzbm: "",
        apcc: "",
      }),
        this.contractBtnSearch();
    },
    contractHandleSizeChange(val) {
      this.contractPageInfo.pageNum = 1;
      this.contractPageInfo.pageSize = val;
      this.getContractList();
    },
    contractHandleCurrentChange(val) {
      this.contractPageInfo.pageNum = val;
      this.getContractList();
    },
    currentChange(val) {
      this.isSave = true;
    },
  },
};
</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 102px 15px 0;
  }
}
/deep/ .cascader_width {
  .el-cascader .el-input .el-input__inner:focus,
  .el-cascader .el-input__inner {
    height: 32px !important;
    width: 240px !important;
  }
  .el-input__suffix {
    right: -62px;
  }
}
</style>
