<template>
  <div>
    <!-- 保理专员任务台-任务-通知供应商核对及补充信息-->
    <DialogEdit  :footerBtnShow="false" :form="form" :title="$t('traceMgr.informSupplier')" :visible.sync="dialogVisible" class="el-dialog--center" :close-on-click-modal="false" :editModel="editModel">
      <el-form :model="formTableData" ref="formTableData" :show-message="false">
        <el-row class="marginBottom4">
          <div  class="handle-text-margin-bottom-supplier title">
            <span  >{{$t('common.orderInformation')}}</span>
          </div>
          <el-divider></el-divider>
        </el-row>
        <data-table :handleFlag.sync="handleFlag" :showSelection="true" :toolMenuFlag="false" :cell-style="changeClass" :showPage="false"
                    :sourceData.sync="formTableData.sourceData" :menuFlag="true" operateBtnLayout="false" @selection-change="changeFun"
                    :columns="columns" :border="true" :stripe="true">
          <template  slot="assetCreditorContactInfoList"  slot-scope="scope">
              <el-table
                :data="scope.data.row.assetCreditorContactInfoList"
                style="width: 100%">
                <el-table-column
                  prop="creditorContactName"
                  align="center"
                  :label="$t('common.contact')">
                </el-table-column>
                <el-table-column
                  prop="creditorContactInfo"
                  align="center"
                  :label="$t('traceMgr.phoneNumber')">
                </el-table-column>
                <el-table-column
                  prop="creditorLoginAccount"
                  align="center"
                  :label="$t('traceMgr.loginInfo')">
                </el-table-column>
              </el-table>
          </template>
        </data-table>
        <el-row class="text-center">
          <auth-button size="medium" type="primary" :label="$t('traceMgr.createWords')" @click="createWords"></auth-button>
        </el-row>
      </el-form>
      <el-row v-show="doCreateWords" class="marginBottom2 marginTop">
       <span class="marginBottom7 title">{{$t('common.contact')}}： </span>
        <el-divider></el-divider>
      </el-row>
      <el-row  v-show="doCreateWords" class="marginBottom2 title paddingLeft20">
        <el-col :span="8" v-for="(employee,index) in employees" :key="index">
          <span v-if="employee.creditorContactName">{{employee.creditorContactName}}</span>
          <span v-if="employee.creditorContactInfo">-{{employee.creditorContactInfo}}</span>
          <span v-if="employee.creditorLoginAccount">-{{employee.creditorLoginAccount}}</span>
        </el-col>
      </el-row>

      <el-row v-show="doCreateWords" 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" :defaultSpeechFlag="false" @defaultSpeech="setDefaultSpeech"></speech-craft-input>
        </el-col>
      </el-row>
      <el-row v-show="doCreateWords" class="text-center marginTop">
        <auth-button size="medium" type="primary" :label="$t('traceMgr.completeInform')" @click="completeInform"></auth-button>
        <el-button size="medium" @click="dialogVisible=false">{{$t('common.close')}}</el-button>
      </el-row>
    </DialogEdit>
    <DialogEdit :footerBtnShow="false" :saveLabel="$t('traceMgr.sure')" :closeLabel="$t('approval.cancel')" editModel="E" :form="form" :visible.sync="doComplete" :title="$t('common.tip')" width="35%" :close-on-click-modal="false" class="el-dialog--center">
      <p class="text-center">{{$t('traceMgr.checkConfirm')}}</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" :loading="loading" @click="sure">{{$t('traceMgr.sure')}}</el-button>
        <el-button type="button" size="medium" @click="close()">{{$t('traceMgr.pageClose')}}</el-button>
      </div>
    </DialogEdit>
  </div>
</template>
<script>
import { DataTable, authButton, DialogEdit, speechCraftInput } from 'newepoch-components'
import mixin from '@/pages/mixin'
import BasePage from '@/pages/basePage'
import tracemgrApi from '@/api/tracemgrApi'
import * as format from '@/filters/index'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  components: {
    DataTable,
    authButton,
    DialogEdit,
    tracemgrApi,
    speechCraftInput
  },
  computed: {
    api () {
      return tracemgrApi['taskDialogss']
    },
    dialogVisible: {
      get: function () {
        this.getComp()
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data () {
    return {
      contant: '',
      // 选中行数组
      loading: false,
      checkBoxData: [],
      doComplete: false,
      assetCodes: [],
      employees: [],
      text: '',
      handleFlag: true,
      doCreateWords: false,
      content: '',
      initContent: '',
      phone: '',
      loginId: '',
      formTableData: {
        sourceData: [
        ]
      },
      factorCommissioner: '',
      officePhone: '',
      factoringPhoneNumber: '',
      contentInvoiceNum: '',
      columns: [
        {
          prop: 'productInformation',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].common.productInformation,
          showOverflowTooltip: true,
          format: function (row) {
            if (row.productType === '1') {
              return row.coreEnterpriseName + row.planOrBankName + row.specialPlanPeriods
            } else if (row.productType === '2') {
              return row.coreEnterpriseName + row.planOrBankName
            } else {
              return ''
            }
          }
        },
        {
          prop: 'assetCode',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.paymentConfirmNo,
          showOverflowTooltip: true,
          width: '200px'
        },
        {
          prop: 'creditor',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.supplierName,
          showOverflowTooltip: true
        },
        {
          prop: 'debtor',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.nameOfCompany,
          showOverflowTooltip: true
        },
        {
          prop: 'projectName',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.projectName,
          showOverflowTooltip: true
        },
        {
          prop: 'factoringMoney',
          align: 'center',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.factoringAmount,
          showOverflowTooltip: true
        },
        {
          prop: 'factoringRate',
          align: 'center',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.rate,
          showOverflowTooltip: true,
          format: function (row) {
            if (!isNaN(row.factoringRate) && row.factoringRate !== '') {
              // 截取当前数据到小数点后四位
              return (parseFloat(row.factoringRate) * 100).toFixed(2) + '%'
            } else {
              return '0.00%'
            }
          }
        },
        {
          prop: 'coreAreaName',
          align: 'center',
          width: '80px',
          label: this.$i18n.messages[this.$i18n.locale].common.district,
          showOverflowTooltip: true
        },
        {
          prop: 'stampWay140',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.stampingMethod,
          showOverflowTooltip: true,
          format: (row) => {
            return format.formatDict(row.stampWay140 + '', 'tracemgr_seal_type')
          }
        },
        {
          prop: 'assetCreditorContactInfoList',
          align: 'center',
          width: '700px',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.contactInfo,
          slot: true
          // child: [// 供应商联系人
          //   {
          //     prop: 'creditorContactName',
          //     align: 'center',
          //     width: '150px',
          //     label: this.$i18n.messages[this.$i18n.locale].common.contact
          //   },
          //   // 联系方式
          //   {
          //     prop: 'creditorContactInfo',
          //     align: 'center',
          //     width: '350px',
          //     label: this.$i18n.messages[this.$i18n.locale].traceMgr.phoneNumber
          //   },
          //   // 供应商登录账号
          //   {
          //     prop: 'creditorLoginAccount',
          //     align: 'center',
          //     width: '200px',
          //     label: this.$i18n.messages[this.$i18n.locale].traceMgr.loginInfo
          //   }
          // ]
        },
        // {
        //   prop: 'creditorContactInfo',
        //   align: 'center',
        //   width: '200px',
        //   label: this.$i18n.messages[this.$i18n.locale].traceMgr.phoneNumber,
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'creditorLoginAccount',
        //   align: 'center',
        //   width: '200px',
        //   label: this.$i18n.messages[this.$i18n.locale].traceMgr.loginInfo,
        //   showOverflowTooltip: true
        // },
        {
          prop: 'invoiceNum',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].common.invoiceNum,
          showOverflowTooltip: true,
          format: function (row) {
            if (row.invoiceNoList.length < 1) {
              this.contentInvoiceNum = ''
              return ''
            } else if (row.invoiceNoList.length === 1) {
              this.contentInvoiceNum = row.invoiceNoList[0]
              return row.invoiceNoList[0]
            } else {
              let invoiceNum = ''
              row.invoiceNoList.forEach(function (val, index) {
                if (index === 0) {
                  invoiceNum = val
                } else {
                  invoiceNum += ',' + val
                }
              })
              this.contentInvoiceNum = invoiceNum
              return invoiceNum
            }
          }
        },
        {
          prop: 'receiverName',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].common.chamberlainName,
          showOverflowTooltip: true
        },
        {
          prop: 'receiverBank',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].common.chamberlainBank,
          showOverflowTooltip: true
        },
        {
          prop: 'receiverBankAccount',
          align: 'center',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].common.chamberlainNum,
          showOverflowTooltip: true
        }
      ]
    }
  },
  props: {
    visible: {
      type: Boolean
    },
    form: {
      type: Object
    },
    handler: {
      type: Function
    }
  },
  methods: {
    changeClass ({ row, column, rowIndex, columnIndex }) {
      if (row.invoiceNum > 1000 && columnIndex === 13) {
        return 'color: red'
      }
      if (row.invoiceNum > 1000 && columnIndex === 15) {
        return 'color: red'
      }
      if (row.invoiceNum > 1000 && columnIndex === 16) {
        return 'color: red'
      }
    },
    getComp: function () {
      if (!this.visible) {
      }
    },
    changeFun (val) {
      this.checkBoxData = val
    },
    createWords () {
      // 获取话术信息:保理专员、电话、手机号
      // this.contant = this.formTableData.sourceData[0].creditorContactName + '-' + this.formTableData.sourceData[0].creditorContactInfo + '-' + this.formTableData.sourceData[0].creditorLoginAccount
      // let text = ''
      // this.formTableData.sourceData[0].assetCreditorContactInfoList.forEach((item, index) => {
      //   text += item.creditorContactName + '-' + item.creditorContactInfo + '-' + item.creditorLoginAccount + '\n'
      // })
      this.employees = this.formTableData.sourceData[0].assetCreditorContactInfoList
      // this.contant = JSON.parse(JSON.stringify(text))
      tracemgrApi['fileList'].getSpeechCraftInfo({ 'assetId': this.form.param[0].assetInfoId }).then(res => {
        // 保理专员
        this.factorCommissioner = res.data.factoringCommissioner
        // 座机
        this.officePhone = res.data.factoringTelephone
        // 手机
        this.factoringPhoneNumber = res.data.factoringPhoneNumber

        // 话术信息
        this.content = this.$i18n.messages[this.$i18n.locale].traceMgr.businessProcessTaskHolleMyIsxx + this.formTableData.sourceData[0].debtor + ' ' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.businessProcessTaskTow + this.formTableData.sourceData[0].creditor + ' ' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.businessProcessTaskThere + this.factorCommissioner + '。' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.businessProcessTaskFour + this.formTableData.sourceData[0].debtor +
        this.$i18n.messages[this.$i18n.locale].traceMgr.businessProcessTaskFive + this.formTableData.sourceData[0].projectName + '，' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.businessProcessTaskSix + this.formTableData.sourceData[0].factoringMoney + ' ' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.businessProcessTaskSeven + '\n' +

        this.$i18n.messages[this.$i18n.locale].traceMgr.paymentConfirmNo + '：' + this.formTableData.sourceData[0].assetCode + '\n' +
        this.$i18n.messages[this.$i18n.locale].common.projectCompany + '：' + this.formTableData.sourceData[0].debtor + '\n' +
        this.$i18n.messages[this.$i18n.locale].packageOperation.rate + '：' + this.formTableData.sourceData[0].factoringRate + '\n' +
        this.$i18n.messages[this.$i18n.locale].invoiceAssignmentList.invoiceNumber + '：' + this.contentInvoiceNum + '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.payee + '：' + this.formTableData.sourceData[0].receiverName + '\n' +
        this.$i18n.messages[this.$i18n.locale].ladingManageList.openingBank + '：' + this.formTableData.sourceData[0].receiverBank + '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.username + '：' + this.formTableData.sourceData[0].receiverBankAccount + '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.businessProcessTaskEight + '\n' +
        '\n' +
        this.$i18n.messages[this.$i18n.locale].common.name + '：' + this.factorCommissioner + '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.beforePhone + '：' + this.officePhone + '\n' +
        this.$i18n.messages[this.$i18n.locale].traceMgr.phoneNum + '：' + this.factoringPhoneNumber

        this.initContent = JSON.parse(JSON.stringify(this.content))
        this.doCreateWords = !this.doCreateWords
      }).catch(res => {
        this.content = this.$i18n.messages[this.$i18n.locale].traceMgr.noneData
      })
    },
    setDefaultSpeech () {
      this.content = this.initContent
    },
    completeInform () {
      this.doComplete = !this.doComplete
    },
    getDate () {
      let $this = this
      this.assetCodes = []
      this.form.param.forEach(item => {
        $this.assetCodes.push(item.assetCodes)
      })
      let param = []
      this.form.param.forEach(item => {
        param.push(item.assetCode)
      })
      tracemgrApi['taskDialogss'].getOrderList({ 'assetCode': param }).then(res => {
        if (res.success) {
          this.formTableData.sourceData = res.data
        }
      })
    },
    // 完成通知
    sure: function () {
      this.loading = true
      let $this = this
      this.assetCodes = []
      this.form.param.forEach(item => {
        $this.assetCodes.push(item.assetCodes)
      })
      let param = []
      this.form.param.forEach(item => {
        let obj = {}
        obj['assetInfoId'] = item.assetInfoId
        obj['taskId'] = item.taskId
        param.push(obj)
      })
      tracemgrApi['taskDialogss'].save(param).then(res => {
        if (res.data) {
          $this.success(this.$i18n.messages[this.$i18n.locale].traceMgr.noticeSuccess)
          $this.doSave = false
          $this.loading = false
          $this.dialogVisible = false
          $this.doComplete = false
          $this.handler()
        } else {
          $this.handler()
          $this.error(this.$i18n.messages[this.$i18n.locale].traceMgr.noticeFailure)
          $this.loading = false
        }
      }, res => {
        $this.error($this.resultMsg.failMsg)
        $this.loading = false
      })
    },
    close: function () {
      this.doComplete = !this.doComplete
    }
  },
  watch: {
    visible: {
      handler: function (newValue) {
        let $this = this
        $this.$nextTick(() => {
          if (newValue) {
            this.getDate()
          } else {
            this.doCreateWords = false
            this.formTableData.sourceData = []
          }
        })
      } }
  },
  mounted () {
  }
}
</script>
<style scoped lang="scss">
  @import '~@/styles/tracemgr/factoringCommissioner/taskTable/supplierSealNotice/taskDialog.scss';
</style>
