<template>
    <data-table  :cellStyle="cellStyle"  :loadPage="loadPage" :stripe="true"
                 :api="api" :handleFlag.sync="handleFlag" :border="true" :showPage="true" :menuFlag="true"
                 :queryParas="queryParas" :sourceData.sync="sourceData"
                 :loadCount.sync="loadCount" :columns="columns" :operateBtnLayout="operateBtnLayout">

        <template slot="descriptionProperty" slot-scope="scope">
            <expand-collapse :sourceData="sourceData" colProp="descriptionProperty" valueProp="names" :rowIndex="scope.data.$index"></expand-collapse>
        </template>

    </data-table>
</template>
<script>
import { DataTable, ExpandCollapse } from 'newepoch-components'
import tracemgrApi from '@/api/tracemgrApi.js'
export default {
  components: {
    DataTable,
    ExpandCollapse,
    tracemgrApi
  },
  props: {
    processParas: {
      type: Object
    },
    dialogVisible: {
      type: Boolean
    },
    url: {
      type: String
    },
    needComplete: {
      type: Boolean
    },
    item: {
    }
  },
  data () {
    return {
      loadPage: 'getChinaClearAbnormalListByOrderId',
      handleFlag: true,
      isFootView: false,
      dialogForm: {},
      dialogApi: {},
      activeName: 'second',
      queryParas: {
        pageIndex: 1,
        pageSize: 10
      },
      loadCount: 0,
      operateBtnLayout: '',
      tableApi: {},
      sourceData: [],
      columns: [
        {
          prop: 'theregistrationNumber',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.theregistrationNumber,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'recordDate',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.recordDate,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'pledgeeAssignee',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.pledgeeAssignee,
          showOverflowTooltip: true,
          width: '50px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'pradeType',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.pradeType,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'overdueSituation',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.overdueSituation,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'descriptionProperty',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.descriptionProperty,
          showOverflowTooltip: true,
          width: '30px',
          slot: true,
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'abnormalSituation',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.abnormalSituation,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'intermediateExceptionHandlingScheme',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.intermediateExceptionHandlingScheme,
          showOverflowTooltip: true,
          width: '50px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'feedbackPeople',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.feedbackPeople,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'feedbackTheDate',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.feedbackTheDate,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'toHandleTheState',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].common.toHandleTheState,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'opinions',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].approval.opinions,
          showOverflowTooltip: true,
          width: '30px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        },
        {
          prop: 'auditTime',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.auditTime,
          showOverflowTooltip: true,
          width: '35px',
          spanStyle: function (row) {
            return 'color:' + row['prioritycolor']
          }
        }
      ]
    }
  },
  computed: {
    visible: {
      get () {
        return this.dialogVisible
      }
      // set (val) {
      //   this.$emit('update:visible', val)
      // }
    },
    getTitle: {
      get: function () {
        return this.title
      },
      set: function (val) {
        this.$emit('update:title', val)
      }
    },
    api () {
      return tracemgrApi['abnormalOrderApi']
    }
  },
  watch: {
    visible (newValue, oldValue) {
      if (newValue) {
        this.sourceData = []
        this.handleFilter()
        // this.$nextTick(function () {
        //   this.handleFilter()
        // })
      }
    }
  },
  mounted () {
    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>
