<template>
    <div>
        <el-form :model="formTableData" ref="formTableData" :show-message="false">
            <el-row class="marginBottom4">
                <h3 class="marginBottom3 title">{{$t('traceMgr.contactorList')}}</h3>
                <el-divider></el-divider>
            </el-row>
            <data-table
                        :handleFlag.sync="handleFlag"
                        :showSelection="true"
                        :showPage='false'
                        :border="true"
                        :loadList='loadList'
                        @getTableData="getDate"
                        :api="api"
                        :toolMenuFlag="false"
                        @selection-change="changeFun"
                        :sourceData.sync="formTableData.sourceData"
                        operateBtnLayout=""
                        :queryParas="searchFormQueryParas"
                        :columns="columns"
                        :stripe="true"
                        :loadCount.sync="loadCount"
                        :menuFlag="false">
            </data-table>
        </el-form>
    </div>
</template>

<script>
import { DataTable } from 'newepoch-components'
import tracemgrApi from '@/api/tracemgrApi'
import * as format from '@/filters/index'
import BasePage from '@/pages/basePage'
import mixin from '@/pages/mixin'
export default {
  extends: new BasePage(),
  mixins: [mixin],
  name: 'contactList',
  components: {
    DataTable,
    format,
    tracemgrApi
  },
  props: {
    supplierId: {
      type: String
    },
    dataReset: {
      type: Boolean
    },
    contactResetData: {
      type: Object
    },
    checkDialogClose: {
      type: Function
    } },
  data () {
    return {
      spanArr: [],
      sIdx: 0,
      position: 0,
      searchFormQueryParas: {
        assetCodes: '',
        pageIndex: 1,
        pageSize: 10
      },
      sameRowArr: [],
      loadCount: 0,
      loadList: 'getContactList',
      handleFlag: true,
      // 选中行数组
      checkBoxData: [],
      formTableData: {
        sourceData: [
        ]
      },
      columns: [
        {
          prop: 'employeeAccountType',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.numberType,
          showOverflowTooltip: true,
          format: function (row) {
            if (row.employeeAccountType === '1') {
              return '主账号'
            } else if (row.employeeAccountType === '2') {
              return '子账号'
            } else if (row.employeeAccountType === '3') {
              return '普通账号'
            }
          }
        },
        {
          prop: 'account',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.loginInfo,
          showOverflowTooltip: true
        },
        {
          prop: 'employeeName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.contactor,
          showOverflowTooltip: true
        },
        {
          prop: 'telephone',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.phoneNumber,
          showOverflowTooltip: true
        },
        {
          prop: 'businessStatus',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].traceMgr.doService,
          showOverflowTooltip: true,
          format: function (row) {
            return row.businessStatus === '0' ? '否' : '是'
          }
        },
        {
          prop: 'areaName',
          align: 'left',
          width: '250px',
          label: this.$i18n.messages[this.$i18n.locale].common.district,
          showOverflowTooltip: true
        }
      ]
    }
  },
  computed: {
    api () {
      return tracemgrApi['contactList']
    }
  },
  watch: {
    checkBoxData: function (newValue, oldValue) {
      if (newValue !== oldValue) {
        this.sendMsg()
      }
    },
    dataReset: {
      handler: function (val) {
        let $this = this
        if (val) {
          this.$nextTick(() => {
            $this.searchFormQueryParas['supplierId'] = $this.supplierId
            $this.handleFilter()
          })
        } else {
          $this.formTableData.sourceData = []
        }
      }
    },
    contactResetData: {
      deep: true,
      handler: function (val) {
        if (val.check) {
          let $this = this
          let sourceData = $this.formTableData.sourceData
          for (let y = 0; y < sourceData.length; y++) {
            for (let i = 0; i < val.dataList.length; i++) {
              if (sourceData[y].employeeId === val.dataList[i]) {
                sourceData.splice(y, 1)
              }
            }
          }
          if (sourceData.length === 0) {
            this.checkDialogClose()
          }
        }
      }
    },
    'formTableData.sourceData': {
      deep: true,
      handler: function () {
        this.spanArr = []
        this.sameRowArr = []
      }
    }
  },
  methods: {
    getDate (data) {
      this.spanArr = []
      this.sameRowArr = []
      this.formTableData.sourceData = data
    },
    changeFun (val) {
      this.checkBoxData = val
    },
    sendMsg () {
      // func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
      this.$emit('func', this.checkBoxData)
    },
    getSpanArr () {
      this.spanArr = [] // 避免表格错乱！
      this.sIdx = 0
      let $this = this
      this.formTableData.sourceData.forEach((item, index) => {
        item.index = index
        if (index === 0) {
          $this.spanArr.push(1)
          $this.position = 0
          $this.sameRowArr.push([index])
        } else {
          if ($this.formTableData.sourceData[index].accountId === $this.formTableData.sourceData[index - 1].accountId) { // 这里是要合并行
            $this.spanArr[this.position] += 1
            $this.spanArr.push(0)
            $this.sameRowArr[$this.sIdx].push(index)
          } else {
            $this.spanArr.push(1)
            $this.position = index
            $this.sIdx += 1
            $this.sameRowArr.push([index])
          }
        }
      })
    },
    mergedCell: function ({ row, column, rowIndex, columnIndex }) {
      if (this.spanArr.length === 0) {
        this.getSpanArr()
      }
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 2) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 3) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 4) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 5) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 6) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 7) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }

  }
}
</script>
