<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :editModel="editModel" :form="form" :width="width" @onSaved="onSaved"
                 :title="$t('cyjg.regionCoordinator.chooseCoordinator')" :appendToBody="appendToBody"
                 :api="api"
                 :autoSave="autoSave" :saveLabel="saveBtnLabel">
      <div class="organ-item">
        <search-form :componentList="componentList" :formValue.sync="queryParas" @clearParam="clearParam"
                     :isShowFoldBtn="false"
                     @handleFilter="handleFilter">
        </search-form>
      </div>
      <data-table :api="api" :sourceData.sync="sourceData" :operateBtnLayout="operateBtnLayout" :loadCount.sync="loadCount"
                  ref="table"
                  :toolMenuFlag="menuFlag" :showSelection='true' :queryParas="queryParas" :columns="columns" @getTableData="loadSelected"
                  @select-all="selectAll" @select="selectRowChange">
      </data-table>
    </dialog-edit>
  </div>
</template>

<script>
// 选择统筹人
import { searchForm, DataTable, DialogEdit } from 'newepoch-components'
import regionCoordinatorApi from '@/api/cyjg/regionCoordinatorApi.js'
import BaseEdit from '@/pages/baseEditPage.js'
import ExcludeSpecialInput from '@/components/element/cyjg/ExcludeSpecialInput.vue'
export default {
  extends: new BaseEdit(),
  name: 'selectCoordinatorEdit',
  components: {
    DialogEdit,
    searchForm,
    DataTable,
    ExcludeSpecialInput
  },
  props: {
    selectedData: {
      type: Array,
      default: function () {
        return null
      }
    }
  },
  data () {
    return {
      addSelectData: [],
      addSelectRows: [],
      delSelectRows: [],
      cancelData: [],
      menuFlag: false,
      autoSave: false,
      appendToBody: true,
      width: '50%',
      loadCount: 0,
      sourceData: [],
      selectRows: [],
      saveBtnLabel: this.$i18n.messages[this.$i18n.locale].common.assign,
      operateBtnLayout: '',
      queryParas: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      componentList: [
        {
          label: this.$i18n.messages[this.$i18n.locale].cyjg.regionCoordinator.regionCoordinator,
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          labelWidth: '70px',
          value: 'name',
          maxlength: 100,
          componentName: ExcludeSpecialInput
        }
      ],
      columns: [
        // 统筹人
        {
          prop: 'areaCoordinatorName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.regionCoordinator.regionCoordinator
        }
      ]
    }
  },
  computed: {
    api () {
      return regionCoordinatorApi.coordinatorListApi
    }
  },
  methods: {
    selectAll (val) {
      let areaCoordinatorIds = this.selectedData.map(item => {
        return item.areaCoordinatorId
      })
      let sourceDataIds = this.sourceData.map(item => {
        return item.areaCoordinatorId
      })
      let arr = []
      sourceDataIds.forEach(item => {
        if (areaCoordinatorIds.indexOf(item) !== -1) {
          arr.push(item)
        }
      })
      if (val.length === this.sourceData.length) {
        if (arr.length === 0) {
          this.sourceData.forEach(it => {
            if (this.addSelectRows.indexOf(it.areaCoordinatorId) === -1) {
              this.addSelectData.push(it)
              this.addSelectRows.push(it.areaCoordinatorId)
            }
          })
        } else {
          this.sourceData.forEach(it => {
            if (arr.indexOf(it.areaCoordinatorId) === -1 && this.addSelectRows.indexOf(it.areaCoordinatorId) === -1) {
              this.addSelectData.push(it)
              this.addSelectRows.push(it.areaCoordinatorId)
            }
            let index = this.delSelectRows.indexOf(it.areaCoordinatorId)
            if (arr.indexOf(it.areaCoordinatorId) !== -1 && index === -1) {
              this.delSelectRows.splice(index, 1)
            }
          })
        }
      } else {
        if (arr.length === 0) {
          this.sourceData.forEach(item => {
            let index = this.addSelectRows.indexOf(item.areaCoordinatorId)
            if (index !== -1) {
              this.addSelectRows.splice(index, 1)
            }
          })
        } else {
          this.sourceData.forEach(item => {
            let inx = this.addSelectRows.indexOf(item.areaCoordinatorId)
            if (arr.indexOf(item.areaCoordinatorId) === -1 && inx !== -1) {
              this.addSelectRows.splice(inx, 1)
            }
            let index = this.delSelectRows.indexOf(item.areaCoordinatorId)
            if (arr.indexOf(item.areaCoordinatorId !== -1 && index === -1)) {
              this.delSelectRows.push(item.areaCoordinatorId)
            }
          })
        }
      }
    },
    loadSelected () {
      this.$nextTick(() => {
        if (this.selectedData && this.selectedData.length > 0) {
          this.selectedData.forEach(item => {
            this.sourceData.forEach(it => {
              if (item.areaCoordinatorId === it.areaCoordinatorId) {
                this.$refs.table.$refs.vueTable.toggleRowSelection(it)
              }
            })
          })
        }
      })
    },
    handleFilter () {
      let $this = this
      $this.loadCount = $this.loadCount + 1
    },
    clearParam () {
      this.queryParas.pageIndex = 1
      this.queryParas.pageSize = 10
      this.queryParas.name = ''
    },
    // 复选框勾选数据
    selectRowChange (val, data) {
      let areaCoordinatorIds = this.selectedData.map(item => {
        return item.areaCoordinatorId
      })
      let index = this.addSelectRows.indexOf(data.areaCoordinatorId)
      if (areaCoordinatorIds.indexOf(data.areaCoordinatorId) === -1 &&
        index === -1) {
        this.addSelectRows.push(data.areaCoordinatorId)
        this.addSelectData.push(data)
      }
      if (!(val.length && val.indexOf(data) !== -1) &&
        index !== -1) {
        this.addSelectRows.splice(index, 1)
      }
      let delIndex = this.delSelectRows.indexOf(data.areaCoordinatorId)
      if (!(val.length && val.indexOf(data) !== -1) &&
        this.delSelectRows.indexOf(data.areaCoordinatorId) === -1 &&
        areaCoordinatorIds.indexOf(data.areaCoordinatorId) !== -1) {
        this.delSelectRows.push(data.areaCoordinatorId)
      }
      if ((val.length && val.indexOf(data) !== -1) &&
        delIndex !== -1 &&
        areaCoordinatorIds.indexOf(data.areaCoordinatorId) !== -1) {
        this.delSelectRows.splice(delIndex, 1)
      }
    },
    selectTable (row) {
      let $this = this
      let flag = false
      if ($this.selectedData.length === 0) {
        flag = true
      } else {
        for (let i = 0; i < $this.selectedData.length; i++) {
          if ($this.selectedData[i].areaCoordinatorId === row.areaCoordinatorId) {
            flag = false
            break
          } else {
            flag = true
          }
        }
      }
      return flag
    },
    // 确定
    onSaved () {
      let $this = this
      let val = []
      if ($this.selectedData.length > 0) {
        if (this.delSelectRows.length > 0) {
          $this.selectedData.forEach(it => {
            if (this.delSelectRows.indexOf(it.areaCoordinatorId) === -1) {
              val.push(it)
            }
          })
        } else {
          val = val.concat(this.selectedData)
        }
      }
      if ($this.addSelectRows.length > 0) {
        let obj = {}
        for (let i = 0; i < this.addSelectData.length; i++) {
          if (!obj[this.addSelectData[i].areaCoordinatorId] &&
            this.addSelectRows.indexOf(this.addSelectData[i].areaCoordinatorId) !== -1) {
            val.push(this.addSelectData[i])
            obj[this.addSelectData[i].areaCoordinatorId] = true
          }
        }
      }
      $this.$emit('chooseValue', val)
      $this.dialogVisible = false
    }
  },
  watch: {
    visible (val) {
      let $this = this
      if (!val) {
        this.clearParam()
      }
      if (val) {
        this.addSelectRows = []
        this.delSelectRows = []
        this.addSelectData = []
        $this.$nextTick(() => {
          $this.loadCount = $this.loadCount + 1
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
