<template>
  <section class="componentConfig">
    <div class="layout-right__content--wrapper">
      <div class="layout-config__group">
        <h2>基础设置</h2>
        <div class="layout-config__item">
          <label>图表尺寸</label>
          <div class="layout-config__item--right">
            <el-input-number size="mini" :min="0" v-model="config.width" controls-position="right"/>
            <el-input-number size="mini" :min="0" v-model="config.height" controls-position="right"/>
          </div>
        </div>
        <div class="layout-config__item">
          <label>图表位置</label>
          <div class="layout-config__item--right">
            <el-input-number size="mini" :min="0" v-model="config.left" controls-position="right"/>
            <el-input-number size="mini" :min="0" v-model="config.top" controls-position="right"/>
          </div>
        </div>
        <config-item label="內边距">
          <el-input size="mini" v-model="config.padding" clearable placeholder="请输入符合css的padding合法值"/>
        </config-item>
      </div>
    </div>
    <div class="layout-right__content--wrapper">
      <div class="layout-config__group">
        <h2>组件设置</h2>
        <config-item label="标题">
          <el-input v-model="config.summaryTitle" size="mini" v-if="config.display === 'summary2'"/>
          <el-input v-else v-model="config.title" size="mini"/>
        </config-item>
        <config-item label="边框" v-if="config.type !== 'display'">
          <el-select size="mini" v-model="config.border" placeholder="请选择边框" clearable>
            <el-option
                v-for="(item, index) in borderList"
                :key="index"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </config-item>
        <template v-if="/AiDvMap/.test(config.type)">
          <config-item label="地图数据(geoJSON)">
            <el-input v-model="config.geoJson" size="mini" clearable placeholder="请输入geoJson的URL地址"/>
          </config-item>
        </template>
        <template v-if="/Chart/.test(config.type)">
          <config-item label="图表模板">
            <chart-picker v-model="config.config" @input="v=>config.echartOps=$echartTpls[v]"/>
          </config-item>
          <config-item label="图表配置项" top-label>
            <json-editor v-model="config.echartOps"/>
          </config-item>
        </template>
        <config-item label="视频地址" v-if="config.type === 'video'">
          <el-input v-model="config.src" size="mini"/>
        </config-item>
        <config-item label="图片URL" v-if="config.type=='img'">
          <el-input v-model="config.src" size="mini" clearable placeholder="请输入图片URL"/>
        </config-item>
        <config-item label="视频类型" v-if="config.type === 'monitor'">
          <ai-select size="mini" v-model="config.monitorType" :select-list="monitorTypes"/>
        </config-item>
        <config-item label="样式" v-if="config.type === 'AiRanking'">
          <el-select size="mini" v-model="config.subType" placeholder="请选择样式" clearable>
            <el-option label="样式1" value="Ranking1"></el-option>
            <el-option label="样式2" value="Ranking2"></el-option>
            <el-option label="样式3" value="Ranking3"></el-option>
          </el-select>
        </config-item>
        <template v-if="config.type === 'table' || config.type === 'AiDvTable'">
          <config-item label="显示排名">
            <el-select size="mini" v-model="config.isShowIndex" placeholder="请选择" clearable>
              <el-option
                  v-for="(item, index) in tableStatus"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </config-item>
          <config-item label="斑马纹" v-if="config.type === 'AiDvTable'">
            <el-select size="mini" v-model="config.stripe" placeholder="请选择" clearable>
              <el-option
                  label="是"
                  value="1">
              </el-option>
              <el-option
                  label="否"
                  value="0">
              </el-option>
            </el-select>
          </config-item>
          <config-item label="简易样式" v-if="config.type === 'AiDvTable'">
            <el-select size="mini" v-model="config.simple" placeholder="请选择" clearable>
              <el-option
                  label="是"
                  value="1">
              </el-option>
              <el-option
                  label="否"
                  value="0">
              </el-option>
            </el-select>
          </config-item>
          <config-item label="表格行数" v-if="config.type !== 'AiDvTable'">
            <el-input-number size="mini" style="width: 232px" :min="0" v-model="config.rowNum" controls-position="right"/>
          </config-item>
          <config-item v-if="config.type === 'AiDvTable'" v-for="(item, i) in config.config" :key="i" :label="`第${i+1}列`">
            <el-select size="mini" style="width: 80px;" v-model="item.align" placeholder="请选择" clearable>
              <el-option label="居中" value="center"></el-option>
              <el-option label="居左" value="left"></el-option>
              <el-option label="居右" value="right"></el-option>
            </el-select>
            <el-color-picker v-model="item.color" class="mar-h10" size="mini"/>
            <el-input-number v-model="item.width" label="描述文字" controls-position="right" size="mini"/>
          </config-item>
        </template>
        <template v-if="config.type === 'map'">
          <div class="layout-config__item">
            <label>遮罩层</label>
            <div class="layout-config__item--right">
              <el-select size="mini" v-model="config.mask" placeholder="请选择" clearable>
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </div>
          </div>
          <div class="layout-config__item">
            <label>地图图层</label>
            <div class="layout-config__item--right">
              <el-select size="mini" v-model="config.layers" placeholder="请选择" clearable>
                <el-option label="地图" value="vector"/>
                <el-option label="卫星" value="satellite"/>
              </el-select>
            </div>
          </div>
          <div class="layout-config__item">
            <label>选择地区</label>
            <div class="layout-config__item--right">
              <AiAreaGet :instance="instance" :valueLevel="3" v-model="config.areaId" placeholder="地图展示的中心"/>
            </div>
          </div>
          <div class="layout-config__item">
            <label>限制地区</label>
            <div class="layout-config__item--right">
              <ai-select v-model="config.limitArea" :selectList="dict.getDict('yesOrNo')"/>
            </div>
          </div>
          <div class="layout-config__item">
            <label>显示标签</label>
            <div class="layout-config__item--right">
              <ai-select v-model="config.alwaysShow" :selectList="dict.getDict('yesOrNo')"/>
            </div>
          </div>
          <div class="layout-config__item">
            <label>展示光轨</label>
            <div class="layout-config__item--right">
              <ai-select v-model="config.pulseLines" :selectList="dict.getDict('yesOrNo')"/>
            </div>
          </div>
          <div class="layout-config__item layout-config__item--input">
            <label>地图样式</label>
            <div class="layout-config__item--right">
              <el-input size="mini" v-model="config.mapStyle" clearable placeholder="请输入地图样式ID,从UI处获取.."/>
            </div>
          </div>
          <div class="layout-config__item layout-config__item--input">
            <label>3D地图</label>
            <div class="layout-config__item--right">
              <ai-select v-model="config.is3d" :selectList="dict.getDict('yesOrNo')"/>
            </div>
          </div>
          <div class="layout-config__item layout-config__item--input" v-if="config.is3d==1">
            <label>3D环绕</label>
            <div class="layout-config__item--right">
              <ai-select v-model="config.is3dAround" :selectList="dict.getDict('yesOrNo')"/>
            </div>
          </div>
          <div class="layout-config__item layout-config__item--input">
            <label>显示图例</label>
            <div class="layout-config__item--right">
              <ai-select v-model="config.showPingchangMapLegend" :selectList="dict.getDict('yesOrNo')"/>
            </div>
          </div>
        </template>
        <config-item label="数据汇总" v-if="config.type === 'summary'">
          <el-select size="mini" v-model="config.display" placeholder="请选择类型" clearable>
            <el-option
                v-for="(item, index) in summaryList"
                :key="index"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </config-item>
      </div>
    </div>
    <div class="layout-right__content--wrapper">
      <div class="layout-config__group">
        <h2>弹窗设置</h2>
        <config-item label="标题">
          <el-input size="mini" clearable placeholder="请输入弹窗标题" v-model="config.dialogTitle"/>
        </config-item>
        <config-item label="内容" v-if="!['table','AiDvTable'].includes(config.type)">
          <ai-dialog-btn dialog-title="弹窗内容" text="打开编辑器" :modal="false">
            <ai-editor clearable placeholder="请输入弹窗内容" v-model="config.dialogContent" :instance="instance"/>
          </ai-dialog-btn>
        </config-item>
      </div>
    </div>
  </section>
</template>

<script>
import ConfigItem from "./configItem.vue";
import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
import {monitorTypes} from "../config";
import AiDvSummary from "../../../../components/layout/AiDvSummary/AiDvSummary.vue";
import JsonEditor from "./jsonEditor.vue";
import Template from "../../../../project/sass/apps/AppAskForm/components/Template.vue";
import ChartPicker from "./chartPicker.vue";

export default {
  name: 'componentConfig',
  components: {ChartPicker, Template, JsonEditor, AiDvSummary, AiDialogBtn, ConfigItem},
  props: {
    config: {default: () => ({})},
    instance: Function,
    dict: Object,
  },
  data() {
    return {
      borderList: ['border0', 'border1', 'border2', 'border3', 'border4', 'border5', 'border6', 'border7', 'border8', 'border9', 'border10',
        'border11', 'border12', 'border13', 'border14', 'border15'],//边框待选项
      //是否显示排名
      tableStatus: [
        {label: '是', value: '1'},
        {label: '否', value: '0'}
      ],
      dialog: {},
      monitorTypes
    }
  },
  computed: {
    summaryList: () => Object.keys(AiDvSummary.components)
  }
}
</script>

<style lang="scss" scoped>
.componentConfig {
  .table-config {
    & > div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 232px;

      :deep( .el-select ) {
        width: 80px;
      }

      .el-select {
        width: 100%;

        .el-input {
          width: 100%;

          :deep( input ) {
            width: 80px
          }
        }
      }
    }
  }
}
</style>
