<template>
  <div>
    <el-form-item label="颜色">
      <el-input v-model="formData.color"></el-input>
    </el-form-item>
    <el-form-item label="风格">
      <el-radio-group v-model="formData.fontStyle">
        <el-radio label="normal">normal</el-radio>
        <el-radio label="italic">italic</el-radio>
        <el-radio label="oblique">oblique</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="粗细">
      <el-radio-group v-model="formData.fontWeight">
        <el-radio :label="100">100</el-radio>
        <el-radio :label="200">200</el-radio>
        <el-radio :label="300">300</el-radio>
        <el-radio :label="400">400</el-radio>
        <el-radio :label="500">500</el-radio>
        <el-radio :label="600">600</el-radio>
        <el-radio :label="700">700</el-radio>
        <el-radio :label="800">800</el-radio>
        <el-radio :label="900">900</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="字体系列">
      <el-input v-model="formData.fontFamily"></el-input>
    </el-form-item>
    <el-form-item label="大小">
      <el-input-number v-model="formData.fontSize" controls-position="right"
                       :min="1"></el-input-number>
    </el-form-item>
    <el-form-item label="水平对齐方式" v-if="(hasItem||[]).includes('align')">
      <el-radio-group v-model="formData.align">
        <el-radio label="left">left</el-radio>
        <el-radio label="center">center</el-radio>
        <el-radio label="right">right</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="垂直对齐方式" v-if="(hasItem||[]).includes('verticalAlign')">
      <el-radio-group v-model="formData.verticalAlign">
        <el-radio label="top">top</el-radio>
        <el-radio label="middle">middle</el-radio>
        <el-radio label="bottom">bottom</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="行高">
      <el-input-number v-model="formData.lineHeight" controls-position="right"
                       :min="1"></el-input-number>
    </el-form-item>
    <el-form-item label="文字块背景色" v-if="(hasItem||[]).includes('backgroundColor')">
      <el-input v-model="formData.backgroundColor"></el-input>
    </el-form-item>
    <el-form-item label="文字块边框颜色" v-if="(hasItem||[]).includes('borderColor')">
      <el-input v-model="formData.borderColor"></el-input>
    </el-form-item>
    <el-form-item label="文字块边框宽度" v-if="(hasItem||[]).includes('borderWidth')">
      <el-input-number v-model="formData.borderWidth" controls-position="right"
                       :min="1"></el-input-number>
    </el-form-item>
    <el-form-item label="文字块边框描边类型" v-if="(hasItem||[]).includes('borderType')">
      <el-radio-group v-model="formData.borderType">
        <el-radio label="solid">solid</el-radio>
        <el-radio label="dashed">dashed</el-radio>
        <el-radio label="dotted">dotted</el-radio>
        <el-radio label="other">other</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="虚线的偏移量" v-if="borderTypeRadio === 'other' && ((hasItem||[]).includes('borderDashOffset'))">
      <el-input-number v-model="formData.borderDashOffset" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="文字块的圆角" v-if="(hasItem||[]).includes('borderRadius')">
      <el-input v-model="formData.borderRadius"></el-input>
    </el-form-item>
    <el-form-item label="文字块的内边距" v-if="(hasItem||[]).includes('padding')">
      <el-input v-model="formData.padding"></el-input>
    </el-form-item>
    <el-form-item label="文字块的背景阴影颜色" v-if="(hasItem||[]).includes('shadowColor')">
      <el-input v-model="formData.shadowColor"></el-input>
    </el-form-item>
    <el-form-item label="文字块的背景阴影长度" v-if="(hasItem||[]).includes('shadowBlur')">
      <el-input-number v-model="formData.shadowBlur" controls-position="right"
                       :min="1"></el-input-number>
    </el-form-item>
    <el-form-item label="文字块的背景阴影X 偏移" v-if="(hasItem||[]).includes('shadowOffsetX')">
      <el-input-number v-model="formData.shadowOffsetX" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="文字块的背景阴影X 偏移" v-if="(hasItem||[]).includes('shadowOffsetY')">
      <el-input-number v-model="formData.shadowOffsetY" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="宽度">
      <el-input-number v-model="formData.width" controls-position="right"
                       :min="1"></el-input-number>
    </el-form-item>
    <el-form-item label="高度">
      <el-input-number v-model="formData.height" controls-position="right"
                       :min="1"></el-input-number>
    </el-form-item>
    <el-form-item label="文字描边颜色">
      <el-input v-model="formData.textBorderColor"></el-input>
    </el-form-item>
    <el-form-item label="文字描边宽度">
      <el-input-number v-model="formData.textBorderWidth " controls-position="right"
                       :min="1"></el-input-number>
    </el-form-item>
    <el-form-item label="文字描边类型">
      <el-radio-group v-model="formData.textBorderType">
        <el-radio label="solid">solid</el-radio>
        <el-radio label="dashed">dashed</el-radio>
        <el-radio label="dotted">dotted</el-radio>
        <el-radio label="other">other</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="虚线的偏移量" v-if="textBorderTypeRadio === 'other'">
      <el-input-number v-model="formData.textBorderDashOffset " controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="文字的阴影颜色">
      <el-input v-model="formData.textShadowColor"></el-input>
    </el-form-item>
    <el-form-item label="文字的阴影长度">
      <el-input-number v-model="formData.textShadowBlur" controls-position="right"
                       :min="1"></el-input-number>
    </el-form-item>
    <el-form-item label="文字阴影X偏移">
      <el-input-number v-model="formData.textShadowOffsetX" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="文字阴影Y偏移">
      <el-input-number v-model="formData.textShadowOffsetY" controls-position="right"
      ></el-input-number>
    </el-form-item>
    <el-form-item label="文字超出宽度处理方式" v-if="formData.width && (hasItem||[]).includes('overflow')">
      <el-radio-group v-model="formData.overflow">
        <el-radio label="none">none</el-radio>
        <el-radio label="truncate">truncate</el-radio>
        <el-radio label="break">break</el-radio>
        <el-radio label="breakAll">breakAll</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="formData.width && formData.overflow === 'truncate' && (hasItem||[]).includes('ellipsis')"
                  label="超出时末尾的文本">
      <el-input v-model="formData.ellipsis"></el-input>
    </el-form-item>
    <el-form-item label="自定义文本样式" v-if="(hasItem||[]).includes('rich')">
      <div v-for="(i,k) in richs">
        <div style="margin: 0 8px 12px 100px;">
          <el-divider v-if="k>0" content-position="center"></el-divider>
        </div>
        <el-input v-model="i.id" style="width:100px"></el-input>
        <el-form label-width="200px">
          <TextStyleOption :formData="i"
                           :hasItem="['align','verticalAlign','backgroundColor','borderColor','borderWidth','borderType','borderDashOffset','borderRadius','padding','shadowColor','shadowBlur','shadowOffsetX','shadowOffsetY','overflow','ellipsis']"/>
        </el-form>
        <div class="subtract" @click="subtractChartOption(k)">
          <img :src="subtractIcon" alt="" style="width: 100%">
        </div>
        <div class="add" @click="addChartOption">
          <img :src="addIcon" alt="" style="width: 100%">
        </div>
      </div>
      <div class="add" @click="addChartOption" v-if="richs.length ===0">
        <img :src="addIcon" alt="" style="width: 100%">
      </div>
    </el-form-item>

    <div>
      <div style="margin: 0 8px 12px 100px;">
        <el-divider content-position="left">
        </el-divider>
      </div>
    </div>
  </div>
</template>
<script>
import {preConfig} from "@/components/Configure/options/preConfig";
import addIcon from "@/assets/add.png";
import subtractIcon from "@/assets/subtract.png";

export default {
  name: 'TextStyleOption',
  props: ['formData', 'hasItem'],
  data() {
    return {
      addIcon,
      subtractIcon,
      textBorderTypeRadio: '',
      textBorderTypeOther: '',
      borderTypeRadio: '',
      borderTypeOther: '',
      borderRadiusInput: null,
      paddingInput: '',
      richs: []
    }
  },
  mounted() {
  },
  methods: {
    subtractChartOption(index) {
      // if (this.richs?.length > 1) {
      this.$delete(this.richs, index)
      // }
    },
    addChartOption() {
      this.richs.push({})
    },
  }
}
</script>
<style scoped lang="less">
.add {
  display: inline-block;
  width: 1vw;
  height: 1vw;
  padding: 0.5vw;
  background-color: #409EFF;
  border-radius: 50%;
  margin: 0 1vw;
  cursor: pointer;
  line-height: 1vw;
}

.subtract {
  display: inline-block;
  width: 1vw;
  height: 1vw;
  padding: 0.5vw;
  background-color: #909399;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1vw;
}

/deep/ .el-form-item .el-form-item {
  margin-bottom: 22px;
}

</style>
