<template>
  <div class="bgw">
    <!-- tab标签start -->
    <el-tabs v-model="activeName" type="border-card" class="manual-block-div">
      <!-- 内容start -->
      <el-tab-pane label="内容" name="content">
        <div class="toolbar">
          <el-button class="fa fa-pencil" @click="recordClickHandler">选择内容记录</el-button>
          <el-button class="fa fa-trash-o" @click="clearClickHandler">清空</el-button>
          <el-button class="fa fa-plus" @click="addClickHandler(-1)">添加</el-button>
        </div>
        <el-table :data="dataList" class="table-con">
          <el-table-column min-width="5%" align="center">
            <template slot-scope="scope">
              {{scope.$index+1}}
            </template>
          </el-table-column>
          <el-table-column label="标题" class="title-box">
            <template slot-scope="props">
              <div class="row-item" :draggable="true" @dragstart="dragStart($event, props.$index)" @dragover="allowDrop" @drop="drop($event, props.$index)">
                <el-form label-position="left" inline class="con-form">
                  <el-form-item>
                    <span class="circle">
                      <i class="fa fa-plus icon1-plus" aria-hidden="true" @click="addDocumentClickHandler(props.$index,-1)"></i>
                    </span>
                    <span class="con-box" v-for="(con, index) in props.row.items" :key="con.ID">
                      <span class="con con-item" :style="con.titleStyle">
                        <span @click="editDocumentClickHandler(props.$index,index,con)">{{ con.title }}</span>
                        <span class="icon1-box">
                          <i class="fa fa-plus-square-o icon1-add" aria-hidden="true" @click="addDocumentClickHandler(props.$index,index+1)"></i>
                          <i class="fa fa-pencil icon1-edit" aria-hidden="true" @click="editDocumentClickHandler(props.$index,index,con)"></i>
                          <i class="fa fa-remove icon1-remove" aria-hidden="true" @click="deleteDocumentClickHandler(props.$index,index)"></i>
                        </span>
                      </span>
                    </span>
                  </el-form-item>
                </el-form>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="right" min-width="15%">
            <template slot-scope="scope">
              <el-button @click.native.prevent="addClickHandler(scope.$index)" type="text">
                <i class="fa fa-plus icon1-plus" aria-hidden="true"></i>
              </el-button>
              <el-button @click.native.prevent="deleteRowClickHandler(scope.$index)" type="text">
                <i class="fa fa-minus icon1-minus" aria-hidden="true"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 内容end -->
      <!-- 内置模板start -->
      <el-tab-pane label="内置模板" name="template">
        <el-input :autosize="{minRows: 10}" type="textarea" v-model="dataModel.templateContent"></el-input>
      </el-tab-pane>
      <!-- 内置模板end -->
    </el-tabs>
    <!-- 选择文章弹框 -->
    <content-select-dialog :show.sync="chooseArticle.isShowModal" :blockID="chooseArticle.blockID" :title="chooseArticle.title"
      :blockShow="chooseArticle.blockShow" :selectType="chooseArticle.selectType" @callback="getChooseArticle">
    </content-select-dialog>
    <item-dialog :show.sync="itemDlg.isShowModal" :blockID="itemDlg.blockID" :item="itemDlg.item" :prefix="itemDlg.prefix" @callback="getItem"></item-dialog>
  </div>
</template>

<script>
import contentSelectDialog from '@src/components/contentComponent/RecommendedContentSelector.vue'
import blockItemDialog from './blockItemDialog.vue'
export default {
  props: {
    dataModel: {
      type: Object,
      default: function () {
        return {
          templateContent: '',
          content: '',
          prefix: ''
        }
      }
    },
    ID: [Number, String],
    blockType: String
  },
  data() {
    return {
      activeName: 'content',
      /* 内容 */
      dataList: [], // 内容数据列表
      chooseArticle: { isShowModal: false, blockID: 0, title: '', selectType: '', blockShow: false },
      index: -1,
      index2: -1,
      itemDlg: { isShowModal: false, blockID: 0, item: {}, prefix: '' },
      isEdit: false
    }
  },
  watch: {
    ID(val) {
      if (val) {
        this.loadDataList()
      }
    },
    dataModel(val) {
      if (val) {
        this.loadDataList()
      }
    }
  },
  methods: {
    saveBlockContent() {
      this.dataModel.content = ''
      if (this.dataList && this.dataList.length) {
        let items = []
        this.dataList.forEach(row => {
          items.push(row.items)
        })
        this.dataModel.content = JSON.stringify({ items: items })
      }
    },
    loadDataList() {
      if (this.dataModel.content) {
        let items = JSON.parse(this.dataModel.content).items
        if (items && items.length) {
          this.dataList = []
          for (let i = 0; i < items.length; i++) {
            this.dataList.push({ items: items[i] })
          }
        }
      } else {
        this.dataList = []
      }
    },
    clearClickHandler() {
      this.dataList = []
      this.dataModel.content = ''
    },
    addClickHandler(index) {
      if (index !== -1) {
        this.dataList.splice(index + 1, 0, {})
      } else {
        this.dataList.push({})
      }
      this.saveBlockContent()
    },
    editDocumentClickHandler(index, index2, data) {
      this.index = index
      this.index2 = index2
      this.itemDlg.isShowModal = true
      this.itemDlg.blockID = this.ID
      this.itemDlg.item = data
      this.prefix = this.dataModel.prefix
      this.isEdit = true
    },
    getItem(data) {
      if (this.isEdit) { // 编辑文档
        this.dataList[this.index].items.splice(this.index2, 1, data)
      } else {
        if (this.index2 === -1) {
          if (!this.dataList[this.index].items || !this.dataList[this.index].items.length) {
            this.dataList.splice(this.index, 1, {
              items: [
                data
              ]
            })
          } else {
            this.dataList[this.index].items.splice(0, 0, data)
          }
        } else {
          this.dataList[this.index].items.splice(this.index2, 0, data)
        }
      }
      this.saveBlockContent()
    },
    // 选择内容记录
    recordClickHandler() {
      this.chooseArticle = {
        isShowModal: true,
        title: '选择内容记录',
        blockID: this.ID,
        selectType: 'selection',
        blockShow: true
      }
    },
    // 获取选中的文章
    getChooseArticle(rows) {
      rows.forEach(row => {
        let item = {
          ID: row.ID,
          title: row.title,
          URL: row.link,
          picSrc: row.logoFile,
          summary: row.summary,
          date: row.publishDate
        }
        this.dataList.unshift({ items: [item] })
      })
      this.saveBlockContent()
    },
    dragStart(e, index) {
      e.dataTransfer.setData('Text', index)
    },
    allowDrop(e) {
      e.preventDefault()
    },
    drop(e, index) {
      this.allowDrop(e)
      // 使用一个新数组重新排序后赋给原变量
      let arr = this.dataList.concat([])

      let dragIndex = e.dataTransfer.getData('Text')

      let temp = arr.splice(dragIndex, 1)
      arr.splice(index, 0, temp[0])
      this.dataList = arr
      this.saveBlockContent()
    },
    addDocumentClickHandler(index, index2) {
      this.isEdit = false
      this.index = index
      this.index2 = index2
      this.itemDlg.isShowModal = true
      this.itemDlg.blockID = this.ID
      this.itemDlg.item = {
        ID: '',
        title: '',
        URL: '',
        picSrc: '',
        summary: '',
        date: '',
        titleStyle: ''
      }
      this.prefix = this.dataModel.prefix
    },
    deleteDocumentClickHandler(index, index2) {
      this.dataList[index].items.splice(index2, 1)
      this.saveBlockContent()
    },
    deleteRowClickHandler(index) {
      if (index !== undefined) {
        this.dataList.splice(index, 1)
      }
      this.saveBlockContent()
    }
  },
  created() {
    this.loadDataList()
  },
  components: {
    'content-select-dialog': contentSelectDialog,
    'item-dialog': blockItemDialog
  }
}
</script>
<style>
  .bgw {
    background: #fff;
    padding: 0px 15px 5px;
  }

  .manual-block-div .table-con {
    width: 100%;
    border: solid 1px #EEEFF1;
    margin-top: 15px;
  }

  .manual-block-div .toolbar {
    margin: 15px 0 0 10px;
  }

  .manual-block-div {
    margin-left: -10px;
    margin-right: -10px;
  }

  .manual-block-div .title-box {
    min-width: 100px;
    overflow: auto;
  }

  .manual-block-div .con-form {
    text-align: left;
    /* white-space: nowrap; */
    /* height: 30px; */
  }

  .manual-block-div .el-form .el-form-item__content {
    line-height: 30px;
  }

  .manual-block-div .con {
    margin: 5px;
    padding: 0 40px 0 10px;
    position: relative;
    display: inline-block;
    border-radius: 20px;
    border: 1px solid #eee;
    line-height: 20px;
    font-size: 13px!important;
  }

  .manual-block-div .con:hover {
    border: 1px solid #409EFF;
  }

  .manual-block-div .circle {
    padding-left: 4px;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    border-radius: 20px;
    border: 1px solid #eee;
    background: transparent;
    line-height: 19px;
  }

  .manual-block-div .icon1-box {
    position: absolute;
    right: 0;
    top: 0;
  }

  .manual-block-div .row-item .fa {
    display: none;
  }

  .manual-block-div .row-item:hover .icon1-add,
  .manual-block-div .row-item:hover .icon1-plus {
    display: inline-block;
  }

  .manual-block-div .con-item:hover .icon1-edit,
  .manual-block-div .con-item:hover .icon1-remove {
    display: inline-block;
  }

  .manual-block-div .icon1-l-add {
    float: left;
    line-height: 35px;
  }

  .manual-block-div .icon1-add {
    position: absolute;
    right: -15px;
    top: -5px;
    color: #637283;
  }

  .manual-block-div .icon1-edit {
    color: #637283;
  }

  .manual-block-div .icon1-remove {
    color: #D6A87B;
  }

  .manual-block-div .icon1-plus {
    color: #9FACAD;
  }

  .manual-block-div .icon1-minus {
    color: #FF6966;
  }

  .manual-block-div .el-form-item {
    margin-bottom: 0;
  }

  .table-con .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
</style>
