<template>
    <div class="edit-view">
        <el-row>
            <div class="content_title">
                <span>发布供应信息</span>
            </div>
        </el-row>
        <el-form
            :model="productFormData"
            :rules="productRules"
            ref="productForm"
            label-width="108px"
            label-position="right"
            size="small"
            style="max-width: 500px;"
        >
            <el-form-item prop="type" label="供应类别">
                <el-select v-model="productFormData.type" clearable filterable placeholder="请选择">
                    <el-option v-for="item in supplyType" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="name" label="标题">
                <el-input v-model="productFormData.name"></el-input>
            </el-form-item>
            <el-form-item prop="description" label="简介">
                <el-input type="textarea" v-model="productFormData.description" :rows="5"></el-input>
            </el-form-item>
            <el-form-item prop="dataType" label="设备类型" v-if="productFormData.type != 'TECH_SUPPLY'">
                <el-select v-model="dataTypeId" clearable filterable placeholder="请选择">
                    <el-option
                        v-for="item in sblxDataTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="techType" label="技术类型" v-if="productFormData.type == 'TECH_SUPPLY'">
                <el-select v-model="techTypeId" clearable filterable placeholder="请选择">
                    <el-option
                        v-for="item in jslxDataTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="applicationField" label="应用领域">
                <el-select v-model="applicationFieldId" clearable filterable placeholder="请选择">
                    <el-option
                        v-for="item in applicationFieldOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="expireTime" label="有效时间">
                <el-date-picker
                    v-model="productFormData.expireTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="contact" label="联系人">
                <el-input v-model="productFormData.contact"></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="联系方式">
                <el-input v-model="productFormData.phone"></el-input>
            </el-form-item>
            <el-form-item prop="address" label="联系人地址">
                <el-input v-model="productFormData.address"></el-input>
            </el-form-item>

            <el-form-item prop="images" label="产品主图">
                <multi-upload v-model="productFormData.images"></multi-upload>
            </el-form-item>
            <el-form-item prop="details" label="图文详情">
                <rich-text v-model="productFormData.details"></rich-text>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSave('productForm')" :loading="saving" type="primary" class="save">保存</el-button>
                <el-button @click="onDelete" :loading="saving" type="danger" v-if="productFormData.id">删除 </el-button>
                <el-button @click="$router.go(-1)" class="back">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: 'releaseSupply',
    created() {
        this.getDataType({ query: { keyType: 'yyly' } }, this.applicationFieldOptions);
        // this.getDataType({ query: { keyType: 'xjcd' } }, this.advancedTypeOptions);
        this.getDataType({ query: { keyType: 'sblx' } }, this.sblxDataTypeOptions);
        this.getDataType({ query: { keyType: 'jslx' } }, this.jslxDataTypeOptions);
    },
    data() {
        return {
            supplyType: [
                { id: 'TECH_SUPPLY', name: '先进技术' },
                { id: 'PRODUCT_SUPPLY', name: '先进产品' },
                { id: 'RES_SUPPLY', name: '共享资源' }
            ],
            supplyId: '',
            saving: false,
            productFormData: {},
            productRules: {
                type: [{ required: true, message: '请选择供应类别', trigger: 'change' }],
                name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                description: [{ required: true, message: '请输入简介', trigger: 'blur' }],
                dataType: [
                    {
                        validator: (rule, value, callback) => {
                            if (!this.dataTypeId) {
                                callback(new Error('请选择设备类型'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                techType: [
                    {
                        validator: (rule, value, callback) => {
                            if (!this.techTypeId) {
                                callback(new Error('请选择技术类型'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                applicationField: [
                    {
                        validator: (rule, value, callback) => {
                            if (!this.applicationFieldId) {
                                callback(new Error('请选择应用领域'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                expireTime: [{ required: true, message: '请选择有效时间', trigger: 'blur' }],
                contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入联系方式', trigger: 'blur' }]
            },
            applicationFieldOptions: [],
            // advancedTypeOptions: [],
            sblxDataTypeOptions: [],
            jslxDataTypeOptions: [],
            dataTypeId: '',
            applicationFieldId: '',
            techTypeId: ''
        };
    },
    methods: {
        getDataType(data, list) {
            this.$http
                .get('/dataType/all', data)
                .then(res => {
                    if (res.content.length > 0) {
                        res.content.forEach(item => {
                            list.push({
                                label: item.name,
                                value: item.id
                            });
                        });
                    }
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        },
        onSave(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    this.$message.error('表单有误，请检查后重提交');
                    return false;
                }
            });
        },
        submit() {
            let data;
            // this.supplyId;
            let url = '/resourceSupplyAndDemand/save';
            // if (this.supplyId === 'TECH_SUPPLY') {
            //     // url = '/artProduct/save';
            //     delete this.productFormData.dataType;
            //     data = { ...this.productFormData };
            // } else if (this.supplyId === 'PRODUCT_SUPPLY') {
            //     // url = '/product/save';
            //     data = { ...this.productFormData };
            // } else if (this.supplyId === 'RES_SUPPLY') {
            //     // url = '/tresource/save';
            //     data = { ...this.productFormData };
            // }
            // let dataList = [];
            // if (data.picList) {
            //     data.picList.forEach(pic => {
            //         if (pic.id) {
            //             dataList.push({ url: pic.url, id: pic.id, productPic: pic.productPic });
            //         } else {
            //             dataList.push({ url: pic });
            //         }
            //     });
            //     data.picList = dataList;
            // }

            let propertyList = [];
            if (this.dataTypeId) {
                let arr = [...this.sblxDataTypeOptions].find(item => item.value == this.dataTypeId);
                this.dataTypeId = arr.label;
                propertyList.push({
                    name: '设备类型',
                    value: this.dataTypeId
                });
            }

            if (this.applicationFieldId) {
                let arr = [...this.applicationFieldOptions].find(item => item.value == this.applicationFieldId);
                this.applicationFieldId = arr.label;
                propertyList.push({
                    name: '应用领域',
                    value: this.applicationFieldId
                });
            }
            if (this.techTypeId) {
                let arr = [...this.jslxDataTypeOptions].find(item => item.value == this.techTypeId);
                this.techTypeId = arr.label;
                propertyList.push({
                    name: '技术类型',
                    value: this.techTypeId
                });
            }

            data = {
                propertyList: [...propertyList],
                resSnD: { ...this.productFormData }
            };

            this.saving = true;
            this.$http
                .post(url, data, { body: 'json' })
                .then(res => {
                    this.saving = false;
                    this.$message.success('成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    console.log(e);
                    this.saving = false;
                    this.$message.error(e.error);
                    if (e.error == '请先完成企业认证') {
                        setTimeout(() => {
                            this.$router.push('/editInfo');
                        }, 500);
                    }
                });
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
                .then(() => {
                    return this.$http.post(`/product/del/${this.productFormData.id}`);
                })
                .then(() => {
                    this.$message.success('删除成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    if (e !== 'cancel') {
                        console.log(e);
                        this.$message.error(e.error);
                    }
                });
        }
    }
};
</script>
<style lang="less" scoped>
.content_title {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-bottom: 20px;
    border-bottom: #f2f3f5 1px solid;
    > span {
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        font-weight: 700;
    }
}
.el-form {
    margin-top: 30px;
    .save {
        width: 110px;
        height: 36px;
        background: #bf1616;
        border-radius: 4px;
    }
    .back {
        width: 110px;
        height: 36px;
        background: #c4c7cc;
        border-radius: 4px;
        color: #fff;
    }
}
</style>
