<template>
  <div>
    <Modal v-model="showEditModal" width="800" class="modal-footer-none">
      <p slot="header">
        {{ modalTitle }}
      </p>
      <Row>
        <Col span="24" />
        <Form id="people-form" inline onsubmit="return false" :label-width="50">
          <Form-item label="姓名:">
            <Input
              v-model="formObj.realname"
              placeholder="请输入姓名"
              style="width:200px"
              clearable
              @on-enter="_search"
            /></Input>
          </Form-item>
          <Form-item style="margin-left: -50px">
            <Button type="primary" @click="_search">
              搜索
            </Button>
          </Form-item>
        </Form>
        </Col>
        <Col span="24" />
        <BtnList :msg="btn" class="contHide" @on-result-change="_btnClick" />
        </Col>
        <Col span="24" />
        <element-table
          ref="pageTable"
          :table-height="tableHeight"
          :get-page="getPage"
          :icon-msg="iconMsg"
          :opt-col-width="160"
          @on-result-change="_tableResultChange"
        >
          <el-table-column
            v-for="item in pageColumns"
            :key="item.id"
            sortable
            show-overflow-tooltip
            :prop="item.key"
            :label="item.title"
            :width="item.width"
            :min-width="200"
            :fixed="item.fixed?item.fixed:undefined"
          >
            <template slot-scope="scope">
              <div v-if="item.leader">
                <span v-if="scope.row[item.key] === 0" class="red-color">否</span>
                <span v-else class="blue-color">是</span>
              </div>
              <div v-else>
                {{ scope.row[item.key] }}
              </div>
            </template>
          </el-table-column>
        </element-table>
        </Col>
      </Row>
    </Modal>
  </div>
</template>
<script>
import BtnList from '../../../components/base/btnList.vue'
import { userGroup } from '../../../api'
export default {
  components: {
    BtnList
  },
  data() {
    return {
      btn: [
        { type: 'success', id: 'marshal-manage-user-add', name: '添加' },
        { type: 'error', id: 'marshal-manage-user-del-all', name: '删除' }
      ],
      id: '',
      modalTitle: '人员列表',
      selectIds: [],
      getPage: {},
      showEditModal: false,
      pageColumns: [
        { title: '姓名', key: 'realname' },
        { title: '是否是组长', key: 'leader', width: 150, leader: true }
      ],
      iconMsg: [
        {
          type: 'gear-b',
          id: 'marshal-manage-user-leader',
          name: '设置/取消组长'
        }
      ],
      formObj: {
        realname: '',
        groupId: ''
      }
    }
  },
  computed: {
    tableHeight: function() {
      if (this.searchOpen) {
        return this.$tableHeight('search')
      } else {
        return this.$tableHeight('noSearch')
      }
    }
  },
  methods: {
    _iconClick(res, data) {
      switch (res) {
        case '设置/取消组长':
          this._setChargeman(data.id, data.leader)
          break
      }
    },
    _open(id) {
      this.showEditModal = true
      this.formObj = this.$resetFields(this.formObj)
      this.formObj.groupId = id
      this.id = id
      this._page()
    },
    _page: async function() {
      Object.assign(this.formObj, this.$refs.pageTable._searchParams())
      const result = await userGroup.pageUserGroup(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.getPage = result
        this.$refs.pageTable._initTable()
      }
    },
    _search() {
      this.$refs.pageTable._pageChange(1)
      this.$emit('on-result-change')
    },
    _deletePeopleByIds() {
      if (this.selectIds.length === 0) {
        this.$Message.warning('请选择至少一条数据！')
      } else {
        this.$Modal.confirm({
          title: '提示',
          content: '确定删除这 ' + this.selectIds.length + ' 条数据？',
          onOk: () => {
            this.$store
              .dispatch('LmsMarshalManage/deletePeopleByIds', this.selectIds)
              .then(() => {
                if (this.$store.state.LmsMarshalManage.success) {
                  this._page()
                  this.$Message.success('删除成功！')
                  this.selectIds = []
                  this.$emit('on-result-change')
                }
              })
          }
        })
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.getPage = this.$store.state.LmsMarshalManage.userPage
          break
        case 'selectIds':
          this.selectIds = data
          break
        case 'iconClick':
          this._iconClick(data.name, data.rowData)
          break
        case 'changeSize':
          this._page()
          break
      }
    },
    _assignPerson() {
      this.$refs.assignPersonModal._open(this.id)
    },
    _setChargeman(id, leader) {
      if (leader === null || undefined === leader || leader === '') {
        leader = '0'
      }
      let content = ''
      if (leader === '1') {
        content = '确定进行取消设置组长吗？'
      } else {
        content = '确定设置为组长？'
      }
      this.$Modal.confirm({
        title: '提示',
        content: content,
        onOk: () => {
          const obj = { id: '', leader: '' }
          obj.id = id
          obj.leader = leader
          this.$store
            .dispatch('LmsMarshalManage/setChargeman', obj)
            .then(() => {
              if (this.$store.state.LmsMarshalManage.success) {
                this._page()
                this.$Message.success('设置成功！')
              }
            })
        }
      })
    },
    _btnClick(msg) {
      switch (msg) {
        case '添加':
          this._assignPerson()
          break
        case '删除':
          this._deletePeopleByIds()
          break
      }
    },
    _peopleSelcetResult(res) {
      const idList = []
      const nameList = []
      const usernamesList = []
      for (let i = 0; i < res.length; i++) {
        idList.push(res[i].id)
        nameList.push(res[i].realname)
        usernamesList.push(res[i].username)
      }
      this.$store
        .dispatch('LmsMarshalManage/relUser', {
          id: this.id,
          ids: idList,
          names: nameList,
          usernames: usernamesList
        })
        .then(() => {
          if (this.$store.state.LmsMarshalManage.success) {
            this.$Message.success('人员分配成功！')
            this.$emit('on-result-change')
            this._page()
          } else {
            this.$Message.error('人员分配失败！')
          }
        })
    }
  }
}
</script>
