<template>
  <div>
    <div class="column-layout-config">
      <el-collapse v-model="activeNames">
        <!-- <el-collapse-item title="布局信息" name="layout"> -->
        <div class="column-layout-layoutObj">
          <div class="el-collapse-item__header">布局信息</div>
          <el-form
            v-model="layoutObj"
            data-vv-scope="editForm"
            label-position="top"
            v-form="{inputsDisplay: 'block'}"
          >
            <ht-form-item label="布局名称" prop="name">
              <ht-input
                class="ht"
                v-model="layoutObj.name"
                autocomplete="off"
                :validate="{required: true}"
                placeholder="请输入名称"
                :maxlength="50"
                :showWordLimit="true"
              ></ht-input>
            </ht-form-item>
            <ht-form-item label="布局别名" prop="name">
              <ht-input
                class="ht"
                v-pinyin="layoutObj.name"
                v-model="layoutObj.alias"
                :disabled="layoutObj.id ? true : false"
                autocomplete="off"
                :validate="{
                  required: true,
                  isExist:
                    '${portal}/portal/sysIndexLayoutManage/sysIndexLayoutManage/v1/checkKey?key=',
                  regex: {
                    exp: '^[a-zA-Z][a-zA-Z0-9_]*$',
                    message: '只能输入字母、数字、下划线，且以字母开头',
                  },
                }"
                :maxlength="50"
                :showWordLimit="true"
                placeholder="请输入别名"
              ></ht-input>
            </ht-form-item>
            <ht-form-item label="布局描述" prop="memo">
              <ht-input
                type="textarea"
                class="ht"
                :rows="3"
                v-model="layoutObj.memo"
                autocomplete="off"
                placeholder="请输入描述信息"
                :maxlength="200"
                :showWordLimit="true"
              ></ht-input>
            </ht-form-item>
            <ht-form-item label="顶部轮播图配置" prop="memo" v-if="layoutType==1">
              <div class="item-notes">
                建议尺寸750x480像素，支持jpg/png格式，大小不超过10M。
              </div>
              <tree-Select
                v-model="layoutObj.bannerTypeIds"
                multiple
                :options="optionTreeData"
                :normalizer="normalizer"
                noOptionsText=" "
                noChildrenText=" "
                placeholder="请选择"
                z-index="9999"
                @input="handleTreeChange"
                :disable-branch-nodes="true"
              />
            </ht-form-item>
            <!-- <ht-form-item label="优先级" prop="rank" v-if="layoutObj.isDef!=1" > -->
            <!-- <ht-form-item label="优先级" prop="rank">
            <ht-input
              type="number"
              class="ht"
              v-model="layoutObj.rank"
              :min="1"
              :max="10000"
              autocomplete="off"
              placeholder="优先级（数字递增优先级递减）"
            ></ht-input>
          </ht-form-item> -->
          </el-form>
        </div>
        <!-- </el-collapse-item> -->
        <div class="column-layout-layoutObj">
        <el-collapse-item
          title="栏目信息"
          name="column"
          v-if="layoutType !== 1"
        >
          <el-form
            label-position="top"
            v-model="layoutObj"
            v-form="{inputsDisplay: 'block'}"
          >
            <ht-form-item label="列宽" v-if="data && data.type === 'two'">
              <ul class="layout-type__wrap">
                <li
                  class="type-item"
                  v-for="item in typeList"
                  :key="item.key"
                  :class="{'is-active': currentType === item.key}"
                  @click="handleClickType(item)"
                >
                  {{ item.value }}
                </li>
              </ul>
            </ht-form-item>
            <ht-form-item label="间隔">
              <ht-input v-model="layoutObj.gutter" type="number"></ht-input>
            </ht-form-item>
          </el-form>
        </el-collapse-item>
        </div>
      </el-collapse>
    </div>
    <!-- <el-container v-if="data && data.type == 'grid'">
      <el-header>栅格设计</el-header>
      <el-main class="config-content">
        <div v-if="!data || !data.type" class="field-empty">
          选择一个栅格布局进行设置
        </div>
        <el-form label-position="top" v-if="data">
          <template>
            <el-form-item label="栅格间隔：">
              <el-input
                type="number"
                v-model.number="data.options.gutter"
              ></el-input>
            </el-form-item>
            <el-form-item label="列配置项：">
              <draggable
                tag="ul"
                :list="data.columns"
                v-bind="{
                  group: {name: 'options'},
                  ghostClass: 'ghost',
                  handle: '.drag-item',
                }"
                handle=".drag-item"
              >
                <li v-for="(item, index) in data.columns" :key="index">
                  <i
                    class="drag-item"
                    style="font-size: 16px; margin: 0 5px; cursor: move"
                  >
                    <i class="iconfont icon-draggable"></i>
                  </i>
                  <el-input
                    placeholder="1到24的整数"
                    size="mini"
                    style="width: 120px"
                    type="number"
                    v-model.number="item.span"
                  >
                  </el-input>
                  <el-button
                    @click="handleOptionsRemove(index)"
                    circle
                    plain
                    type="danger"
                    size="mini"
                    icon="el-icon-minus"
                    style="padding: 4px; margin-left: 5px"
                  ></el-button>
                </li>
              </draggable>
              <div style="margin-left: 22px">
                <el-button @click="handleAddColumn">添加列</el-button>
              </div>
            </el-form-item>
          </template>
        </el-form>
      </el-main>
    </el-container> -->

    <!--table选项卡配置-->
    <!-- <el-container v-if="data && data.type == 'tab'">
      <el-header>tab布局设计</el-header>
      <el-main class="config-content">
        <el-form v-form>
          <ht-form-item label-width label="风格类型">
            <el-radio-group
              v-model="data.options.ctrlType"
              class="ht-radio-group"
            >
              <el-radio-button label style="width: 33%">默认</el-radio-button>
              <el-radio-button label="card" class="ht-radio-button"
                >选项卡</el-radio-button
              >
              <el-radio-button label="border-card" class="ht-radio-button"
                >卡片化</el-radio-button
              >
            </el-radio-group>
          </ht-form-item>

          <ht-form-item label-width label="选项卡位置">
            <el-radio-group v-model="data.options.align" class="ht-radio-group">
              <el-radio-button label="top" class="ht-radio-button"
                >顶部</el-radio-button
              >
              <el-radio-button label="left" class="ht-radio-button"
                >左侧</el-radio-button
              >
              <el-radio-button label="right" class="ht-radio-button"
                >右侧</el-radio-button
              >
              <el-radio-button label="bottom" class="ht-radio-button"
                >底部</el-radio-button
              >
            </el-radio-group>
          </ht-form-item>
          <ht-form-item label-width label="标签配置项">
            <draggable
              tag="ul"
              class="column-ul"
              :list="data.columns"
              v-bind="{
                group: {name: 'options'},
                ghostClass: 'ghost',
                handle: '.drag-item',
              }"
              handle=".drag-item"
              style="margin: 0; padding-left: 0px"
            >
              <li
                v-for="(item, index) in data.columns"
                :key="index"
                style="list-style: none"
                class="tag-config-item"
              >
                <i class="drag-item icon-draggable"> </i>&nbsp;
                <ht-input size="mini" width="200px" v-model="item.span" />
                <el-button
                  @click="handleOptionsRemove(index)"
                  circle
                  plain
                  class="grid-remove-button"
                  type="danger"
                  size="mini"
                  icon="el-icon-minus"
                ></el-button>
              </li>
            </draggable>
            <div style="margin-left: 22px">
              <el-button type="text" @click="handleGridColumnAdd('tab')"
                >添加标签</el-button
              >
            </div>
          </ht-form-item>
        </el-form>
      </el-main>
    </el-container> -->
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import TreeSelect from '@riophae/vue-treeselect'
import form from '@/api/form.js'
export default {
  components: {
    Draggable,
    TreeSelect,
  },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      },
    },
    layoutObj: {
      type: Object,
      default() {
        return {name: '', alias: '', memo: '', gutter: 24}
      },
    },
    layoutType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null,
      },
      activeNames: ['layout', 'column'],
      currentType: 'twoOne',
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
        }
      },
      typeList: [
        {
          key: 'twoOne',
          value: '2:1',
        },
        {
          key: 'equalRatio',
          value: '1:1',
        },
        {
          key: 'oneTwo',
          value: '1:2',
        },
      ],
      treeData: [],
      idArr: [],
    }
  },
  created() {
    this.getTreedata()
  },
  computed: {
    show() {
      if (this.data && Object.keys(this.data).length > 0) {
        return true
      }
      return false
    },
    optionTreeData() {
      return this.treeData.filter((item) => {
        return item.id === '200'
      })
    },
  },
  methods: {
    async handleTreeChange(node, instanceId) {
      this.$emit('update:layoutObj', this.layoutObj)
    },
    // 获取新闻公告，轮播图范围
    getTreedata() {
      form.getTreedata().then((resp) => {
        this.treeData = this.treeDelLast(resp)
        this.loopFn(this.treeData)
      })
    },
    loopFn(arr) {
      for (let i = 0; i < arr.length; i++) {
        let item = arr[i]
        this.idArr.push(item.id)
        if (Array.isArray(item.children)) this.loopFn(item.children)
      }
    },
    // 处理树形结构
    treeDelLast(arr) {
      return arr.map((item) => {
        if (item.children && item.children.length) {
          this.treeDelLast(item.children)
        } else {
          delete item.children
        }
        return item
      })
    },
    handleClickType(item) {
      this.currentType = item.key
      this.$emit('update-type', item)
    },
    handleGridColumnAdd(type) {
      if (type == 'tab') {
        this.data.columns.push({
          span: '标签页' + (this.data.columns.length + 1),
          list: [],
        })
      }
    },
    handleOptionsRemove(index) {
      if (this.data && this.data.type === 'grid') {
        this.data.columns.splice(index, 1)
      } else {
        this.data.options.options.splice(index, 1)
      }
    },
    handleAddOption() {
      if (this.data.options.showLabel) {
        this.data.options.options.push({
          value: this.$t('fm.config.widget.newOption'),
          label: this.$t('fm.config.widget.newOption'),
        })
      } else {
        this.data.options.options.push({
          value: this.$t('fm.config.widget.newOption'),
        })
      }
    },
    handleAddColumn() {
      this.data.columns.push({
        span: '',
        list: [],
      })
    },
    generateRule() {
      this.data.rules = []
      Object.keys(this.validator).forEach((key) => {
        if (this.validator[key]) {
          this.data.rules.push(this.validator[key])
        }
      })
    },
    handleSelectMuliple(value) {
      if (value) {
        if (this.data.options.defaultValue) {
          this.data.options.defaultValue = [this.data.options.defaultValue]
        } else {
          this.data.options.defaultValue = []
        }
      } else {
        if (this.data.options.defaultValue.length > 0) {
          this.data.options.defaultValue = this.data.options.defaultValue[0]
        } else {
          this.data.options.defaultValue = ''
        }
      }
    },

    validateRequired(val) {
      if (val) {
        this.validator.required = {
          required: true,
          message: `${this.data.name}${this.$t(
            'fm.config.widget.validatorRequired'
          )}`,
        }
      } else {
        this.validator.required = null
      }

      this.$nextTick(() => {
        this.generateRule()
      })
    },

    validateDataType(val) {
      if (!this.show) {
        return false
      }

      if (val) {
        this.validator.type = {
          type: val,
          message: this.data.name + this.$t('fm.config.widget.validatorType'),
        }
      } else {
        this.validator.type = null
      }

      this.generateRule()
    },
    valiatePattern(val) {
      if (!this.show) {
        return false
      }

      if (val) {
        this.validator.pattern = {
          pattern: val,
          message:
            this.data.name + this.$t('fm.config.widget.validatorPattern'),
        }
      } else {
        this.validator.pattern = null
      }

      this.generateRule()
    },
  },
  watch: {
    'layoutObj.name': function (newVal, oldVal) {
      this.$emit('update:layoutObj', this.layoutObj)
    },
    'layoutObj.memo': function (newVal, oldVal) {
      this.$emit('update:layoutObj', this.layoutObj)
    },
    'data.options.isRange': function (val) {
      if (typeof val !== 'undefined') {
        if (val) {
          this.data.options.defaultValue = null
        } else {
          if (Object.keys(this.data.options).indexOf('defaultValue') >= 0)
            this.data.options.defaultValue = ''
        }
      }
    },
    'data.options.required': function (val) {
      this.validateRequired(val)
    },
    'data.options.dataType': function (val) {
      this.validateDataType(val)
    },
    'data.options.pattern': function (val) {
      this.valiatePattern(val)
    },
    'data.name': function (val) {
      if (this.data.options) {
        this.validateRequired(this.data.options.required)
        this.validateDataType(this.data.options.dataType)
        this.valiatePattern(this.data.options.pattern)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.column-layout-config {
  .column-layout-layoutObj {
    padding: 24px;
    &:first-child{
      padding-bottom:0;
    }
    &:nth-child(n+2){
      padding-top:0;
    }
  }
  ::v-deep {
    .el-collapse{
      border-bottom:none;
    }
    .el-collapse-item__header {
      // padding-left: 24px;
      font-size: 16px;
      font-weight: bold;
    }
    .el-collapse-item__content {
      // padding: 0 24px;
    }
  }
  .layout-type__wrap {
    list-style: none;
    display: flex;
    .type-item {
      flex: 1;
      text-align: center;
      height: 32px;
      line-height: 32px;
      border: 1px solid #dcdee0;
      color: #333;
      cursor: pointer;
      &:nth-child(2) {
        border-left: none;
        border-right: none;
      }
    }
    .is-active {
      background: #409eff;
      color: #fff;
      border-color: #409eff;
    }
    .type-item &:nth-child(2).is-active {
      border: 1px solid #409eff;
    }
  }
}
.el-header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.field-empty {
  text-align: center;
  width: 100%;
  margin-top: 150px;
  font-size: 16px;
  color: #ccc;
}
.ht-radio-group {
  display: flex;
}
.ht-radio-button {
  display: flex;
}
.tag-config-item {
  display: flex;
  align-items: center;
}
::v-deep {
  .vue-treeselect__control {
    border-radius: 2px;
    height: 30px;
    line-height: 31px;
  }
  .vue-treeselect__multi-value {
    // height: 31px;
    line-height: 30px;
  }
  .vue-treeselect__multi-value-item-container {
    padding-top: 2px;
  }
  .vue-treeselect__multi-value-item {
    background: rgba(64,158,255,0.1);
    color: #333333;
    height: 30px;
    line-height: 30px;
    padding: 0 6px;
  }
  .vue-treeselect__value-remove {
    background: #dbdbdb;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    margin-top: 7px;
  }
  .vue-treeselect__input-container {
    padding-top: 0;
  }
  .vue-treeselect__multi-value {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 3px;
  }
  .el-form-item__label{
    padding: 0!important;
  }
}
.item-notes{
  font-size: 12px;
  font-weight: 400; 
  color: #999999;
  line-height: 20px;
}

</style>
