<template>
    <dialog-edit :visible.sync="dialogVisible"
                 :title="$t('traceMgr.supplementaryAccountAudit')"
                 :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="reviewInformationSourceData > 0">
        <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>
      <data-table :sourceData.sync="supplementAccountInfoSourceData"
                  :columns="supplementAccountInfoColumns"
                  :border="true"
                  :stripe="true"
                  operateBtnLayout=""
                  :showPage="false">
        <!--账户证明附件-->
        <el-table-column :label="$t('traceMgr.attachmentOfAccountCertificate')" align="center" fixed="right" :width="180">
          <template slot-scope="scope">
            <btn-download :fileID="scope.row.attestAccessory"></btn-download>
          </template>
        </el-table-column>
      </data-table>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <!--是否通过-->
        <el-row>
          <el-col :span="6">
            <el-form-item :label="$t('traceMgr.passesOrNot')" :label-width="'140px'" prop="passesOrNot">
              <el-select v-model="ruleForm.passesOrNot" @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.passesOrNot === '0'">
          <el-row>
            <el-col :span="8">
              <el-form-item :label="$t('traceMgr.noPassReason')" :label-width="'140px'" prop="noPassReason">
                <el-input v-model="ruleForm.noPassReason" type="textarea" :placeholder="$t('common.input')"></el-input>
              </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 {
  DialogEdit,
  paymentInfo,
  DataTable,
  btnDownload
} from 'newepoch-components'

export default {
  name: 'taskDialog',
  components: {
    tracemgrApi,
    DialogEdit,
    paymentInfo,
    DataTable,
    btnDownload
  },
  props: {
    visible: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    taskId: {
      type: String
    },
    assetCode: {
      type: String
    },
    args: {
      type: String
    },
    assetInfoId: {
      type: String
    },
    assetPoolId: {
      type: String
    }
  },
  data () {
    return {
      submitLoading: false,
      keyId: '2002241636461020001',
      api: {},
      form: {},
      reviewInformationSourceData: [],
      supplementAccountInfoSourceData: [],
      ruleForm: {
        keyId: '',
        passesOrNot: '0',
        noPassReason: ''
      },
      loadCount: 0,
      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'
        }
      ],
      supplementAccountInfoColumns: [
        {
          // 补出账原因
          prop: 'supplementReason',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.supplementReason,
          align: 'center'
        },
        {
          // 收款人名称
          prop: 'payeeName',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.payeeName,
          align: 'center'
        },
        {
          // 收款人账号
          prop: 'payeeAccount',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.payeeAccount,
          align: 'center'
        },
        {
          // 收款人开户行
          prop: 'payeeBank',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.payeeBank,
          align: 'center'
        },
        {
          // 备注
          prop: 'memo',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.memo,
          align: 'center'
        }
      ],
      rules: {
        passesOrNot: [
          { required: true, message: this.$i18n.messages[this.$i18n.locale].traceMgr.selectPassesOrNot, trigger: 'change' }
        ],
        noPassReason: [
          { required: true, message: this.$i18n.messages[this.$i18n.locale].traceMgr.inputNoPassReason, trigger: 'change' }
        ]
      }
    }
  },
  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['supplementaryAccountAuditTaskDialog'].getList(data).then(res => {
            if (res.data) {
              this.reviewInformationSourceData = res.data
              this.supplementAccountInfoSourceData = []
              this.ruleForm.keyId = res.data[0].keyId
              this.supplementAccountInfoSourceData.push(res.data[0])
            }
          })
        }
      }
    }

  },
  methods: {
    complete () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          let data = {}
          data['keyId'] = this.ruleForm.keyId
          // data['supplementKeyId'] = this.supplementAccountInfoSourceData[0].supplementKeyId
          // data['assetId'] = this.supplementAccountInfoSourceData[0].assetId
          // data['assetPoolId'] = this.ruleForm.assetPoolId
          // data['assetPoolId'] = '1911221731528020021'
          // data['assetCode'] = this.ruleForm.assetCode
          // data['assetCode'] = '1911221731528020021'
          data['args'] = this.args
          data['assetId'] = this.assetInfoId
          data['taskId'] = this.taskId
          data['assetPoolId'] = this.assetPoolId

          data['passesOrNot'] = this.ruleForm.passesOrNot
          data['noPassReason'] = this.ruleForm.noPassReason

          data['payeeName'] = this.supplementAccountInfoSourceData[0].payeeName
          data['payeeAccount'] = this.supplementAccountInfoSourceData[0].payeeAccount
          data['payeeBank'] = this.supplementAccountInfoSourceData[0].payeeBank
          data['attestAccessory'] = this.supplementAccountInfoSourceData[0].attestAccessory

          tracemgrApi['supplementaryAccountAuditTaskDialog'].saveAudit(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)
          })
        }
      })
    },
    dialogClose () {
      this.dialogVisible = false
      this.$refs['ruleForm'].resetFields()
      this.$parent.handleFilter()
    },
    selectChange (val) {
      this.$refs['ruleForm'].resetFields()
      this.ruleForm.passesOrNot = val
    }
  }
}
</script>
