<template>
    <div>
        <el-form :model="formData" :rules="rules" ref="form" label-width="120px" label-position="right" size="small" style="max-width: 500px;">
            <el-form-item>
                <h2> test_aaa</h2>
            </el-form-item>

            <el-form-item prop="imageUrl" label="图片">
                <single-upload v-model="formData.imageUrl" :disabled="'imageUrl'==subColumn"></single-upload>
            </el-form-item>
            <el-form-item prop="testName" label="枚举单选">
                <template>
                    <el-select v-model="formData.testName" clearable placeholder="请选择" :disabled="'testName'==subColumn">
                        <el-option v-for="item in testNameOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item prop="remark" label="接口单选">
                <template>
                    <el-select v-model="formData.remark" clearable placeholder="请选择" :disabled="'remark'==subColumn">
                        <el-option v-for="item in remarkOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item prop="multiSelect" label="表多选">
                <template>
                    <el-select v-model="formData.multiSelect" multiple clearable placeholder="请选择" :disabled="'multiSelect'==subColumn">
                        <el-option v-for="item in multiSelectOptions" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item prop="testTime" label="时间">
                <template>
                    <div class="block">
                        <el-date-picker v-model="formData.testTime" type="date" value-format="timestamp" placeholder="选择日期" :disabled="'testTime'==subColumn">
                        </el-date-picker>
                    </div>
                </template>
            </el-form-item>
            <el-form-item prop="loginUser" label="登录名">
                <el-input v-model="formData.loginUser" disabled style="width: 215px;"></el-input>
            </el-form-item>
            <el-form-item prop="testcTime" label="当前时间">
                <el-input v-model="formData.testcTime" disabled style="width: 215px;"></el-input>
            </el-form-item>
            <el-form-item prop="testcDate" label="当前日期">
                <el-input v-model="formData.testcDate" disabled style="width: 215px;"></el-input>
            </el-form-item>
            <el-form-item prop="workNumber" label="工号">
                <el-input v-model="formData.workNumber" disabled style="width: 215px;"></el-input>
            </el-form-item>
            <el-form-item prop="departId" label="部门">
                <el-input v-model="formData.departId" disabled style="width: 215px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
                <el-button @click="onDelete" v-if="formData.id&&isModulesShow('del')" type="danger">删除</el-button>
                <el-button @click="changeEditDialogVisible(false)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import formValidator from '../formValidator'
import { mapState } from 'vuex'
import { format } from 'date-fns'
import zh from 'date-fns/locale/zh_cn'

export default {
    props: {
        formData: {
            type: Object,
            default: {

                multiSelect: [],

                loginUser: '',

                testcTime: format(new Date(), 'YYYY/MM/DD HH:mm', { locale: zh }),

                testcDate: format(new Date(), 'YYYY/MM/DD', { locale: zh }),

                workNumber: '',

                departId: '',

            }
        }
    },

    created() {




        this.$http.get({
            url: '/testBbb/all'
        }).then(res => {
            if (res.success) {

                if (res.data.length > 0) {
                    res.data.forEach(item => {
                        this.remarkOptions.push({ label: item.nameAaa, value: item.id });
                    })
                }
            }
        });
        this.$http.get({
            url: '/commonQuery/all',
            data: {
                tableName: 'test_bbb',
                databasetype: 'Mysql',
                dataSourceCode: 'dataSource',
            }
        }).then(res => {
            if (res.success) {

                if (res.data.length > 0) {
                    res.data.forEach(item => {
                        this.multiSelectOptions.push({ label: item.name_ccc, value: item.id });
                    })
                }
            }
        });
        this.formData.loginUser = this.userInfo.username;
        this.formData.workNumber = this.userInfo.workNumber;
        this.formData.departId = this.userInfo.departId;
    },
    data() {
        return {
            saving: false,
            rules: {
                testName:
                    [
                        { required: true, message: '请输入 枚举单选', trigger: 'blur' },
                    ],
                remark:
                    [
                        { required: true, message: '请输入 接口单选', trigger: 'blur' },
                    ],
                multiSelect:
                    [
                        { required: true, message: '请输入 表多选', trigger: 'blur' },
                    ],
            },
            modules: 'search,query,orders,edit,excel,add,del'.split(',').map(i => String(i))
            ,
            testNameOptions: [{ label: 'A', value: 'A' }, { label: 'B', value: 'B' }, { label: 'C', value: 'C' }],
            remarkOptions: [],
            multiSelectOptions: [],
        }
    },
    computed: {
        ...mapState(['userInfo']),
        subColumn() {
            if (this.formData.subColumn) {
                return this.formData.subColumn;
            } else {
                return '';
            }
        },
    },
    methods: {
        changeEditDialogVisible(value) {
            this.$emit('changeEditDialogVisible', value)
        },
        isModulesShow(column) {
            var row = this.modules.find(i => i === column);
            return row ? true : false;
        },
        onSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.logicalValidate();
                } else {
                    return false;
                }
            });
        },
        logicalValidate() {
            var data = JSON.parse(JSON.stringify(this.formData));

            var logicalData = {
                testName: data.testName,
                remark: data.remark,
            }

            if (JSON.stringify(logicalData) == '{}') {
                this.submit();
            } else {
                this.$http.get({
                    url: '/testAaa/getOne',
                    data: logicalData
                }).then(res => {
                    if (res.success) {

                        var logicalFlag = true;

                        if (res.data) {
                            if (this.formData.id) {
                                if (res.data.id != this.formData.id) {
                                    logicalFlag = false;
                                }
                            } else {
                                logicalFlag = false;
                            }

                        }

                        if (logicalFlag) {
                            this.submit();
                        } else {
                            this.$message.warning('逻辑关键字:' + '枚举单选,接口单选,' + '验证失败')
                        }


                    } else {
                        this.$message.warning('逻辑关键字:' + '枚举单选,接口单选,' + '验证失败')
                    }
                });
            }
        },
        submit() {
            var data = JSON.parse(JSON.stringify(this.formData));

            if (data.testcTime) {
                data.testcTime = Date.parse(new Date(data.testcTime));
            }

            if (data.testcDate) {
                data.testcDate = Date.parse(new Date(data.testcDate));
            }


            this.$http.post({
                url: this.formData.id ? '/testAaa/update' : '/testAaa/save',
                data: data
            }).then(res => {
                if (res.success) {
                    this.$message.success('成功');
                    this.$emit('changeEdit')
                } else {
                    this.$message.warning('失败')
                }
            });
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
                return this.$http.post({
                    url: '/testAaa/del',
                    data: { id: this.formData.id }
                })
            }).then(() => {
                this.$message.success('删除成功');
                this.$emit('changeEdit')
            }).catch(action => {
                if (action === 'cancel') {
                    this.$message.info('删除取消');
                } else {
                    this.$message.error('删除失败');
                }
            })
        },
    }
}
</script>
<style lang="less" scoped>
</style>
