<template>
  <dialog-edit :visible.sync="dialogVisible"
               :title="$t('traceMgr.supplementaryAccountInfo')"
               :editModel="'V'"
               :form="form"
               :api="api"
               :footerBtnShow="false"
               :appendToBody="true"
               :autoClose="true"
               @close="dialogClose">
    <!--订单信息-->
    <el-row>
      <payment-info :keyId="assetInfoId" :title="$t('traceMgr.orderInfo')"></payment-info>
    </el-row>
    <!--区域专员审核信息-->
    <div v-if="showTable">
      <el-row>
        <el-tabs>
          <el-tab-pane :label="$t('traceMgr.reviewInformation')"></el-tab-pane>
        </el-tabs>
      </el-row>
      <data-table :sourceData.sync="reviewInformationSourceData"
                  :columns="reviewInformationColumns"
                  :border="true"
                  :stripe="true"
                  operateBtnLayout=""
                  :showPage="false"
                  :loadCount.sync="loadCount">
      </data-table>
    </div>
    <!--补出账信息-->
    <el-row>
      <el-tabs>
        <el-tab-pane :label="$t('traceMgr.supplementAccountInfo')"></el-tab-pane>
      </el-tabs>
    </el-row>
    <!--联系人-->
    <el-row class="marginBottom2 title">
      <el-col :span="2" class="text-center" v-if="employees.length > 0"><span>{{$t('common.contact')}}：</span></el-col>
      <el-col :span="5" v-for="(employee,index) in employees" :key="index">
        <span v-if="employee.employeeName">{{employee.employeeName}}</span>
        <span v-if="employee.telephone">-{{employee.telephone}}</span>
        <span v-if="employee.account">-{{employee.account}}</span>
      </el-col>
    </el-row>
    <!--话术-->
    <el-row class="word_wrap marginBottom6">
      <el-col :span="1" class="text-center">
        <span>{{$t('traceMgr.wordsTechnique')}}</span>
      </el-col>
      <el-col :span="12">
        <speech-craft-input v-model="content" :defaultSpeechFlag="false" @defaultSpeech="setDefaultSpeech"
                            v-loading="contentLoading"
                            :element-loading-text="$t('traceMgr.contentLoading')"
                            element-loading-spinner="el-icon-loading"
                            element-loading-background="rgba(255, 255, 255, 0.7)"></speech-craft-input>
      </el-col>
    </el-row>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <!--补出账原因-->
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('traceMgr.supplementReason')" :label-width="'140px'">
            <el-input type="textarea" v-model="ruleForm.supplementReason" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--是否更改收款信息-->
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('traceMgr.whetherChangeCollectionInformation')" :label-width="'140px'" prop="whetherChangeCollectionInformation">
            <el-select v-model="ruleForm.whetherChangeCollectionInformation" @change="selectChange">
              <el-option :key="'0'" :label="$t('common.no')" :value="'0'"></el-option>
              <el-option :key="'1'" :label="$t('common.yes')" :value="'1'"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="ruleForm.whetherChangeCollectionInformation === '0'">
        <!--不更改原因-->
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('traceMgr.noChangeReason')" :label-width="'140px'" prop="noChangeReason">
              <el-input v-model="ruleForm.noChangeReason" maxlength="500"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('traceMgr.attestAccessory')" :label-width="'140px'">
              <btn-upload type="primary" :uploadApi="uploadApi" @uploadSuccess="uploadSuccess"></btn-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="ruleForm.whetherChangeCollectionInformation === '1'">
        <!--收款人名称-->
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('traceMgr.payeeName')" :label-width="'140px'" prop="payeeName">
              <el-input v-model="ruleForm.payeeName" maxlength="255"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--收款人账号-->
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('traceMgr.payeeAccount')" :label-width="'140px'" prop="payeeAccount">
              <el-input v-model="ruleForm.payeeAccount" maxlength="500"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--收款人开户行-->
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('traceMgr.payeeBank')" :label-width="'140px'" prop="payeeBank">
              <el-input v-model="ruleForm.payeeBank" maxlength="500"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--备注-->
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('traceMgr.memo')" :label-width="'140px'">
              <el-input v-model="ruleForm.memo" maxlength="500"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--账户证明附件-->
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('traceMgr.attestAccessory')" :label-width="'140px'" :required="true">
              <div v-if="ruleForm.attestAccessory === ''">
                <btn-upload v-model="ruleForm.attestAccessory" type="primary" :uploadApi="uploadApi" @uploadSuccess="uploadSuccess"></btn-upload>
              </div>
              <div v-else>
                <btn-upload :fileID="ruleForm.attestAccessory" v-model="ruleForm.attestAccessory" type="primary" :uploadApi="uploadApi" @uploadSuccess="uploadSuccess"></btn-upload>
                <btn-download :downloadButtonMsg="'下 载'" :fileID="ruleForm.attestAccessory" type="primary" size="small" :classType="true"></btn-download>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="medium" @click="complete()" :loading="submitLoading">{{$t('common.complete')}}</el-button>
      <el-button size="medium" @click="dialogVisible=false">{{$t('common.close')}}</el-button>
    </div>
  </dialog-edit>
</template>
<script>

import tracemgrApi from '@/api/tracemgrApi'
import { UPLOAD_API } from '@/constant.js'
import {
  DialogEdit,
  paymentInfo,
  DataTable,
  speechCraftInput,
  btnUpload,
  validate,
  btnDownload
} from 'newepoch-components'

export default {
  name: 'taskDialog',
  components: {
    tracemgrApi,
    DialogEdit,
    paymentInfo,
    DataTable,
    speechCraftInput,
    btnUpload,
    validate,
    btnDownload
  },
  data () {
    return {
      submitLoading: false,
      showTable: false,
      contentLoading: false,
      initContent: '',
      content: '',
      contractName: '',
      factorAmount: '',
      faileReason: '',
      payee: '',
      openBank: '',
      accountNumber: '',
      factorCommissioner: '',
      officePhone: '',
      phone: '',
      keyId: '',
      api: {},
      form: {},
      employees: [],
      reviewInformationSourceData: [],
      dataReturn: [],
      ruleForm: {
        supplementReason: '',
        whetherChangeCollectionInformation: '',
        noChangeReason: '',
        payeeName: '',
        payeeAccount: '',
        payeeBank: '',
        memo: '',
        attestAccessory: ''
      },
      loadCount: 0,
      uploadApi: UPLOAD_API,
      reviewInformationColumns: [
        {
          // 审核人
          prop: 'auditUserName',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.auditUserName,
          align: 'center'
        },
        {
          // 审核时间
          prop: 'auditTime',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.auditDate,
          align: 'center'
        },
        {
          // 审核意见
          prop: 'auditMemo',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.auditOpinion,
          align: 'center'
        }
      ],
      rules: {
        whetherChangeCollectionInformation: [
          { required: true, message: this.$i18n.messages[this.$i18n.locale].traceMgr.selectWhetherChangeCollectionInformation, trigger: 'change' }
        ],
        noChangeReason: [
          { required: true, message: this.$i18n.messages[this.$i18n.locale].traceMgr.inputNoChangeReason, trigger: 'blur' }
        ],
        payeeName: [
          { required: true, message: this.$i18n.messages[this.$i18n.locale].traceMgr.inputPayeeName, trigger: 'blur' }
          // { validator: validate.openingBankNameValidate, trigger: 'blur' }
        ],
        payeeAccount: [
          { required: true, message: this.$i18n.messages[this.$i18n.locale].traceMgr.inputPayeeAccount, trigger: 'blur' },
          { validator: validate.openingBankAccountValidate, trigger: 'blur' }
        ],
        payeeBank: [
          { required: true, message: this.$i18n.messages[this.$i18n.locale].traceMgr.inputPayeeBank, trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    taskId: {
      type: String
    },
    assetCode: {
      type: String
    },
    args: {
      type: String
    },
    assetInfoId: {
      type: String
    },
    supplierId: {
      type: String
    },
    assetPoolId: {
      type: String
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible: {
      handler: function (newValue) {
        if (newValue) {
          let data = {}
          data['assetId'] = this.assetInfoId
          data['args'] = this.args
          tracemgrApi['supplementaryAccountInfoTaskDialog'].getAuditLit(data).then(res => {
            this.ruleForm.supplementReason = res.data[0].supplementReason
            if (res.data[0].keyId !== undefined) {
              this.keyId = res.data[0].keyId
              this.ruleForm.whetherChangeCollectionInformation = res.data[0].whetherChangeCollectionInformation
              this.ruleForm.noChangeReason = res.data[0].noChangeReason
              this.ruleForm.payeeName = res.data[0].payeeName
              this.ruleForm.payeeAccount = res.data[0].payeeAccount
              this.ruleForm.payeeBank = res.data[0].payeeBank
              this.ruleForm.memo = res.data[0].memo
              this.ruleForm.attestAccessory = res.data[0].attestAccessory

              this.reviewInformationSourceData = res.data

              if (this.reviewInformationSourceData[0].auditUserName !== undefined && this.reviewInformationSourceData[0].auditTime !== undefined && this.reviewInformationSourceData[0].auditMemo !== undefined) {
                this.showTable = true
              }
              this.dataReturn = res.data
            }
            this.$nextTick(() => {
              // 获取联系人信息
              // WKQYGFYXGS10020200107003
              tracemgrApi['onlineAuditTaskDialog'].getEmployeeInfos({ 'assetCode': this.assetCode }).then(res => {
                this.employees = res.data
              })
              this.getAssetPaymentInfo()
            })
          })
        }
      }
    }
  },
  methods: {
    uploadSuccess (returnData) {
      this.success(this.$i18n.messages[this.$i18n.locale].traceMgr.file + returnData.fileName + this.$i18n.messages[this.$i18n.locale].common.uploadSuccess)
      this.ruleForm.attestAccessory = returnData.fileID
    },
    complete () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          if (this.ruleForm.whetherChangeCollectionInformation === '0' || ((this.ruleForm.attestAccessory !== null && this.ruleForm.attestAccessory !== '' && this.ruleForm.attestAccessory !== undefined))) {
            let data = {}
            data['assetId'] = this.assetInfoId
            data['assetPoolId'] = this.assetPoolId
            data['args'] = this.args
            data['taskId'] = this.taskId
            data['keyId'] = this.keyId

            data['whetherChangeCollectionInformation'] = this.ruleForm.whetherChangeCollectionInformation
            data['noChangeReason'] = this.ruleForm.noChangeReason
            data['payeeName'] = this.ruleForm.payeeName
            data['payeeAccount'] = this.ruleForm.payeeAccount
            data['payeeBank'] = this.ruleForm.payeeBank
            data['memo'] = this.ruleForm.memo
            data['attestAccessory'] = this.ruleForm.attestAccessory
            tracemgrApi['supplementaryAccountInfoTaskDialog'].save(data).then(res => {
              if (res.data) {
                this.submitLoading = false
                this.success(this.$i18n.messages[this.$i18n.locale].common.submittedSuccessfully)
                this.dialogClose()
              } else {
                this.submitLoading = false
                this.error(this.$i18n.messages[this.$i18n.locale].common.submitFail)
              }
            }, res => {
              this.submitLoading = false
              this.error(this.$i18n.messages[this.$i18n.locale].common.submitFail)
            })
          } else {
            this.submitLoading = false
            this.$message({
              message: this.$i18n.messages[this.$i18n.locale].traceMgr.inputAttestAccessory,
              type: 'error'
            })
          }
        }
      })
    },
    dialogClose () {
      this.dialogVisible = false
      this.$refs['ruleForm'].resetFields()
      this.$parent.handleFilter()

      this.ruleForm = {
        supplementReason: '',
        whetherChangeCollectionInformation: '',
        noChangeReason: '',
        payeeName: '',
        payeeAccount: '',
        payeeBank: '',
        memo: '',
        attestAccessory: ''
      }
      this.reviewInformationSourceData = []
      this.showTable = false
    },
    selectChange (val) {
      // this.rr = val === '0' ? this.rules : this.rulesYes
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
      // this.$refs['ruleForm'].resetFields()
      // this.ruleForm.whetherChangeCollectionInformation = val
    },
    // 获取话术信息相关信息
    getAssetPaymentInfo () {
      this.contentLoading = true
      tracemgrApi['onlineAuditTaskDialog'].getOrderInfo(this.assetInfoId).then(res => {
        // 合同名称
        this.contractName = res.data.assetPaymentInfoDTO.bussContractName
        // 保理金额
        this.factorAmount = res.data.assetPaymentInfoDTO.factoringMoney
        // 收款单位
        this.payee = res.data.assetPaymentPoolOperDTO.receiverName
        // 开户行
        this.openBank = res.data.assetPaymentPoolOperDTO.receiverBank
        // 账号
        this.accountNumber = res.data.assetPaymentPoolOperDTO.receiverBankAccount

        this.getSpeechCraftInfo()
      }).catch(res => {
        this.content = this.$i18n.messages[this.$i18n.locale].traceMgr.noneData
        this.contentLoading = false
      })
    },
    // 获取话术信息:区域专员、电话、手机号
    getSpeechCraftInfo () {
      tracemgrApi['fileList'].getSpeechCraftInfo({ 'assetId': this.assetInfoId }).then(res => {
        // 保理专员
        this.factorCommissioner = res.data.factoringCommissioner
        // 座机
        this.officePhone = res.data.factoringTelephone
        // 手机
        this.phone = res.data.factoringPhoneNumber
        this.getContent()
      }).catch(res => {
        this.content = this.$i18n.messages[this.$i18n.locale].traceMgr.noneData
        this.contentLoading = false
      })
    },
    // 话术
    getContent () {
      // 出账失败原因
      if (this.ruleForm.supplementReason !== '' && this.ruleForm.supplementReason !== undefined) {
        this.faileReason = this.ruleForm.supplementReason
      }

      this.content = this.$i18n.messages[this.$i18n.locale].traceMgr.contentMessage10 + this.assetCode + ' ' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.fileListTwo + this.contractName + ' ' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.fileListThere + parseFloat(this.factorAmount).toFixed(2) + this.$i18n.messages[this.$i18n.locale].traceMgr.contentFour +
        this.$i18n.messages[this.$i18n.locale].traceMgr.contentMessage11 +
        this.$i18n.messages[this.$i18n.locale].traceMgr.contentMessage12 + this.faileReason + '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.contentMessage13 + this.payee + '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.contentMessage14 + this.openBank + '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.contentMessage15 + this.accountNumber + '\n' +
        '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.contentMessage16 +
        '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.contentMessage17 + this.factorCommissioner + '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.contentMessage8 + this.officePhone + '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.contentMessage9 + this.phone

      this.initContent = JSON.parse(JSON.stringify(this.content))
      this.contentLoading = false
    },
    setDefaultSpeech () {
      this.content = this.initContent
    }
  }
}
</script>
