<!-- 反馈素材新增、修改 -->
<template>
  <div class="dialogAddClass">
  <dialog-edit :visible.sync="dialogVisible"
               :editModel="editModel"
               :form="feedForm"
               :formRules="formRules"
               :api="api"
               width="1200px"
               :title="titleName()"
               :autoSave="false"
               @onSaved="onSave">
    <dym-form :componentList="componentList"
              :formValue="feedForm"
              @checkChange="checkChange"
              @selectChanged="selectChanged"></dym-form>
    <div>
      <template>
        <div v-for="(item, index) in feedForm.opinionsDTO" :key="index">
          <!--标题-->
          <div class="titleLine" style="float: left; z-index: 1">
            <span class="line"></span>
            <div class="feedBackfloatChange" v-bind:class="{feedBackMarginTop: isActive}">
              {{$t('feedbackMaterialIndex.materialInformation')}}
            </div>
            <div style="float: right">
              <!--拆分-->
              <!-- <auth-button icon="iconfont iconchaifen"
                           :size="'medium'"
                           v-if="editModel !== 'V'"
                           :label="$t('feedbackMaterialIndex.chaifen')"  @click="addCopyItem(item)"
                           type="primary"></auth-button> -->
              <!--新增-->
              <auth-button icon="iconfont iconxinzeng"
                           :size="'medium'"
                           v-if="editModel !== 'V'"
                           :label="$t('feedbackMaterialIndex.addT')"
                           @click="addItem(item, index)"
                           type="primary"></auth-button>
              <!--删除-->
              <auth-button icon="iconfont iconshanchu"
                           :size="'medium'"
                           v-if="editModel !== 'V'"
                           :label="$t('common.delete')"
                           @click="deleteItem(item, index)"
                           v-show="feedForm.opinionsDTO.length > 1"
                           type="danger"></auth-button>
            </div>
          </div>
        <!--第三方机构反馈意见-->
        <div class="customDivClass">
        <el-form-item :label="$t('feedbackMaterialIndex.institutionOpinions')"
                      label-width="170px"
                      :prop="'opinionsDTO.' + index + '.institutionOpinions'"
                      :rules="[{ required: true, message: $t('common.pleaseInput') + $t('feedbackMaterialIndex.institutionOpinions'),trigger: ['blur', 'change']}]">
          <el-col :span="24">
          <el-input :maxlength="500"
                    :disabled="editModel === 'V'"
                    type="textarea"
                    :rows="4"
                    :placeholder="$t('feedbackMaterialIndex.inputNum')"
                    v-model.trim="item.institutionOpinions">
          </el-input>
          </el-col>
        </el-form-item>
        <!--合规反馈-->
        <el-form-item :label="$t('feedbackMaterialIndex.hgOpinions')"
                      label-width="170px"
                      :prop="'opinionsDTO.' + index + '.hgOpinions'"
                      :rules="[{ required: true, message: $t('common.pleaseInput')+ $t('feedbackMaterialIndex.hgOpinions') ,trigger: ['blur', 'change']}]">
          <el-col :span="24">
          <el-input :maxlength="500"
                    :disabled="editModel === 'V'"
                    type="textarea"
                    :rows="4"
                    :placeholder="$t('feedbackMaterialIndex.inputNum')"
                    v-model.trim="item.hgOpinions">
          </el-input>
          </el-col>
        </el-form-item>
        </div>
        <!--相关附件-->
        <el-row :gutter="20"
                v-for="(flieData, num) in item.accessoryExtList"
                :key="num">
          <el-form-item :label="showTietle(num)"
                        :prop="'opinionsDTO.' + index + '.accessoryExtList.' + num + '.fileName'" label-width="180px" >
            <el-col :span="4" style="padding-left: 0px;">
              <!--文件名-->
              <el-input v-model="flieData.fileName"
                        size="medium"
                        :disabled="true"></el-input>
              <el-input v-model="flieData.fileId"
                        v-show="false"></el-input>
            </el-col>
            <!--删除-->
            <auth-button type="danger"
                         :title="$t('common.del')"
                         class="iconCircle pssc-css feedbackmarginRight"
                         icon="iconfont iconycjian"
                         :size="'medium'"
                         v-if="editModel !== 'V'"
                         @click="fileDeleteItem(item, num, item.accessoryExtList.length)"
                         v-show="item.accessoryExtList.length > 1 || flieData.fileName !== ''"></auth-button>
            <!--重新上传-->
            <btn-upload :uploadApi="uploadApi"
                        v-if="editModel !== 'V'"
                        icon="iconfont iconzhongxinshangchuan"
                        :title="$t('common.reUpload')"
                        :classType="true"
                        @uploadSuccess="uploadSuccess(arguments, item, num)"
                        v-show="flieData.fileName !== ''"></btn-upload>
            <!--下载-->
            <btn-download :size="'small'"
                          :fileID="flieData.fileId"
                          class="feedbackmarginRight"
                          :title="$t('common.downLoad')"
                          v-show="flieData.fileName !== ''"></btn-download>
            <!--上传-->
            <btn-upload :uploadApi="uploadApi"
                        :classType="true"
                        v-if="editModel !== 'V'"
                        :title="$t('common.upload')"
                        @uploadSuccess="uploadSuccess(arguments, item, num)"
                        v-show="flieData.fileName === ''"></btn-upload>
            <!--增加-->
            <auth-button :title="$t('feedbackMaterialIndex.add')"
                         class="iconCircle"
                         icon="iconfont iconzengjia"
                         :size="'medium'"
                         @click="fileAddItem(item, num)"
                         v-if="editModel !== 'V'"
                         v-show="item.accessoryExtList.length === num+1"></auth-button>
          </el-form-item>
        </el-row>
      </div>
      </template>
    </div>
  </dialog-edit>
  </div>
</template>

<script>
// import { Loading } from 'element-ui'
import feedbackMaterialApi from '@/api/assetaudit/feedbackMaterial/feedbackMaterialApi'
import SelectReviewPerson from '@/components/element/assetaudit/SelectReviewPerson'
import { mapGetters } from 'vuex'
import SelectComplianceAcceptor from '@/components/element/assetaudit/SelectComplianceAcceptor'
import FeedInput from '@/components/element/assetaudit/FeedInput'
import { UPLOAD_API } from '@/constant'
// import * as format from '@/filters/index'
import { authButton, DialogEdit, dymForm, SelectProductName, SelectReceiver, btnUpload, btnDownload } from 'newepoch-components'
import BasePage from '@/pages/baseEditPage'
export default {
  extends: new BasePage(),
  components: {
    DialogEdit,
    authButton,
    dymForm,
    SelectProductName,
    SelectReceiver,
    SelectReviewPerson,
    FeedInput,
    btnUpload,
    btnDownload,
    SelectComplianceAcceptor
  },
  props: {
    form: {
      type: Object,
      default () {
        return {}
      }
    },
    editModel: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      payFlag: false,
      isActive: true,
      feedForm: { // 表单值
        materialSourceType: '',
        dockPersonId: '',
        dockPersonName: '',
        payCode: '',
        payId: '',
        productName: '',
        productNameId: '',
        businessType: '',
        issue: '',
        gysId: '',
        gysName: '',
        xmgsId: '',
        xmgsName: '',
        opinionsDTO: [{
          institutionOpinions: '',
          hgOpinions: '',
          accessoryExtList: [{
            fileName: '',
            fileId: ''
          }]
        }]
      },
      uploadApi: UPLOAD_API,
      newFormValue: {},
      commitFormValue: {},
      componentList: [
        {
          // 素材来源
          value: 'materialSourceType',
          disabled: false,
          componentName: 'SelectDictionary',
          dictTypeCode: 'FEEDBACK_SOURCE',
          label: this.$t('feedbackMaterialIndex.materialSourceType'),
          labelWidth: '125px',
          name: 'materialSourceType',
          placeholder: this.$t('common.pleaseSelect'),
          cols: [8, 8, 8, 8],
          prop: 'materialSourceType'
        },
        {
          // 付款确认书编号
          value: 'payCode',
          disabled: false,
          clearable: true,
          componentName: 'el-input',
          label: this.$t('feedbackMaterialIndex.payCode'),
          labelWidth: '125px',
          name: 'payCode',
          maxlength: 64,
          minlength: 0,
          placeholder: this.$t('common.pleaseInput'),
          cols: [8, 8, 8, 8],
          prop: 'payCode'
        },
        {
          // 产品类型
          value: 'businessType',
          disabled: true,
          componentName: 'SelectDictionary',
          // dictTypeCode: 'BUSINESS_TYPE', // 原代码
          dictTypeCode: 'ZD0087', // 临时使用代码
          label: this.$t('feedbackMaterialIndex.productType'),
          placeholder: '',
          labelWidth: '125px',
          name: 'businessType',
          cols: [8, 8, 8, 8],
          prop: 'businessType'
        },
        {
          // 产品名称
          value: 'productName',
          disabled: true,
          componentName: 'el-input',
          label: this.$t('feedbackMaterialIndex.productName'),
          labelWidth: '125px',
          name: 'productName',
          cols: [8, 8, 8, 8],
          prop: 'productName'
        },
        {
          // 期数
          value: 'issue',
          disabled: true,
          componentName: 'el-input',
          label: this.$t('feedbackMaterialIndex.issue'),
          labelWidth: '125px',
          name: 'issue',
          cols: [8, 8, 8, 8],
          prop: 'issue'
        },
        {
          // 合规对接人
          value: 'dockPersonId',
          disabled: false,
          componentName: SelectComplianceAcceptor,
          label: this.$t('feedbackMaterialIndex.compliancePerson'),
          labelWidth: '125px',
          name: 'dockPersonId',
          placeholder: this.$t('common.pleaseSelect'),
          cols: [8, 8, 8, 8],
          prop: 'dockPersonId'
        }
      ],
      formRules: {
        materialSourceType: [{
          required: true,
          message: this.$t('common.pleaseSelect') + this.$t('feedbackMaterialIndex.materialSourceType'),
          trigger: 'change'
        }],
        payCode: [{
          required: true,
          message: this.$t('common.pleaseInput') + this.$t('feedbackMaterialIndex.payCode'),
          trigger: ['blur', 'change']
        }, {
          required: true,
          message: this.$t('common.pleaseInput') + this.$t('feedbackMaterialIndex.payCode'),
          trigger: 'input'
        }],
        dockPersonId: [{
          required: true,
          message: this.$t('common.pleaseSelect') + this.$t('feedbackMaterialIndex.compliancePerson'),
          trigger: 'change'
        }]
      }
    }
  },
  watch: {
    // 监听付款确认书
    'feedForm.payCode': {
      handler (val) {
        if (!val) {
          this.checkChange('payCode', '')
        }
      },
      deep: true
    }
  },
  // 详情
  mounted () {
    if (this.editModel === 'E' || this.editModel === 'V') {
      this.api.get(this.form.keyId).then(res => { // 通过 keyId 获取反馈素材详情数据
        if (res.data) {
          res.data.opinionsDTO = [{
            institutionOpinions: '',
            hgOpinions: '',
            accessoryExtList: [{
              fileName: '',
              fileId: ''
            }]
          }]
          if (res.data.issue === 0) {
            res.data.issue = ''
          }
          res.data.opinionsDTO[0].institutionOpinions = res.data.institutionOpinions
          res.data.opinionsDTO[0].hgOpinions = res.data.hgOpinions
          // 文件数据
          if ((!this.UtilJs.isEmpty(res.data.accessoryExtDtoList)) && res.data.accessoryExtDtoList.length > 0) {
            res.data.accessoryExtDtoList.forEach((resp, i) => {
              if (i === 0) {
                res.data.opinionsDTO[0].accessoryExtList[i].fileId = resp.fileId
                res.data.opinionsDTO[0].accessoryExtList[i].fileName = resp.fileName
              } else {
                res.data.opinionsDTO[0].accessoryExtList.push({
                  fileName: resp.fileName,
                  fileId: resp.fileId
                })
              }
            })
          }
          this.feedForm = Object.assign({}, this.feedForm, res.data)
          if (this.feedForm.maintenanceWayType === '01') {
            this.componentList[0].disabled = true
            this.componentList[1].disabled = true
            this.componentList[5].disabled = true
          } else {
            if (this.editModel !== 'V') { // 非自动维护、非查看模式则可编辑
              this.componentList[0].disabled = false
              this.componentList[1].disabled = false
              this.componentList[5].disabled = false
            } else {
              this.componentList[0].disabled = true
              this.componentList[1].disabled = true
              this.componentList[5].disabled = true
            }
          }
        }
      })
    }
    //  维护方式为01或者查看模式的时候，素材来源，合规对接人，付款确认书为只读
    // if (this.feedForm.maintenanceWayType === '01' || this.editModel === 'V') {
    //   this.componentList[0].disabled = true
    //   this.componentList[1].disabled = true
    //   this.componentList[5].disabled = true
    // }
  },
  computed: {
    // api
    api () {
      return feedbackMaterialApi.feedbackmaterial
    },
    ...mapGetters(['payCodeDropdownOption'])

  },
  methods: {
    // 新增
    addItem (item, index) {
      debugger
      if (this.feedForm.opinionsDTO.find(res => (item.institutionOpinions === '' || item.hgOpinions === ''))) {
        this.warning('请先填写此项的第三方机构反馈意见和合规反馈')
      } else {
        this.feedForm.opinionsDTO.push({
          institutionOpinions: '',
          hgOpinions: '',
          accessoryExtList: [{
            fileName: '',
            fileId: ''
          }]
        })
      }
      // if (item.institutionOpinions === '' || item.hgOpinions === '') {
      //   this.warning('请先填写此项的第三方机构反馈意见和合规反馈')
      // } else {
      //   this.feedForm.opinionsDTO.push({
      //     institutionOpinions: '',
      //     hgOpinions: '',
      //     accessoryExtList: [{
      //       fileName: '',
      //       fileId: ''
      //     }]
      //   })
      // }
    },
    // 上传文件栏标题显示
    showTietle (index) {
      if (index === 0) {
        return this.$t('feedbackMaterialIndex.relatedAccessories')
      } else {
        return ''
      }
    },
    // 拆分按钮按下
    addCopyItem (item) {
      if (item.institutionOpinions === '' || item.hgOpinions === '') {
        this.warning('请先填写此项的第三方机构反馈意见和合规反馈')
      } else {
        this.feedForm.opinionsDTO.push({
          institutionOpinions: item.institutionOpinions,
          hgOpinions: item.hgOpinions,
          accessoryExtList: [{
            fileName: '',
            fileId: ''
          }]
        })
      }
    },
    // 动态删除元素
    deleteItem (item, index) {
      this.feedForm.opinionsDTO.splice(index, 1)
    },
    // 文件行新增
    fileAddItem (item, index) {
      if (item.accessoryExtList[index].fileId !== '') {
        item.accessoryExtList.push({
          fileName: '',
          fileId: ''
        })
      } else {
        this.warning('请先上传文件')
      }
    },
    // 文件行删除
    fileDeleteItem (item, index, length) {
      if (length > 1) {
        item.accessoryExtList.splice(index, 1)
      } else {
        item.accessoryExtList[0].fileName = ''
        item.accessoryExtList[0].fileId = ''
      }
    },
    // 付款确认书编号
    checkChange (valueKey, value) {
      if (valueKey === 'payCode') {
        let queryArray = []
        queryArray.push(value)
        feedbackMaterialApi.assetbycode.create(queryArray).then(res => {
          if (res.data.length > 0) {
            let data = res.data[0]
            this.isHovePayCode = true
            this.feedForm.payCode = data.assetCode
            this.feedForm.businessType = data.productType.toString()
            this.feedForm.payId = data.assetInfoId
            this.feedForm.productNameId = data.projectId
            this.feedForm.productName = data.projectName
            this.feedForm.issue = data.specialPlanPeriods
            this.feedForm.gysId = data.creditorId
            this.feedForm.gysName = data.creditor
            this.feedForm.xmgsId = data.debtorId
            this.feedForm.xmgsName = data.debtor
            this.payFlag = false
          } else {
            this.isHovePayCode = false
            this.feedForm.businessType = ''
            this.feedForm.payId = ''
            this.feedForm.productNameId = ''
            this.feedForm.productName = ''
            this.feedForm.issue = ''
            this.feedForm.gysId = ''
            this.feedForm.gysName = ''
            this.feedForm.xmgsId = ''
            this.feedForm.xmgsName = ''
            this.payFlag = true
            if (this.feedForm.payCode) { // 为空时不提示付款确认书错误
              this.warning(this.$t('feedbackMaterialIndex.confirmationInvalid'))
            }
          }
        })
      }
    },
    // 上传成功
    uploadSuccess () {
      arguments[1].accessoryExtList[arguments[2]].fileName = arguments[0][0].fileName
      arguments[1].accessoryExtList[arguments[2]].fileId = arguments[0][0].fileID
    },
    // 表单下拉框改变，数据填充
    selectChanged (obj, index) {
      for (let key in obj) {
        // 素材来源
        if (key === 'materialSourceTypeInfo' && obj[key] !== undefined) {
          this.$set(this.feedForm, 'materialSourceType', obj[key].dictId)
          // 合规对接人
        } else if (key === 'dockPersonIdInfo' && obj[key] !== undefined) {
          this.$set(this.feedForm, 'dockPersonId', obj[key].accountId)
          this.$set(this.feedForm, 'dockPersonName', obj[key].nickName)
        }
      }
    },
    // 对话框标题
    titleName () {
      // 查看
      if (this.editModel === 'V') {
        return this.$t('feedbackMaterialIndex.view')
        // 编辑
      } else if (this.editModel === 'E') {
        return this.$t('feedbackMaterialIndex.edit')
        // 新增
      } else if (this.editModel === 'C') {
        return this.$t('feedbackMaterialIndex.add')
      }
    },
    // 保存
    onSave () {
      this.$emit('update:searchFormView', false) // 检索表单重新渲染
      let $this = this
      if (this.payFlag) {
        this.warning(this.$t('feedbackMaterialIndex.confirmationInvalid'))
        return
      }
      this.$LoadingShow()
      // 新增反馈素材
      if ($this.editModel === 'C') {
        $this.feedForm.maintenanceWayType = '03' // 维护方式（手工维护）
        $this.api.create($this.feedForm).then(res => {
          if (res.data === true) {
            $this.success('新增反馈素材成功')
            $this.dialogVisible = false
            let val = 'success'
            $this.$emit('onSave', val)
            this.$LoadingClose()
          }
        })
        // 修改反馈素材
      } else if ($this.editModel === 'E') {
        $this.api.update($this.feedForm.keyId, $this.feedForm).then(res => {
          if (res.data === true) {
            $this.success('修改反馈素材成功')
            $this.dialogVisible = false
            let val = 'success'
            $this.$emit('onSave', val)
            this.$LoadingClose()
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// .dialogAddClass {
//   /deep/ .el-row {
//     div {
//       height: 50px;
//     }
//   }
//   /deep/ .el-form-item__error{
//     top: 35px;
//   }
// }
// .customDivClass{
//   /deep/ .el-form-item__error{
//     top: 100%;
//   }
// }
.titleLine{
  padding: 0 0 10px 0;
  // margin-top: -12px
}
// .el-form-item{
//   margin-bottom: 15px;
// }
// /deep/ .el-dialog__footer{
//   padding: 0 10px 10px !important;
// }
</style>
