<template>
    <el-dialog
        :title="dialogForm.id ? this.$t('common.edit') : this.$t('common.add')"
        :visible.sync="visible"
        width="50%"
        :before-close="handleDialogClose"
        :close-on-click-modal="false"
        v-loading="loading"
    >
        <el-form
            ref="form"
            :model="dialogForm"
            :rules="dialogRules"
            label-width="80px"
            label-position="top"
        >
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item
                        :label="$t('reportManagement.key')"
                        prop="key"
                    >
                        <el-input
                            :disabled="dialogForm.id ? true : false"
                            v-model="dialogForm.key"
                            :placeholder="
                                $t('reportManagement.input') +
                                $t('reportManagement.key')
                            "
                        ></el-input>
                    </el-form-item>
                    <el-tooltip
                        effect="dark"
                        :content="$t('reportManagement.disableCodeTip')"
                        placement="right-start"
                    >
                        <span
                            class="el-icon-question"
                            :style="
                                $i18n.locale === 'en-US'
                                    ? {
                                          left: '76px',
                                      }
                                    : {
                                          left: '56px',
                                      }
                            "
                        ></span>
                    </el-tooltip>
                </el-col>
                <el-col :span="8">
                    <el-form-item
                        :label="$t('reportManagement.name')"
                        prop="name"
                    >
                        <el-input
                            v-model="dialogForm.name"
                            :placeholder="
                                $t('reportManagement.input') +
                                $t('reportManagement.name')
                            "
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item
                        :label="$t('reportManagement.nameEn')"
                        prop="nameEn"
                    >
                        <el-input
                            v-model="dialogForm.nameEn"
                            :placeholder="
                                $t('reportManagement.input') +
                                $t('reportManagement.nameEn')
                            "
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item
                        :label="$t('reportManagement.tyep')"
                        prop="tyep"
                    >
                        <dict-select
                            :dictCode="
                                $i18n.locale === 'zh-CN' ? 'bblx' : 'bblx_en'
                            "
                            :hasDefaultOption="true"
                            clearable
                            v-model="dialogForm.tyep"
                            style="width: 100%"
                            :placeholder="
                                $t('reportManagement.select') +
                                $t('reportManagement.tyep')
                            "
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item
                        :label="$t('reportManagement.business')"
                        prop="business"
                    >
                        <dict-select
                            :dictCode="
                                $i18n.locale === 'zh-CN' ? 'ssyw' : 'ssyw_en'
                            "
                            :hasDefaultOption="true"
                            clearable
                            v-model="dialogForm.business"
                            style="width: 100%"
                            :placeholder="
                                $t('reportManagement.select') +
                                $t('reportManagement.business')
                            "
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item
                        :label="$t('reportManagement.fillRate')"
                        prop="fillRate"
                    >
                        <dict-select
                            :dictCode="
                                $i18n.locale === 'zh-CN' ? 'tbzq' : 'tbzq_en'
                            "
                            :hasDefaultOption="true"
                            clearable
                            v-model="dialogForm.fillRate"
                            style="width: 100%"
                            :placeholder="
                                $t('reportManagement.select') +
                                $t('reportManagement.fillRate')
                            "
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="dialogForm.id">
                <el-col :span="8">
                    <el-form-item :label="$t('reportManagement.sn')" prop="sn">
                        <el-input
                            v-model="dialogForm.sn"
                            type="number"
                            :placeholder="
                                $t('reportManagement.input') +
                                $t('reportManagement.sn')
                            "
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item
                        :label="$t('reportManagement.memo')"
                        prop="memo"
                    >
                        <el-input
                            type="textarea"
                            v-model="dialogForm.memo"
                            :placeholder="
                                $t('reportManagement.input') +
                                $t('reportManagement.memo')
                            "
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit">
                {{ $t('common.save') }}
            </el-button>
            <el-button @click="visible = false">
                {{ $t('common.cancel') }}
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
import req from '@/request.js'
const portal = window.context.portal
export default {
    name: 'add',
    data() {
        return {
            visible: false,
            dialogForm: {
                business: 'Finance',
                tyep: 1,
                fillRate: 'dynamic',
                flag: 0,
            },
            dialogRules: {
                key: {
                    required: true,
                    message:
                        this.$t('reportManagement.input') +
                        this.$t('reportManagement.key'),
                    trigger: 'blur',
                },
                name: {
                    required: true,
                    message:
                        this.$t('reportManagement.input') +
                        this.$t('reportManagement.name'),
                    trigger: 'blur',
                },
                nameEn: {
                    required: true,
                    message:
                        this.$t('reportManagement.input') +
                        this.$t('reportManagement.nameEn'),
                    trigger: 'blur',
                },
                tyep: {
                    required: true,
                    message:
                        this.$t('reportManagement.select') +
                        this.$t('reportManagement.tyep'),
                    trigger: 'blur',
                },
                business: {
                    required: true,
                    message:
                        this.$t('reportManagement.select') +
                        this.$t('reportManagement.business'),
                    trigger: 'blur',
                },
                fillRate: {
                    required: true,
                    message:
                        this.$t('reportManagement.select') +
                        this.$t('reportManagement.fillRate'),
                    trigger: 'blur',
                },
            },
            loading: false,
        }
    },
    methods: {
        open(row) {
            this.visible = true
            this.loading = false
            if (!row) {
                this.dialogForm = {
                    business: 'Finance',
                    tyep: 1,
                    fillRate: 'dynamic',
                    flag: 0,
                }
            } else {
                this.dialogForm = row
            }
        },
        submit() {
            let api
            if (this.dialogForm.id) {
                api = '/qfReportInfo/v1/updateInfoById'
            } else {
                api = '/qfReportInfo/v1/insertInfo'
            }
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true
                    req.post(portal + api, this.dialogForm)
                        .then((res) => {
                            if (!res.data.state) {
                                this.$message.error(res.data.message)
                            } else {
                                this.$message.success(
                                    this.$t('common.saveSuccess')
                                )
                                this.visible = false
                                this.$emit('updata')
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err.data)
                        })
                        .finally(() => {
                            this.loading = false
                        })
                } else {
                    this.$message.error(this.$t('common.saveFail'))
                }
            })
        },
        handleDialogClose() {
            this.visible = false
        },
    },
}
</script>

<style lang="scss" scoped>
.el-icon-question{
    position: absolute;
    left: 76px;
    top: 13px;
    color: #f56c6c;
}
</style>
