<template>
  <div class="bigdata-common-style">
    <div class="setting-title" style="border-top: none; margin-bottom: 10px">
      <div>通用设置 <span style="color: #C0C4CC">{{chart.name}}</span> </div>
    </div>
    <div class="line" style="margin-bottom: 10px">
      <div class="item">
        <div class="label">名称</div>
          <el-input
            v-model="chart.title"
            style="
              text-align: left;
              padding: 0 10px;
            "
          />
      </div>
    </div>
    <div class="line" style="margin-bottom: 10px">
      <div class="item">
        <div class="label">宽</div>
        <div class="input">
          <el-input type="number" v-model="site.w"/>
        </div>
      </div>
      <div class="item">
        <div class="label">高</div>
        <div class="input">
          <el-input type="number" v-model="site.h"/>
        </div>
      </div>
    </div>
    <template v-if="bigdataOption.type === 'quick'">
      <el-form size="mini" label-width="80px">
        <el-form-item label="隐藏标题">
          <el-switch v-model="site.isSimple"></el-switch>
        </el-form-item>
        <el-form-item label="标题大小">
          <el-input-number v-model="site.titleFontSize"></el-input-number>
        </el-form-item>
        <el-form-item label="标题颜色">
          <avue-input-color v-model="site.titleFontColor"></avue-input-color>
        </el-form-item>
        <el-form-item label="背景颜色">
          <avue-input-color v-model="site.bgColor"></avue-input-color>
        </el-form-item>
        <el-form-item label="文字粗细">
          <avue-select v-model="site.fontWeight" :dic="dicOption.fontWeight">
          </avue-select>
        </el-form-item>
      </el-form>
    </template>
    <template v-else>
      <div class="line" style="margin-bottom: 10px">
        <div class="item">
          <div class="label">X</div>
          <div class="input">
            <input type="number" v-model="site.x"/>
          </div>
        </div>
        <div class="item">
          <div class="label">Y</div>
          <div class="input">
            <input type="number" v-model="site.y"/>
          </div>
        </div>
      </div>
      <div class="line">
        <div class="item">
          <div class="label">层级</div>
          <div class="input">
            <input type="number" v-model="site.z"/>
          </div>
        </div>
        <div class="item">
          <div class="label">透明度</div>
          <div class="input">
            <input type="number" v-model="site.opacity"/>
          </div>
        </div>
      </div>
      <div class="line" style="margin-top: 10px">
        <div class="item">
          <div class="label">背景</div>
          <div class="input">
            <el-color-picker
              v-model="site.bgColor"
              show-alpha
              size="mini"
            ></el-color-picker>
          </div>
        </div>
        <div class="item">
          <div class="label">隐藏</div>
          <div class="input">
            <el-switch v-model="site.hiddened"></el-switch>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import {dicOption} from '@/option/config'
export default {
  props: ["site", "chart", 'bigdataOption'],
  data() {
    return {
      dicOption: dicOption,
    };
  },
  mounted() {
  },
  methods: {},
};
</script>
<style lang="scss">
.smartwidget .widget-header .widget-header__title{
  margin-left: 1% !important;
}
.bigdata-common-style {
  .line {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-left: 10px;
    box-sizing: border-box;
    padding-bottom: 10px;
    .el-input__inner{
      height: 25px;
    }
    .item {
      flex: 1;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-right: 10px;

      .label {
        text-align: center;
        width: 50px;
      }
      .input {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        input {
          box-sizing: border-box;
          width: 100%;
          margin: 0;
          text-align: center;
        }
      }
    }
  }
}
</style>
