<template>
  <div v-loading="loading" class="palybook-tree">
    <ul>
      <div>
        <span
          class="color-block"
          style="background: #73b8ff"
        ><i class="el-icon-c-scale-to-original" /></span><span class="palybook-tree-title">数据源</span>
      </div>
      <ul>
        <li v-for="(item, index) in sourceData" :key="index">
          <div
            class="palybook-tree-leaf"
            :draggable="command === 'detail' ? false : true"
            @dragstart="
              setDragData(
                $event,
                { item, id: getTimesnape() },
                Date.parse(new Date())
              )
            "
          >
            <i class="el-icon-c-scale-to-original" />
            {{ item.resourceName }}
          </div>
        </li>
      </ul>
    </ul>
    <ul>
      <div>
        <span
          class="color-block"
          style="background: #73b8ff"
        ><i class="el-icon-c-scale-to-original" /></span><span class="palybook-tree-title">研判响应</span>
      </div>
      <ul>
        <li v-for="(item, index) in responseData" :key="index">
          <div
            class="palybook-tree-leaf"
            :draggable="command === 'detail' ? false : true"
            :style="width(item.layoutName)"
            @dragstart="
              setDragData(
                $event,
                { item, id: getTimesnape() },
                Date.parse(new Date())
              )
            "
          >
            <i class="el-icon-c-scale-to-original" />
            {{ item.layoutName }}
          </div>
        </li>
      </ul>
    </ul>
  </div>
</template>

<script>
import moment from 'moment'
import { getDataSourceList,
  getLayoutObjList } from '../../api'
export default {
  name: 'ScriptDesignTree',
  props: {
    command: String
  },
  data() {
    return {
      // responseData: [
      //   {
      //     layoutId: 1,
      //     layoutName: 'test',
      //     layoutCode: 'test',
      //     layoutType: '1',
      //     businessId: 404,
      //     layoutLabel: 'test',
      //     layoutIcon: null,
      //     interfaceAddress: '192.168.0.1',
      //     basePath: 'scriplayoutInfo/update',
      //     layoutDesc: 'test',
      //     layoutStatus: 1,
      //     interfaceFile: null,
      //     overTime: 1000,
      //     flowControlType: '1',
      //     flowControlCount: 11,
      //     flowControlCircle: '11',
      //     safeType: '1',
      //     requestWay: 'POST',
      //     requestAgreement: 'http',
      //     createUser: 1,
      //     createTime: null,
      //     updateUser: 1,
      //     updateTime: '2021-03-16 11:33:03',
      //     validTag: '1',
      //     businessName: '业务系统111'
      //   }
      // ],
      // sourceData: [
      //   {
      //     resourceId: 1,
      //     resourceName: '测试表',
      //     resourceStatus: 1,
      //     resourceType: '1',
      //     resourceTable: 't_business',
      //     createUser: 1,
      //     createTime: '2021-03-19 20:41:04',
      //     updateUser: 1,
      //     updateTime: null,
      //     validTag: '1'
      //   }
      // ],
      responseData: [],
      sourceData: [],
      loading: false
    }
  },
  methods: {
    width(str) {
      const width = str.length * 14 + 20 + 'px'
      return {
        width
      }
    },
    getTimesnape() {
      return moment().format('x')
    },
    setDragData(evt, val) {
      evt.dataTransfer.setData('componentData', JSON.stringify(val))
    },
    getDataSourceList() {
      getDataSourceList()
        .then((resp) => {
          if (resp.data.returnCode == '0') {
            this.sourceData = resp.data.data.list
          }
          this.loading = false
        })
    },
    getDataResponse() {
      getLayoutObjList('/analyze/layouobjectInfo/list')
        .then((resp) => {
          if (resp.data.returnCode == '0') {
            this.responseData = resp.data.data.list
          }
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>
.palybook-tree ul {
  list-style: none;
}
.color-block {
  color: #fff;
  display: inline-block;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 22px;
  text-align: center;
  margin-right: 10px;
}
.palybook-tree ul li div {
  height: 28px;
}
.palybook-tree ul li .palybook-tree-title {
  font-size: 15px;
}
.palybook-tree ul li .palybook-tree-title {
  text-align: left;
  line-height: 28px;
  margin-top: 3px;
  font-weight: bold;
}
.palybook-tree-title-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 15px;
}

.palybook-tree-leaf {
  text-align: left;
  line-height: 28px;
  margin-left: 18px;
  cursor: pointer;
}
</style>
