import { attributeElm, labelStyleElm1, labelStyleElm2 } from '../../Element/elm_html'

function html(that) {
    return `
    <span class="custom-divider"></span>
    <div class="div-item">
        <div class="row" style="align-items: flex-start;">
            <div class="col">
                <span class="label">名称</span>
                <input class="input" maxlength="40" type="text" @model="name">
            </div>
            <div class="col" style="flex: 0 0 54%;">
                <div>
                    <div class="row">
                        <div class="col input-select-unit-box">
                            <span class="label">原始长度:</span>
                            <input class="input input-text" readonly="readonly" type="text" style="flex: 0 0 130px;" @model="length">
                            <div class="input-select-unit"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col input-select-fit-unit-box">
                            <span class="label">拟合长度:</span>
                            <input class="input input-text" readonly="readonly" type="text" style="flex: 0 0 130px;" @model="fitLength">
                            <div class="input-select-fit-unit"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="div-item">
        <div class="row">
            <DIV-cy-tabs id="polyline-object-edit-tabs">
                <DIV-cy-tab-pane label="属性信息">
                    ${attributeElm(that)}
                </DIV-cy-tab-pane>
                <DIV-cy-tab-pane label="空间信息">
                    <div class="row">
                        <div class="col height-mode-box">
                            <span class="label" style="flex: 0 0 56px;">高度模式</span>
                            <div class="height-mode"></div>
                        </div>
                        <div class="col">
                            <span class="label">Z值统一增加</span>
                            <div class="input-number input-number-unit-1 height-box">
                                <input class="input height" type="number" title="" min="-9999999" max="999999999">
                                <span class="unit">m</span>
                                <span class="arrow"></span>
                            </div>
                            <button class="confirm height-confirm" style="margin-left: 5px;">确认</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="table spatial-info-table">
                            <div class="table-head">
                                <div class="tr">
                                    <div class="th"></div>
                                    <div class="th">经度（X）</div>
                                    <div class="th">纬度（Y）</div>
                                    <div class="th">高度（Z）</div>
                                </div>
                            </div>
                            <div class="table-body">
                            </div>
                        </div>
                    </div>
                </DIV-cy-tab-pane>
                <DIV-cy-tab-pane label="线条风格">
                    <div class="row">
                        <div class="col">
                            <span class="label">线条颜色</span>
                            <div class="color"></div>
                        </div>
                        <div class="col">
                            <span class="label">线条宽度</span>
                            <div class="input-number input-number-unit-1" style="width: 80px;">
                                <input class="input" type="number" title="" min="1" max="999" @model="lineWidth">
                                <span class="unit">px</span>
                                <span class="arrow"></span>
                            </div>
                        </div>
                        <div class="col input-select-line-type-box">
                            <span class="label">线条形式</span>
                            <div class="input-select-line-type"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <span class="label">线段缓冲</span>
                            <input class="btn-switch" type="checkbox" @model="extend">
                        </div>
                        <div class="col">
                            <span class="label">缓冲宽度</span>
                            <div class="input-number input-number-unit-1" style="width: 80px;">
                                <input class="input" type="number" title="" min="0" data-min="0.01" max="999999" @model="extendWidth">
                                <span class="unit">m</span>
                                <span class="arrow"></span>
                            </div>
                        </div>
                        <div class="col">
                            <span class="label">缓冲颜色</span>
                            <div class="extendColor"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <span class="label">首尾相连</span>
                            <input class="btn-switch" type="checkbox" @model="noseToTail">
                        </div>
                        <div class="col">
                        </div>
                        <div class="col">
                        </div>
                    </div>
                </DIV-cy-tab-pane>
                <DIV-cy-tab-pane label="标注风格">
                    ${labelStyleElm1()}
                </DIV-cy-tab-pane>
                <DIV-cy-tab-pane label="标签风格">
                    ${labelStyleElm2()}
                </DIV-cy-tab-pane>
    <!--            <DIV-cy-tab-pane label="灯光控制">-->
    <!--                <div>-->
    <!--                    <div class="row">-->
    <!--                        <div class="col">-->
    <!--                            <span class="label">指令</span>-->
    <!--                            <input class="input" type="text" @model="instruct">-->
    <!--                            <button class="primary" @click="instructSubmit">提交</button>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </DIV-cy-tab-pane>-->
    <!--            <DIV-cy-tab-pane label="设置操作点">-->
    <!--                <div>-->
    <!--                    <div class="row">-->
    <!--                        <div class="col">-->
    <!--                            <span class="label">设置操作点</span>-->
    <!--                            <input class="input" type="text" @model="operatingPoint">-->
    <!--                            <button class="primary" @click="operatingPointSubmit">提交</button>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </DIV-cy-tab-pane>-->
            </DIV-cy-tabs>
        </div>
    </div>
    <span class="custom-divider"></span>
    `
}

export { html }