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

function html(that) {
    return `
    <span class="custom-divider"></span>
    <div class="div-item">
        <div class="row">
            <div class="col">
                <span class="label">名称</span>
                <input class="input" maxlength="40" type="text" @model="name">
            </div>
            <div class="col">
                <span class="label">扫描颜色</span>
                <div class="color"></div>
            </div>
        </div>
    </div>
    <span class="custom-divider"></span>
    <div class="div-item">
        <div class="row">
            <div class="col">
                <span class="label">经度</span>
                <input class="input" type="number" title="" min="-180" max="180" @model="lng">
            </div>
            <div class="col">
                <span class="label">扫描半径</span>
                <div class="input-number input-number-unit-2 input-radius">
                    <input class="input" type="number" title="" data-min="0.1" max="999999">
                    <span class="unit">m</span>
                    <span class="arrow"></span>
                </div>
                <div class="input-radius-unit-box" style="flex: 0 0 60px;">
                    <div class="input-radius-unit"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <span class="label">纬度</span>
                <input class="input" type="number" title="" min="-90" max="90" @model="lat">
            </div>
            <div class="col">
                <span class="label">扫描速度</span>
                <input class="input" type="number" title="" min="0" max="100" @model="speed">
            </div>
        </div>
    </div>
    <div class="div-item">
        <div class="row">
            <DIV-cy-tabs id="radar-scan-edit-tabs">
                <DIV-cy-tab-pane label="属性信息">
                    ${attributeElm(that)}
                </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-tabs>
        </div>
    </div>
    <span class="custom-divider"></span>
    `
}

export { html }