<template>
    <div>
        <Alert class="alert">
            <Spin fix v-if="spinShow"></Spin>
            <Row type="flex" justify="space-between">
                <Col span="20">
                    <Row type="flex" class="info-box" justify="space-around">
                        <Col span="8">公司名称：<span class="info-content">{{infoObj.company_name}}</span></Col>
                        <Col span="8">公司编号：<span class="info-content">{{infoObj.company_code}}</span></Col>
                        <Col span="8">当前账号：<span class="info-content">{{infoObj.login_name}}</span></Col>
                    </Row>
                </Col>
                <Col span="4">
                    <Button type="primary" @click="personalInfo">个人信息</Button>
                </Col>
            </Row>
        </Alert>
        <Tabs type="card" :animated="false" @on-click="tabChange" v-model="tabIndex">
            <TabPane label="员工列表" name="list">
                <staff-list ref="staffList" @infoOption="infoOption" @updateOption="updateOption"></staff-list>
            </TabPane>
            <TabPane :label="optionName" name="option">
                <staff-option ref="staffOption" :optionState="optionState" :formData="formData"
                              :roleList="roleList" :hiddenArr="hiddenArr"
                              @staffOption="staffOption"></staff-option>
            </TabPane>
        </Tabs>
        <info-modal ref="infoModal" v-if="modalShow" :modalShow="modalShow"
                    :dataId="dataId" :dataObj="dataObj"
                    @showOption="showOption"></info-modal>
    </div>
</template>

<script>
import {
  getMyInfo,
  getCompanyRoleList
} from '../../../api/system/sys-staff-manager'
import StaffList from './components/staff-list'
import StaffOption from './components/staff-option'
import InfoModal from './components/info-modal'
import { log } from '../../../libs/util'

export default {
  name: 'WlStaffManager',
  components: { InfoModal, StaffOption, StaffList },
  data () {
    return {
      modalShow: false,
      optionShow: false,
      spinShow: false,
      infoObj: {},
      tabIndex: 'list',
      optionName: '添加员工',
      optionState: false, // 添加false（默认） 修改true
      formData: {},
      dataId: '',
      dataObj: {},
      roleList: []
    }
  },
  mounted () {
    log('staffManager', 'readme')
    this.getMyInfo()
    this.getCompanyRoleList()
  },
  props: {
    hiddenArr: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    getMyInfo () {
      this.spinShow = true
      getMyInfo({ contain_role: 1 }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.infoObj = data.data
          this.spinShow = false
        } else {
          this.spinShow = false
          this.error(data)
        }
      })
    },
    getCompanyRoleList () {
      getCompanyRoleList().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.roleList = data.data
        } else {
          this.error(data)
        }
      })
    },
    showOption () {
      this.modalShow = false
    },
    personalInfo () {
      this.dataId = ''
      this.dataObj = this.$common.xeUtils.clone(this.infoObj)
      this.modalShow = true
    },
    infoOption (data) {
      this.dataId = data
      this.modalShow = true
    },
    updateOption (data) {
      this.optionName = '修改信息'
      this.optionState = true
      let dataId = this.$common.xeUtils.clone(data)
      this.$refs.staffOption.getById({ contain_role: '1', id: dataId })
      this.tabIndex = 'option'
    },
    staffOption () {
      this.tabIndex = 'list'
      this.optionName = '添加员工'
      this.$refs.staffList.getUserInfoList()
    },
    tabChange (val) {
      if (val === 'list') {
        this.optionName = '添加员工'
      } else {
        this.formData = {
          login_flag: '1', // 是否启用
          company_id: this.infoObj.company_id // 公司编号
        }
        this.optionState = false
      }
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  }
}
</script>

<style scoped>
    .alert {
        height: 50px;
    }

    .info-box {
        line-height: 32px;
    }

    .info-content {
        font-weight: bold;
    }
</style>
