<template>
  <div class="change-template-review-content">
    <el-form ref="ruleForm" :key="key" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
      <cy-info-title>补充信息</cy-info-title>
      <el-form-item
        label="合同生效日"
        prop="contractEffectDate"
      >

        <el-input v-model="ruleForm.contractEffectDate" placeholder="请输入合同生效日" clearable :disabled="isView"></el-input>
      </el-form-item>
      <el-form-item
        label="价格计算规则"
        prop="priceRuleDetail"
      >
        <el-input v-model="ruleForm.priceRuleDetail" placeholder="请输入价格计算规则" clearable :disabled="isView"></el-input>
      </el-form-item>
      <div style="width: 100%; margin-top: 10px;">
        <el-table
          :data="ruleForm.comments"
          style="width: 100%">
          <el-table-column label="编号" type="index"></el-table-column>
          <el-table-column prop="contractName" label="其他约定">
            <template slot-scope="scope">
              <el-form-item label="" :prop="`comments.${scope.$index}.content`" style="width: 100%; margin-bottom: 15px;"
                :rules="[{ required: true, message: '请输入其他约定', trigger: 'blur' }]"
              >
                <el-input type="textarea" autosize placeholder="请输入其他约定" v-model="ruleForm.comments[scope.$index].content" style="width: 100%;" :disabled="isView" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="200" v-if="!isView">
            <template slot-scope="scope">
              <el-button type="text" @click="ruleForm.comments.push({content: ''})">增加</el-button>
              <el-button v-if="scope.$index !== 0" type="text" @click="ruleForm.comments.splice(scope.$index, 1)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <cy-info-title>审批结论</cy-info-title>
      <el-form-item label="审批结论" prop="approvalConclusion">
        <el-radio-group v-model="ruleForm.approvalConclusion" :disabled="isView">
          <el-radio label="pass">通过</el-radio>
          <el-radio label="back">退回</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="ruleForm.approvalConclusion == 'pass'">
        <el-form-item label="合同签署方式" prop="signMode" style="width: 60%;"
          :rules="[
            { required: ruleForm.approvalConclusion === 'pass', message: '请选择合同签署方式', trigger: 'change' }
          ]">
          <el-checkbox v-model="ruleForm.signMode" @change="createFile" :true-label="1" :false-label="0" :disabled="isView">线上电子签</el-checkbox>
        </el-form-item>
        <el-form-item label="采购合同文件" prop="fileStorage" style="width: calc(66% - 15px);">
          <cy-upload
            ref="fileStorage"
            :upload-params="{ mouldName: 'reconsiderAdjustFile' }"
            :file-data="fileStorage"
            :upload-from-orange-status="true"
            placeholder="请上传附件"
            disabled
          />
        </el-form-item>
        <el-form-item label="上传合同文件" prop="upload"
          :rules="[
            { required: ruleForm.approvalConclusion === 'pass', message: '请选择上传合同文件', trigger: 'change' }
          ]">
          <el-radio-group v-model="ruleForm.upload" @change="changeUpload" :disabled="isView">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <el-form-item
        label="审批意见："
        style="width: 100%;"
        class="textarea-content"
        prop="approvalComment"
        :rules="[
          { required: ruleForm.approvalConclusion === 'back', message: '请输入审批意见', trigger: 'blur' }
        ]"
      >
        <el-input v-model="ruleForm.approvalComment" type="textarea" style="width: 100%;" rows="3" clearable :disabled="isView"></el-input>
      </el-form-item>
      <div style="width: 100%;" v-if="ruleForm.upload == 1 && ruleForm.approvalConclusion == 'pass'">
        <el-table
          :data="ruleForm.uploadPurchSupplementContracts"
          style="width: 100%">
          <el-table-column label=" 序号" type="index"></el-table-column>
          <el-table-column prop="contractName" label="合同名称">
            <template slot-scope="scope">
              <el-form-item label="" :prop="`uploadPurchSupplementContracts.${scope.$index}.contractName`" style="width: 100%; margin-bottom: 15px;"
                :rules="[{ required: true, message: '请输入合同名称', trigger: 'blur' }]"
              >
                <el-input type="textarea" autosize placeholder="请输入合同名称" v-model="ruleForm.uploadPurchSupplementContracts[scope.$index].contractName" style="width: 100%;" :disabled="isView" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="签署人">
            <template slot-scope="scope">
              <el-form-item label="" :prop="`uploadPurchSupplementContracts.${scope.$index}.personList`" style="width: 100%; margin-bottom: 15px;"
                :rules="[{ required: true, message: '请选择签署人', trigger: 'blur' }]"
              >
              <el-checkbox-group v-model="ruleForm.uploadPurchSupplementContracts[scope.$index].personList" :disabled="isView">
                <el-checkbox :label="`${ruleForm.platform.socialCreditCode}。${ruleForm.platform.platformName}`">{{ ruleForm.platform.platformName }}</el-checkbox>
                <el-checkbox :label="`${ruleForm.supplier.socialCreditCode}。${ruleForm.supplier.corporateName}`">{{ ruleForm.supplier.corporateName }}</el-checkbox>
              </el-checkbox-group>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="签署文件">
            <template slot-scope="scope">
              <el-form-item label="" :prop="`uploadPurchSupplementContracts.${scope.$index}.fileId`" style="width: 100%; margin-bottom: 15px;"
                :rules="[{ required: true, message: '请上传PDF格式的文件', trigger: 'blur' }]"
              >
              <cy-upload
                :ref="`fileStorage${scope.$index}`"
                :upload-params="{ mouldName: 'purchaseContractUploadContractFile' }"
                :file-data="ruleForm.uploadPurchSupplementContracts[scope.$index].arr"
                :upload-from-orange-status="true"
                placeholder="请上传PDF格式的文件"
                :disabled="isView"
                :isCallBack="true"
                @call-back="setFile(scope.$index)"
              />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="操作" width="200" v-if="!isView">
            <template slot-scope="scope">
              <el-button type="text" @click="ruleForm.uploadPurchSupplementContracts.push({contractName: '', fileId: '', fileStorage: [], id: '', personList: []})">增加</el-button>
              <el-button v-if="scope.$index !== 0" type="text" @click="ruleForm.uploadPurchSupplementContracts.splice(scope.$index, 1)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      key: 0,
      ruleForm: {
        approvalConclusion: 'pass',
        approvalComment: '',
        comments: [{
          content: ''
        }],
        signMode: '',
        priceRuleDetail: '',
        contractEffectDate: '',
        upload: '',
        uploadPurchSupplementContracts: [],
        fileStorage: [],
        platform: {},
        supplier: {}
      },
      rules: {
        approvalConclusion: [
          { required: true, message: '请选择审批结论', trigger: 'change' }
        ],
        priceRuleDetail: [
          { required: true, message: '请输入价格计算规则', trigger: 'blur' }
        ],
        contractEffectDate: [
          { required: true, message: '请输入合同生效日', trigger: 'blur' }
        ]
      },
      fileStorage: []
    }
  },
  props: ["isView", "info"],
  mounted() {
    if(!this.isView) {
      request({
        url: '/purchContract/change/approval',
        method: 'get',
        params: { businessKey: this.$route.params.infoId }
      }).then(({ data }) => {
        this.ruleForm.platform = { ...data.platform }
        this.ruleForm.supplier = { ...data.supplier }
      })
    }
  },
  methods: {
    validate() {
      return new Promise((res, rej) => {
        if(this.ruleForm.approvalConclusion == 'back') {
          this.$refs.ruleForm.validateField(['approvalComment'], flag => {
            if(!flag) {
              res(this.getParams())
            } else {
              rej()
            }
          })
        } else if(this.ruleForm.approvalConclusion == 'pass' || !this.ruleForm.approvalConclusion) {
          this.$refs.ruleForm.validate(flag => {
            if(flag) {
              res(this.getParams())
            } else {
              rej()
            }
          })
        }
      })
    },
    getParams() {
      let data = { ...this.ruleForm }
      data.comments = this.ruleForm.comments.map(item => item.content)
      data.taskId = this.$route.params.taskId
      data.businessKey = this.$route.params.infoId
      data.visible = 1
      data.uploadPurchSupplementContracts = this.ruleForm.uploadPurchSupplementContracts.map(item => {
        item.uploadPurchContractSupplementSignerList = item.personList.map(i => {
          return {
            signerName: i.split('。')[1],
            signerSocialCreditCode: i.split('。')[0]
          }
        })
        delete item.fileStorage
        return item
      })
      delete data.fileStorage
      return data
    },
    createFile() {
      if(this.ruleForm.approvalConclusion == 'pass' && this.ruleForm.signMode == 1) {
        let arr = ["contractEffectDate"]
        let isPass = true
        this.ruleForm.comments.forEach((item, index) => {
          arr.push(`comments.${index}.content`)
        })
        this.$refs.ruleForm.validateField(arr, flag => {
          if(flag) {
            isPass = false
          }
        })
        if(!isPass) {
          this.$message.error('合同生效日,其他约定不能为空')
          this.ruleForm.signMode = 0
          return
        }
        let data = {
          businessKey: this.$route.params.infoId,
          contractEffectDate: this.ruleForm.contractEffectDate,
          comments: this.ruleForm.comments.map(item => item.content)
        }
        request({
          url: '/purchContract/change/makeContractPdf',
          method: 'post',
          data
        }).then(({ data }) => {
          this.fileStorage = []
          this.fileStorage.push(data)
        })
      }
    },
    changeUpload(val) {
      if(val == 1 && (!this.ruleForm.uploadPurchSupplementContracts || this.ruleForm.uploadPurchSupplementContracts.length === 0)) {
        this.ruleForm.uploadPurchSupplementContracts = []
        this.ruleForm.uploadPurchSupplementContracts.push({
          contractName: '',
          fileId: '',
          fileStorage: [],
          id: '',
          personList: []
        })
      } else {
        this.ruleForm.uploadPurchSupplementContracts = []
      }
    },
    setFile(index) {
      this.ruleForm.uploadPurchSupplementContracts[index].fileId = this.$refs[`fileStorage${index}`].getFileLists[0].id
    }
  },
  watch: {
    'info.mathId': {
      handler(newV) {
        if (newV) {
          if(this.info.uploadPurchSupplementContracts) {
            this.info.uploadPurchSupplementContracts.forEach(item => {
              item.personList = []
              if(item.uploadPurchContractSupplementSignerList) {
                item.uploadPurchContractSupplementSignerList.forEach(i => {
                  item.personList.push(`${i.signerSocialCreditCode}。${i.signerName}`)
                })
              }
              if(item.fileStorage) {
                item.arr = []
                item.arr.push(item.fileStorage)
                // item.fileStorage = [item.fileStorage]
                // let arr = []
                // arr.push(item.fileStorage)
                // item.fileStorage = arr
                // item.fileStorage = [item.fileStorage]
              }
            })
            this.ruleForm.uploadPurchSupplementContracts = [...this.info.uploadPurchSupplementContracts]
          }
          Object.keys(this.ruleForm).forEach(key => {
            if(this.info[key] || this.info[key] === 0) {
              if(key == 'fileStorage') {
                this.ruleForm.fileStorage = []
                this.ruleForm.fileStorage.push(this.info[key])
              } else if(key == 'comments') {
                this.ruleForm.comments = this.info[key].map(item => {
                  return {
                    content: item
                  }
                })
              } else if(key !== 'uploadPurchSupplementContracts') {
                this.ruleForm[key] = this.info[key]
              }
            }
          })
          if(this.info.fileStorage) {
            this.fileStorage = []
            this.fileStorage.push(this.info.fileStorage)
          }
        }
      },
      immediate: true
    }
  }
}
</script>

<style  scoped>

</style>
