<template>
  <div class="attr-editor">
    <el-tabs v-model="activeName" size="mini">
      <el-tab-pane v-if="attrForm" :label="$t('pages.activityTemplateManage.section.attributes')" name="attr">
        <el-form ref="form" class="form" :model="attrForm" label-width="90px" size="mini">
          <el-form-item v-if="attrForm.id" label="ID">
            {{ attrForm.id }}
          </el-form-item>
          <el-form-item v-if="attrForm.label" :label="$t('pages.activityTemplateManage.form.componentName')">
            {{ attrForm.label }}
          </el-form-item>
          <el-form-item v-if="hasOwnProperty(attrForm,'copywriting')" :label="attrForm.copywriting.label">
            <lang-text-editor :lang-array="attrForm.copywriting.i18n" :type="attrForm.copywriting.type" @text-change="langChange" />
          </el-form-item>
          <el-form-item v-if="hasOwnProperty(attrForm,'imgUrls')" label-width="0">
            <el-form-item v-for="(item, index) in attrForm.imgUrls" :key="index" :label="item.label ? item.label : $t('pages.activityTemplateManage.form.imageIndex', { index })">
              <el-input v-model="item.url" clearable @input="changeNotice" />
            </el-form-item>
          </el-form-item>
          <!-- <el-form-item v-if="hasOwnProperty(attrForm,'rewards')" label-width="0">
            <el-form-item :label="$t('pages.activityTemplateManage.form.rewardTier')">
              <reward-array-editor :rewards="attrForm.rewards" @reward-change="rewardChange" />
            </el-form-item>
          </el-form-item> -->
        </el-form>
      </el-tab-pane>
      <el-tab-pane v-if="styleForm && !styleForm.hide" :label="$t('pages.activityTemplateManage.section.style')" name="style">
        <el-alert
          v-if="styleForm.tips"
          :title="styleForm.tips"
          type="info"
          size="mini"
          effect="dark"
          :closable="false"
          style="margin-bottom: 20px"
          show-icon
        />
        <el-form ref="form" class="form" :model="styleForm" label-width="90px" size="mini">
          <div class="blockquote blockquote-mini">{{ $t('pages.activityTemplateManage.section.background') }}</div>
          <el-form-item v-if="hasOwnProperty(styleForm,'background.img.url')" :label="$t('pages.activityTemplateManage.form.backgroundImage')">
            <el-input v-model="styleForm.background.img.url" clearable @input="changeNotice" />
          </el-form-item>
          <el-form-item v-if="hasOwnProperty(styleForm,'background.color')" :label="$t('pages.activityTemplateManage.form.backgroundColor')">
            <el-col :span="4" class="flex-c">
              <el-color-picker v-model="styleForm.background.color.start" @change="changeNotice" />
            </el-col>
            <el-col :span="styleForm.background.color.direction !== 'NONE' ? 16 : 20">
              <el-select
                v-model="styleForm.background.color.direction"
                style="width: 100%;"
                @change="changeNotice"
              >
                <el-option v-for="item in translatedBackgroundColorDirections" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-col>
            <el-col v-if="styleForm.background.color.direction !== 'NONE'" :span="4" class="flex-c">
              <el-color-picker v-model="styleForm.background.color.end" @change="changeNotice" />
            </el-col>
          </el-form-item>
          <el-form-item v-if="hasOwnProperty(styleForm,'background.img.repeat')" :label="$t('pages.activityTemplateManage.form.backgroundRepeat')">
            <el-select
              v-model="styleForm.background.img.repeat"
              style="width: 100%;"
              clearable
              @change="changeNotice"
            >
              <el-option v-for="item in backgroundImgRepeats" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>

          </el-form-item>
          <el-form-item v-if="hasOwnProperty(styleForm,'background.img.size')" :label="$t('pages.activityTemplateManage.form.backgroundSize')">
            <el-input v-model="styleForm.background.img.size" clearable @input="changeNotice" />
          </el-form-item>

          <div class="blockquote blockquote-mini">{{ $t('pages.activityTemplateManage.section.font') }}</div>
          <el-form-item v-if="hasOwnProperty(styleForm,'font.color')" :label="$t('pages.activityTemplateManage.form.color')">
            <el-color-picker v-model="styleForm.font.color" @change="changeNotice" />
          </el-form-item>
          <el-form-item v-if="hasOwnProperty(styleForm,'font.size')" :label="$t('pages.activityTemplateManage.form.size')">
            <el-input v-model="styleForm.font.size" clearable @input="changeNotice" />
          </el-form-item>
          <el-form-item v-if="hasOwnProperty(styleForm,'font.weight')" :label="$t('pages.activityTemplateManage.form.weight')">
            <el-input v-model="styleForm.font.weight" clearable @input="changeNotice" />
          </el-form-item>

          <div class="blockquote blockquote-mini">{{ $t('pages.activityTemplateManage.section.border') }}</div>
          <el-form-item v-if="hasOwnProperty(styleForm,'border.width')" :label="$t('pages.activityTemplateManage.form.borderWidth')">
            <el-input v-model="styleForm.border.width" clearable @input="changeNotice" />
          </el-form-item>
          <el-form-item v-if="hasOwnProperty(styleForm,'border.style')" :label="$t('pages.activityTemplateManage.form.borderStyle')">
            <el-input v-model="styleForm.border.style" clearable @input="changeNotice" />
          </el-form-item>
          <el-form-item v-if="hasOwnProperty(styleForm,'border.color')" :label="$t('pages.activityTemplateManage.form.borderColor')">
            <el-color-picker v-model="styleForm.border.color" @change="changeNotice" />
          </el-form-item>
          <el-form-item v-if="hasOwnProperty(styleForm,'border.radius')" :label="$t('pages.activityTemplateManage.form.borderRadius')">
            <el-input v-model="styleForm.border.radius" clearable @input="changeNotice" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import LangTextEditor from './lang-text-editor'
import RewardArrayEditor from './reward-array-editor'

export default {
  name: 'AttrEditor',
  components: { LangTextEditor, RewardArrayEditor },
  props: {
    form: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  data() {
    return {
      activeName: 'attr',
      backgroundColorDirections: [
        { nameKey: 'none', value: 'NONE' },
        { nameKey: 'toRight', value: 'to right' },
        { nameKey: 'toLeft', value: 'to left' },
        { nameKey: 'toTop', value: 'to top' },
        { nameKey: 'toBottom', value: 'to bottom' },
        { nameKey: 'toBottomRight', value: 'to bottom right' },
        { nameKey: 'toBottomLeft', value: 'to bottom left' }
      ],
      backgroundImgRepeats: [
        { name: 'repeat', value: 'repeat' },
        { name: 'repeat-x', value: 'repeat-x' },
        { name: 'repeat-y', value: 'repeat-y' },
        { name: 'no-repeat', value: 'no-repeat' },
        { name: 'inherit', value: 'inherit' }
      ],
      borderStyles: [
        { name: 'none', value: 'none' },
        { name: 'hidden', value: 'hidden' },
        { name: 'dotted', value: 'dotted' },
        { name: 'dashed', value: 'dashed' },
        { name: 'solid', value: 'solid' },
        { name: 'double', value: 'double' },
        { name: 'groove', value: 'groove' },
        { name: 'ridge', value: 'ridge' },
        { name: 'inset', value: 'inset' },
        { name: 'outset', value: 'outset' },
        { name: 'inherit', value: 'inherit' }
      ],
      attrForm: {},
      styleForm: {}
    }
  },
  computed: {
    translatedBackgroundColorDirections() {
      return this.backgroundColorDirections.map(item => ({
        ...item,
        name: this.$t(`pages.activityTemplateManage.gradient.${item.nameKey}`)
      }))
    }
  },
  watch: {
    form: {
      handler(newVal) {
        if (newVal) {
          this.attrForm = newVal.attr || {}
          this.styleForm = newVal.style
        }
      },
      immediate: true
    }
  },
  created() {

  },
  methods: {
    filterAutocomplete(restaurants, queryString, callback) {
      var results = queryString ? restaurants.filter(item => (item.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0)) : restaurants
      callback(results)
    },
    hasOwnProperty(obj, property) {
      if (!obj || !property) {
        return false
      }
      let tmpObj = obj
      if (property.indexOf('.') >= 0) {
        const propertys = property.split('.').filter(key => !!key)
        for (let index = 0; index < propertys.length; index++) {
          const key = propertys[index]
          if (key in tmpObj) {
            tmpObj = tmpObj[key]
            if (typeof obj === Object || tmpObj instanceof Object) {
              return true
            }
            continue
          }
          return false
        }
      }
      return property in obj
    },
    langTextChange(list) {
      console.log('langTextChange', list)
    },
    langChange(list) {
      this.attrForm.copywriting.i18n = list
      this.emitAttrChange()
    },
    rewardChange(list) {
      this.attrForm.rewards = list
      this.emitAttrChange()
    },
    changeNotice() {
      this.emitAttrChange()
    },
    emitAttrChange() {
      this.$emit('attr-change', {
        attr: this.attrForm,
        style: this.styleForm
      })
    }
  }
}
</script>

<style scoped lang="scss">
.attr-editor {
    position: relative;
    height: 100%;
    padding: 0px 20px;
    .bottom-line {
        border-bottom: 1px solid rgb(240, 235, 235);
    }
    .card {
        padding: 20px;
        .title {
        font-weight: bold;
        }
        .content {
        padding: 20px 0px;
        }
    }
}
</style>
