<template>
  <div>
    <el-row>
      <el-form-item label="控件栅格">
        <el-slider v-model="activeData.__config__.span" :max="24" :min="6" show-stops :step="2" show-tooltip />
      </el-form-item>
      <el-form-item label="展示文本">
        <el-input :value="activeData.__slot__.default" @input="onDefaultValueInput" placeholder="显示在分割线上的文字" />
      </el-form-item>
      <el-form-item label="模式">
        <el-radio-group v-model="activeData.__config__.type" size="mini">
          <el-radio-button label="0">系统</el-radio-button>
          <el-radio-button label="1">自定义</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <div v-show="activeData.__config__.type == '0'">
        <el-form-item label="模板列表">
          <el-button type="primary" size="mini" plain @click="show = true">选择模板</el-button>
          <div>
            <svg-divider :svgStyle="{ ...svgStyle, ...{ svgModel: activeModel } }"></svg-divider>
          </div>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker v-model="activeData.__config__.bgColor" show-alpha @change="onBgColorChange"></el-color-picker>
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker v-model="activeData.__config__.fontStyle.color" show-alpha @change="onColorChange($event, 'color')"></el-color-picker>
        </el-form-item>
        <el-form-item label="文字大小">
          <el-input-number v-model="activeData.__config__.fontStyle.size" :min="10" :max="40" @change="onColorChange($event, 'size')"></el-input-number>
        </el-form-item>
      </div>
      <div v-show="activeData.__config__.type == '1'">
        <el-form-item label="上传文件(请上传1440*60的svg文件)">
          <el-upload :action="define.comUploadUrl" :headers="uploadHeaders" :on-success="handleSuccess" :show-file-list="false" accept="SVG/*" list-type="picture-card" :limit="1" class="upload-btn">
            <div v-if="activeData.__config__.svgUrl != ''">
              <img style="width: 148px" :src="define.comUrl + '/' + activeData.__config__.svgUrl" alt="" />
            </div>
          </el-upload>
        </el-form-item>
      </div>
    </el-row>
    <el-dialog title="分割线模板" :visible.sync="show" width="70%" append-to-body modal-append-to-body>
      <div class="svgBody" v-if="show">
        <div class="svg-list" :class="item.value == activeModel ? 'active' : ''" v-for="(item, index) in svgList" :key="index" @click="checkSvgModel(item.value)">
          <svg-divider :svgStyle="{ ...svgStyle, ...{ svgModel: item.value } }"></svg-divider>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import comMixin from './mixin'
import { getToken } from '@/utils/auth'
import svgDivider from '@/components/Generator/components/NewDivider/divider.vue'
export default {
  props: ['activeData'],
  mixins: [comMixin],
  components: {
    svgDivider
  },
  data() {
    return {
      activeModel: '1',
      uploadHeaders: { 'Blade-Auth': 'bearer ' + getToken() },
      show: false,
      svgList: [
        {
          value: '1',
          label: '模板1'
        },
        {
          value: '2',
          label: '模板2'
        },
        {
          value: '3',
          label: '模板3'
        },
        {
          value: '4',
          label: '模板4'
        },
        {
          value: '5',
          label: '模板5'
        },
        {
          value: '6',
          label: '模板6'
        },
        {
          value: '7',
          label: '模板7'
        }
      ]
    }
  },
  computed: {
    svgStyle() {
      return {
        bgColor: this.activeData.__config__.bgColor,
        text: this.activeData.__slot__.default,
        color: this.activeData.__config__.fontStyle.color,
        size: this.activeData.__config__.fontStyle.size
      }
    }
  },
  created(){
    if(this.activeData.__config__.svgModel != ''){
      this.activeModel = this.activeData.__config__.svgModel
    }else{
      this.activeModel = '1'
    }
  },
  methods: {
    handleSuccess(res) {
      if (res.code == 200) {
        this.$set(this.activeData.__config__, 'svgUrl', res.data.filePath)
      } else {
        this.$message({ message: res.msg, type: 'error', duration: 5000 })
      }
    },
    handleRemove() {
      this.$set(this.activeData.__config__, 'svgUrl', '')
    },
    // 按钮
    onDefaultValueInput(str) {
      this.$set(this.activeData.__slot__, 'default', str)
    },
    onBgColorChange(val) {
      this.$set(this.activeData.__config__, 'bgColor', val)
    },
    onColorChange(val, type) {
      this.$set(this.activeData.__config__.fontStyle, type, val)
    },
    onPositionChange(val, type) {
      this.$set(this.activeData.__config__.positionStyle, type, val)
    },

    checkSvgModel(val) {
      this.activeModel = val
      this.$set(this.activeData.__config__, 'svgModel', val)
      this.show = false
    }
  }
}
</script>
<style lang="scss">
.svgBody {
  padding: 0 20px;
  .svg-list {
    margin-top: 20px;
    border: 1px solid #ebeef5;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    &:hover {
      border: 1px solid #409eff;
    }
  }
  .active {
    border: 1px solid #409eff;
  }
}
</style>
