<template>
  <div class="layout-card">
    <el-card style="min-width: 180px">
      <div slot="header" class="card-header">
        <div class="card-header-title">
          <i :class="icon || 'el-icon-c-scale-to-original'" style="color:#4E80F5" />
          {{ title }}
        </div>
        <div>
          <el-button
            v-if="command !== 'detail'"
            type="text"
            icon="el-icon-edit"
            @click.prevent="edit"
          />
          <el-button type="text" icon="el-icon-s-order" @click.prevent="detail" />
        </div>
      </div>
      <div style="z-index: -1">
        <div v-for="(item, index) in dataList" :key="index" class="card-body">
          <div>
            <span
              :id="id + '_head_' + item.prop"
              :ref="id + '_head_' + item.prop"
              :style="style"
              :draggable="command === 'detail' ? false : true"
              class="color-block"
              @click="openRelation"
              @dragstart="drag($event, item, 'head')"
              @drop="drop($event, item, 'head')"
              @dragover="$event.preventDefault()"
            />
          </div>
          <div class="card-body-title" :title="item.label">
              {{ item.label }}
            </div>
          <div class="card-body-value" :title="item.value">
            <i v-if="item.tree" class="el-icon-share" style="color: gray" />
            <span v-else>{{ item.value || '--' }}</span>
          </div>
          <div>
            <span
              :id="id + '_tail_' + item.prop"
              :ref="id + '_tail_' + item.prop"
              :style="style"
              :draggable="command === 'detail' ? false : true"
              class="color-block"
              @click="openRelation"
              @dragstart="drag($event, item, 'tail')"
              @drop="drop($event, item, 'tail')"
              @dragover="$event.preventDefault()"
            />
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getLayout, getDataSource } from '../../api'
export default {
  name: 'Card',
  props: {
    command: String,
    form: Object,
    parent: String,
    type: String,
    typeId: String,
    title: { type: String, default: '标题' },
    color: { type: String, default: '#fff' },
    icon: { type: String, default: 'el-icon-eleme' },
    id: String
  },
  data() {
    return {
      observer: null,
      dataList: [],
      domList: []
    }
  },
  computed: {
    style() {
      return {
        background: this.color,
        cursor: 'pointer'
      }
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    openRelation() {
      this.$emit('open-relation', this.id)
    },
    backfill() {
      if (this.form !== null) {        
        let keys = Object.keys(this.form)
        this.dataList.forEach((obj) => {
          if (!obj.tree && keys.includes(obj.prop)) obj.value = this.form[obj.prop]
        })
      }
    },
    search() {
      const todo =
        this.type === 'resource'
          ? getDataSource(this.typeId)
          : getLayout(this.typeId)
      todo
        .then((resp) => {
          if (resp.data.returnCode == '0') {
            if (this.type === 'resource') {
              this.dataList = resp.data.data.list.map((obj) => {
                return {
                  propId: obj.fieldId,
                  label: obj.fieldName,
                  prop: obj.fieldCode,
                  required: obj.requiredFlag === '1',
                  value: null
                }
              })
            } else {
              this.dataList = resp.data.data.list.map((obj) => {
                if (obj.childTree) {
                  if (Object.prototype.toString.call(this.form) == '[object Object]') {
                    let keys = Object.keys(this.form)
                    obj.childTree.forEach(el => {
                      if (keys.includes(el.paramCode)) el.value = this.form[el.paramCode]
                    })
                  }
                  return {
                    propId: obj.paramId,
                    label: obj.paramName,
                    prop: obj.paramCode,
                    value: obj.childTree,
                    required: false,
                    tree: true
                  }
                } else {
                  return {
                    propId: obj.paramId,
                    label: obj.paramName,
                    prop: obj.paramCode,
                    required: obj.requiredFlag === '1',
                    value: obj.value || null
                  }
                }
              })
            }
            this.backfill()
            this.$emit('on-search')
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    drag(e, source, position) {
      e.dataTransfer.setData(
        'source',
        JSON.stringify({
          id: this.id,
          parent: this.parent,
          ...source,
          position,
          pageX:
            position === 'tail'
              ? e.srcElement.getBoundingClientRect().x
              : e.srcElement.getBoundingClientRect().x,
          pageY: e.srcElement.getBoundingClientRect().y,
          color: this.color,
          dom: e.srcElement.id
        })
      )
    },
    drop(e, item, position) {
      if (position !== 'head' && position !== 'tail') {
        return
      }
      const target = {
        id: this.id,
        parent: this.parent,
        ...item,
        position,
        pageX:
          position === 'tail'
            ? e.toElement.getBoundingClientRect().x
            : e.toElement.getBoundingClientRect().x,
        pageY: e.toElement.getBoundingClientRect().y,
        color: this.color,
        dom: e.srcElement.id
      }
      e.preventDefault()
      const source = JSON.parse(e.dataTransfer.getData('source'))
      if (target.parent !== source.id && target.id !== source.parent) {
        this.$message.warning('只能父子节点间的首尾相连')
        return
      }
      if (
        (target.parent === source.id &&
          target.position === 'head' &&
          source.position === 'tail') ||
        (target.id === source.parent &&
          source.position === 'head' &&
          target.position === 'tail')
      ) {
        this.$emit('on-relation', source, target)
      } else {
        this.$message.warning('只能父子节点间的首尾相连')
        return
      }
    },
    edit() {
      this.$emit('on-edit', {
        id: this.id,
        editList: this.dataList,
        title: this.title,
        form: this.form
      })
    },
    detail() {
      this.$emit('on-detail', {
        id: this.id,
        editList: this.dataList,
        title: this.title,
        form: this.form
      })
    }
  }
}
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
}
.color-block {
  z-index: 2;
  color: #fff;
  display: inline-block;
  background: #67C23A;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.card-header-title {
  line-height: 39px;
}
.card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body div{
  display: inline-block;
}
.card-body .color-block {
  width: 8px;
  height: 8px;
}
.card-body-title {
  line-height: 25px;
  font-size: 12px;
  width: 80px;
  color: rgb(140, 140, 140);
  display: inline-block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-body-value {
  flex-grow:1;
  line-height: 25px;
  font-size: 14px;
  max-width: 120px;
  text-align: center;
  color: #2b2c2d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style lang="scss">
.layout-card{
  .el-card__header{
    padding: 0px 10px;
  }
  .el-card__body{
    padding: 20px 0 ;
  }
}
</style>
