<template>
  <div class="acceptance-view">
    <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 :value="businessInfo.projectName" disabled />
      </el-form-item>
      <el-form-item label="核心企业名称">
        <el-input v-model="businessInfo.coreEnterpriseName" disabled />
      </el-form-item>
      <el-form-item label="供应商（主体）名称">
        <el-input v-model="businessInfo.mainEnterpriseName" disabled />
      </el-form-item>
      <el-form-item label="贸易平台">
        <el-input v-model="businessInfo.platformName" disabled />
      </el-form-item>
      <el-form-item label="业务编号">
        <el-input :value="businessInfo.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>

      <!-- 签署确认 -->
      <cy-info-title style="margin: 25px -15px 10px;">签署确认<span class="tips">（关于下游验收单请选择是否需要签署确认）</span></cy-info-title>
      <el-form-item
        label="签署确认"
        prop="signConfirm"
        class="industry"
      >
        <el-radio-group v-model="ruleForm.signConfirm">
          <el-radio :label="1" disabled>是</el-radio>
          <el-radio :label="0" disabled>否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="特别说明" class="two-form-item" prop="specification">
        <el-input
          v-model="ruleForm.specification"
          placeholder="签署人为：人员信息中的验收经办人（核心企业）；签署文件为：下游验收单文件"
          disabled
        />
      </el-form-item>

      <!-- 人员信息 -->
      <cy-info-title style="margin: 25px -15px 10px;">人员信息</cy-info-title>
      <el-form-item label="验收经办人（供应商）" prop="checkOperatorSupplier" class="one-form-item">
        <el-input v-model="ruleForm.checkOperatorSupplier" disabled />
      </el-form-item>
      <el-form-item label="联系方式" prop="checkOperatorSupplierContact" class="one-form-item">
        <el-input v-model="ruleForm.checkOperatorSupplierContact" disabled />
      </el-form-item>
      <el-form-item label="验收经办人（核心企业）" prop="checkOperatorEnterprise" class="one-form-item">
        <el-input v-model="ruleForm.checkOperatorEnterprise" disabled />
      </el-form-item>
      <el-form-item label="联系方式" prop="checkOperatorEnterpriseContact" class="one-form-item">
        <el-input v-model="ruleForm.checkOperatorEnterpriseContact" disabled />
      </el-form-item>

      <!-- 合作平台 -->
      <cy-info-title style="margin: 25px -15px 10px;">合作平台</cy-info-title>
      <el-form-item
        label="是否有合作平台"
        prop="steelWaiter"
        class="industry"
      >
        <el-radio-group v-model="ruleForm.steelWaiter">
          <el-radio :label="1" disabled>是</el-radio>
          <el-radio :label="0" disabled>否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="ruleForm.steelWaiter=='1'" label="销售单号" class="two-form-item" prop="sellBillNumber" :rules="[{required: ruleForm.steelWaiter=='1', message: '请选择销售单号', trigger: 'change'}]">
        <el-select v-model="ruleForm.sellBillNumber" style="width: 100%" placeholder="请选择销售单号" multiple disabled @change="getGoodsInfo">
          <el-option
            v-for="(item, index) in salesNumber"
            :key="index + '_sale'"
            :label="item"
            :value="item"
          />
        </el-select>
      </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="验收单附件" prop="acceptanceFile" style="width: 100%" class="required-item">
        <span slot="label" class="required-label">验收单附件</span>
        <cy-upload
          ref="acceptanceFile"
          :upload-params="{fileType: 'acceptanceFile'}"
          :file-data="ruleForm.acceptanceFile"
          :upload-from-orange-status="true"
          placeholder="请上传附件"
          :disabled="true"
        />
      </el-form-item>

      <cy-info-title style="margin: 25px -15px 10px;">补充说明 <span class="tips">（非必填）</span></cy-info-title>
      <el-form-item label="补充说明" class="two-form-item" prop="additionalRemarks">
        <el-input
          v-model="ruleForm.additionalRemarks"
          placeholder="请输入补充说明"
          disabled
        />
      </el-form-item>
      <el-form-item label="补充说明文件" prop="acceptanceSupplementFile">
        <cy-upload
          ref="acceptanceSupplementFile"
          :upload-params="{fileType: 'acceptanceSupplementFile'}"
          :file-data="ruleForm.acceptanceSupplementFile"
          :upload-from-orange-status="true"
          placeholder="请上传附件"
          :disabled="true"
        />
      </el-form-item>

      <cy-info-title style="margin: 25px -15px 10px;">申请审核</cy-info-title>
      <el-form-item
        label="申请审核"
        prop="approval"
        class="industry"
      >
        <el-radio-group v-model="ruleForm.approval">
          <el-radio :label="1" disabled>是</el-radio>
          <el-radio :label="0" disabled>否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div class="submit-btn">
      <el-button @click="closePage">关闭</el-button>
    </div>
  </div>
</template>

<script>
import { getDetails, getCompletedProjectList } from '@/api/myTrade/acceptanceManagement/index'
export default {
  name: 'AcceptanceFormViewTemp',
  components: {

  },
  data() {
    return {
      ruleForm: {
        projectName: '',
        businessNumber: '',
        expectedSettlementDate: '',
        signConfirm: '',
        specification: '',
        checkOperatorSupplier: '',
        checkOperatorSupplierContact: '',
        checkOperatorEnterprise: '',
        checkOperatorEnterpriseContact: '',
        steelWaiter: '',
        sellBillNumber: [],
        approval: '',
        additionalRemarks: '',
        acceptanceSupplementFile: [],
        acceptanceFile: []
      },
      rules: {
      },
      countTotal: 0,
      priceTotal: 0,
      businessList: [],
      businessInfo: {
        projectName: '',
        coreEnterpriseName: '',
        mainEnterpriseName: '',
        platformName: '',
        businessNumber: ''

      },
      corePersonList: [],
      corePersonInfo: {
        mobile: '',
        signer: 0
      },
      suplierPersonList: [],
      suplierPersonInfo: {
        mobile: '',
        signer: 0
      },
      salesNumber: [],
      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'
        }
      ]
    }
  },
  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 ? num.toFixed(4) : 0
        this.priceTotal = price ? price.toFixed(2) : 0
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    if (this.$route.query.type) {
      // this.getPojectList()
      this.getDetailInfo()
    }
  },
  methods: {
    getDetailInfo() {
      const { id } = this.$route.query
      getDetails({ id: id }).then(res => {
        if (res.success) {
          const { data } = res
          this.ruleForm.businessNumber = data.businessNumber

          for (const k in this.ruleForm) {
            if (data[k] !== '' && data[k] !== null && data[k] !== undefined) {
              this.ruleForm[k] = data[k]
            }
          }
          for (const k in this.businessInfo) {
            if (data.purchContractCompletedVo[k] !== '' && data.purchContractCompletedVo[k] !== null && data.purchContractCompletedVo[k] !== undefined) {
              this.businessInfo[k] = data.purchContractCompletedVo[k]
            }
          }

          this.goodsInfoList = data.acceptanceGoodInfos

          this.ruleForm.acceptanceFile = data.fileStorageDOList
          this.ruleForm.acceptanceSupplementFile = data.supplementFiles

          data.acceptancePersonInfos.map(item => {
            if (item.type === '验收经办人（供应商）') {
              this.ruleForm.checkOperatorSupplierContact = item.mobile
            } else if (item.type === '验收经办人（核心企业）') {
              this.ruleForm.checkOperatorEnterpriseContact = item.mobile
            }
          })
        }
      })
    },
    // 查询完成项目-项目名称
    getPojectList() {
      getCompletedProjectList().then(({ data }) => {
        this.businessList = data || []
      })
    },

    closePage() {
      this.$router.push({
        name: 'MyTrade',
        query: {
          type: 'AcceptanceManagement'
        }
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  .acceptance-view {
    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>
