<template>
  <a-modal
    title="详情"
    width="60%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="null"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <div>
        <a-descriptions bordered :column="2">
          <a-descriptions-item label="状态" :span="2">
            <a-tag color="#f50" v-if="currentInfo.status === 2">
              {{ GetClientDataItem('userregisterstatusenum', currentInfo.status) }}</a-tag
            >
            <a-tag color="#1dbb1d" v-else-if="currentInfo.status === 3">
              {{ GetClientDataItem('userregisterstatusenum', currentInfo.status) }}</a-tag
            >
            <a-tag color="#b3b3b3" v-else> {{ GetClientDataItem('userregisterstatusenum', currentInfo.status) }}</a-tag>
            <a-popconfirm
              v-if="hasPerm('userApplyfor:audit') && currentInfo.status === 1"
              placement="topRight"
              title="确定通过？"
              @confirm="() => setstatus(3)"
            >
              <a>通过</a>
            </a-popconfirm>
            <a-divider type="vertical" v-if="hasPerm('userApplyfor:audit') && currentInfo.status === 1" />
            <a-popconfirm
              v-if="hasPerm('userApplyfor:audit') && currentInfo.status === 1"
              placement="topRight"
              title="确定驳回？"
              @confirm="() => setstatus(2)"
            >
              <a>驳回</a>
            </a-popconfirm>
            <span v-if="currentInfo.statusremark">{{ currentInfo.statusremark }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="头像" :span="2">
            <a-avatar
              shape="square"
              :size="64"
              @click="$refs.PreImg.Show({ alt: currentInfo.name, img: currentInfo.avatar })"
              :alt="currentInfo.name"
              :src="currentInfo.avatar"
              :srcSet="currentInfo.avatar"
            />
          </a-descriptions-item>
          <a-descriptions-item label="姓名">
            <span>{{ currentInfo.name }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="手机号">
            <span>{{ currentInfo.phone }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="生日">
            <span>{{ moment(currentInfo.birthday).format('yyyy-MM-DD') }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="性别">
            <span>{{ GetClientDataItem('gender', currentInfo.sex) }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="企业">
            <span>{{ currentInfo.comname }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="企业职位">
            <span>{{ currentInfo.compos }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="行业" :span="2">
            <span>{{ currentInfo.industryname }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="来源" :span="2">
            <span>{{ currentInfo.source }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="能为智造团提供的资源" :span="2">
            <span>{{ currentInfo.provide }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="希望智造团能为您提供的资源" :span="2">
            <span>{{ currentInfo.demand }}</span>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-spin>
    <previewimg ref="PreImg"></previewimg>
    <a-modal
      title="驳回"
      :visible="rejectvisible"
      :confirm-loading="rejectconfirmloading"
      @ok="rejectok"
      @cancel="rejectcancel"
    >
      <a-form :form="form">
        <a-form-item>
          <a-textarea
            :rows="4"
            placeholder="请输入驳回原因"
            type="number"
            addon-after="元"
            v-decorator="['statusremark', { rules: [{ required: true, message: '驳回原因不可为空' }] }]"
          ></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="信息补充"
      :visible="uservisible"
      :confirm-loading="userconfirmloading"
      @ok="userok"
      @cancel="usercancel"
    >
      <a-form :form="userform">
        <a-form-item label="机构" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-tree-select
            v-decorator="['orgid', { rules: [{ required: true, message: '请选择机构！' }] }]"
            style="width: 100%"
            :dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
            :treeData="orgTree"
            placeholder="请选择机构"
            treeDefaultExpandAll
            @change="e => initrOrgName(e)"
          >
            <span slot="title" slot-scope="{ id }">{{ id }}</span>
          </a-tree-select>
        </a-form-item>
        <a-form-item v-show="false">
          <a-input v-decorator="['orgname']" />
        </a-form-item>
        <a-form-item label="职位信息" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-select
            style="width: 100%"
            placeholder="请选择职位信息"
            v-decorator="['posid', { rules: [{ required: true, message: '请选择职位信息！' }] }]"
          >
            <a-select-option v-for="(item, index) in posList" :key="index" :value="item.id">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-modal>
</template>

<script>
import { GetClientDataItem } from '@/utils/clientdata'
import previewimg from '@/views/components/previewimg'
import { sysPosList } from '@/api/modular/system/posManage'
import { getOrgTree, getOrgList } from '@/api/modular/system/orgManage'
import { SupplyForStatus } from '@/api/modular/system/userManage'
import moment from 'moment'
export default {
  components: {
    previewimg
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      currentInfo: {},
      rejectvisible: false,
      rejectconfirmloading: false,
      uservisible: false,
      userconfirmloading: false,
      posList: [],
      orgTree: [],
      orgList: [],
      visible: false,
      confirmLoading: false,
      plist: [],
      form: this.$form.createForm(this),
      userform: this.$form.createForm(this)
    }
  },
  methods: {
    GetClientDataItem,
    moment,
    // 初始化方法
    init(record) {
      this.visible = true
      this.currentInfo = record
      this.currentInfo.license = process.env.VUE_APP_API_BASE_URL + this.currentInfo.license
      this.getOrgDate()
      this.getPosList()
    },
    handleCancel() {
      this.visible = false
    },
    /**
     * 获取职位list列表
     */
    getPosList() {
      sysPosList().then(res => {
        this.posList = res.data
      })
    },
    /**
     * 获取机构树，并加载于表单中
     */
    getOrgDate() {
      getOrgTree().then(res => {
        this.orgTree = res.data
      })
      getOrgList().then(res => {
        this.orgList = res.data
      })
    },
    /**
     * 选择树机构，初始化机构名称于表单中
     */
    initrOrgName(value) {
      this.userform.getFieldDecorator('orgname', {
        initialValue: this.orgList.find(item => value === item.id).name
      })
      this.userform.getFieldDecorator('orgid', {
        initialValue: this.orgList.find(item => value === item.id).id
      })
    },
    // 修改状态
    setstatus(status) {
      if (status === 2) {
        this.rejectvisible = true
        return
      }
      if (status === 3) {
        this.uservisible = true
      }
    },
    rejectok(e) {
      const that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          this.rejectconfirmloading = true
          values['id'] = that.currentInfo.id
          values['status'] = 2
          SupplyForStatus(values)
            .then(res => {
              if (res.code === 0) {
                this.$message.success('驳回成功')
                this.currentInfo.status = 2
              } else {
                this.$myerror(res.message)
              }
              this.rejectcancel()
            })
            .catch(err => {
              this.$myerror(err.message)
              this.rejectcancel()
            })
        }
      })
    },
    rejectcancel() {
      this.rejectvisible = false
      this.rejectconfirmloading = false
    },
    userok() {
      const that = this
      this.userform.validateFields((err, values) => {
        if (!err) {
          this.userconfirmloading = true
          values['id'] = that.currentInfo.id
          values['status'] = 3
          SupplyForStatus(values)
            .then(res => {
              if (res.code === 0) {
                this.$message.success('账号开通成功')
                this.currentInfo.status = 3
              } else {
                this.$myerror(res.message)
              }
              this.usercancel()
            })
            .catch(err => {
              this.$myerror(err.message)
              this.usercancel()
            })
        }
      })
    },
    usercancel() {
      this.uservisible = false
      this.userconfirmloading = false
    }
  }
}
</script>
