<template>
    <dialog-edit :visible.sync="dialogVisible"
                 :title="$t('traceMgr.intermediateExceptionPparticulars')"
                 :footerBtnShow="isFootView"
                 :editModel="'V'"
                 :form="form"
                 :api="api"
                 :appendToBody="true">
        <component :is="currentComponentName" :ref="currentComponentName" :readonly="!needComplete"></component>
        <el-row>
            <div>
                <payment-info :keyId="keyId" :title="$t('traceMgr.basicInformationOfOrder')"></payment-info>
            </div>
        </el-row>

        <el-row>
            <el-tabs>
                <el-tab-pane :label="$t('traceMgr.abnormalSituationList')">
                </el-tab-pane>
            </el-tabs>
        </el-row>

        <china-clear-abnormal-list :columns="columns" :sourceData="sourceData" :dialogVisible="visible"></china-clear-abnormal-list>

        <el-row>
            <el-tabs>
                <el-tab-pane :label="$t('traceMgr.invoiceStatusList')">
                </el-tab-pane>
            </el-tabs>
        </el-row>

        <china-clear-abnormal-invoice-list :columns="columns" :sourceData="sourceData" :dialogVisible="visible"></china-clear-abnormal-invoice-list>

        <div slot="footer" class="dialog-footer">
            <el-button size="medium" @click="dialogVisible=false">{{$t('common.close')}}</el-button>
        </div>
    </dialog-edit>
</template>
<script>
import { btnDownload, DialogEdit, paymentInfo } from 'newepoch-components'
import tracemgrApi from '@/api/tracemgrApi.js'
import chinaClearAbnormalList from './chinaClearAbnormalList'
import chinaClearAbnormalInvoiceList from './chinaClearAbnormalInvoiceList'
export default {
  components: {
    tracemgrApi,
    btnDownload,
    DialogEdit,
    chinaClearAbnormalList,
    chinaClearAbnormalInvoiceList,
    paymentInfo
  },
  props: {
    processParas: {
      type: Object
    },
    visible: {
      type: Boolean
    },
    url: {
      type: String
    },
    needComplete: {
      type: Boolean
    },
    item: {
    }
  },
  mounted () {
  },
  data () {
    return {
      form: {},
      handleFlag: true,
      isFootView: false,
      keyId: '2002241636461020001',
      dialogForm: {},
      dialogApi: {},
      activeName: 'second',
      queryParas: {
        pageIndex: 1,
        pageSize: 10
      },
      loadCount: 0,
      operateBtnLayout: '',
      sourceData: [],
      columns: [
        {
          prop: 'invoiceNo',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].common.invoiceNum,
          showOverflowTooltip: true,
          width: '200px'
        },
        {
          prop: 'openDate',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.invoiceDate,
          showOverflowTooltip: true,
          width: '200px'
        },
        {
          prop: 'invoiceAmount',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.invoiceAmountGross,
          showOverflowTooltip: true,
          width: '200px'
        },
        {
          prop: 'availableAmount',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.deductibleAmount,
          showOverflowTooltip: true,
          width: '200px'
        }
      ],
      currentProcessParas: {},
      currentComponentName: null
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        this.getComp()
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    },
    getTitle: {
      get: function () {
        return this.title
      },
      set: function (val) {
        this.$emit('update:title', val)
      }
    },
    api () {
      return tracemgrApi['abnormalOrderListApi']
    }
  },
  watch: {
    // visible: {
    //   handler: function (newValue) {
    //     if (newValue) {
    //       this.sourceData = []
    //       this.$nextTick(function () {
    //         this.handleFilter()
    //       })
    //     }
    //   }
    // }
  },
  methods: {
    getComp: function () {
      if (!this.visible) {
        // return
      }
    },
    handleFilter: function () {
      this.loadCount = this.loadCount + 1
    },
    cellStyle ({ row, column, rowIndex, columnIndex }) {
      if (row.errorFields instanceof Array) {
        let flag = false
        row.errorFields.forEach(row => {
          if (row === column.property) {
            flag = true
          }
        })
        if (flag) {
          return 'color: red'
        } else {
          return ''
        }
      } else {
        return ''
      }
    }
  }
}
</script>
