<template>
    <div class="edit-view">
        <el-row>
            <div class="content_title">
                <span>发布需求信息</span>
            </div>
        </el-row>
        <!-- 发布融资需求 -->
        <!-- <el-form
            :model="financingFormData"
            :rules="financingRules"
            ref="financingForm"
            label-width="108px"
            label-position="right"
            size="small"
            style="max-width: 500px;"
            v-if="supplyId === 0"
            :key="0"
        >
            <el-form-item prop="supplyId" label="供应类别">
                <el-select v-model="financingFormData.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="financingFormData.name"></el-input>
            </el-form-item>
            <el-form-item prop="needInfo" label="简介">
                <el-input type="textarea" v-model="financingFormData.needInfo" :rows="5"></el-input>
            </el-form-item>
            <el-form-item prop="money" label="融资金额">
                <el-input v-model="planMoney"></el-input>
            </el-form-item>
            <el-form-item prop="dataType" label="融资阶段">
                <el-select v-model="financingFormData.stageType.id" clearable filterable placeholder="请选择">
                    <el-option
                        v-for="item in stageTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="dataType" label="行业类型">
                <el-select v-model="financingFormData.dataType.id" clearable filterable placeholder="请选择">
                    <el-option
                        v-for="item in rzhyDataTypeOptions"
                        :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="financingFormData.expireTime"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="contactName" label="联系人">
                <el-input v-model="financingFormData.contactName"></el-input>
            </el-form-item>
            <el-form-item prop="contactPhone" label="联系方式">
                <el-input v-model="financingFormData.contactPhone"></el-input>
            </el-form-item>

            <el-form-item prop="pic" label="需求主图">
                <single-upload v-model="financingFormData.pic"></single-upload>
            </el-form-item>
            <el-form-item prop="details" label="图文详情">
                <rich-text v-model="financingFormData.details"></rich-text>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSave('financingForm')" :loading="saving" type="primary" class="save"
                    >保存</el-button
                >
                <el-button @click="onDelete" :loading="saving" type="danger" v-if="financingFormData.id"
                    >删除
                </el-button>
                <el-button @click="$router.go(-1)" class="back">返回</el-button>
            </el-form-item>
        </el-form> -->

        <!-- 产品需求 -->
        <!-- <el-form
            :model="productFormData"
            :rules="productRules"
            ref="productForm"
            label-width="108px"
            label-position="right"
            size="small"
            style="max-width: 500px;"
            v-if="(supplyId === 1) | (supplyId === 2)"
            :key="2"
        >
            <el-form-item prop="supplyId" 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="supplyId === 2">
                <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="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="产品主图">
                <single-upload v-model="productFormData.images"></single-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> -->
        <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 == 'PRODUCT_DEMAND'">
                <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_DEMAND'">
                <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="应用领域" v-if="productFormData.type != 'FINANCING_DEMAND'">
                <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="money" label="融资金额" v-if="productFormData.type == 'FINANCING_DEMAND'">
                <el-input v-model="planMoney"></el-input>
            </el-form-item>
            <el-form-item prop="stageType" label="融资阶段" v-if="productFormData.type == 'FINANCING_DEMAND'">
                <el-select v-model="stageTypeId" clearable filterable placeholder="请选择">
                    <el-option
                        v-for="item in stageTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="industryType" label="行业类型" v-if="productFormData.type == 'FINANCING_DEMAND'">
                <el-select v-model="industryTypeId" clearable filterable placeholder="请选择">
                    <el-option
                        v-for="item in rzhyDataTypeOptions"
                        :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: 'releaseRequirement',
    created() {
        this.getDataType({ query: { keyType: 'rzhy' } }, this.rzhyDataTypeOptions);
        this.getDataType({ query: { keyType: 'rzjd' } }, this.stageTypeOptions);
        this.getDataType({ query: { keyType: 'yyly' } }, this.applicationFieldOptions);
        // this.getDataType({ query: { keyType: 'xjcd' } }, this.advancedTypeOptions);
        this.getDataType({ query: { keyType: 'jslx' } }, this.jslxDataTypeOptions);
        console.log(this.jslxDataTypeOptions);
        this.getDataType({ query: { keyType: 'sblx' } }, this.sblxDataTypeOptions);
    },
    data() {
        return {
            supplyType: [
                { id: 'FINANCING_DEMAND', name: '融资需求' },
                { id: 'TECH_DEMAND', name: '技术需求' },
                { id: 'PRODUCT_DEMAND', name: '产品需求' }
            ],
            supplyId: '',
            saving: false,
            planMoney: '',
            /* 融资需求form */
            // financingFormData: { stageType: { id: '' }, dataType: { id: '' } },
            // financingRules: {},
            stageTypeOptions: [],
            rzhyDataTypeOptions: [],
            /* 产品需求form */
            productFormData: {},
            productRules: {
                type: [{ required: true, message: '请选类型', trigger: 'change' }],
                name: [{ required: true, message: '请输入标题', trigger: 'blur' }],
                description: [{ required: true, message: '请输入简介', trigger: 'blur' }],
                contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
                phone: [{ 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'
                    }
                ],
                money: [
                    {
                        validator: (rule, value, callback) => {
                            if (!this.planMoney) {
                                callback(new Error('请输入融资金额'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                stageType: [
                    {
                        validator: (rule, value, callback) => {
                            if (!this.stageTypeId) {
                                callback(new Error('请选择融资阶段'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                industryType: [
                    {
                        validator: (rule, value, callback) => {
                            if (!this.industryTypeId) {
                                callback(new Error('请选择行业类型'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                expireTime: [{ required: true, message: '请选择有效时间', trigger: 'blur' }]
            },
            applicationFieldOptions: [],
            // advancedTypeOptions: [],
            jslxDataTypeOptions: [],
            sblxDataTypeOptions: [],
            dataTypeId: '',
            applicationFieldId: '',
            techTypeId: '',
            stageTypeId: '',
            industryTypeId: ''
        };
    },
    methods: {
        onSave(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    this.$message.error('表单有误，请检查后重提交');
                    return false;
                }
            });
        },
        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);
                });
        },
        submit() {
            let url = '/resourceSupplyAndDemand/save';
            let data;
            // if (this.supplyId === 0) {
            //     url = '/financingNeeds/save';
            //     data = { ...this.financingFormData };
            // } else if (this.supplyId === 1) {
            //     delete this.productFormData.dataType;
            //     data = { ...this.productFormData };
            //     url = '/artNeed/save';
            // } else if (this.supplyId === 2) {
            //     data = { ...this.productFormData };
            //     url = '/productNeed/save';
            // }
            let propertyList = [];
            // if (this.dataTypeId) {
            //     propertyList.push(
            //         [...this.sblxDataTypeOptions].find(item => {
            //             return item.value === this.dataTypeId;
            //         })
            //     );
            // }

            // if (this.applicationFieldId) {
            //     propertyList.push(
            //         [...this.applicationFieldOptions].find(item => {
            //             return item.value === this.applicationFieldId;
            //         })
            //     );
            // }
            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.techTypeId) {
                let arr = [...this.jslxDataTypeOptions].find(item => item.value == this.techTypeId);
                this.techTypeId = arr.label;
                propertyList.push({
                    name: '技术类型',
                    value: this.techTypeId
                });
            }
            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.planMoney) {
                propertyList.push({
                    name: '融资金额',
                    value: this.planMoney
                });
            }
            if (this.stageTypeId) {
                let arr = [...this.stageTypeOptions].find(item => item.value == this.stageTypeId);
                this.stageTypeId = arr.label;
                propertyList.push({
                    name: '融资阶段',
                    value: this.stageTypeId
                });
            }
            if (this.industryTypeId) {
                let arr = [...this.rzhyDataTypeOptions].find(item => item.value == this.industryTypeId);
                this.industryTypeId = arr.label;
                propertyList.push({
                    name: '融资类型',
                    value: this.industryTypeId
                });
            }

            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);
                });
        }
    }
};
</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>
