<template>
  <manager-dialog class="arrangementObjectManagementTestDialog" title="剧本测试" :visible.sync="dialogVisible" @open="search" @close="form = {}">
    <div class="subhead">测试头部</div>
    <el-form ref="headForm" :model="headForm" label-width="auto">
      <el-tree default-expand-all :data="headerTreeFormList" :props="defaultProps">
        <div slot-scope="{ data }">
          <el-form-item :label="data.label" :prop="data.prop" :rules="[{ required: data.required, message: `请输入${data.label}`}]">
            <el-input
              v-model="headForm[data.prop]"
              placeholder="请输入"
              size="mini"
            />
          </el-form-item>
        </div>
      </el-tree>
    </el-form>
    <div class="subhead">测试内容</div>
    <el-form ref="form" :model="form" label-width="auto">
      <el-tree default-expand-all :data="treeFormList" :props="defaultProps">
        <div slot-scope="{ data }">
          <el-form-item :label="data.label">
            <el-select
              v-if="data.dataType == 'array'"
              v-model="form[data.prop]"
              placeholder="请输入"
              size="mini"
              multiple
              filterable
              allow-create
              default-first-option
            >
              <el-option v-for="(item, index) in form[data.prop]" :key="index" :labe="item" :value="item"></el-option>
            </el-select>
            <el-input
              v-else-if="!data.children && data.input"
              v-model="form[data.prop]"
              placeholder="请输入"
              size="mini"
            />
          </el-form-item>
        </div>
      </el-tree>
    </el-form>
    <div class="subhead">测试结果</div>
    <el-input type="textarea" :autosize="{ minRows: 2 }" v-model="returnJson" resize="none" disabled />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button @click="resetForm">重置</el-button>
      <el-button type="primary" :loading="testLoading" @click="submit">测试</el-button>
    </span>
  </manager-dialog>
</template>

<script>
import { testObject,
  getLayout } from '../api'
export default {
  name: 'TestDialog',
  props: {
    row: Object
  },
  watch: {
    dialogVisible(val) {
      if (val) this.resetData()
    }
  },
  data() {
    return {
      testLoading: false,
      dialogVisible: false,
      treeFormVisible: false,
      headForm: {},
      form: {},
      treeList: [],
      treeFormList: [],
      headerTreeList: [],
      headerTreeFormList: [],
      returnJson: null,
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    resetData() {
      this.headForm = {}
      this.form = {}
      this.treeList = []
      this.treeFormList = []
      this.headerTreeList = []
      this.headerTreeFormList = []
      this.returnJson = null
    },
    setTreeParam(tree, keys) {
      return tree.map(el => {
        let obj = {}
        if (keys.includes(el.prop)) {
          el.value = this.form[el.prop]
        }
        let hasNode = el.children && el.children.length
        if (hasNode) {
          let tmp = this.setTreeParam(el.children, keys)
          tmp.forEach(item => obj[item.prop] = item.value)
        }
        return {
          prop: el.prop,
          value: el.value,
          [el.prop]: hasNode ? obj : el.value
        }
      })
    },
    searchTree() {
      if(this.treeList[0].tree!=null){
        this.treeFormList = this.iterateValue(this.treeList[0].tree)
      }else{
        this.treeFormList = this.iterateValue(this.treeList)
      }
      if(this.headerTreeList.length && this.headerTreeList[0].tree!=null){
        this.headerTreeFormList = this.iterateValue(this.headerTreeList[0].tree, 'headForm')
      }else{
        this.headerTreeFormList = this.iterateValue(this.headerTreeList, 'headForm')
      }
    },
    iterateValue(arr, attrName = 'form') {
      return arr.map((obj) => {        
        const leaf = {
          prop: obj.paramCode,
          label: obj.paramName,
          input: obj.paramType == 1,
          value: obj.value ? obj.value : (obj.dataType == 'array' ? [] : null),
          required: obj.required,
          dataType: obj.dataType
        }
        this.$set(this[attrName], leaf.prop, leaf.value)
        if (obj.childTree) {
          leaf.children = this.iterateValue(obj.childTree)
        }
        return leaf
      })
    },
    search() {
      getLayout(this.row.layoutId)
        .then((resp) => {
          if (resp.data.returnCode == '0') {
            const treeList = resp.data.data.list.filter((obj) => obj.childTree)
            if(treeList!=null&&treeList.length>0){
              this.treeList = treeList.map((obj) => {
                return {
                  prop: obj.paramCode,
                  label: obj.paramName,
                  tree: obj.childTree
                }
              })
            }else{
              console.log(resp.data.data.list)
              this.treeList = resp.data.data.list.map((obj) => {
                return {
                  paramCode: obj.paramCode,
                  paramName: obj.paramName,
                  paramType: obj.paramType,
                  value: obj.value ? obj.value : null,
                  required: obj.requiredFlag == '1'
                }
              })
            }
            const headerTreeList = resp.data.data.list.filter(obj => obj.paramType == 3)
            if (headerTreeList != null && headerTreeList.length) {
              this.headerTreeList = headerTreeList.map((obj) => {
                return {
                  paramCode: obj.paramCode,
                  paramName: obj.paramName,
                  paramType: obj.paramType,
                  value: obj.value ? obj.value : null,
                  required: obj.requiredFlag == '1'
                }
              })
            }
            this.searchTree()
          }
        })
    },
    resetForm() {
      this.searchTree()
      this.returnJson = null
    },
    submit() {
      this.$refs.headForm.validate(valid => {
        if (valid) {
          this.testLoading = true
          let customTree = this.setTreeParam(JSON.parse(JSON.stringify(this.treeFormList)), Object.keys(this.form))
          let layoutObjectParam = {}
          customTree.forEach(el => layoutObjectParam[el.prop] = el[el.prop])
          testObject({
            layoutId: this.row.layoutId,
            layoutObjectParam,
            layoutObjectHeader: this.headForm
          })
            .then((resp) => {
              if (resp.data.returnCode == '0') {
                this.returnJson = resp.data.data
              }
              this.testLoading = false
            })
            .catch((error) => {
              this.$message.error(error.message)
              this.testLoading = false
            })
        }
      })
    }
  }
}
</script>

<style>
.el-tree-node__content {
  height: 36px !important;
}
.subhead {
  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';
  font-weight: 650;
  font-style: normal;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.847058823529412);
  line-height: 24px;
  margin: 15px 0;
}

</style>

<style lang="scss" scoped>
.arrangementObjectManagementTestDialog {
  ::v-deep .el-tree .el-form-item {
    margin-bottom: 0;
    .el-select__tags {
      flex-wrap: nowrap;
    }
  }
}
</style>