<template>
    <div class="edit-view">
        <page-title>
            <el-button @click="$router.go(-1)" :disabled="saving">取消</el-button>
            <el-button @click="onDelete" :disabled="saving" type="danger" v-if="formData.id">
                删除
            </el-button>
            <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
        </page-title>
        <div class="edit-view__content-wrapper">
            <div class="edit-view__content-section">
                <el-form
                    :model="formData"
                    :rules="rules"
                    ref="form"
                    label-width="225px"
                    label-position="right"
                    size="small"
                    style="max-width: 600px;"
                >
                    <el-form-item prop="settingId" label="企业性质">
                        <el-select
                            v-model="formData.settingId"
                            clearable
                            filterable
                            placeholder="请选择"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in businessNature"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="field" label="行业领域">
                        <el-select
                            v-model="formData.field"
                            clearable
                            filterable
                            placeholder="请选择"
                            style="width: 100%"
                        >
                            <el-option v-for="item in fieldOptions" :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="formData.name"></el-input>
                    </el-form-item>
                    <el-form-item prop="owner" label="所属地区">
                        <el-select v-model="formData.owner" placeholder="请选择">
                            <el-option
                                v-for="item in areaList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="img" label="附图">
                        <single-upload v-model="formData.img"></single-upload>
                    </el-form-item>
                    <el-form-item prop="manual" label="企业简介">
                        <rich-text v-model="formData.manual"></rich-text>
                    </el-form-item>
                    <el-form-item prop="network" label="入库入网">
                        <!-- <el-checkbox-group v-model="network">
                            <el-checkbox v-for="item in networks" :key="item.id" :label="item.id"
                                >{{ item.name }}
                            </el-checkbox>
                        </el-checkbox-group> -->
                        <el-select
                            v-model="formData.network"
                            clearable
                            filterable
                            placeholder="请选择"
                            style="width: 100%"
                            multiple
                        >
                            <el-option v-for="item in networks" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="confidentialityQualification" label="武器装备科研生产单位保密资格证">
                        <el-radio-group v-model="formData.confidentialityQualification">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                        <el-select
                            v-model="formData.confidentialityLevel"
                            clearable
                            filterable
                            placeholder="请选择"
                            style="width: 100%"
                            v-if="formData.confidentialityQualification"
                        >
                            <el-option
                                v-for="item in confidentialityLevels"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="certification" label="武器装备质量管理体系认证">
                        <el-radio-group v-model="formData.certification">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="unitQualification" label="武器装备承制单位资格证">
                        <el-radio-group v-model="formData.unitQualification">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                        <el-select
                            v-model="formData.unitLevel"
                            clearable
                            filterable
                            placeholder="请选择"
                            style="width: 100%"
                            v-if="formData.unitQualification"
                        >
                            <el-option
                                v-for="item in unitQualifications"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="productionLicence" label="武器装备科研生产许可证">
                        <el-radio-group v-model="formData.productionLicence">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                        <el-select
                            v-model="formData.productionLevel"
                            clearable
                            filterable
                            placeholder="请选择"
                            style="width: 100%"
                            v-if="formData.productionLicence"
                        >
                            <el-option
                                v-for="item in productionLicences"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="systemIntegration" label="涉密信息系统集成">
                        <el-radio-group v-model="formData.systemIntegration">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                        <el-select
                            v-model="formData.integrationLevel"
                            clearable
                            filterable
                            placeholder="请选择"
                            style="width: 100%"
                            v-if="formData.systemIntegration"
                        >
                            <el-option
                                v-for="item in systemIntegrations"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="highTech" label="高新技术企业">
                        <el-radio-group v-model="formData.highTech">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="numOfIps" label="知识产权数量">
                        <!-- <el-input v-model="formData.numOfIps"></el-input> -->
                        <el-card
                            shadow="never"
                            style="width:300px"
                            :body-style="{ padding: '20px' }"
                            v-if="disabledTypes.length > 0"
                        >
                            <div class="numItem" v-for="item in formData.numOfIps" :key="item.ip">
                                <span>{{ getLabelName(item.ip, companyTypes) }}</span>
                                <el-input-number
                                    v-model="item.num"
                                    size="mini"
                                    :min="1"
                                    :step="1"
                                    :controls="true"
                                    controls-position="both"
                                >
                                </el-input-number>

                                <el-popconfirm title="删除不可恢复确认要删除吗？" @confirm="confirmType(item.ip)">
                                    <el-button slot="reference" size="mini" type="danger" plain>删除</el-button>
                                </el-popconfirm>
                            </div>
                        </el-card>
                        <el-popover placement="top" trigger="click" v-model="showChecked">
                            <el-button slot="reference" type="primary" size="mini">添加</el-button>
                            <div class="numOfIps">
                                <h3>选择专利类型</h3>
                                <div>
                                    <el-checkbox-group v-model="checkedCompanyTypes">
                                        <el-checkbox
                                            :disabled="disabledTypes.includes(type.id)"
                                            v-for="type in companyTypes"
                                            :label="type.id"
                                            :key="type.id"
                                            >{{ type.name }}</el-checkbox
                                        >
                                    </el-checkbox-group>
                                </div>
                                <el-button
                                    type="primary"
                                    :disabled="checkedCompanyTypes.length === 0"
                                    @click="addNumOfIps"
                                    plain
                                    >确认</el-button
                                >
                            </div>
                        </el-popover>
                    </el-form-item>
                    <el-form-item prop="standardization" label="知识产权贯标">
                        <el-radio-group v-model="formData.standardization">
                            <el-radio :label="true">是</el-radio>
                            <el-radio :label="false">否</el-radio>
                        </el-radio-group>
                        <el-select
                            v-model="formData.standardizationLevel"
                            clearable
                            filterable
                            placeholder="请选择"
                            style="width: 100%"
                            v-if="formData.standardization"
                            multiple
                        >
                            <el-option
                                v-for="item in standardizations"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="qualificationLevel" label="企业技术资质">
                        <el-select
                            v-model="formData.qualificationLevel"
                            clearable
                            filterable
                            placeholder="请选择"
                            style="width: 100%"
                            multiple
                        >
                            <el-option
                                v-for="item in qualificationLevels"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="contact" label="联系人">
                        <el-input v-model="formData.contact"></el-input>
                    </el-form-item>
                    <el-form-item prop="phone" label="电话">
                        <el-input v-model="formData.phone"></el-input>
                    </el-form-item>
                    <el-form-item prop="email" label="邮箱">
                        <el-input v-model="formData.email"></el-input>
                    </el-form-item>
                    <el-form-item prop="url" label="官网地址">
                        <el-input v-model="formData.url"></el-input>
                    </el-form-item>
                    <el-form-item prop="updateAt" label="信息更新时间">
                        <el-date-picker
                            v-model="formData.updateAt"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
import areaList from '../../area';
export default {
    name: 'CompanyEdit',
    created() {
        if (this.$route.query.id) {
            this.$http
                .get('company/get/' + this.$route.query.id)
                .then(res => {
                    this.formData = res;
                    this.network = res.network;
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
        this.$http
            .post('/setting/allList')
            .then(res => {
                if (res.length > 0) {
                    this.settingOptions = res;
                    this.fieldOptions = this.findChildren('行业分类');
                    this.businessNature = this.findChildren('企业性质');
                    this.networks = this.findChildren('入网入库');
                    this.confidentialityLevels = this.findChildren('武器装备科研生产单位保密资格证');
                    this.unitQualifications = this.findChildren('武器装备承制单位资格证');
                    this.productionLicences = this.findChildren('武器装备科研生产许可证');
                    this.systemIntegrations = this.findChildren('涉密信息系统集成');
                    this.standardizations = this.findChildren('知识产权贯标');
                    this.qualificationLevels = this.findChildren('企业技术资质');
                    this.companyTypes = this.findChildren('知识产权类型');
                    // console.log(this.network);
                }
            })
            .catch(e => {
                console.log(e);
                this.$message.error(e.error);
            });
    },
    data() {
        return {
            saving: false,
            formData: {
                numOfIps: []
            },
            checkedCompanyTypes: [],
            showChecked: false,
            rules: {
                phone: [
                    {
                        pattern: /^1[3-9]\d{9}$/,
                        message: '请输入正确的手机号',
                        trigger: 'blur'
                    }
                ],
                email: [
                    {
                        type: 'email',
                        message: '请输入正确的邮箱地址',
                        trigger: 'blur'
                    }
                ],
                url: [
                    {
                        pattern: /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/,
                        message: '请输入正确的URL',
                        trigger: 'blur'
                    }
                ]
            },
            settingOptions: [],
            businessNature: [],
            fieldOptions: [],
            areaList,
            network: [],
            networks: [],
            confidentialityLevels: [],
            unitQualifications: [],
            productionLicences: [],
            systemIntegration: [],
            standardizations: [],
            qualificationLevels: [],
            companyTypes: [],
            systemIntegrations: []
        };
    },
    computed: {
        disabledTypes() {
            return [...this.formData.numOfIps]
                .filter(item => {
                    return !item.del;
                })
                .map(item => {
                    return item.ip;
                });
        }
    },
    methods: {
        onSave() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            let data = { ...this.formData };
            // data.owner = data.owner.join('/');
            this.saving = true;
            this.$http
                .post('/company/save', 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);
                });
        },
        onDelete() {
            this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' })
                .then(() => {
                    return this.$http.post(`/company/del/${this.formData.id}`);
                })
                .then(() => {
                    this.$message.success('删除成功');
                    this.$router.go(-1);
                })
                .catch(e => {
                    if (e !== 'cancel') {
                        console.log(e);
                        this.$message.error((e || {}).error || '删除失败');
                    }
                });
        },
        findChildren(name) {
            let data = this.settingOptions.find(item => {
                if (item.name == name) return item;
            });
            return data.children;
        },
        addNumOfIps() {
            let list = [...this.checkedCompanyTypes].map(item => {
                return {
                    ip: item,
                    num: 1
                };
            });
            console.log(list);
            let numOfIps = [...this.formData.numOfIps];
            this.formData.numOfIps = [...list, ...numOfIps];
            this.checkedCompanyTypes = [];
            this.showChecked = false;
            // this.formData.addNumOfIps.push([])
        },
        getLabelName(id, list = []) {
            let info = [...list].find(item => {
                return item.id === id;
            });
            return info ? info.name : '';
        },
        confirmType(id) {
            let list = [...this.formData.numOfIps];
            let info = list.find(item => {
                return item.ip === id;
            });
            let index = list.findIndex(item => {
                return item.ip === id;
            });
            if (info.id) {
                info.del = true;

                list.splice(index, 1, info);
            } else {
                list.splice(index, 1);
            }
            this.formData.numOfIps = list;
        }
    }
};
</script>
<style lang="less" scoped>
.numOfIps {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 220px;
    padding: 10px 20px;
    .el-button {
        align-self: flex-end;
        margin-top: 30px;
    }
}
.numItem + .numItem {
    margin-top: 5px;
}
.numItem {
    display: flex;
    align-items: center;

    .el-input-number {
        margin: 0 10px;
    }
}
</style>
