<template>
  <div class="layout-dialog">
    <manager-dialog
      :visible.sync="dialogVisible"
      fullscreen
      :divider="false"
      :show-close="false"
      :show-footer="false"
      :destroy-on-close="true"
      @close="handleClose"
      @opened="open"
    >
      <div slot="title" style="padding-right: 23px; display: flex; align-items: center; position: relative;">
        <svg style="vertical-align: middle" t="1617862673763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1135" width="20" height="20"><path d="M256 128c-70.187 0-128 57.813-128 128 0 55.168 35.968 102.187 85.333 120.021v178.646h85.334V375.979C348.032 358.229 384 311.168 384 256c0-70.187-57.813-128-128-128z m512 0a128 128 0 0 0-120.49 85.333H469.332v85.334h178.091a128 128 0 0 0 211.072 47.829A128 128 0 0 0 768 128z m-512 85.333c24.064 0 42.667 18.603 42.667 42.667S280.064 298.667 256 298.667 213.333 280.064 213.333 256s18.603-42.667 42.667-42.667z m469.333 256V640L627.5 737.835a42.667 42.667 0 0 0 0 60.33l110.336 110.336a42.624 42.624 0 0 0 60.33 0l110.336-110.336a42.624 42.624 0 0 0 0-60.33L810.667 640V469.333h-85.334zM170.667 640A42.667 42.667 0 0 0 128 682.667v170.666A42.667 42.667 0 0 0 170.667 896h170.666A42.667 42.667 0 0 0 384 853.333V682.667A42.667 42.667 0 0 0 341.333 640H170.667z" p-id="1136" fill="#4E80F5" /></svg>
        <span>{{ command === 'add'?'新增':command === 'detail'?'查看':'修改' }}</span>
        <template v-if="command !== 'add'">
          <span style="display: inline-block; margin-left: 15px">剧本名称:{{ form.scriptName }}</span>
          <span style="display: inline-block; margin: 0 5px">/</span>
          <span>剧本描述:{{ form.scriptDesc }}</span>
        </template>
        <i style="position: absolute; right: 5px; font-size: 18px; cursor: pointer; color: #2e2e2e;" class="el-icon-close" @click="dialogVisible = false"></i>
      </div>
      <div v-loading="loading" class="palybook">
        <div class="palybook-tree-panel">
          <ScriptDesignTree ref="menu" :command="command" />
        </div>
        <div ref="canvas" class="palybook-canvas-pannel">
          <ScriptDesignView ref="tree" :command="command">
            <div class="palybook-canvas-footer el-dialog__footer">
              <el-button
                v-if="command !== 'detail'"
                type="warning"
                @click="resetForm"
              >重置</el-button>
              <el-button
                v-if="command !== 'detail'"
                type="primary"
                @click="formVisible = true"
              >提交</el-button>
            </div>
          </ScriptDesignView>
        </div>
      </div>
      <el-dialog divider :visible.sync="formVisible" append-to-body>
        <div slot="title">
          <svg style="vertical-align: middle" t="1617862673763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1135" width="20" height="20"><path d="M256 128c-70.187 0-128 57.813-128 128 0 55.168 35.968 102.187 85.333 120.021v178.646h85.334V375.979C348.032 358.229 384 311.168 384 256c0-70.187-57.813-128-128-128z m512 0a128 128 0 0 0-120.49 85.333H469.332v85.334h178.091a128 128 0 0 0 211.072 47.829A128 128 0 0 0 768 128z m-512 85.333c24.064 0 42.667 18.603 42.667 42.667S280.064 298.667 256 298.667 213.333 280.064 213.333 256s18.603-42.667 42.667-42.667z m469.333 256V640L627.5 737.835a42.667 42.667 0 0 0 0 60.33l110.336 110.336a42.624 42.624 0 0 0 60.33 0l110.336-110.336a42.624 42.624 0 0 0 0-60.33L810.667 640V469.333h-85.334zM170.667 640A42.667 42.667 0 0 0 128 682.667v170.666A42.667 42.667 0 0 0 170.667 896h170.666A42.667 42.667 0 0 0 384 853.333V682.667A42.667 42.667 0 0 0 341.333 640H170.667z" p-id="1136" fill="#4E80F5" /></svg>
          <span>{{ command === 'add'?'新增':command === 'detail'?'查看':'修改' }}</span>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="剧本名称" prop="scriptName">
            <el-input
              v-model="form.scriptName"
              placeholder="请输入剧本名称"
            />
          </el-form-item>
          <el-form-item label="剧本描述" prop="scriptDesc">
            <el-input
              v-model="form.scriptDesc"
              type="textarea"
              placeholder="请输入剧本描述"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            style="margin-left: 5px"
            @click="formVisible = false"
          >取消
          </el-button>
          <el-button
            style="margin-left: 5px"
            type="primary"
            @click="submit"
          ><span>确定</span>
          </el-button>
        </span>
      </el-dialog>
    </manager-dialog>
  </div>
</template>

<script>
import ScriptDesignTree from './ScriptDesignTree.vue'
import ScriptDesignView from './ScriptDesignView.vue'
import { getLayoutInfo, addLayout, editLayout } from '../../api'
export default {
  name: 'Dialog',
  components: { ScriptDesignTree, ScriptDesignView },
  props: {
    command: String,
    data: Object,
    id: Number
  },
  watch: {
    dialogVisible(val) {
      if (val && this.command == 'add') Object.keys(this.form).forEach(key => this.form[key] = null)
    }
  },
  data() {
    return {
      loading: false,
      form: {
        scriptName: null,
        scriptDesc: null
      },
      rules: {
        scriptName: [
          { required: true, message: '请输入剧本名称', trigger: 'blur' }
        ],
        scriptDesc: [
          { required: true, message: '请输入剧本描述', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      formVisible: false
    }
  },
  computed: {
    title() {
      return this.command === 'add'
        ? '新增'
        : this.command === 'modify'
          ? '修改'
          : '查看'
    }
  },
  methods: {
    iterateNode(parent, children) {
      if (children.length !== 0) {
        return children.map((obj) => {
          const leaf = {
            parentId: parent.nodeId,
            nodeId: obj.nodeId,
            layoutId: obj.layoutId,
            nodeName: obj.layoutName,
            nodeType: 'layout',
            renderType: 'card',
            color: null,
            icon: null,
            form: obj.form ? obj.form : null,
            params: obj.params,
            relation: obj.relation,
            children: obj.children ? obj.children : []
          }
          leaf.children = this.iterateNode(leaf, leaf.children)
          return leaf
        })
      } else {
        return children
      }
    },
    handleClose() {
      this.$refs.tree.lines = []
      this.$refs.tree.tree.children = []
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
    },
    search() {
      return new Promise((resolve, reject) => {
        this.loading = true
        getLayoutInfo(this.id)
          .then((resp) => {
            if (resp.data.returnCode == '0') {
              Object.assign(this.form, resp.data.data.scriptlayoutInfo)
              const tree = this.$refs.tree
              tree.lines = resp.data.data.scriptlayoutLine.map((obj) => {
                const line = {
                  ...obj,
                  ...tree.computedPositon(obj)
                }
                return line
              })
              const {
                nodeId,
                resourceName: nodeName,
                resourceId: layoutId,
                children,
                form
              } = resp.data.data.scriptlayoutTree
              const leaf = {
                parentId: '0',
                nodeId,
                layoutId,
                nodeName,
                nodeType: 'resource',
                renderType: 'card',
                color: null,
                icon: null,
                form,
                relation: [],
                children
              }
              leaf.children = this.iterateNode(leaf, leaf.children)
              this.$refs.tree.tree.children.push(leaf)
            }
            this.loading = false
            resolve()
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.loading = false
            reject()
          })
      })
    },
    submit() {
      if (this.$refs.tree.tree.children.length === 0) {
        this.$message.warning('请编排对象')
        return
      } else if (this.$refs.tree.lines.length === 0) {
        this.$message.warning('请关联对象')
        return
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.command == 'add') {
            this.$refs.tree.saveDefault(this.$refs.tree.tree.children)
          }
          const params = {
            scriptlayoutInfo: this.form,
            scriptlayoutTree: this.$refs.tree.tree.children[0],
            scriptlayoutLine: this.$refs.tree.lines
          }
          const todo = this.command === 'add'
            ? addLayout(params) : editLayout(params)
          todo.then((resp) => {
            if (resp.data.returnCode == '0') {
              this.$message.success(`${this.command == 'add' ? '新增' : '修改'}剧本成功`)
              this.form.scriptName = null
              this.form.scriptDesc = null
              this.formVisible = false
              this.dialogVisible = false
              this.$emit('success')
            }
            this.loading = false
          })
        }
      })
    },
    async resetForm() {
      if (this.command == 'add') {
        Object.assign(this.$refs.tree.$data, this.$refs.tree.$options.data())
      } else {
        let lines = JSON.parse(JSON.stringify(this.$refs.tree.lines))
        this.$refs.tree.tree = this.$refs.tree.$options.data().tree
        await this.search()
        setTimeout(() => {
          this.$refs.tree.lines = lines
        }, 300)
      }
    },
    open() {
      this.$refs.menu.getDataSourceList()
      this.$refs.menu.getDataResponse()
      if (this.command !== 'add') {
        this.search()
      }
    }
  }
}
</script>

<style scoped>
.el-dialog__body{
  border: 0;
}
.palybook-canvas-footer{
  position:absolute;
  z-index: 2000;
  right: 0;
  bottom: 0;
}
.palybook {
  display: flex;
  justify-content: space-between;
}
.palybook-tree-panel {
  z-index: 2;
  padding: 15px;
  margin: 10px;
  background: #F1F8FF;
  min-width: 160px;
}
.palybook-canvas-pannel {
  width: 100%;
  height: 100%;
  min-height: 580px;
  border: 1px solid #E1E1E1;
  position: relative;
}
</style>
<style lang="scss">
.layout-dialog{
  .el-dialog__body{
    border-top: 1px solid rgb(244, 244, 244)!important;
  }
}
</style>
