<template>
    <div class="artNeed">
        <div class="breadcrumb">
            <span style="display:inline-block">当前位置：</span>
            <el-breadcrumb separator="/" style="display: inline-block;">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item><span style="color:#EA2D2D">需求</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-panel">
            <div class="title">新增技术需求</div>
            <el-form :model="formData" :rules="rules" label-width="120px" label-position="right" ref="form">
                <el-form-item label="需求名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入内容，30字以内" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="应用领域" prop="applicationField">
                    <el-select v-model="formData.applicationField" value-key="id">
                        <el-option
                            v-for="item in applicationFields"
                            :label="item.name"
                            :value="item"
                            :key="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="需求单位" prop="orgName">
                    <el-input
                        v-model="formData.orgName"
                        placeholder="请输入内容，单位名称必须与营业执照保持一致"
                    ></el-input>
                </el-form-item>
                <el-form-item label="单位地址" prop="address">
                    <el-select placeholder="省" style="width:120px;margin-right:10px" v-model="shen">
                        <el-option v-for="item in province" :label="item.name" :value="item.code" :key="item.code" />
                    </el-select>
                    <el-select placeholder="市" style="width:120px;margin-right:10px" v-model="shi">
                        <el-option v-for="item in cities" :label="item.name" :value="item.code" :key="item.code" />
                    </el-select>
                    <el-select placeholder="区" style="width:100px" v-model="qv">
                        <el-option v-for="item in areas" :label="item.name" :value="item.code" :key="item.code" />
                    </el-select>
                </el-form-item>
                <el-form-item label=" " prop="addressDetail">
                    <el-input v-model="formData.addressDetail" placeholder="详细地址" style="margin-top:10px"></el-input
                ></el-form-item>
                <el-form-item label="联系人" prop="contactName">
                    <el-input v-model="formData.contactName" placeholder="联系人" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="contactPhone">
                    <el-input v-model="formData.contactPhone" placeholder="联系电话" maxlength="30"></el-input>
                </el-form-item>
                <el-form-item label="公开联系方式">
                    <el-radio v-model="radio" label="1">是</el-radio>
                    <el-radio v-model="radio" label="2">否</el-radio>
                </el-form-item>
                <el-form-item label="有效期" prop="expireTime">
                    <el-date-picker
                        v-model="formData.expireTime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="请选择日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="上传照片" prop="pic">
                    <single-upload v-model="formData.pic">
                        请上传大于300kb小于2m的jpg/png/jpeg/bmp格式图片
                    </single-upload>
                </el-form-item>
                <el-form-item label="需求描述" prop="description">
                    <el-input
                        v-model="formData.description"
                        type="textarea"
                        maxlength="2000"
                        placeholder="请输入内容，不超过2000字"
                        :rows="10"
                        resize="none"
                    ></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input
                        v-model="formData.remark"
                        type="textarea"
                        maxlength="500"
                        placeholder="请输入内容，不超过500字"
                        :rows="10"
                        resize="none"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="medium" :loading="loading" @click="submit">提交信息</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import province from '../mixins/provinces.json';
import cities from '../mixins/cities.json';
import areas from '../mixins/areas.json';
export default {
    name: 'artNeed',
    data() {
        return {
            province: [],
            cities: [],
            areas: [],
            radio: '1',
            loading: false,
            shen: '',
            shi: '',
            qv: '',
            formData: {
                publicContact: true
            },
            applicationFields: [],
            rules: {
                name: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
                applicationField: [{ required: true, message: '请选择应用领域', trigger: 'blur' }],
                orgName: [{ required: true, message: '请输入需求单位', trigger: 'blur' }],
                contactName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
                contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
                expireTime: [{ required: true, message: '请输入有效期', trigger: 'blur' }],
                description: [{ required: true, message: '请输入需求描述', trigger: 'blur' }]
            }
        };
    },
    watch: {
        shen: {
            handler(newVal) {
                this.cities = [];
                this.areas = [];
                this.shi = '';
                this.qv = '';
                for (let citiesKey of cities) {
                    if (citiesKey.provinceCode == newVal) {
                        this.cities.push(citiesKey);
                    }
                }
            }
        },
        shi: {
            handler(newVal) {
                this.areas = [];
                this.qv = '';
                for (let areasKey of areas) {
                    if (areasKey.cityCode == newVal) {
                        this.areas.push(areasKey);
                    }
                }
            }
        }
    },
    created() {
        this.province = province;
        this.$http.get('/applicationField/all', { size: 10000 }).then(res => {
            this.applicationFields = res.content;
        });
    },
    methods: {
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) return;
                this.loading = true;
                this.$http
                    .post(
                        '/artNeed/save',
                        {
                            ...this.formData,
                            userId: this.userInfo.id
                        },
                        { body: 'json' }
                    )
                    .then(res => {
                        this.loading = false;
                        this.$message.success('提交成功');
                        this.$router.go(-1);
                    })
                    .catch(e => {
                        this.loading = false;
                        this.$message.error(e.error || '提交失败');
                    });
            });
        }
    }
};
</script>
<style lang="less" scoped></style>
