<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :api="{}" :editModel="editModel" :form="form" @onSaved="onSaved"
                 :title="$t('cyjg.businessRegionInfo.chooseAccount')" :autoSave="autoSave" :width="width">
      <data-table :operateBtnLayout="operateBtnLayout" :sourceData.sync="sourceData" :toolMenuFlag="toolMenuFlag" :spanMethod="spanMethod"
                  :queryParas="queryParas" :loadCount.sync="loadCount" :showPage="showPage" @current-change="clickChange" :columns="columns">
        <!-- 选择 -->
        <template slot="choose" slot-scope="scope">
          <el-radio class="select-radio" v-model="tableRadio" :label="scope.data.row" @change="change"><i></i></el-radio>
        </template>
      </data-table>
    </dialog-edit>
  </div>
</template>

<script>
import { DialogEdit, DataTable } from 'newepoch-components'
import BaseEdit from '@/pages/baseEditPage'
import * as format from '@/filters/index'
export default {
  extends: new BaseEdit(),
  name: 'chooseAccountEdit',
  components: {
    DataTable,
    DialogEdit
  },
  props: {
    chooseData: {
      type: [Object, Array],
      default: function () {
        return null
      }
    },
    index: {
      type: Number,
      default: function () {
        return null
      }
    }
  },
  data () {
    return {
      width: '1480px',
      tableRadio: {},
      accountInfo: {},
      loadCount: 0,
      toolMenuFlag: false,
      showPage: false,
      autoSave: false,
      operateBtnLayout: '',
      queryParas: {},
      currentRow: {},
      sourceData: [],
      columns: [
        // 选择
        {
          prop: 'choose',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.choose,
          width: '20px',
          slot: true
        },
        // 人员类别
        {
          prop: 'type',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.personCategory,
          format: (row) => { return format.formatDict(row.type, 'ZDCY0002') }
        },
        // 姓名
        {
          prop: 'name',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.name
        },
        // 系统账号
        {
          prop: 'account',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.systemAccount
        },
        // 手机
        {
          prop: 'mobile',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.phone
        },
        // 邮箱
        {
          prop: 'email',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.businessRegionInfo.email
        }
      ]
    }
  },
  computed: {},
  methods: {
    // radio change事件
    clickChange (item) {
      this.tableRadio = item
      console.log(this.tableRadio)
    },
    // radio 勾选赋值事件
    change (data) {
      console.log(data)
      this.accountInfo = data
    },
    // 合并行
    spanMethod ({ row, column, rowIndex, columnIndex }) {
      let $this = this
      let spanCount = 1
      if (columnIndex === 1) {
        if (rowIndex === 0 || $this.sourceData[rowIndex - 1].type !== row.type) {
          $this.sourceData.reduce((last, current) => {
            if (last.type === row.type && last.type === current.type) {
              spanCount++
            }
            return current
          })
          return {
            rowspan: spanCount,
            colspan: 1
          }
        }
        return {
          rowspan: 0,
          colspan: 0
        }
      }
      if (columnIndex === 2) {
        if (rowIndex === 0 || $this.sourceData[rowIndex - 1].name !== row.name) {
          $this.sourceData.reduce((last, current) => {
            if (last.name === row.name && last.name === current.name) {
              spanCount++
            }
            return current
          })
          return {
            rowspan: spanCount,
            colspan: 1
          }
        }
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    },
    // 保存
    onSaved () {
      let $this = this
      if (!$this.UtilJs.isEmpty(this.tableRadio)) {
        $this.chooseData.handleFlag = true
      }
      $this.$emit('checkData', this.tableRadio, this.index, $this.chooseData)
      $this.dialogVisible = false
    }
  },
  watch: {
    visible (val) {
      let $this = this
      if (val) {
        $this.$nextTick(() => {
          $this.sourceData = $this.chooseData.dataList
          $this.tableRadio = $this.chooseData.chooseRadio
        })
      } else {
        $this.sourceData = []
      }
    }
  }
}
</script>

<style scoped>

</style>
