<template>
  <el-dialog :title="$t('selectStaff.title')" :visible.sync="visible" width="80%" @close="handleClose">
    <el-row>
      <el-col :span="24">
        <el-card>
          <el-row>
            <el-col :span="12" class="border-right">
              <div class="text-center">
                <span>{{ $t('selectStaff.orgInfo') }}</span>
              </div>
              <div class="padding">
                <org-tree-show ref="orgTreeShow" @switchOrg="handleSwitchOrg"></org-tree-show>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="text-center">
                <span>{{ $t('selectStaff.staffInfo') }}</span>
              </div>
              <div class="padding">
                <div v-for="(item, index) in selectStaffInfo.staffs" :key="index" @click="_changeStaff(item)"
                  :class="{ 'select': selectStaffInfo.curStaffId == item.staffId }"
                  style="cursor:pointer;padding:10px;margin-bottom:5px;border-radius:4px">
                  <div>
                    <i class="el-icon-user margin-right-xs"></i>
                    {{ item.name }}
                  </div>
                  <div>{{ item.tel }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <div
      v-if="selectStaffInfo.staff.from == 'bpmn' || selectStaffInfo.staff.from == 'purchase' || selectStaffInfo.staff.from == 'contract'"
      style="text-align:right;margin-top:20px">
      <el-button type="text" @click="_firstUser">
        {{ $t('selectStaff.submitter') }}
      </el-button>
      <el-button type="text" @click="_customUser">
        {{ $t('selectStaff.dynamicAssign') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import OrgTreeShow from '@/components/org/OrgTreeShow'
import { queryStaffInfos } from '@/api/resource/addPurchaseApplyApi'

export default {
  name: 'SelectStaff',
  components: {
    OrgTreeShow
  },
  data() {
    return {
      visible: false,
      selectStaffInfo: {
        flowId: '',
        flowName: '',
        describle: '',
        staffs: [],
        curStaffId: '',
        curStaffName: '',
        staff: {}
      }
    }
  },
  methods: {
    open(staff) {
      this.visible = true
      this.selectStaffInfo.staff = staff
      this.$refs.orgTreeShow.refreshTree()
    },
    handleClose() {
      this.visible = false
      this.selectStaffInfo = {
        flowId: '',
        flowName: '',
        describle: '',
        staffs: [],
        curStaffId: '',
        curStaffName: '',
        staff: {}
      }
    },
    async loadStaff(_org) {
      try {
        const res = await queryStaffInfos({
          page: 1,
          row: 50,
          orgId: _org.orgId
        })
        this.selectStaffInfo.staffs = res.data.staffs
        if (res.data.staffs.length > 0) {
          this.selectStaffInfo.curStaffId = res.data.staffs[0].orgId
        }
      } catch (error) {
        console.error('请求失败:', error)
      }
    },
    _changeStaff(item) {
      this.selectStaffInfo.curStaffId = item.staffId
      this.$emit('change', {
        userId: item.staffId,
        userName: item.name,
        tel: item.tel
      })
      this.handleClose()
    },
    _firstUser() {
      this.$emit('change', {
        userId: '${startUserId}',
        userName: this.$t('selectStaff.submitter')
      })
      this.handleClose()
    },
    _customUser() {
      this.$emit('change', {
        userId: '${nextUserId}',
        userName: this.$t('selectStaff.dynamicAssign')
      })
      this.handleClose()
    },
    handleSwitchOrg(org) {
      this.loadStaff({
        orgId: org.orgId,
        orgName: org.orgName
      })
    }
  }
}
</script>

<style scoped>
.border-right {
  border-right: 1px solid #eee;
}

.padding {
  padding: 15px;
}

.text-center {
  text-align: center;
  padding: 10px 0;
  font-weight: bold;
}

.select {
  background-color: #f5f7fa;
}

.margin-right-xs {
  margin-right: 5px;
}
</style>