<template>
  <div class="micro-title-text">
    <div class="design-preview-controller">
      <div class="title-text-content"
           :style="{textAlign:formData.align}">
        <div class="title-text-title"
             :style="{fontSize:formData.titleSize+'px',fontWeight:formData.titleWeight, 'width':!formData.isLink?'100%':formData.linkStyle==1?'80%':formData.linkStyle==2?'75%':'90%'}">
          {{ formData.title }}
        </div>
        <div class="show-more"
             v-if="formData.isLink">
          <span v-if="formData.linkStyle!==3">{{formData.linkText}} </span>
          <i class="el-icon-arrow-right"
             v-if="formData.linkStyle!==1"></i>
        </div>
        <div class="title-text-desc"
             :style="{fontSize:formData.descSize+'px',fontWeight:formData.descWeight}"
             v-if="formData.desc">
          {{ formData.desc }}
        </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">{{$t('shopFeature.titText.titText')}}</div>
        <div class="design-editor-component-container">
          <el-form ref="formData"
                   class="edit-form"
                   :model="formData"
                   size="small">
            <el-form-item :label="$i18n.t('shopFeature.titText.titContent')"
                          prop="title"
                          :rules="{
              required: true, message: $i18n.t('shopFeature.titText.pleaseFillTit'), trigger: 'blur'}">
              <el-input v-model="formData.title"
                        :placeholder="$i18n.t('shopFeature.titText.titContent')"></el-input>
            </el-form-item>
            <el-form-item :label="$i18n.t('shopFeature.titText.decsContent')">
              <el-input type="textarea"
                        v-model="formData.desc"
                        maxlength="50"
                        :rows="3"
                        :placeholder="$i18n.t('shopFeature.titText.decsContentPlaceholder')"></el-input>
            </el-form-item>
            <el-form-item :label="$i18n.t('shopFeature.titText.showPos')">
              <el-radio-group v-model="formData.align">
                <el-radio label="left">{{$t('shopFeature.titText.left')}}</el-radio>
                <el-radio label="center">{{$t('shopFeature.titText.center')}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$i18n.t('shopFeature.titText.titSize')">
              <el-radio-group v-model="formData.titleSize">
                <el-radio label="12">12px</el-radio>
                <el-radio label="14">14px</el-radio>
                <el-radio label="16">16px</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$i18n.t('shopFeature.titText.titWeight')">
              <el-radio-group v-model="formData.titleWeight">
                <el-radio label="500">{{$t('shopFeature.titText.normal')}}</el-radio>
                <el-radio label="600">{{$t('shopFeature.titText.bold')}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$i18n.t('shopFeature.titText.descWeight')">
              <el-radio-group v-model="formData.descWeight">
                <el-radio label="500">{{$t('shopFeature.titText.normal')}}</el-radio>
                <el-radio label="600">{{$t('shopFeature.titText.bold')}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$i18n.t('shopFeature.titText.linkText')">
              <div class="view-more-item">
                <el-checkbox v-model="formData.isLink" />
              </div>
            </el-form-item>
            <div v-if="formData.isLink"
                 class="btn-style">
              <div class="btn-styles-con">
                <el-radio v-for="(item,index) in 3"
                          :key="index"
                          v-model="formData.linkStyle"
                          :label="item">
                  {{$t('shopFeature.titText.style')}}{{ item }}
                </el-radio>
              </div>
              <div class="btn-type-input"
                   v-if="formData.linkStyle!==3">
                <div class="item-label">
                  {{$t('shopFeature.titText.textContent')}}
                </div>
                <el-form-item prop="linkText"
                              style="margin-bottom: 0;"
                              :rules="{
              required: true, message: $i18n.t('shopFeature.titText.pleaseFillTextContent'), trigger: 'blur'}">
                  <el-input v-model="formData.linkText"
                            :placeholder="$i18n.t('shopFeature.titText.more')"
                            maxlength="6"></el-input>
                </el-form-item>

              </div>
              <div class="btn-type-input">
                <div class="item-label">
                  {{$t('shopFeature.tabNav.routeLink')}}
                </div>
                <el-select v-model="formData.link.type" :placeholder="$i18n.t('shopFeature.tabNav.choose')" @change="handleLinkTypeChange" size="small">
                  <el-option
                    v-for="linkItem in linkList"
                    :key="linkItem.title"
                    :label="linkItem.title"
                    :value="linkItem.type">
                    <span style="float: left">{{ linkItem.title }}</span>
                  </el-option>
                </el-select>

                <!-- <el-dropdown trigger="click"
                            size="small"
                            @command="command">
                  <div class="cursor">
                    <span class="type-sign">{{ formData.link.type ? linkList[formData.link.type-1].title :  $t('shopFeature.tabNav.choose')}}
                      <i class="el-icon-close" v-if="formData.link.type" @click.stop="resetLink"></i>
                    </span>
                  </div>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(linkItem,linkIndex) in linkList"
                                    :key="linkIndex"
                                    :command="({linkItem,currentEditIndex:linkIndex})">
                      <span style="font-size: 12px;">{{ linkItem.title }}</span>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown> -->
              </div>
              <div class="btn-type-input"
                   style="margin-top: 10px;"
                   v-if="formData.link.type === 4 || formData.link.type === 1">
                <div class="item-label">
                  {{ formData.link.type === 4 ? '路径': '已选商品' }}
                </div>
                <div v-if="formData.link.type===1" class="goods-name" @click.stop="reChooseProd">{{ formData.link.title ||  $t('shopFeature.tabNav.choose') }} </div>
                <div v-if="formData.link.type===4" class="goods-name" @click.stop="showPathInputDialog=true">{{ formData.link.link }} </div>
              </div>
            </div>
          </el-form>
        </div>

      </div>
    </div>
    <!-- 商品选择弹窗  -->
    <prods-select v-if="dialogChooseGoods"
                  ref="ProdsSelect"
                  :isSingle="true"
                  @refreshSelectProds="chooseGoodsFun"></prods-select>
    <!-- 弹窗: 输入自定义路径 -->
    <el-dialog custom-class="up-dialog" :title="$i18n.t('shopFeature.tabNav.customPath')" width="40%" top="30vh" :visible.sync="showPathInputDialog">
      <div class="custom-path-con">
        <span>{{$t('shopFeature.tabNav.routeLink')}}</span>
        <el-input style="margin-rigth: 10px;" :placeholder="$i18n.t('shopFeature.tabNav.pleaseFillThePath')" size="small" v-model="customPath">

        </el-input>
      </div>
      <div slot="footer" style="text-align: right;">
        <el-button size="mini"
                    type="primary"
                    @click="customPathComfirm">{{$t('shopFeature.tabNav.confirm')}}</el-button>
        <el-button size="mini"
                    @click="customPathCancel">{{$t('shopFeature.tabNav.cancel')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {microCreateMinis} from '../../minis'
import ProdsSelect from '@/components/prods-select'

export default {
  name: 'micro-title-text',
  mixins: [microCreateMinis],
  props: {},
  data () {
    return {
      formData: {
        title: '',
        desc: '',
        align: 'left',
        titleSize: '14',
        descSize: '12',
        titleWeight: '600',
        descWeight: '500',
        // show_divider: 1,
        isLink: 0,
        linkStyle: 1,
        linkText: this.$i18n.t('shopFeature.titText.linkText'),
        link: {}
      },
      commandInfo: {},
      linkList: [
        {
          type: 1,
          title: this.$i18n.t('shopFeature.titText.prodDet'),
          link: ''
        },
        {
          type: 2,
          title: this.$i18n.t('shopFeature.tabNav.cart'),
          link: ''
        },
        {
          type: 3,
          title: this.$i18n.t('shopFeature.tabNav.personalCenter'),
          link: ''
        },
        {
          type: 4,
          title: this.$i18n.t('shopFeature.tabNav.customPath'),
          link: ''
        }
      ],
      commonCheckFieldRules: 'checkData', // 当前组件默认的规则判断函数
      dialogChooseGoods: false, // 商品选择弹窗显隐
      errorTitle: '',   // 错误提示信息
      currentItem: {},
      customPath: '', // 自定义路径
      showPathInputDialog: false // 自定义路径输入弹窗
    }
  },
  watch: {},
  components: {
    ProdsSelect
  },
  computed: {},
  mounted () {
  },
  methods: {
    handleLinkTypeChange (linkType) {
      const linkItem = this.linkList.find(el => el.type === linkType)
      this.$set(this.formData.link, linkItem)
      if (linkType === 1) {
        this.currentItem = linkItem
        this.dialogChooseGoods = true
        this.$nextTick(() => {
          this.$refs.ProdsSelect.init()
        })
        return
      }
      if (linkType === 4) {
        this.showPathInputDialog = true
      }
    },
    /** 选择跳转路径 */
    command (eve) {
      if (eve.linkItem.type === 1) {
        this.currentItem = eve.linkItem
        this.dialogChooseGoods = true
        this.$nextTick(() => {
          this.$refs.ProdsSelect.init()
        })
        return
      }
      if (eve.linkItem.type === 4) {
        this.showPathInputDialog = true
        return
      }
      this.formData.link = eve.linkItem
    },

    /**
     * 自定义路径弹窗确认
     */
    customPathComfirm () {
      if (!this.customPath.trim()) {
        this.$newMessage.error(this.$i18n.t('shopFeature.tabNav.pleaseFillThePath'))
        return
      }
      this.setLinkInfo({
        link: this.customPath,
        type: 4
      })
      this.showPathInputDialog = false
      this.customPath = ''
    },
    /**
     * 自定义路径弹窗取消
     */
    customPathCancel () {
      this.showPathInputDialog = false
    },
    // 选择商品回调
    chooseGoodsFun ($event) {
      this.formData.link = this.currentItem
      this.setLinkInfo({
        title: $event.prodName,
        link: $event.prodId,
        type: 1
      })
      this.dialogChooseGoods = false
    },
    /**
     * 重新选择商品
     */
    reChooseProd () {
      this.dialogChooseGoods = true
      this.$nextTick(() => {
        this.$refs.ProdsSelect.init()
      })
    },
    /** 设置跳转信息 */
    setLinkInfo (obj) {
      this.formData.link = obj
      if (!obj && this.customPath) this.formData.link.link = this.customPath
      this.$forceUpdate()
    },
    /**
     * 重置跳转信息
     */
    resetLink () {
      this.formData.link = ''
    },
    /**
     * 开始验证
     **/
    checkData () {
      let isPass = true
      let errorMessage = ''
      if (!this.formData.title.trim()) {
        isPass = false
        errorMessage = this.$i18n.t('shopFeature.titText.pleaseFillTit')
      }
      if (this.formData.isLink) {
        if (this.formData.linkStyle !== 3 && !this.formData.linkText.trim()) {
          isPass = false
          errorMessage = this.$i18n.t('shopFeature.titText.pleaseFillTextContent')
        }
        if (JSON.stringify(this.formData.link) === '{}' || !this.formData.link) {
          isPass = false
          errorMessage = this.$i18n.t('shopFeature.tabNav.pleaseChooseRouteLink')
        }
      }
      if (isPass) {
        this.myCheckResult(isPass)
      } else {
        // 弹窗提示错误消息
        this.showCheckForm()
        if (this.canShowToast) {
          this.$newMessage.error(errorMessage)
        }
      }
    }
  }
}
</script>

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