<template>
    <dialog-edit :visible.sync="dialogVisible"
                 :title="$t('common.chinaClearExceptionHandling')"
                 :footerBtnShow="isFootView"
                 :editModel="'V'"
                 :form="form"
                 :api="api"
                 :appendToBody="true">

        <!--订单信息-->
        <el-row>
            <payment-info :keyId="keyId" :title="$t('traceMgr.orderInfo')"></payment-info>
        </el-row>
        <!--发票情况列表-->
        <el-row>
            <el-collapse accordion>
                <el-collapse-item>
                    <template slot="title">
                        <!--标题-->
                        <el-row>
                            <el-tabs>
                                <el-tab-pane :label="$t('common.invoiceStatusList')"></el-tab-pane>
                            </el-tabs>
                        </el-row>
                    </template>
            <!--列表组件-->
            <el-row>
                <invoice-list :sourceData="invoiceSourceData" :columns="invoiceColumns"></invoice-list>
            </el-row>
                </el-collapse-item>
            </el-collapse>
        </el-row>
        <!--中登异常1-->
        <!--头部按钮-->
        <el-row>
            <el-collapse accordion>
                <el-collapse-item>
                    <template slot="title">
                        <!--标题-->
                        <el-row>
                            <el-tabs>
                                <el-tab-pane :label="$t('common.chinaClearException')+1"></el-tab-pane>
                            </el-tabs>
                        </el-row>
                    </template>
            <el-row class="btn_padding">
               <el-row class="textRight">
                   <auth-button type="primary" size="medium" :label="$t('common.abnormalAttachmentDownload')"></auth-button>
                   <auth-button type="primary" size="medium" :label="$t('common.viewOtherUnusualOrders')" @click="getOtherListVisible"></auth-button>
               </el-row>
            </el-row>
            <!--列表-->
            <el-row>
                <invoice-row :sourceData="chinaClearExceptionSourceData" :columns="chinaClearExceptionColumns"></invoice-row>
            </el-row>
                </el-collapse-item>
            </el-collapse>
        </el-row>
        <!--中登异常2-->
        <!--中登异常3-->
        <!--话术-->
        <el-row class="contact_wrap" v-for="(employee,index) in employees" :key="index">
            <el-col :span="3" v-if="employee.employeeName">
                <span>{{$t('common.contact')}}&nbsp;</span>
                <span>{{employee.employeeName}}</span>
            </el-col>
            <el-col :span="12" v-if="employee.telephone">
                <span>{{$t('traceMgr.phoneNumber')}}&nbsp;</span>
                <span>{{employee.telephone}}</span>
            </el-col>
        </el-row>
        <el-row class="word_wrap">
            <el-col :span="1" class="text-center">
                <span>{{$t('traceMgr.wordsTechnique')}}</span>
            </el-col>
            <el-col :span="12">
                <speech-craft-input v-model="content" ></speech-craft-input>
            </el-col>
        </el-row>
        <!--跟进状态-->
        <el-row>
            <el-row>
                <el-tabs>
                    <el-tab-pane :label="$t('common.followUpStatus')"></el-tab-pane>
                </el-tabs>
            </el-row>
            <!--异常跟进履历按钮-->
            <el-row class="textRight">
                <auth-button type="primary" size="medium" :label="$t('common.abnormalFollowUpResume')"></auth-button>
            </el-row>
            <!--预计解决时间(traceMgr.possibleResolutionTime)-->
            <el-row>
                <el-col :span="3" class="text-center lineHeight">
                    <span>{{$t('traceMgr.possibleResolutionTime')+':'}}</span>
                </el-col>
                <el-col :span="21">
                    <el-date-picker v-model="possibleResolutionTime"></el-date-picker>
                </el-col>
            </el-row>
            <!--异常进展详情备注(common.remarksOnAbnormalProgressDetails)-->
            <el-row class="textArea-container">
                <el-col :span="3" class="text-center lineHeight">
                    <span>{{$t('common.remarksOnAbnormalProgressDetails')+':'}}</span>
                </el-col>
                <el-col :span="21">
                    <el-input type="textarea" v-model="remarksOnAbnormalProgressDetails" class="bottom_textarea" :autosize="textAreaSize"></el-input>
                </el-col>
            </el-row>
        </el-row>
        <!--其他异常订单列表-->
        <other-list-dialog :sourceData="otherListSourceData" :columns="otherListColumns" :visible.sync="otherListVisible"></other-list-dialog>
    </dialog-edit>
</template>

<script>
import { DialogEdit, paymentInfo, DataTable, speechCraftInput, authButton } from 'newepoch-components'
import InvoiceList from '@/components/tracemgr/factoringCommissioner/taskTable/chinaClear/invoiceList'
import InvoiceRow from '@/components/tracemgr/factoringCommissioner/taskTable/chinaClear/invoiceRow'
import OtherListDialog from '@/components/tracemgr/factoringCommissioner/taskTable/chinaClear/otherListDialog'
export default {
  name: 'taskDialog',
  components: {
    DialogEdit,
    paymentInfo,
    InvoiceList,
    OtherListDialog,
    DataTable,
    speechCraftInput,
    InvoiceRow,
    authButton
  },
  data () {
    return {
      employees: [],
      keyId: '2002241636461020001',
      content: '',
      textAreaSize: {
        minRows: 5,
        maxRows: 6
      },
      otherListSourceData: [
        {
          'productInfo': '1',
          'PaymentConfirmationNo': '1',
          'supplierName': '1',
          'NameOfProjectCompany': '1',
          'nameOfTheContract': '1',
          'TheAmountOfFactoring': '1',
          'region': '1',
          'factoringCommissioner': '1',
          'descriptionProperty': '1',
          'abnormalSituation': '1',
          'chinaClearSuggestedSolution': '1'
        }
      ],
      otherListColumns: [
        {
          prop: 'productInfo',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.productInfo,
          align: 'left',
          width: 100
        },
        {
          prop: 'PaymentConfirmationNo',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.PaymentConfirmationNo,
          align: 'left',
          width: 100
        },
        {
          prop: 'supplierName',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.supplierName,
          align: 'left',
          width: 100
        },
        {
          prop: 'NameOfProjectCompany',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.NameOfProjectCompany,
          align: 'left',
          width: 100
        },
        {
          prop: 'nameOfTheContract',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.nameOfTheContract,
          align: 'left',
          width: 100
        },
        {
          prop: 'TheAmountOfFactoring',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.TheAmountOfFactoring,
          align: 'left',
          width: 100
        },
        {
          prop: 'region',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.region,
          align: 'left',
          width: 100
        },
        {
          prop: 'factoringCommissioner',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.factoringCommissioner,
          align: 'left',
          width: 100
        },
        {
          prop: 'descriptionProperty',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.descriptionProperty,
          align: 'left',
          width: 100
        },
        {
          prop: 'abnormalSituation',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.abnormalSituation,
          align: 'left',
          width: 100
        },
        {
          prop: 'chinaClearSuggestedSolution',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.chinaClearSuggestedSolution,
          align: 'left',
          width: 100
        }
      ],
      otherListVisible: false,
      possibleResolutionTime: '',
      remarksOnAbnormalProgressDetails: '',
      invoiceSourceData: [
        {
          'invoiceCode': 'abc',
          'invoiceNum': 'abc',
          'billingDate': '2019-03-04',
          'invoiceAmount': '1',
          'accountsReceivableDeductionAmount': '1',
          'remainingDeductibleAmountInclude': '1'
        },
        {
          'invoiceCode': 'abc',
          'invoiceNum': 'abc',
          'billingDate': '2019-03-04',
          'invoiceAmount': '1',
          'accountsReceivableDeductionAmount': '1',
          'remainingDeductibleAmountInclude': '1'
        },
        {
          'invoiceCode': 'abc',
          'invoiceNum': 'abc',
          'billingDate': '2019-03-04',
          'invoiceAmount': '1',
          'accountsReceivableDeductionAmount': '1',
          'remainingDeductibleAmountInclude': '1'
        },
        {
          'invoiceCode': 'abc',
          'invoiceNum': 'abc',
          'billingDate': '2019-03-04',
          'invoiceAmount': '1',
          'accountsReceivableDeductionAmount': '1',
          'remainingDeductibleAmountInclude': '1'
        }
      ],
      chinaClearExceptionSourceData: [
        {
          'theregistrationNumber': 'abc',
          'recordDate': 'abc',
          'assigneePledgee': '1',
          'pradeType': '1',
          'overdueSituation': '1',
          'feedbackPeople': '1',
          'feedbackTheDate': '2019-03-04'
        }
      ],
      invoiceColumns: [
        {
          prop: 'invoiceCode',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.invoiceCode,
          align: 'left',
          width: 100
        },
        {
          prop: 'invoiceNum',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.invoiceNum,
          align: 'left',
          width: 100
        },
        {
          prop: 'billingDate',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.billingDate,
          align: 'left',
          width: 100
        },
        {
          prop: 'invoiceAmount',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.invoiceAmount,
          align: 'left',
          width: 100
        },
        {
          prop: 'accountsReceivableDeductionAmount',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.accountsReceivableDeductionAmount,
          align: 'left',
          width: 100
        },
        {
          prop: 'remainingDeductibleAmountInclude',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.remainingDeductibleAmountInclude,
          align: 'left',
          width: 100
        }
      ],
      chinaClearExceptionColumns: [
        {
          prop: 'theregistrationNumber',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.theregistrationNumber,
          align: 'left',
          width: 100
        },
        {
          prop: 'recordDate',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.recordDate,
          align: 'left',
          width: 100
        },
        {
          prop: 'assigneePledgee',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].common.assigneePledgee,
          align: 'left',
          width: 100
        },
        {
          prop: 'pradeType',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.pradeType,
          align: 'left',
          width: 100
        },
        {
          prop: 'overdueSituation',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.overdueSituation,
          align: 'left',
          width: 100
        },
        {
          prop: 'feedbackPeople',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.feedbackPeople,
          align: 'left',
          width: 100
        },
        {
          prop: 'feedbackTheDate',
          showOverflowTooltip: true,
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.feedbackTheDate,
          align: 'left',
          width: 100
        }
      ],
      isFootView: false,
      form: {},
      api: {}
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  methods: {
    getOtherListVisible () {
      this.otherListVisible = true
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  }
}
</script>

<style scoped>
    @import '~@/styles/tracemgr/factoringCommissioner/taskTable/chinaClear/taskDialog.scss'
</style>
