import { url } from 'video.js';
<!--公共广告头部组件-->
<template>
  <div class="micro-search-bar-box">
    <!--预览控制区-->
    <div class="design-preview-controller">
      <div class="search-con" v-if="formData.backType===1"
           :style="'background: linear-gradient(to right, '+this.formData.left_color+','+this.formData.right_color+');'">
        <div class="top"></div>
        <div class="logo-f">
          <div class="logoimg" :style="'backgroundImage: url('+resourcesUrl+formData.logo_src+');background-size: 100%; background-repeat: no-repeat;'"></div>
          <div class="title" v-if="formData.titleType===1" :style="'color: '+ formData.title_color +';'">{{ formData.title_text }}</div>
          <div class="titleimg" v-else :style="'backgroundImage: url('+resourcesUrl+formData.title_src+');background-size: 100%; background-repeat: no-repeat;'"></div>
        </div>
      </div>
      <div class="search-con" v-else
           :style="'background-image:url('+resourcesUrl+formData.bg_src+')'">
        <div class="top"></div>
        <div class="logo-f">
          <div class="logoimg" :style="'backgroundImage: url('+resourcesUrl+formData.logo_src+');background-size: 100%; background-repeat: no-repeat;'"></div>
          <div class="title" v-if="formData.titleType===1" :style="'color: '+ formData.title_color +';'">{{ formData.title_text }}</div>
          <div class="titleimg" v-else :style="'backgroundImage: url('+resourcesUrl+formData.title_src+');background-size: 100%; background-repeat: no-repeat;'"></div>
        </div>
      </div>
    </div>
    <!--编辑工作区-->
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <div class="design-config-editor">
        <div class="design-editor-component-title">顶部logo栏</div>

        <el-form ref="formData" :model="formData" label-width="100px" label-position="left">
          <el-form-item label="背景形式">
            <el-radio-group v-model="formData.backType">
              <el-radio :label="1">颜色背景</el-radio>
              <el-radio :label="2">图片背景</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="渐变色(左)" v-if="formData.backType===1">
            <el-color-picker v-model="formData.left_color"></el-color-picker>
          </el-form-item>
          <el-form-item label="渐变色(右)" v-if="formData.backType===1">
            <el-color-picker v-model="formData.right_color"></el-color-picker>
          </el-form-item>
          <el-form-item label="背景图" v-if="formData.backType===2">
            <img-upload v-model="formData.bg_src"></img-upload>
            <div class="default-btn" @click="formData.bg_src=''">
              重置
            </div>
          </el-form-item>
          <el-form-item label="logo图">
            <img-upload v-model="formData.logo_src"></img-upload>
            <div class="default-btn" @click="formData.logo_src=''">
              重置
            </div>
          </el-form-item>
          <el-form-item label="标题形式">
            <el-radio-group v-model="formData.titleType">
              <el-radio :label="1">文字标题</el-radio>
              <el-radio :label="2">图片标题</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="标题内容" v-if="formData.titleType===1">
            <el-input v-model="formData.title_text"></el-input>
          </el-form-item>
          <el-form-item label="标题图片" v-if="formData.titleType===2">
            <img-upload v-model="formData.title_src"></img-upload>
            <div class="default-btn" @click="formData.title_src=''">
              重置
            </div>
          </el-form-item>
          <el-form-item label="标题颜色">
            <el-color-picker v-model="formData.title_color"></el-color-picker>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 弹窗, 新增图片 -->
    <elx-imgbox ref="elxImgbox" @refreshPic="refreshPic" :maxSize="10" :imgSizeLimit="false"></elx-imgbox>
  </div>
</template>
<script>
import './index.scss'
import ElxImgbox from '@/components/elx-imgbox'

/**
 * 创建新组件之后，在all-can-use-components中添加
 * 必须应用 microCreateMinis
 * 数据必须以formData包含
 * */
import {microCreateMinis} from '../../minis'
import ImgUpload from "@/components/img-upload/index.vue";

export default {
  name: 'micro-search-bar',
  mixins: [microCreateMinis],
  props: {},
  data () {
    return {
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      imgchouse: 1,
      elxImgboxVisible: false,
      formData: {
        title: '顶部logo栏',
        bg_src: '',
        logo_src: '',
        title_src: '',
        title_text: '',
        backType: 1,
        titleType: 1,
        left_color: '#FEEAFF',
        right_color: '#D8D6FA',
        title_color: '#000000'
      },
      // 各项设置
      positionType: [
        {label: 1, title: this.$i18n.t('shopFeature.searchBar.normal')},
        {label: 2, title: this.$i18n.t('shopFeature.searchBar.topThenLock')}
      ],
      boxRadio: [
        {label: 2, title: this.$i18n.t('shopFeature.searchBar.square')},
        {label: 50, title: this.$i18n.t('shopFeature.searchBar.fillet')}
      ],
      textAlgin: [
        {label: 'start', title: this.$i18n.t('shopFeature.searchBar.left')},
        {label: 'center', title: this.$i18n.t('shopFeature.searchBar.center')}
      ],
      commonCheckFieldRules: 'checkData' // 当前组件默认的规则判断函数
    }
  },
  watch: {},
  components: {
    ImgUpload,
    ElxImgbox
  },
  computed: {},
  mounted () {
  },
  methods: {
    /** 更换图片 */
    changeImg (index) {
      console.log(index)
      this.imgchouse = index
      this.isChangeImg = true
      this.currentEditIndex = index
      this.elxImgboxHandle(1)
      // this.canChooseImagesNum = 1
    },
    elxImgboxHandle (type) {
      // if (this.disabled) {
      //     return false
      // }
      this.elxImgboxVisible = true
      this.$nextTick(() => {
        this.$refs.elxImgbox.init(type || 2, 1)
      })
    },
    refreshPic (imagePath) {
      if (this.imgchouse == 1) {
        this.formData.bg_src = this.resourcesUrl + imagePath
      } else {
        this.formData.logo_src = this.resourcesUrl + imagePath
      }
      // console.log(this.formData.button_imgsrc)
    },
    /**
     * 开始验证
     */
    checkData () {
      this.myCheckResult(true)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
