<template>
  <super-dialog
    v-bind="$attrs"
    v-if="visible"
    v-model="visible"
    width="50%"
    :title="`私有云资源申请${typeText}`"
    :modal="false"
    top="8vh"
    @closed="handleClose"
  >
    <el-form
        v-form
        data-vv-scope="approvalform"
        ref="approvalform"
        :model="approvalform"
        label-width="100px"
        :rules="rules"
    >
        <template>
            <el-row>
                <el-col :span="24" v-if="type === 'start' || type === 'agree'">
                    <el-form-item
                        :label="type === 'agree' ? '执行人' : '审核人'"
                        prop="approvalUserName"
                    >
                      <el-input
                        readonly
                        v-model="approvalform.approvalUserName"
                        :placeholder="type === 'agree' ? '请选择执行人' : '请选择审核人'">
                        <el-button
                          slot="append"
                          icon="el-icon-search"
                          @click="showDialog"
                        ></el-button>
                      </el-input>
<!--                            <eip-user-selector-->
<!--                                v-model="approvalform.approvalUserName"-->
<!--                                append-to-body-->
<!--                                :single="true"-->
<!--                                :config="{-->
<!--                                    id: 'approvalform.approvalUserId',-->
<!--                                    fullname: 'approvalform.approvalUserName',-->
<!--                                    account: 'approvalform.approvalUserAccount',-->
<!--                                }"-->
<!--                                :placeholder="-->
<!--                                    type === 'agree' ? '请选择执行人' : '请选择审核人'-->
<!--                                "-->
<!--                            />-->
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="type !== 'start' && type !== 'complete'">
                    <el-form-item label="审核意见" prop="intranetPort">
                        <el-input
                            type="textarea"
                            v-model="approvalform.intranetPort"
                            placeholder="请输入审核意见"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="type !== 'start'">
                    <el-form-item label="附件">
                        <file-upload
                            v-if="visible"
                            :dadToSon="dadToSon"
                            @sonToDad="handleFileChange"
                        ></file-upload>
                    </el-form-item>
                </el-col>
            </el-row>
        </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose" :loading="loading">取 消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading"
            >确定</el-button
        >
    </div>
    <!--  人员选择弹层  -->
    <UserSelectorDialog
      isSingleChoice
      :is-show.sync="userDialog"
      :selected-content.sync="approvalform.user"
      @confirm="handleUserSelect"
    />
  </super-dialog>
</template>
<script>
import _ from 'lodash'
import { applyApproval } from '@/api/publicBasic/resourceBid'
import fileUpload from '@/components/upload/fileListUpload.vue'
import SuperDialog from '@/components/SuperDialog/index.vue'
import UserSelectorDialog from '@/components/TreeTableSelector/UserSelectorDialog/index.vue'
export default {
    name: 'applyApproval',
    components: {
      SuperDialog,
      fileUpload,
      UserSelectorDialog
    },
    props: {
        startApproval: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            userDialog: false,
            visible: false,
            loading: false,
            type: '',
            approvalform: {
                privateCloudApplyId: '',
                applyRecordFile: [],
                approvalResult: null,
            },
            dadToSon: {
                bizPath: 'resourceApply',
                fileList: [],
            },
            rules: {
                approvalUserName: {
                    required: true,
                    message: '请选择审核人',
                    trigger: 'blur',
                },
                intranetPort: {
                    required: true,
                    message: '请输入审核意见',
                    trigger: 'change',
                },
            },
            typeText: '',
        }
    },
    mounted() {},
    methods: {
        // 展示弹层
        showDialog() {
          this.userDialog = true
        },
        // 人员选择回调
        handleUserSelect(user) {
          this.$set(this.approvalform, 'approvalUserName', user.fullname)
          this.$set(this.approvalform, 'approvalUserId', user.id)
        },
      handleOpen(type, id) {
            this.type = type
            if (this.type === 'start') {
                this.typeText = '发起审核'
                this.approvalform.approvalResult = 3
            } else if (this.type === 'reject') {
                this.typeText = '审核驳回'
                this.approvalform.approvalResult = 0
            } else if (this.type === 'agree') {
                this.typeText = '审核同意'
                this.approvalform.approvalResult = 1
            } else if (this.type === 'complete') {
                this.typeText = '审核完成'
                this.approvalform.approvalResult = 4
            }
            this.approvalform.privateCloudApplyId = id
            this.visible = true
        },
        handleFileChange(data) {
            this.approvalform.applyRecordFile = data
        },
        handleClose() {
            this.typeText = ''
            this.approvalform = {
                privateCloudApplyId: '',
                applyRecordFile: [],
                approvalResult: null,
            }
            this.visible = false
        },
        handleSubmit() {
            this.$refs.approvalform.validate((bool, object) => {
                if (bool) {
                    this.$confirm(`确定${this.typeText}吗？`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }).then(() => {
                        this.loading = true
                        const { state,message } = applyApproval(this.type, this.approvalform)
                        if(state){
                          this.loading = false
                          this.$message({
                              message: `${this.typeText}成功`,
                              type: 'success',
                          })
                          this.$emit('close')
                          this.handleClose()
                        }else{
                          this.loading = false
                          this.$message({
                              message: message,
                              type: 'warning',
                          })
                        }
                    })
                } else {
                    this.$message.warning(
                        `有${
                            Object.keys(object).length
                        }个字段未通过校验，请正确填写表单内容。`
                    )
                }
            })
        },
    },
}
</script>
<style lang="scss" scoped>

::v-deep .el-input input{
    height: 33px!important;
    line-height: 33px!important;
}
::v-deep .el-form{
    background-color: transparent;
    padding: 20px 20px 0 0;
}
</style>
