<template>
  <div class="sys-box">
    <div class="sys-operate">
      <el-button type="primary" @click="back" >{{config.cancelText}}</el-button>

    </div>
      <div class="sys-form">
        <el-form
        label-width="120px"
        :inline-message=true
        :model="formData1"
        ref="form"
        >
        <div class="flex process-box">
          <el-form-item label="客户名称" prop="clientName" class="form-inline">
            <el-input v-model="formData1.clientName" readonly ></el-input>
          </el-form-item>
          <el-form-item label="销售员" prop="salesPersonName" class="form-inline">
            <el-input v-model="formData1.salesPersonName" readonly></el-input>
          </el-form-item>
          <el-form-item label="销售部门" prop="salesPersonDeptName" class="form-inline">
            <el-input v-model="formData1.salesPersonDeptName" readonly></el-input>
          </el-form-item>
        </div>
        <div class="flex process-box">
          <el-form-item label="合同类型" prop="contractTypeName" class="form-inline">
            <el-input v-model="formData1.contractTypeName" readonly></el-input>
          </el-form-item>
          <el-form-item label="合同日期" prop="contractDate" class="form-inline">
            <el-input v-model="formData1.contractDate" readonly></el-input>
          </el-form-item>
          <el-form-item label="合同有效期" class="form-inline">
            <el-input v-model="formData1.contractExpireDate" readonly></el-input>
          </el-form-item>
        </div>
        <div class="flex process-box">
          <el-form-item label="合同编号" prop="contractCode" class="form-inline">
            <el-input v-model="formData1.contractCode" readonly></el-input>
          </el-form-item>
        </div>

        <el-form-item class="childlist">
          <el-table border
          show-summary
          :header-cell-style="{ fontWeight: 'normal', textAlign: 'center', backgroundColor: '#eceff4', color: '#222'}"
          :data="tableData1"
          >
        <el-table-column prop="serialNo" align="center" label="物料代码" show-overflow-tooltip ></el-table-column>
        <el-table-column prop="name" align="center" label="物料名称" show-overflow-tooltip ></el-table-column>
        <el-table-column prop="specification" align="center" label="规格型号" show-overflow-tooltip >
        </el-table-column>
        <el-table-column prop="unitUomName" align="center" label="单位" show-overflow-tooltip >
        </el-table-column>
        <el-table-column prop="countBefore" width="120" align="center" label="销售数量(变更前)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="countAfter" width="120" align="center" label="销售数量(变更后)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="taxAmountBefore" width="120" align="center" label="销售金额/元(变更前)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="taxAmountAfter" width="120" align="center" label="销售金额/元(变更后)" show-overflow-tooltip>
        </el-table-column>
          </el-table>
        </el-form-item>
          <div class="flex process-box1">
            <el-form-item label="优惠折扣率（变更前）"  class="form-inline">
              <!-- <el-input-number v-model="formData.discountRate"  :min="0" :max="100"
                label="描述文字" size="small"></el-input-number>(%) -->
                <el-input v-model="formData1.discountRateBefore" readonly ></el-input>(%)
            </el-form-item>
            <el-form-item label="优惠折扣率（变更后）"  class="form-inline">
              <!-- <el-input-number v-model="formData.discountAmount"  :min="0" :max="100"
                label="描述文字" size="small"></el-input-number> 元 -->
                  <el-input v-model="formData1.discountRateAfter" readonly ></el-input>元
            </el-form-item>

            <!-- <el-form-item label="优惠后金额"  class="form-inline">
                <el-input v-model="formData1.payAmount" readonly ></el-input>元
            </el-form-item> -->
          </div>

          <el-divider content-position="left">合同收款条件</el-divider>
          <el-form-item class="childlist">
            <el-table border
            :header-cell-style="{ fontWeight: 'normal', textAlign: 'center', backgroundColor: '#eceff4', color: '#222'}"
            :data="contractData"
            >
          <el-table-column prop="receivableDateBefore" align="center" label="应收日期(变更前)" show-overflow-tooltip >
          </el-table-column>
          <el-table-column prop="receivableDateAfter" align="center" label="应收日期(变更后)" show-overflow-tooltip >
          </el-table-column>
          <el-table-column prop="receivableAmountBefore"  align="center" label="应收金额/元(变更前)" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="receivableAmountAfter"  align="center" label="应收金额/元(变更后)" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="type"  align="center" label="变更说明" show-overflow-tooltip>
          </el-table-column>
            </el-table>
          </el-form-item>

        </el-form>

      </div>

  </div>
</template>

<script>
import {mapState, mapActions, mapGetters, mapMutations} from "vuex";
  import config from "@/utils/config.js";
export default {
  data() {
    return {
      total1: 0, //总条数
        pageSizes: [10, 20, 50], //每页展示多少条
      search_data1: {
        pageno: 1,
        pagesize: 10,
        startTime: "",
        endTime: "",
        contractCode: '',
        createByName: '',
      },
      formData1: {
        clientName: '',
        clientId: '',
        salesPerson: '',
        salesPersonName: '',
        salesPersonDept: '',
        salesPersonDeptName: '',
        contractDate: '',
        contractExpireDate: '',
        contractType: '',
        contractCode: '',
        salesPersonDept: '',
        discountRate: '',
        discountAmount: 0,
        payAmount: 0,
        invoicedAmount: 0,
        uninvoicedAmount: 0,
        createBy: '',
        createByName: '',
        createTime: '',
        auditorName: '',
        auditTime: '',
        closeStatusName: '',
      },
      alterationDetailId: '',
      contractData: [],
      tableData1: [],
      contractList: [],
      config: config,
      alterationDetailVisible: false,
    }
  },
  mounted() {
    this.alterationDetailId = this.$route.query.id;
    this.getAlterationDetail()
  },
  methods: {
    ...mapMutations({
        removeTagNav: "tagNav/removeTagNav"
      }),
    /**
       * 取消方法
       */
      back() {
        this.removeTagNav({
          path: this.$route.path,
          title: this.$route.meta.name
        });
        this.$router.push({ path: "/sales/salesContract_alterationList",query: { id: this.formData1.id, t: Date.now() } });
      },
     // 获取变更合同详情
     getAlterationDetail() {
      var _this = this;
      this.$nextTick()
      .then(() => {
        this.$api.salesAPI.getAlterationDetail({id: this.alterationDetailId})
        .then(res => {
          if(res.code == 0) {
            _this.$set(_this.formData1,"clientName",res.contract.clientName?res.contract.clientName:'')
              // _this.$set(_this.formData1,"clientId",res.salesContract.clientId?res.salesContract.clientId:'')
              _this.$set(_this.formData1,"salesPersonName",res.contract.salesPersonName?res.contract.salesPersonName:'')
              _this.$set(_this.formData1,"id",res.contract.id?res.contract.id:'')
              _this.$set(_this.formData1,"salesPerson",res.contract.salesPerson?res.contract.salesPerson:'')
              _this.$set(_this.formData1,"salesPersonDeptName",res.contract.salesPersonDeptName?res.contract.salesPersonDeptName:'')
              _this.$set(_this.formData1,"salesPersonDept",res.contract.salesPersonDept?res.contract.salesPersonDept:'')
              _this.$set(_this.formData1,"contractCode",res.contract.contractCode?res.contract.contractCode:'')
              _this.$set(_this.formData1,"contractType",res.contract.contractType?res.contract.contractType:'')
              _this.$set(_this.formData1,"contractTypeName",res.contract.contractTypeName?res.contract.contractTypeName:'')
              _this.$set(_this.formData1,"contractDate",res.contract.contractDate?(res.contract.contractDate).substr(0,10):'')
              _this.$set(_this.formData1,"contractExpireDate",res.contract.contractExpireDate?(res.contract.contractExpireDate).substr(0,10):'')
              _this.$set(_this.formData1,"discountRate",res.contract.discountRate?res.contract.discountRate:'')
              _this.$set(_this.formData1,"discountAmount",res.contract.discountAmount?res.contract.discountAmount:'')
              _this.$set(_this.formData1,"payAmount",res.contract.payAmount?res.contract.payAmount:'')
              _this.$set(_this.formData1,"createByName",res.contract.createByName?res.contract.createByName:'')
              _this.$set(_this.formData1,"createBy",res.contract.createBy?res.contract.createBy:'')
              _this.$set(_this.formData1,"createTime",res.contract.createTime?res.contract.createTime:'')
              _this.$set(_this.formData1,"closeStatusName",res.contract.closeStatusName?res.contract.closeStatusName:'')
              _this.$set(_this.formData1,"discountRateBefore",res.head.discountRateBefore?res.head.discountRateBefore:'')
              _this.$set(_this.formData1,"discountRateAfter",res.head.discountRateAfter?res.head.discountRateAfter:'')
              _this.tableData1 = res.itemArray
              
              _this.tableData1.forEach(item => {
                item.countBefore = item.countBefore?parseFloat(item.countBefore):'',
                item.taxAmountBefore = item.taxAmountBefore?parseFloat(item.taxAmountBefore):'',
                item.countAfter = item.countAfter?parseFloat(item.countAfter):'',
                item.taxAmountAfter = item.taxAmountAfter?parseFloat(item.taxAmountAfter):''
              })
              _this.contractData = res.payArray
              _this.contractData.forEach(item => {
                item.receivableDateBefore = /\d{4}-\d{1,2}-\d{1,2}/g.exec(item.receivableDateBefore)
                item.receivableDateAfter = /\d{4}-\d{1,2}-\d{1,2}/g.exec(item.receivableDateAfter)
              })
          }
        })
      })
    },
    // 变更合同详情
    alterationDetail(row) {
      this.alterationDetailId = row.id
      this.alterationDetailVisible = true
      this.getAlterationDetail()
    },
    closeThis() {
      this.alterationDetailVisible = false
    }
  }
}
</script>


<style>

  .process-box  .el-select,
  .process-box .el-input {
    width: 100%;
  }

  .process-box .el-table thead {
    line-height: 1;
  }

 .process-box .el-input-number .el-input {
    width: 100% !important;
  }
  .process-box .el-input-number--small{
    width: 70% !important;
  }
  .process-box .form-inline {
    width: 33.3% !important;
  }
  .process-box1 .form-inline {
    width: 50% !important;
  }
  .process-box .el-input-number el-input-number--small{
    white-space: nowrap;

  }
  .process-box .el-form-item__content{
    margin-left: 100px !important;
  }
 .process-box .el-form-item__label{
   width: 100px !important;
 }
 .process-box1 .el-form-item__label{
   width: 180px !important;
 }
  .process-box  .el-input,.process-box  .el-form--inline .el-input,.process-box .el-cascader--small{
    width: 100% !important;
  }
  .childlist .el-form-item__content{
    margin-left: 0 !important;
  }

  .process-box .el-input--small{
    width: 70% !important;
  }
</style>

<style scoped>
  .flex {
    display: flex;
    flex-wrap: wrap;
  }
  .sys-form .form-inline .el-input, .sys-form .el-form--inline .el-input {
    width: 220px !important;
  }
</style>



