<template>
  <div class="refund_suspension">
    <dialog-edit
      :visible.sync="dialogVisible"
      :title="$t('chargeback.refundListViewTitle')"
      :editModel="editModel"
      :form="form"
      width="1480px"
      :api="api"
      :footerVisible="true"
    >
      <refund-filter @handleFilter="handleFilter" :formValue.sync="queryParas" @clearParam="clearQueryParas"/>
      <data-table
        ref="dialogTable"
        :api="api"
        :headTitle="$t('chargeback.refundTabletitle')"
        operateBtnLayout
        :columns="columns"
        :loadCount.sync="loadCount"
        :sourceData.sync="sourceData"
        :queryParas="queryParas"
        :showSelection="true"
        :selectedRows.sync="selectedRows"
        @sort-change="sortChange"
        :tableId="tableId"
        v-bind="elHeightObj"
        :selectionAttrs="selectionAttrs">
        <template slot="index">
          <el-table-column type="expand" fixed="left">
            <template slot-scope="scope">
              <childTable :formItem="scope" />
            </template>
          </el-table-column>
        </template>
        <template slot="headButton">
          <el-row class="fr mt10">
            <span>已勾选笔数：{{selectedNums}}</span>
            <auth-button
              style="margin-left:24px"
              size="medium"
              type="primary"
              :label="$t('chargeback.initiating_refund')"
              @click="showCheckpayment"
              icon="iconfont iconfaqituidan"
            ></auth-button>
          </el-row>
        </template>
        <template slot="assetCode" slot-scope="scope">
          <payment class="pointer_item" :itemObj="scope.data.row"/>
        </template>
        <!-- <el-table-column fixed="right" align="center" label="操作" width="300px" class="edit-group">
          <template slot-scope="scope">
            <auth-button
              size="small"
              type="primary"
              :label="$t('chargeback.retirement_history')"
              @click="resumeRefunds(scope.row)"
              :menuCode="menuId"
              perms="retirement_history"
            ></auth-button>
          </template>
        </el-table-column> -->
      </data-table>
      <!-- <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('chargeback.refundStyles')">
            <el-input v-model="currentform.name"></el-input>
          </el-form-item>
        </el-col>
        <el-form-item>
          <auth-button
            size="small"
            style="margin-left: 24px"
            type="primary"
            :label="$t('chargeback.initiating_refund')"
            :menuCode="menuId"
            @click="preRefund"
            perms="initiating_refund"
          ></auth-button>
        </el-form-item>
      </el-row> -->
    </dialog-edit>
    <!-- 已勾选付款确认书 -->
    <check-payment-confirmation :visible.sync="checkVisible" :form="checkItem" :api="api" editModel="V"></check-payment-confirmation>
    <!-- 发起退单 -->
    <pre-refund-view :visible.sync="preRefundVisible" :form="preRefundItem" :api="api" :resume_list="resume_list" preType="Pause"
    @success="preRefundSuccess" editModel="V"
    ></pre-refund-view>
    <!-- 退单履历 -->
    <resume-refunds :visible.sync="resumeVisible" :form="resumeItem" :api="api" editModel="V"></resume-refunds>
  </div>
</template>

<script>
import BaseEditPage from '@/pages/baseEditPage'
import { DialogEdit, DataTable, authButton } from 'newepoch-components'
import refundFilter from './components/refundFilter'
import checkPaymentConfirmation from './checkPaymentConfirmation'
import preRefundView from './preRefundView'
import resumeRefunds from './resumeRefunds'
import payment from './components/payment'
import childTable from './components/childTable'
import * as format from '@/filters'
import { regExp } from '@/validator/index'
import chargebackApi from '@/api/chargeback'
import mixin from '@/pages/mixin'
export default {
  extends: new BaseEditPage('refundSuspension'),
  mixins: [mixin],
  components: {
    DialogEdit,
    refundFilter,
    payment,
    DataTable,
    childTable,
    authButton,
    checkPaymentConfirmation,
    preRefundView,
    resumeRefunds
  },
  data () {
    return {
      tableId: 'refundSuspensionTable',
      elOtherHeight: 165,
      selectionAttrs: {
        fixed: 'left'
      },
      sortWay: {},
      operateBtnLayout: '',
      queryParas: {
        pageIndex: 1,
        pageSize: 10
      },
      resume_list: [],
      currentform: {},
      checkItem: {},
      checkVisible: false,
      preRefundVisible: false,
      preRefundItem: {},
      resumeVisible: false,
      resumeItem: {},
      selectedRows: [],
      sourceData: [],
      columns: [
        {
          // 产品
          prop: 'projectName',
          align: 'left',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.product_name
        },
        {
          // 核心企业
          prop: 'coreEnterpriseName',
          align: 'left',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback
            .core_enterprise,
          sortable: 'custom'
        },
        {
          // 计划管理人/再保理银行
          prop: 'planOrBankName',
          align: 'left',
          width: '170px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback
            .planning_manager
        },
        {
          // 期数
          prop: 'specialPlanPeriods',
          align: 'right',
          width: '70px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.periods
        },
        {
          // 保理申请日期
          prop: 'factoringApplyTime',
          align: 'center',
          width: '140px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback
            .factoring_application_date,
          format: row => format.formatDateNull(row.factoringApplyTime)
        },
        {
          // 付款确认书编号
          prop: 'assetCode',
          align: 'left',
          width: '240px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.pay_code,
          slot: true,
          sortable: 'custom'
        },
        {
          // 区域编号
          prop: 'regionCode',
          align: 'left',
          width: '130px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.area_number
        },
        {
          // 供应商名称
          prop: 'creditor',
          align: 'left',
          width: '240px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.creditor,
          sortable: 'custom'
        },
        {
          // 项目公司名称
          prop: 'debtor',
          align: 'left',
          width: '240px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback
            .project_company,
          sortable: 'custom'
        },
        {
          // 合同名称
          prop: 'basicContractName',
          align: 'left',
          width: '240px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.contract_name
        },
        {
          // 账款到期日
          prop: 'dueDate',
          align: 'center',
          width: '140px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback
            .account_maturity_date,
          format: row => format.formatDateNull(row.dueDate)
        },
        {
          // 应收账款金额(元)
          prop: 'factoringMoney',
          align: 'right',
          width: '150px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback
            .account_receivable_je,
          format: row => format.thousandFilter(row.factoringMoney, 2)
        },
        {
          // 保理专员
          prop: 'customerAccountName',
          align: 'left',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback
            .factoring_commissioner
        },
        {
          // 区域专员
          prop: 'coreAreaAttacheName',
          align: 'left',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback
            .regional_commissioner
        },
        {
          // 业务人员
          prop: 'businessPersonnel',
          align: 'left',
          width: '100px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback
            .operational_personne
        },
        {
          // 确认书当前状态
          prop: 'assetStatus',
          align: 'center',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.currentStatus,
          format: row => format.formatDict(row.assetStatus, 'SCRS0110')
        },
        {
          // 业务流程状态
          prop: 'businessProcessStatus',
          align: 'center',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.processStatus,
          format: row => format.formatDict(row.businessProcessStatus, 'ZD0085')
        },
        {
          // 资产是否已打包
          prop: 'packageStatus',
          align: 'center',
          width: '120px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.packaged,
          format: row => format.formatDict(row.packageStatus + '', 'yes_or_no_dangan')
        },
        {
          // 资产包编号
          prop: 'packageId',
          align: 'left',
          width: '200px',
          label: this.$i18n.messages[this.$i18n.locale].chargeback.packageNumber
        }
      ],
      loadCount: 0
    }
  },
  methods: {
    clearQueryParas () {
      this.queryParas = { pageIndex: 1, pageSize: 10 }
    },
    // 排序回调
    sortChange (column, prop, order) {
      this.sortWay = column
      this.queryParas.pageIndex = 1
      this.handleFilter({
        pageNumber: 1,
        pageSize: 10
      })
    },
    handleFilter (data) {
      if (!regExp.number.test(this.queryParas.specialPlanPeriods) && this.queryParas.specialPlanPeriods !== '' && this.queryParas.specialPlanPeriods !== undefined) {
        this.warning('期数应为数字，请重新输入')
        this.queryParas.specialPlanPeriods = ''
        return
      }
      const { factoring_application_date: date } = data
      // 处理时间格式
      if (date && date.length) {
        const [one, two] = date
        data.factoringApplyStartTime = one
        data.factoringApplyEndTime = two
      } else {
        delete data.factoringApplyEndTime
        delete data.factoringApplyStartTime
      }
      this.queryParas = data
      // 处理排序
      if (this.sortWay.order !== null && this.sortWay.order !== undefined) {
        this.queryParas.sortName = this.sortWay.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
        this.queryParas.sortIndex = this.sortWay.order.replace('ending', '')
      } else {
        delete this.queryParas.sortName
        delete this.queryParas.sortIndex
      }
      this.loadCount = this.loadCount + 1
    },
    showCheckpayment () {
      if (!this.selectedRows.length) return this.warning('暂无操作数据')
      this.resume_list = this.selectedRows
      this.preRefundVisible = true
    },
    preRefundSuccess () { // 退单成功的回调
      this.loadCount++
    }
  },
  computed: {
    selectedNums () {
      return this.selectedRows.length
    },
    api () {
      return chargebackApi.pauseApi
    }
  },
  watch: {
    visible (val) {
      if (!val) {
        this.$refs.dialogTable.buildTableData([])
        for (let key in this.queryParas) {
          if (key !== 'pageIndex' && key !== 'pageSize') {
            this.$set(this.queryParas, key, '')
          }
        }
      } else {
        let $this = this
        this.$nextTick(function () {
          $this.initStyle()
        })
      }
    }
  }
}
</script>
