<template>
    <div class='add-form'>
        <div class='form1'>
            <span class='span1'>图例编码</span>
            <span class='span2'>图例名称</span>
            <span class='span3' v-if='ruleForm.Type==1 || ruleForm.Type==3'>展示预览</span>
        </div>
        <div class='form2'>
            <div class='input-left'>
                <el-input v-model='ruleForm.Code' disabled style='width:200px;height:32px;margin-right:48px;'></el-input>
                <el-input v-model='ruleForm.Name' style='width:200px;height:32px;'></el-input>
                <div class='title'>单位</div>
                <div class='type'>图例类型</div>
                <el-input v-model='ruleForm.unit' style='width:200px;height:32px;'></el-input>
                <el-select v-model='ruleForm.Type' placeholder='请选择' style='width:200px;height:32px;margin-left:46px'>
                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
                </el-select>
            </div>
            <div class='input-right' v-if='ruleForm.Type==1 || ruleForm.Type==3'>
                <div
                    class='model'
                    :style='`background:${ruleForm.color};border-width:${ruleForm.borderLine}px;border-style:${ruleForm.borderColor}; border-color:${ruleForm.borderColor};`'
                ></div>
            </div>
        </div>
        <div v-if='ruleForm.Type==1 || ruleForm.Type==4' class='form3'>
            <div class='form3-top'>
                <span class='form3-span1' v-if='ruleForm.Type==1'>填充色以及透明度</span>
                <span class='form3-span3'>边框颜色</span>
                <span class='form3-span4'>边框线型</span>
                <span class='form3-span5'>边框粗细</span>
            </div>
            <div class='form3-bottom'>
                <el-color-picker v-if='ruleForm.Type==1' v-model='ruleForm.color' show-alpha style='margin:0 172px 0 10px'></el-color-picker>
                <el-color-picker v-model='ruleForm.borderColor' show-alpha style='margin:0 90px 0 10px'></el-color-picker>

                <el-select
                    v-model='ruleForm.borderLine'
                    placeholder='请选择'
                    size='small'
                    style='width:160px;margin-right:24px'
                    ref='select1'
                    @change='changeSelection1'
                >
                    <el-option v-for='item in borderLineOption' :key='item.id' :label='item.src' :value='item.id'>
                        <img :src='item.src' alt />
                    </el-option>
                </el-select>
                <el-select v-model='ruleForm.linepx' placeholder='请选择' size='small' style='width:160px;' ref='select' @change='changeSelection'>
                    <el-option v-for='item in linepxOption' :key='item.id' :label='item.src' :value='item.id'>
                        <img :src='item.src' alt />
                    </el-option>
                </el-select>
            </div>
        </div>
        <div v-if='ruleForm.Type==3' class='form5'>
            <div class='form5-top'>上传新图标</div>
            <div>
                <el-upload class='upload-demo' action='https://jsonplaceholder.typicode.com/posts/' :http-request='getFile' :file-list='fileList'>
                    <el-button size='small' style='color:#1F2329;'>点击上传</el-button>
                </el-upload>
            </div>
        </div>
        <div v-if='ruleForm.Type!=2' class='form4'>
            <div class='form4-top'>
                <span class='form4-span1'>对应工程信息化中的位置/设备分类</span>
                <span class='form4-span2'>工程信息化的专业</span>
                <span class='form4-span3'>铺位可视化typeid</span>
            </div>
            <div class='form3-bottom'>
                <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px;'>
                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
                </el-select>
                <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;margin-right:48px'>
                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
                </el-select>
                <el-select v-model='value' placeholder='请选择' size='small' style='width:200px;'>
                    <el-option v-for='item in options' :key='item.value' :label='item.label' :value='item.value'></el-option>
                </el-select>
            </div>
        </div>
    </div>
</template>

<script>
import { createLegend, updateLegend, uploadImg } from '@/api/legendLibrary.js'
export default {
    data() {
        return {
            // ruleForm: {
            //     color: 'rgba(19, 206, 102, 0.8)',
            //     borderColor: 'rgba(19, 206, 102, 0.8)',
            //     borderLine: '',
            //     linepx: '',
            //     Code: '',
            //     Name: '',
            //     Type: '2',
            //     unit: ''
            // },
            options: [
                {
                    value: '2',
                    label: '非图例'
                },
                {
                    value: '1',
                    label: '区域'
                },
                {
                    value: '3',
                    label: '图标'
                },
                {
                    value: 4,
                    label: '线条'
                }
            ],
            borderLineOption: [
                {
                    id: 'solid',
                    src: require('@/assets/imgs/1pxline.jpg')
                },
                {
                    id: 'dashed',
                    src: require('@/assets/imgs/dashedLine.jpg')
                },
                {
                    id: 'dotted',
                    src: require('@/assets/imgs/dotLine.jpg')
                }
            ],
            linepxOption: [
                {
                    id: '1',
                    src: require('@/assets/imgs/1pxline.jpg')
                },
                {
                    id: '2',
                    src: require('@/assets/imgs/2pxline.jpg')
                },
                {
                    id: '3',
                    src: require('@/assets/imgs/3pxline.jpg')
                }
            ],
            fileList: [],
            imgSrc: '', //图标的key,/serve/Picture/query/${imgSrc}
            value: ''
        }
    },
    props: ['ruleForm'],
    methods: {
        getFile(file) {
            console.log(file)
            var formData = new FormData()
            formData.append('file', file.file)
            let postParams = formData
            uploadImg({ postParams }).then(res => {
                if (res.Result == 'success') {
                    this.imgSrc = res.EntityList[0]
                    this.$message.success('图标上传成功！')
                }
            })
        },
        changeSelection() {
            console.log(this.ruleForm.linepx)
            let path = this.$refs.select.selectedLabel
            this.$refs.select.$el.children[0].children[0].setAttribute(
                'style',
                'background:url(' + path + ') center center no-repeat;color:transparent;'
            )
        },
        changeSelection1() {
            console.log(this.ruleForm.borderLine)
            let path = this.$refs.select1.selectedLabel
            this.$refs.select1.$el.children[0].children[0].setAttribute(
                'style',
                'background:url(' + path + ')  center center no-repeat;color:transparent;'
            )
        },
        create() {
            //新增
            let postParams = {
                Name: this.ruleForm.Name,
                Theme: '111',
                Type: '111',
                Id: '77'
            }
            createLegend({ postParams }).then(res => {
                if (res.Result == 'success') {
                    this.$message.success('添加图例成功！')
                }
            })
        },
        update() {
            //修改
            let postParams = this.ruleForm
            updateLegend({ postParams }).then(res => {
                if (res.Result == 'success') {
                    this.$message.success('图例修改成功！')
                }
            })
        }
    },
    mounted() {}
}
</script>

<style lang='less' scoped>
.add-form {
    color: #646c73;
    margin: 16px 0 0 72px;
    font-size: 14px;
    .form1 {
        margin-bottom: 8px;
        .span1 {
            margin-right: 192px;
        }
        .span2 {
            margin-right: 220px;
        }
    }
    .form2 {
        display: flex;
        .input-left {
            width: 500px;
            .title {
                margin-right: 100px;
                margin: 20px 0 8px 0;
                display: inline-block;
                width: 250px;
            }
            .type {
                margin-right: 100px;
                margin: 20px 0 8px 0;
                display: inline-block;
                width: 250px;
            }
        }
        .input-right {
            width: 200px;
            height: 114px;
            background: rgba(245, 246, 247, 1);
            display: inline-block;
            margin-left: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            .model {
                width: 56px;
                height: 6px;
            }
        }
    }
    .form3 {
        width: 720px;
        height: 86px;
        background: rgba(245, 246, 247, 1);
        border-radius: 4px;
        margin-top: 20px;
        .form3-top {
            padding: 12px 0 8px 12px;
            .form3-span1 {
                margin-right: 102px;
            }
            .form3-span2 {
                margin-right: 78px;
            }
            .form3-span3 {
                margin-right: 64px;
            }
            .form3-span4 {
                margin-right: 130px;
            }
        }
        .form3-bottom {
            display: flex;
        }
    }
    .form4 {
        .form4-top {
            padding: 20px 0 8px 0;
            .form4-span1 {
                margin-right: 32px;
            }
            .form4-span2 {
                margin-right: 102px;
            }
        }
    }
    .form5 {
        width: 720px;
        height: 86px;
        background: rgba(245, 246, 247, 1);
        border-radius: 4px;
        margin-top: 20px;
        padding-left: 12px;
        .form5-top {
            padding: 12px 0 8px 0;
        }
    }

    .span2::after,
    .type::after,
    .form3-span1::after,
    .form3-span3::after {
        content: '*';
        color: #f56c6c;
        margin-left: 4px;
    }
    .upload-demo {
        display: flex;
    }
}
</style>