<template>
  <div v-loading="isLoading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" label-width="120px" class="rule-form-orange">
      <cy-info-title>基础信息（下游结算）</cy-info-title>
      <el-form-item label="项目名称" prop="businessNumber" required>
        <el-input v-model="ruleForm.businessName" disabled />
      </el-form-item>
      <el-form-item label="核心企业名称">
        <el-input v-model="ruleForm.customer.corporateName" disabled />
      </el-form-item>
      <el-form-item label="供应商（主体）名称">
        <el-input v-model="ruleForm.supplier.corporateName" disabled />
      </el-form-item>
      <el-form-item label="贸易平台">
        <el-input v-model="ruleForm.platform.platformName" disabled />
      </el-form-item>
      <el-form-item label="业务编号">
        <el-input v-model="ruleForm.businessNumber" disabled />
      </el-form-item>
      <el-form-item label="经办人（供应商）" prop="operatorSupplier" required>
        <el-input v-model="ruleForm.operatorSupplier" placeholder="请输入经办人（供应商）" /> 
      </el-form-item>
      <cy-info-title style="margin-top: 15px;">货物信息（下游结算）
        <span style="font-size: 12px; color: #A3A8AC;">单位：元</span>
        <!-- <b v-show="ruleForm.countTheGoods" style="margin: 0 20px; color: #FF0000;">数量合计：{{ changeNum1 }}</b>
        <b v-show="ruleForm.settleTotalSalesPrice" style="color: #FF0000;">销售总价合计：{{ changeNum2 }}</b>
        <b v-show="buyTotalPrice" style="margin-left: 20px; color: #FF0000;">采购总价合计：{{ changeNum3 }}</b> -->
      </cy-info-title>
      <div style="width: 100%; margin-bottom: 20px;">
        <el-table :data="goodsList" style="width: 100%;">
          <el-table-column type="index" label="序号" show-overflow-tooltip/>
          <el-table-column prop="acceptanceGoodsNumber" label="验收单号" show-overflow-tooltip/>
          <el-table-column prop="acceptanceDate" label="验收日期" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.acceptanceDate ? scope.row.acceptanceDate.split(' ')[0] : '' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="货物名称" show-overflow-tooltip/>
          <el-table-column prop="goodsFactory" label="厂家" show-overflow-tooltip/>
          <el-table-column prop="goodsType" label="型号" show-overflow-tooltip/>
          <el-table-column prop="goodsUnit" label="单位" show-overflow-tooltip/>
          <el-table-column prop="goodsQuantity" label="数量" show-overflow-tooltip/>
          <el-table-column prop="referencePrice" label="参考价格" show-overflow-tooltip>
            <template slot="header" slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="网价" placement="top">
                <span class="table-tip-icon">!</span>
              </el-tooltip>
              <span>参考价格</span>
            </template>
            <template slot-scope="scope">
              {{ scope.row.referencePrice || 0 }}
            </template>
          </el-table-column>
          <el-table-column prop="floatingPrice" label="浮动价格" show-overflow-tooltip>
            <template slot="header" slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="合约中约定的上下浮动差价" placement="top">
                <span class="table-tip-icon">!</span>
              </el-tooltip>
              <span>浮动价格</span>
            </template>
            <template slot-scope="scope">
              {{ scope.row.floatingPrice || 0 }}
            </template>
          </el-table-column>
          <el-table-column prop="salesPrice" label="销售单价" show-overflow-tooltip/>
          <el-table-column prop="salesTotalPrice" label="销售总价" show-overflow-tooltip/>
          <el-table-column prop="salesGuaranteeMoney" label="销售质保金" show-overflow-tooltip/>
          <el-table-column prop="purchasePrice" label="采购单价" show-overflow-tooltip/>
          <el-table-column prop="purchaseTotalPrice" label="采购总价" show-overflow-tooltip/>
          <el-table-column prop="purchaseGuaranteeMoney" label="采购质保金" show-overflow-tooltip/>
        </el-table>
        <div style="margin-top: 10px;">
          <b v-show="ruleForm.countTheGoods" style="margin: 0 20px; color: #FF0000;">数量合计：{{ changeNum1 }}</b>
          <b v-show="ruleForm.settleTotalSalesPrice" style="color: #FF0000;">销售总价合计：{{ changeNum2 }}</b>
          <b v-show="buyTotalPrice" style="margin-left: 20px; color: #FF0000;">采购总价合计：{{ changeNum3 }}</b>
        </div>
      </div>
      <cy-info-title>补充说明</cy-info-title>
      <el-form-item label="补充说明" style="width: 100%;">
        <el-input v-model="ruleForm.additionalRemarks" disabled />
      </el-form-item>
      <el-form-item label="补充说明文件" required>
        <cy-upload
          ref="fileStorage"
          :upload-params="{ fileType: 'settlementSupplementFile' }"
          :file-data="ruleForm.additionalFileIds"
          :upload-from-orange-status="true"
          placeholder="请上传附件" disabled
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from '@/utils/request'
import { handleMoney } from '@/utils'

export default {
  name: 'AddSettlement',
  data() {
    return {
      ruleForm: {
        operatorSupplier: '',
        additionalFileIds: [],
        countTheGoods: '',
        settleTotalSalesPrice: '',
        businessNumber: '',
        additionalRemarks: '',
        businessName: '',
        customer: {},
        supplier: {},
        platform: {}
      },
      buyTotalPrice: '',
      rules: {
        operatorSupplier: [{ required: true, trigger: 'blur', message: '请输入经办人（供应商）' }]
      },
      businessInfo: {},
      goodsList: [],
      isLoading: false
    }
  },
  props: ["info"],
  methods: {
    getDetail() {
      request({
        url: '/bill/getDetail',
        method: 'get',
        params: { taskId: this.$route.params.taskId, businessKey: this.$route.params.key }
      }).then(({ data }) => {
        Object.keys(this.ruleForm).forEach(key => {
          if(data.billBasicInformation[key] && !(this.ruleForm[key] instanceof Array)) {
            this.ruleForm[key] = data.billBasicInformation[key]
          }
        })
        if(data.billBasicInformation.settlementGoodsInfos) {
          this.goodsList = [ ...data.billBasicInformation.settlementGoodsInfos ]
          this.calculateTotal()
        }
        if(data.billBasicInformation.additionalFiles) {
          this.ruleForm.additionalFileIds = [ ...data.billBasicInformation.additionalFiles ]
        }
        this.getBusinessDetail()
      })
    },
    calculateTotal() {
      let num = 0, price = 0, buyPrice = 0;
      this.goodsList.forEach(item => {
        num = parseFloat(Number(num) + Number(item.goodsQuantity || 0)).toFixed(2)
        price = parseFloat(Number(price) + Number(item.salesTotalPrice || 0)).toFixed(2)
        buyPrice = parseFloat(Number(buyPrice) + Number(item.purchaseTotalPrice || 0)).toFixed(2)
      })
      this.ruleForm.countTheGoods = num
      this.ruleForm.settleTotalSalesPrice = price
      this.buyTotalPrice = buyPrice
    },
    getBusinessDetail() {
      request({
        url: '/purchManagement/getPurchCompleted',
        method: 'get',
        params: { businessNumber: this.ruleForm.businessNumber }
      }).then(({ data }) => {
        this.businessInfo = { ...data }
        // this.ruleForm.operatorSupplier = data.operatorSupplier
      })
    },
    confirm() {
      this.$refs.ruleForm.validate(flag => {
        if(flag) {
          this.submit()
        }
      })
    }
  },
  computed: {
    changeNum1() {
      return handleMoney(this.ruleForm.countTheGoods)
    },
    changeNum2() {
      return handleMoney(this.ruleForm.settleTotalSalesPrice)
    },
    changeNum3() {
      return handleMoney(this.buyTotalPrice)
    }
  },
  watch: {
    'info.mathId': {
      handler(newV) {
        if(newV) {
          Object.keys(this.ruleForm).forEach(key => {
            if(this.info[key] && !(this.ruleForm[key] instanceof Array)) {
              this.ruleForm[key] = this.info[key]
            }
          })
          if(this.info.settlementGoodsInfos) {
            this.goodsList = [ ...this.info.settlementGoodsInfos ]
            this.calculateTotal()
          }
          if(this.info.additionalFiles) {
            this.ruleForm.additionalFileIds = [ ...this.info.additionalFiles ]
          }
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss">
.line-form-item {
  display: flex;
  flex-direction: row;
  width: 100% !important;
  .el-form-item__label {
    margin-right: 10px;
  }
  .el-form-item__content {
    flex-grow: 1;
    .el-input {
      height: 42px;
      line-height: 42px;
    }
  }
}
.table-tip-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 7px;
  line-height: 14px;
  text-align: center;
  border: 1px solid #ff0000;
  color: #ff0000;
  margin-right: 5px;
}
</style>