<template>
  <div class="app-container">
    <el-card class="box-card" style="padding: 20px 10px; margin-bottom: 20px">
      <div class="contract">
        <div>
          <p>合同名称</p>
          <el-input
            v-model="form.name"
            placeholder="请输入合同名称"
            style="width: 500px"
            clearable
            @input="getContractNo"
          />
        </div>
        <div>
          <p>合同编号</p>
          <el-input
            v-model="form.contractNo"
            placeholder="请输入合同编号"
            style="width: 500px"
            disabled
          />
        </div>
      </div>
      <!-- 合同附件图片 -->
      <div class="titlesa">
        <span>合同附件</span>
        <span style="color: #d05c39">*支持上传pdf、jpg/jpeg、png格式</span>
      </div>
      <div>
        <div>
          <el-upload
            action="https://ht.9026.com/api/File"
            list-type="picture-card"
            :on-success="handlepics"
          >
            <i class="el-icon-plus" />
          </el-upload>

          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="form.pics" />
          </el-dialog>
        </div>
      </div>
      <!-- 发票附件图片 -->
      <div class="titlesa">
        <span>发票附件</span>
        <span style="color: #d05c39">*支持上传pdf、jpg/jpeg、png格式</span>
      </div>
      <div>
        <el-upload
          action="https://ht.9026.com/api/File"
          list-type="picture-card"
          :on-success="handleinvoicePics"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="form.invoicePics" />
        </el-dialog>
      </div>
      <!-- 贸易附件图片 -->
      <div class="titlesa">
        <span>贸易合同</span>
        <span style="color: #d05c39">*支持上传pdf、jpg/jpeg、png格式</span>
      </div>
      <div>
        <el-upload
          action="https://ht.9026.com/api/File"
          list-type="picture-card"
          :on-success="handletradePics"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="form.tradePics" />
        </el-dialog>
      </div>
    </el-card>

    <!-- 汇票模块 -->
    <div
      v-for="(item, index) in form.contractDrafts"
      :key="item.id"
      class="form"
	  style="margin: 20px;border: 1px solid #c0c0c0;padding: 10px;border-radius: 10px;"
    >

      

      <!-- 汇票名称 -->
      <el-form ref="form" :model="item" label-width="90px">

        <el-form-item label="汇票名称">
          <el-input
            v-model="item.name"
            class="ipwidth"
            placeholder="请填写汇票名称"
            style="width: 220px"
          />
        </el-form-item>
        <!-- 预计贴现日 -->
        <el-form-item label="预计贴现日">
          <el-date-picker
            v-model="item.expectDiscountDate"
            type="date"
            placeholder="选择日期"
            @change="
              changeE;
              xpectDiscountDate($event, index);
            "
          />
        </el-form-item>
        <!-- 出票日期 -->
        <el-form-item label="出票日期">
          <el-date-picker
            v-model="item.acceptDate"
            type="date"
            placeholder="选择日期"
            class="ipwidth"
          />
        </el-form-item>
        <!-- 承兑日期 -->
        <el-form-item label="承兑日期">
          <el-date-picker
            v-model="item.issueDate"
            type="date"
            placeholder="选择日期"
           default-value
            @change="change(index,1)"
          />
        </el-form-item>
        <!-- 到期日期 -->
        <el-form-item label="到期日期">
          <el-date-picker
            v-model="item.expireDate"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
      </el-form>
      <!-- 汇票号码 -->
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="汇票号码">
          <el-input
            v-model="item.draftNo"
            class="ipwidth"
            placeholder="请填写汇票号码"
            style="width: 220px"
          />
        </el-form-item>

        <!-- 金额 -->
        <el-form-item label="金额">
          <el-input
            v-model="item.money"
            class="ipwidth"
            placeholder="请填写金额"
            style="width: 220px"
            @input="getMoney" @blur="getMoneyIndex(index)"
          />
        </el-form-item>
        <!-- 服务费 -->
        <el-form-item label="服务费">
          <el-input
            v-model="item.serviceMoney"
            class="ipwidth"
            placeholder="计算得出服务费"
            style="width: 220px"
          />
        </el-form-item>
        <!-- 最高贷款额度 -->
        <el-form-item label="最高贷款额度">
          <el-input
            v-model="item.loanLimit"
            class="ipwidth"
            placeholder="计算得出最高贷款额度"
            style="width: 220px"
          />
        </el-form-item>

		<!-- <el-form-item label="金额">
		  <el-input
		    v-model="item.money"
		    class="ipwidth"
		    placeholder="请填写金额"
		    style="width: 220px"
		    @change="computed"
		  />
		</el-form-item> -->

        <el-form-item label="利息">
          <el-input
            v-model="item.interest"
            class="ipwidth"
            placeholder="计算得出利息"
            style="width: 220px"
          />
        </el-form-item>
      </el-form>
      <!-- 出票人 -->
      <el-form ref="form" :model="form" label-width="90px">
        <el-form-item label="出票人">
          <el-select v-model="form.drawersName" placeholder="请选择出票人">
            <el-option
              label="新增出票人"
              value=""
              style="color: darkorange"
              @click.native="addDrawer"
            />
            <el-option
              v-for="item in drawersName"
              :label="item"
              :value="item"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <!-- 承兑人 -->
        <el-form-item label="承兑人">
          <el-select v-model="form.acceptorName" placeholder="请选择承兑人">
            <el-option
              v-for="val in acceptorName"
              :label="val"
              :value="val"
              @click.native="getRate"
            />
          </el-select>
        </el-form-item>
		

<!--              @click.native="getRate(index)"
              :key="val.id"
            />
          </el-select>
        </el-form-item> -->
        <!-- 服务费率 -->

        <el-form-item label="服务费率">
          <el-input
            v-model="item.serviceRate"
            class="ipwidth"
            placeholder="服务费率"
            style="width: 220px"
            @input="inputServiceRate($event, index)"
          />
        </el-form-item>
        <!-- 利率 -->
        <el-form-item label="利率">
          <el-input
            v-model="item.interestRate"
            class="ipwidth"
            placeholder="利率"
            style="width: 220px"
            @input="inputInterestRate($event, index)"
          />
        </el-form-item>
      </el-form>
      <!-- 汇票附件上传 -->
      <div>
        <el-row>
          <el-col style="margin: 0 auto">
            <div class="titlesa">
              <span>附件</span>
              <span style="color: #d05c39"
                >*支持上传pdf、jpg/jpeg、png格式</span
              >
            </div>
            <div>
              <el-upload
                action="https://ht.9026.com/api/File"
                list-type="picture-card"
                :on-success="handlepicUrls"
              >
                <i class="el-icon-plus" />
              </el-upload>

              <el-dialog :visible.sync="dialogVisible">
                <img
                  width="100%"
                  :src="form.contractDrafts[0].picUrls"
                  alt=""
                />
              </el-dialog>
            </div>
          </el-col>
        </el-row>

        <!-- 删除汇票 -->
        <el-button
          type="primary"
          style="width: 100px; height: 50px; margin-top: 50px"
          @click="deletedraft(index)"
          >删除汇票</el-button
        >
      </div>
    </div>
    <!-- 新增汇票 -->
    <div class="commit">
      <div class="addnew">
        <el-button type="primary" @click="adddraft">新增汇票</el-button>
      </div>
      <div class="addall">
        <el-button
          type="warning"
          style="width: 180px; height: 45px; font-size: 16px"
          @click="onSubmit"
          >确认上传
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      disabled: false,
      drawersList: [],
      acceptorList: [],
      contractList: [],
      filesArray: [], // 汇票图片上传数组
      picsArray: [], // 合同图片上传数组
      invoicePicsArray: [], // 发票图片上传数组
      tradePicsArray: [], // 贸易图片上传数组
      file: "",
      form: {
        // 承兑人列表
        acceptorName: [],
        // 出票人列表
        drawersName: [],
        contractNo: "",
        supplierId: 2,
        name: "",
        invoicePics: [],
        pics: [],
        tradePics: [],
        /* 汇票的数据 */
        contractDrafts: [
          {
            name: "",
            draftNo: "",
            acceptorId: "",
            drawersId: "",
            money: "",
            acceptDate: "",
            loanLimit: "",
            serviceRate: "",
            serviceMoney: "",
            interestRate: "",
            interest: "",
            picUrls: [],
            expectDiscountDate: "",
            issueDate: "",
            expireDate: "",
            limitTime: "",
          },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },

  mounted() {
    this.$request({
      url: "/api/Contract/search",
      method: "post",
      data: {
        pageIndex: 1,
        pageSize: 100,
      },
    }).then((res) => {
      this.contractList = res.data.result;
    });
    this.$request({
      url: "/api/Acceptor/search",
      method: "post",
      data: {
        pageIndex: 1,
        pageSize: 100,
      },
    }).then((res) => {
      this.acceptorList = res.data.result;
      this.acceptorName = Array.from(this.acceptorList, ({ name }) => name);
    });
    this.$request({
      url: "/api/Drawer/search",
      method: "post",
      data: {
        pageIndex: 1,
        pageSize: 100,
      },
    }).then((res) => {
      this.drawersList = res.data.result;
      this.drawersName = Array.from(this.drawersList, ({ name }) => name);
      // 去除重复的出票人
      for (var i = 0; i < this.drawersName.length; i++) {
        // 首次遍历数组
        for (var j = i + 1; j < this.drawersName.length; j++) {
          // 再次遍历数组
          if (this.drawersName[i] === this.drawersName[j]) {
            // 判断连个值是否相等
            this.drawersName.splice(j, 1); // 相等删除后者
            j--;
          }
        }
      }
    });
  },
  methods: {
    /* 确实上传按钮 */
    onSubmit() {
      this.$request({
        url: "/api/Contract",
        method: "post",
        data: this.form,
      }).then((res) => {
        console.log(res);
        this.$message({
          message: "上传成功",
          type: "success",
        });
      });
    },
    /* 合同附件上传 */
    handlepics(res) {
      // 解构
      const { file } = res.data;
      this.picsArray.push(file);
      this.form.pics = this.picsArray;
    },
    /* 发票附件上传 */
    handleinvoicePics(res) {
      const { file } = res.data;
      this.invoicePicsArray.push(file);
      this.form.invoicePics = this.invoicePicsArray;
    },
    /* 贸易附件上传 */
    handletradePics(res) {
      const { file } = res.data;
      this.tradePicsArray.push(file);
      this.form.tradePics = this.tradePicsArray;
    },

    /* 上传图片到浏览器成功回调 */

    handlepicUrls(res) {
      // 解构
      const { file } = res.data;
      this.filesArray.push(file);
      this.form.contractDrafts[0].picUrls = this.filesArray;
    },
    getContractNo() {
      const temporaryList = this.contractList.filter(
        (item) => item.name === this.form.name
      );
      if (this.form.name === "" || temporaryList === "") {
        this.form.contractNo = "";
      } else {
        this.form.contractNo = temporaryList[0].contractNo;
      }
    },

    /* 获取服务率和利率 */
    getRate(index) {
      const list = this.acceptorList.filter(
        (item) => item.name === this.form.acceptorName
      );
      this.form.contractDrafts[index].interestRate = list[index].interest;
      this.form.contractDrafts[index].serviceRate = list[index].serviceRate;
    },
    addDrawer() {
      this.$router.push({
        path: "/form/addTicketdrawer",
      });
    },
    // 新增汇票
    adddraft() {
      this.form.contractDrafts.push({
        name: "",
        draftNo: "",
        acceptorId: "",
        drawersId: "",
        money: "",
        acceptDate: "",
        loanLimit: "",
        serviceRate: "",
        serviceMoney: "",
        interestRate: "",
        interest: "",
        picUrls: [],
        expectDiscountDate: "",
        issueDate: "",
        expireDate: "",
        limitTime: "",
      });
    },
    // 删除汇票
    deletedraft(index) {
      const contractDraftsLength = this.form.contractDrafts.length;
      if (contractDraftsLength > 1) {
        this.form.contractDrafts.splice(index, 1);
      } else {
        this.$message.error("至少一个");
      }
    },
    // 服务费率
    inputServiceRate(val, index) {
      console.log(val, index);
    },
    // 利率
    inputInterestRate(val, index) {
      console.log(val, index);
    },
    // 预计贴现日
    changeExpectDiscountDate(val, index) {
      console.log(val, index);
    },
    // 承兑日期
    changeIssueDate(val, index) {
      console.log(val, index);
    },

    /* 汇票的索引 */
    getMoneyIndex(index){
     this.myindex = index
    },
    change(index,number){
      console.log(index);
    },
    /* 获取金额 */
    getMoney(event,index) {
      this.form.contractDrafts[this.myindex].money = event
				this.getloanLimt(this.myindex)
				this.getSerMoney(this.myindex)
				this.getInterMoney(this.myindex)
    },

    /* 计算最高贷款额度 */
   getloanLimt(i) {
				if (this.form.contractDrafts[i].money && this.form.contractDrafts[i].serviceRate && this.form
					.contractDrafts[i].interestRate) {
					this.form.contractDrafts[i].loanLimit = ((this.form.contractDrafts[i].money / (this.form
							.contractDrafts[
								i].serviceRate + this.form.contractDrafts[i].interestRate) * this.form
						.contractDrafts[i]
						.limitTime / 360) + 1).toFixed(2)
				}
			},
        /* 计算服务费 */
			getSerMoney(i) {
				if (this.form.contractDrafts[i].money && this.form.contractDrafts[i].serviceRate && this.form
					.contractDrafts[i].interestRate) {
					this.form.contractDrafts[i].serviceMoney = (((this.form.contractDrafts[i].money / (this.form
								.contractDrafts[i].serviceRate + this.form.contractDrafts[i].interestRate) * this
							.form
							.contractDrafts[i].limitTime / 360) + 1) * this.form.contractDrafts[i].serviceRate * this
						.form.contractDrafts[i].limitTime / 360).toFixed(2)
				}
			},
        /*利息*/
			getInterMoney(i) {
				if (this.form.contractDrafts[i].money && this.form.contractDrafts[i].serviceRate && this.form
					.contractDrafts[i].interestRate) {
					this.form.contractDrafts[i].interest = (((this.form.contractDrafts[i].money / (this.form
								.contractDrafts[
									i].serviceRate + this.form.contractDrafts[i].interestRate) * this.form
							.contractDrafts[
								i].limitTime / 360) + 1) * this.form.contractDrafts[i].interestRate * this.form
						.contractDrafts[i].limitTime / 360).toFixed(2)
				}

			},
  },
};
</script>

<style lang="scss">
.contract {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.form {
  display: flex;
  justify-content: space-around;
}

.addnew {
  display: flex;
  justify-content: flex-end;
}

.addall {
  display: flex;
  justify-content: center;
}

.commit {
  margin: 20px 0;
}
</style>
