<template>
    <el-dialog v-if="visible" :visible.sync="visible" :close-on-click-modal="false"
        :title="$t(`trials:trials-workbench:inspectionManagement:dialogTitle:${state}`)" width="600px"
        custom-class="base-dialog-wrapper" v-dialogDrag :before-close="handleCancle">
        <el-form :model="from" size="mini" :rules="rules" ref="dataForm" label-width="120px">
            <div class="base-dialog-body">
                <!-- 公司名称 -->
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:from:CompanyName')"
                    prop="CompanyName">
                    <el-input v-model="from.CompanyName" clearable></el-input>
                </el-form-item>
                <!-- 稽查内容 -->
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:from:AuditContent')"
                    prop="AuditContent">
                    <el-input v-model="from.AuditContent" clearable></el-input>
                </el-form-item>
                <!-- 稽查形式 -->
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:from:AuditType')"
                    prop="AuditType">
                    <el-select v-model="from.AuditType" placeholder="" clearable style="width: 100%;">
                        <el-option v-for="item in $d.AuditType" :key="item.id" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 稽查人员 -->
                <!-- <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:from:IdnetityUserName')"
                    prop="IdnetityUserName">
                    <div style="display: flex;align-items: center;justify-content: space-around;">
                        <p :title="from.IdnetityUserName"
                            style="width: 50%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin: 0;">
                            {{
                                from.IdnetityUserName }}</p>
                        <el-button type="primary" @click.stop="openUserList">{{
                            $t('trials:trials-workbench:inspectionManagement:button:select')
                            }}</el-button>
                    </div>
                </el-form-item> -->
                <!-- 查看培训记录 -->
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:from:IsViewTrainingRecord')"
                    prop="IsViewTrainingRecord">
                    <el-radio-group v-model="from.IsViewTrainingRecord">
                        <el-radio v-for="item in $d.YesOrNo" :key="item.id" :label="item.value">{{ item.label
                        }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <!-- 稽查日期 -->
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:from:AuditTime')"
                    prop="AuditTime">
                    <el-date-picker v-model="from.AuditTime" type="date" placeholder="" value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd" clearable style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <!-- 文档查看时间 -->
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:from:ViewTime')" prop="ViewTime">
                    <el-date-picker v-model="from.ViewTime" type="datetimerange"
                        :default-time="['00:00:00', '23:59:59']" range-separator="-"
                        :start-placeholder="$t('curriculumVitae:daterange:startTime')"
                        :end-placeholder="$t('curriculumVitae:daterange:endTime')" value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss" clearable style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <!-- 状态 -->
                <el-form-item :label="$t('trials:trials-workbench:inspectionManagement:from:AuditState')"
                    prop="AuditState" v-if="state === 'edit'">
                    <el-radio-group v-model="from.AuditState">
                        <el-radio v-for="item in $d.AuditState" :key="item.id" :label="item.value">{{ item.label
                        }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </div>
            <div class="base-dialog-footer" style="text-align: right; margin-top: 10px">
                <el-form-item>
                    <!-- 取消 -->
                    <el-button :disabled="loading" size="small" type="primary" @click="handleCancle">
                        {{ $t('common:button:cancel') }}
                    </el-button>
                    <!-- 保存 -->
                    <el-button size="small" type="primary" :loading="loading" @click="handleSave">
                        {{ $t('common:button:save') }}
                    </el-button>
                </el-form-item>
            </div>
        </el-form>
    </el-dialog>
</template>
<script>
import { addOrUpdateAuditRecord } from '@/api/trials'

export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        state: {
            type: String,
            default: 'add'
        },
        rowData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    watch: {
        state: {
            handler() {
                if (this.state === 'edit') {
                    Object.keys(this.from).forEach(key => {
                        if (this.rowData[key] || this.rowData[key] == 0) {
                            this.from[key] = this.rowData[key]
                        }
                    })
                    this.from.IdnetityUserName = this.rowData.IdentityUserList.map(item => item.FullName).join(", ")
                    this.from.ViewTime = [this.from.BeginTime, this.from.EndTime]
                } else {
                    Object.keys(this.from).forEach(key => {
                        this.from[key] = ''
                    })
                    this.from.ViewTime = []
                    this.from.IdnetityUserIdList = []
                    this.from.IsViewTrainingRecord = false
                }
            },
            immediate: true,
        },
        'from.ViewTime': {
            handler() {
                if (Array.isArray(this.from.ViewTime) && this.from.ViewTime.length === 2) {
                    this.from.BeginTime = this.from.ViewTime[0]
                    this.from.EndTime = this.from.ViewTime[1]
                } else {
                    this.from.BeginTime = ''
                    this.from.EndTime = ''
                }
            }
        }
    },
    data() {
        return {
            loading: false,
            from: {
                Id: '',
                CompanyName: '',
                AuditContent: '',
                AuditTime: '',
                BeginTime: '',
                EndTime: '',
                AuditState: '',
                AuditType: '',
                IdnetityUserIdList: [],
                IdnetityUserName: '',
                IsViewTrainingRecord: false,
                ViewTime: []
            },
            rules: {
                CompanyName: [
                    {
                        required: true,
                        message: this.$t('common:ruleMessage:specify'),
                        trigger: 'blur',
                    },
                ],
                AuditContent: [
                    {
                        required: true,
                        message: this.$t('common:ruleMessage:specify'),
                        trigger: 'blur',
                    },
                ],
                AuditTime: [
                    {
                        required: true,
                        message: this.$t('common:ruleMessage:select'),
                        trigger: 'blur',
                    },
                ],
                AuditType: [
                    {
                        required: true,
                        message: this.$t('common:ruleMessage:select'),
                        trigger: 'blur',
                    },
                ],
                IdnetityUserName: [
                    {
                        required: true,
                        message: this.$t('common:ruleMessage:select'),
                        trigger: 'blur',
                    },
                ],
                AuditState: [
                    {
                        required: true,
                        message: this.$t('common:ruleMessage:select'),
                        trigger: 'blur',
                    },
                ],
                ViewTime: [
                    {
                        required: true,
                        type: 'array',
                        message: this.$t('common:ruleMessage:select'),
                        trigger: 'blur',
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (value.length < 2) {
                                callback(
                                    new Error(this.$t('common:ruleMessage:select'))
                                )
                            }
                            callback()
                        },
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        openUserList() {
            this.config.visible = true
        },
        handleCancle() {
            this.$emit('update:visible', false)
        },
        async handleSave() {
            try {
                let validate = await this.$refs.dataForm.validate()
                if (!validate) return false
                if (this.state === 'add') this.from.AuditState = 0
                this.loading = true
                let res = await addOrUpdateAuditRecord(this.from)
                this.loading = false
                if (res.IsSuccess) {
                    this.$emit('getList')
                    this.handleCancle()
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        addUser(arr) {
            this.from.IdnetityUserIdList = arr.map(item => item.Id)
            this.from.IdnetityUserName = arr.map(item => item.FullName).join(", ")
            this.config.visible = false
        }
    }

}
</script>
<style lang="scss" scoped></style>