<template>


  <div style="width: 700px">
    <br/>
    <br/>
    <el-form ref="form" :model="form" size="small" label-width="300px">
      <el-form-item label="日期:" prop="statDate">
        <el-date-picker
          style="width: 400px"
          v-model="uploadDate"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          range-separator="-"
          placeholder="请输入日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="达人ID:" prop="promoterId">
        <el-input v-model="form.promoterId" placeholder="请输入达人ID" @change="changeShowPromoterName"/>
      </el-form-item>
      <el-form-item label="达人名称:" prop="promoterId">
        <template>
          <el-input v-model="promoterName"/>
        </template>
      </el-form-item>
      <el-form-item label="商品id:" prop="itemId">
        <el-input v-model="form.itemId" placeholder="请输入商品id" @change="changeShowItemName"/>
      </el-form-item>
      <el-form-item label="商品名称:" prop="itemName">
        <template>
          <el-input v-model="itemName"/>
        </template>
      </el-form-item>
      <el-form-item label="本次结算单量:" prop="currentSettlementNum">
        <el-input v-model="form.currentSettlementNum" placeholder="请输入本次结算单量" @change="getTotalSettlementNum"/>
      </el-form-item>
      <el-form-item label="累计单量:" prop="totalSettlementNum">
        <template>
          <el-input v-model="totalSettlementNum"/>
        </template>
      </el-form-item>
      <el-form-item label="结算单价:" prop="settlementPrice">
        <el-input v-model="form.settlementPrice" placeholder="请输入结算单价" @change="getAnchorAmount"/>
      </el-form-item>
      <el-form-item label="主播金额:" prop="anchorAmount">
        <!--        <el-input v-model="anchorAmount" placeholder="请输入主播奖励金额" @change="getTotalAmount"/>-->

        <template>
          <el-input v-model="anchorAmount"/>
        </template>

      </el-form-item>
      <el-form-item label="推荐人金额:" prop="referenceAmount">
        <el-input v-model="form.referenceAmount" placeholder="请输入推荐人奖励金额" @change="getTotalAmount"/>
      </el-form-item>
      <el-form-item label="累计结算金额:" prop="totalAmount">
        <template>
          <el-input v-model="totalAmount"/>
        </template>
      </el-form-item>

      <el-form-item label="备注:" prop="remarks">
        <template slot-scope="scope">
          <el-input
            type="textarea"
            v-model="form.remarks"
          >
          </el-input>
        </template>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm" :loading="confirmLoading">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-form-item>

    </el-form>
  </div>

</template>
<script>
import {
  addInfo,
  getItemName,
  getPromoterName, getTotalAmount,
  getTotalSettlementNum,
  updateInfo
} from "@/api/goodsManagement/financeData";

export default {
  name: "AddFinanceData",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      anchorAmount: null,
      confirmLoading: false,
      totalSettlementNum: null,
      itemName: null,
      promoterName: null,
      totalAmount: null,
      uploadDate: new Date(),
      showSearch: true,
      form: {},
      // 表单校验
      rules: {}
    }
  },
  created() {

    this.userId = this.$store.getters.userId;
    let start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
    let date = new Date(start);
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? "0" + MM : MM;
    let dd = date.getDate();
    dd = dd < 10 ? "0" + dd : dd;
    this.uploadDate = `${y}-${MM}-${dd}`;

    if (this.$route.query.promoterId) {
      this.form.promoterId = this.$route.query.promoterId
      this.changeShowPromoterName();
    }
    if (this.$route.query.itemId) {
      this.form.itemId = this.$route.query.itemId
      this.changeShowItemName();
    }

  },

  methods: {
    changeShowItemName() {
      getItemName(
        {itemId: this.form.itemId}
      ).then(response => {
        this.itemName = response;
        console.log(this.itemName)
      });


    },
    changeShowPromoterName() {
      getPromoterName(
        {promoterId: this.form.promoterId}
      ).then(response => {
        this.promoterName = response;
        console.log(this.itemName)
      });
    },

    getTotalSettlementNum() {
      getTotalSettlementNum(
        {
          promoterId: this.form.promoterId,
          itemId: this.form.itemId,
          currentSettlementNum: this.form.currentSettlementNum
        }
      ).then(response => {
        this.totalSettlementNum = response;
      });
    },

    getAnchorAmount() {
      const result = this.form.currentSettlementNum * this.form.settlementPrice
      this.anchorAmount = parseFloat(result.toFixed(2));
      this.getTotalAmount();
    },


    getTotalAmount() {
      getTotalAmount(
        {
          promoterId: this.form.promoterId,
          itemId: this.form.itemId,
          currentSettlementNum: this.form.currentSettlementNum,
          anchorAmount: this.anchorAmount,
          referenceAmount: this.form.referenceAmount,
        }
      ).then(response => {
        this.totalAmount = response;
      });
    },
    submitForm() {
      this.confirmLoading = true;
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.statDate = this.uploadDate;
          this.form.itemName = this.itemName
          this.form.promoterName = this.promoterName
          this.form.totalAmount = this.totalAmount
          this.form.totalSettlementNum = this.totalSettlementNum
          addInfo(this.form).then(response => {
            this.confirmLoading = false;
            const obj = {
              path: "/goodsManagement/FinanceData",
            };
            localStorage.removeItem("AddFinanceData");
            this.$tab.closeOpenPage(obj);
            this.$modal.msgSuccess("新增成功");
          }).catch((err) => {
            this.confirmLoading = false;
          });

        }
      });
    },
    cancel() {
      this.reset();
      const obj = {
        path: "/goodsManagement/FinanceData",
      };
      localStorage.removeItem("AddFinanceData");
      this.$tab.closeOpenPage(obj);
    },
    reset() {
      this.form = {
        id: null,
        itemId: null,
        itemTitle: null,
        promoterId: null,
        promoterName: null,
        itemCreateId: null,
        itemCreateName: null,
        promoterCreateId: null,
        promoterCreateName: null,
        statDate: null,
        currentSettlementNum: null,
        totalSettlementNum: null,
        settlementPrice: null,
        anchorAmount: null,
        referenceAmount: null,
        totalAmount: null,
        remarks: null,
        createTime: null,
        updateTime: null
      };
      this.itemName = null;
      this.promoterName = null;
      this.totalSettlementNum = null;
      this.totalAmount = null;
      this.resetForm("form");
    },

  }
};

</script>



