<template>
  <div class="change-price">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <cy-info-title style="margin: 0px -15px 10px;"> 基础信息 </cy-info-title>
      <el-form-item label="项目名称" prop="businessNumber">
        <el-input v-model="ruleForm.projectName" disabled />
      </el-form-item>
      <el-form-item label="核心企业名称">
        <el-input v-model="ruleForm.coreEnterpriseName" disabled />
      </el-form-item>
      <el-form-item label="供应商（主体）名称">
        <el-input v-model="ruleForm.mainEnterpriseName" disabled />
      </el-form-item>
      <el-form-item label="贸易平台">
        <el-input v-model="ruleForm.platformName" disabled />
      </el-form-item>
      <el-form-item label="业务编号">
        <el-input :value="ruleForm.businessNumber" disabled />
      </el-form-item>
      <el-form-item label="预估结算日期" prop="expectedSettlementDate">
        <el-date-picker v-model="ruleForm.expectedSettlementDate" value-format="yyyy-MM-dd" type="date" placeholder="选择预估结算日期" style="width: 100%;" disabled />
      </el-form-item>
      <el-form-item label="验收经办人（供应商）" prop="checkOperatorSupplier">
        <el-input v-model="ruleForm.checkOperatorSupplier" disabled />
      </el-form-item>

      <!--  货物信息（下游验收） -->
      <cy-info-title style="margin: 25px -15px 0;">
        <span>
          货物信息（下游验收）
          <span class="statistics">数量合计： <span>{{ countTotal }}</span></span>
          <span class="statistics">销售总价合计： <span>{{ priceTotal }}</span></span>
        </span>
      </cy-info-title>
      <div style="width: 100%;margin: 0 -15px;">
        <cy-comm-table
          ref="commTable"
          :columns="columns"
          :data="goodsInfoList"
          :count="0"
        />
      </div>

      <cy-info-title style="margin: 25px -15px 10px;">补充说明</cy-info-title>
      <el-form-item label=" 补充说明" class="two-form-item" prop="supplementDescription">
        <el-input
          v-model="ruleForm.supplementDescription"
          placeholder="请输入单价调整说明"
          disabled
        />
      </el-form-item>
      <el-form-item label="补充说明文件" prop="acceptanceAdjustFile">
        <cy-upload
          ref="acceptanceAdjustFile"
          :upload-params="{}"
          :file-data="ruleForm.acceptanceAdjustFile"
          :upload-from-orange-status="true"
          placeholder="请上传加盖公章的调价说明函"
          :disabled="true"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ChangePrice',
  components: {

  },
  props: {
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        coreEnterpriseName: '',
        mainEnterpriseName: '',
        platformName: '',
        projectName: '',
        businessNumber: '',
        expectedSettlementDate: '',
        checkOperatorSupplier: '',
        supplementDescription: '',
        acceptanceAdjustFile: []
      },
      rules: {

      },
      countTotal: 0,
      priceTotal: 0,
      goodsInfoList: [

      ],
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '名称',
          showTooltip: true,
          prop: 'goodsName'
        },
        {
          label: '材质',
          showTooltip: true,
          prop: 'goodsMaterial'
        },
        {
          label: '型号',
          showTooltip: true,
          prop: 'goodsType'
        },
        {
          label: '厂家',
          showTooltip: true,
          prop: 'goodsFactory'
        },
        {
          label: '单位',
          showTooltip: true,
          prop: 'goodsUnit'
        },
        {
          label: '数量',
          showTooltip: true,
          prop: 'goodsQuantity'
        },
        {
          label: '参考价格',
          showTooltip: true,
          prop: 'referencePrice'
        },
        {
          label: '浮动价格',
          showTooltip: true,
          prop: 'floatingPrice'
        },
        {
          label: '销售单价（元）',
          showTooltip: true,
          prop: 'salesPrice'
        },
        {
          label: '验收日期',
          showTooltip: true,
          prop: 'acceptanceDate'
        }
      ],
      detailInfos: {}
    }
  },
  watch: {
    goodsInfoList: {
      handler(newV) {
        let num = 0; let price = 0
        this.goodsInfoList.forEach(item => {
          num += Number(item.goodsQuantity)
          price += Number(item.salesPrice) * Number(item.goodsQuantity)
          item.acceptanceDate = item.acceptanceDate.split(' ')[0]
        })

        this.countTotal = num ? Math.round(num * 100) / 100 : 0
        this.priceTotal = price ? Math.round(price * 100) / 100 : 0
      },
      immediate: true,
      deep: true
    },
    detailsInfo: {
      handler(newV) {
        if (newV && Object.keys(newV).length) {
          const { checkOperatorSupplier, supplementDescription, fileStorageList, goodsInfoList, businessBasicInfo, businessNumber, expectedSettlementDate, coreEnterprise, platform, mainEnterprise } = JSON.parse(JSON.stringify(newV))

          const { projectName } = businessBasicInfo
          const { corporateName } = coreEnterprise
          const { platformName } = platform
          const { corporateName: name } = mainEnterprise

          this.ruleForm.mainEnterpriseName = name
          this.ruleForm.coreEnterpriseName = corporateName
          this.ruleForm.platformName = platformName
          this.ruleForm.projectName = projectName
          this.ruleForm.businessNumber = businessNumber
          this.ruleForm.expectedSettlementDate = expectedSettlementDate
          this.ruleForm.checkOperatorSupplier = checkOperatorSupplier
          this.ruleForm.supplementDescription = supplementDescription
          this.ruleForm.acceptanceAdjustFile = fileStorageList

          this.goodsInfoList = goodsInfoList
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {

  },
  methods: {

  }
}
</script>

    <style lang="scss" scoped>
    .change-price {
      padding: 10px 30px;
      .statistics {
        color: #FF0000;
        margin-left: 20px;
        font-size: 14px;
      }
      .tips {
        color: #918c8c;
        font-size: 12px;
      }
      .required-item {
        .required-label:before {
          content: '*'!important;
          color: #F56C6C;
          margin-right: 4px;
        }

      }
    }
    </style>
