<template>
  <Modal v-model="visible" title="选择人员" width="1100" :mask-closable="false">
    <div class="search-div">
      <Row type="flex" :gutter="16" align="middle">
        <Col :span="20">
          <span>姓名：</span>
          <Input v-model="filters.name" placeholder="请输入姓名" style="width: 160px" class="mr10" />
          <span v-if="curGrad === '3'">选择区：</span>
          <Select v-if="curGrad === '3'" v-model="filters.areaId" clearable style="width: 130px" @on-change="changeArea" class="mr10" >
            <Option v-for="(item, index) in areaList" :key="index" :value="item.parent_id" >{{ item.name }}</Option>
          </Select>
          <span v-if="curGrad === '3' || curGrad === '4'">选择街道：</span>
          <Select v-if="curGrad === '3' || curGrad === '4'" v-model="filters.streetId" clearable style="width: 130px" @on-change="changeStreet" class="mr10">
            <Option v-for="(item, index) in streetList" :key="index" :value="item.parent_id" >{{ item.name }}</Option>
          </Select>
          <span v-if="curGrad === '3' || curGrad === '4' || curGrad === '5'">选择社区：</span>
          <Select v-if="curGrad === '3' || curGrad === '4' || curGrad === '5'" style="width: 130px" v-model="filters.communityId" clearable>
            <Option v-for="(item, index) in communityList" :key="index" :value="item.parent_id">{{ item.name }}</Option>
          </Select>
        </Col>
        <Col :span="4" class="text-right">
          <Button type="primary" class="mr10" @click="handleSearch">搜索</Button>
          <Button type="primary" @click="handleReset">重置</Button>
        </Col>
      </Row>
    </div>

    <Table
      :data="rows"
      :loading="loading"
      :columns="columns"
      @on-selection-change="onSelectionChange"
      border />

    <Page class="page_style" :total="pager.totalRecord" :current="pager.pageNo" :page-size="pager.pageSize" show-total show-sizer
      @on-change="pageChange" @on-page-size-change="sizeChange" />

    <div slot="footer">
      <Button @click="handleCancel">取消</Button>
      <Button type="primary" :loading="confirming" @click="handleConfirm">确定({{ selectedRows.length }})</Button>
    </div>
  </Modal>
</template>

<script>
import { getUserMultiSelectorList } from '@/api/key-dm'
import { selectCityList } from '@/api/contradiction.js'

export default {
  name: 'user-multi-selector',
  props: {
    // v-model: value 控制显示
    value: { type: Boolean, default: false },
    // 范围参数1父，本级，下级2本级
    round: { type: String, default: '2' }
  },
  data () {
    return {
      visibleInternal: false,
      filters: { name: '', cityId: '', areaId: '', streetId: '', communityId: '' },
      rows: [],
      loading: false,
      pager: { pageNo: 1, pageSize: 10, totalRecord: 0 },
      selectedRows: [],
      confirming: false,
      columns: [
        { type: 'selection', width: 60, align: 'center' },
        { title: '归属部门', key: 'office_name', align: 'center', minWidth: 150 },
        { title: '姓名', key: 'name', align: 'center', minWidth: 100 },
        // { title: '工号', key: 'gh', align: 'center', minWidth: 120 },
        // { title: '邮箱', key: 'email', align: 'center', minWidth: 150 },
        { title: '电话', key: 'phone', align: 'center', minWidth: 120 },
        { title: '手机', key: 'mobile', align: 'center', minWidth: 120 }
      ],
      otherUserInfo: {},
      showArea: false,
      showStreet: false,
      showCommnity: false,
      areaList: [],
      streetList: [],
      communityList: [],
      curGrad: '',
      curPids: ''
    }
  },
  computed: {
    visible: {
      get () { return this.value },
      set (v) { this.$emit('input', v) }
    }
  },
  watch: {
    visible (v) {
      if (v) {
        this.pager.pageNo = 1
        this.selectedRows = []
        this.filters.name = ''
        this.filters.cityId = ''
        this.filters.areaId = ''
        this.filters.streetId = ''
        this.filters.communityId = ''
        // this.getOtherUserInfo()
        this.fetchList()
      }
    }
  },
  methods: {
    getOtherUserInfo () {
      this.otherUserInfo = this.$store.state.user.otherUserInfo || {}
      this.curGrad = ''
      console.log('otherUserInfo', this.otherUserInfo)
      if (this.otherUserInfo.area_id && this.otherUserInfo.area_id.startsWith('2201') && this.round === '1') { // 长春
        this.curGrad = this.otherUserInfo.company_grade
        if (this.otherUserInfo.company_grade === '3') { // 市
          this.curPids = this.otherUserInfo.parent_ids
          this.filters.cityId = this.otherUserInfo.area_id
          this.changeCity()
          this.fetchList()
        } else if (this.otherUserInfo.company_grade === '4') { // 区
          this.curPids = this.otherUserInfo.parent_ids
          let pids = this.curPids.split(',')
          this.filters.cityId = pids[2]
          this.filters.areaId = this.otherUserInfo.area_id
          this.changeArea()
          this.fetchList()
        } else if (this.otherUserInfo.company_grade === '5') { // 街道
          this.curPids = this.otherUserInfo.parent_ids
          let pids = this.curPids.split(',')
          this.filters.cityId = pids[2]
          this.filters.areaId = pids[3]
          this.filters.streetId = this.otherUserInfo.area_id
          this.changeStreet()
          this.fetchList()
        } else {
          this.fetchList()
        }
      } else {
        this.fetchList()
      }
    },
    fetchList () {
      this.loading = true
      let _this = this
      let curId = ''
      let pids = ''
      let pobj = { pageNo: this.pager.pageNo, pageSize: this.pager.pageSize, round: this.round, curId: '', curPids: '' }
      if (this.filters.communityId && this.filters.communityId !== '') {
        curId = this.filters.communityId
        if (_this.curGrad === '3') {
          pids = this.curPids + ',' + this.filters.cityId + ',' + this.filters.areaId + ',' + this.filters.streetId + ',' + this.filters.communityId
        } else if (_this.curGrad === '4') {
          pids = this.curPids + ',' + this.filters.areaId + ',' + this.filters.streetId + ',' + this.filters.communityId
        } else if (_this.curGrad === '5') {
          pids = this.curPids + ',' + this.filters.streetId + ',' + this.filters.communityId
        }
      } else if (this.filters.streetId && this.filters.streetId !== '') {
        curId = this.filters.streetId
        if (_this.curGrad === '3') {
          pids = this.curPids + ',' + this.filters.cityId + ',' + this.filters.areaId + ',' + this.filters.streetId
        } else if (_this.curGrad === '4') {
          pids = this.curPids + ',' + this.filters.areaId + ',' + this.filters.streetId
        } else if (_this.curGrad === '5') {
          pids = this.curPids + ',' + this.filters.streetId
        }
      } else if (this.filters.areaId && this.filters.areaId !== '') {
        curId = this.filters.areaId
        if (_this.curGrad === '3') {
          pids = this.curPids + ',' + this.filters.cityId + ',' + this.filters.areaId
        } else if (_this.curGrad === '4') {
          pids = this.curPids + ',' + this.filters.areaId
        } else if (_this.curGrad === '5') {
          tpids = this.curPids
        }
      }
      if (this.round === '1') {
        pobj.curId = curId
        pobj.curPids = pids
      }

      let payload = Object.assign(pobj, this.filters)
      getUserMultiSelectorList(payload).then(ret => {
        if (ret.data && ret.data.errcode === 0) {
          const data = ret.data.data || {}
          this.rows = data.results || []
          this.pager.totalRecord = data.totalRecord || 0
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data && ret.data.errmsg })
        }
      }).finally(() => { this.loading = false })
    },
    handleSearch () {
      this.pager.pageNo = 1
      this.fetchList()
    },
    handleReset () {
      this.filters.name = ''
      this.filters.communityId = ''
      if (this.curGrad === '3') {
        this.filters.areaId = ''
        this.filters.streetId = ''
      } else if (this.curGrad === '4') {
        this.filters.streetId = ''
      }
      this.pager.pageNo = 1
      this.fetchList()
    },
    pageChange (pageNo) {
      this.pager.pageNo = pageNo
      this.fetchList()
    },
    sizeChange (size) {
      this.pager.pageSize = size
      this.pager.pageNo = 1
      this.fetchList()
    },
    onSelectionChange (list) {
      this.selectedRows = list || []
    },
    handleCancel () {
      this.$emit('cancel')
      this.$emit('input', false)
    },
    handleConfirm () {
      if (this.selectedRows.length === 0) {
        this.$Message.warning('请先选择人员')
        return
      }
      this.confirming = true
      // emit selected users to parent
      this.$emit('on-ok', this.selectedRows)
      this.$emit('input', false)
      this.confirming = false
    },
    changeCity (areaId) {
      if (!this.filters.cityId) {
        this.areaList = []
        this.streetList = []
        this.communityList = []
        this.filters.areaId = ''
        this.filters.streetId = ''
        this.filters.communityId = ''
        return
      }
      selectCityList({ parent_id: this.filters.cityId }).then((res) => {
        this.areaList = res.data.data
      })
      // 清空下面的数组
      this.streetList = []
      this.communityList = []
    },
    changeArea () {
      if (!this.filters.areaId) {
        this.streetList = []
        this.communityList = []
        this.filters.streetId = ''
        this.filters.communityId = ''
        return
      }
      selectCityList({ parent_id: this.filters.areaId }).then((res) => {
        this.streetList = res.data.data
      })
      this.communityList = []
    },
    changeStreet () {
      if (!this.filters.streetId) {
        this.communityList = []
        this.filters.communityId = ''
        return
      }
      selectCityList({ parent_id: this.filters.streetId }).then((res) => {
        this.communityList = res.data.data
      })
    }
  }
}
</script>

<style scoped>
.search-div { border: 1px solid #dce1e7; padding: 12px; margin-bottom: 12px; background-color: #f8fbff; }
.mr10 { margin-right: 10px; }
.page_style { margin-top: 12px; text-align: right; }
.text-right { text-align: right; }
</style>
