<template>
  <div class='childProcess' id='childProcess'>
    <el-dialog title="子流程触发配置" width="65%" :visible.sync="isDialogsVisible" :append-to-body="true"
      :close-on-click-modal="false" :close-on-press-escape="false" class="childDialog">
      <div>
        <el-form :model="form" label-width="100px">
          <!-- <el-row v-if="childProcessInfo.type !== 'gatewayNetwork'">
              <el-col :span="24">
                <el-form-item label="触发方式">
                  <el-radio-group v-model="form.radio">
                    <el-radio :label="1">节点通过触发</el-radio>
                    <el-radio :label="2">节点驳回触发</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
          </el-row> -->
          <el-row>
              <el-col :span="6">
                <el-tree ref="tree" class="filter-tree elTree" :props="props" :data="form.treeData" node-key="id" @node-click="nodeClick">
                  <div slot-scope="{ node, data }" class="custom-tree-node w100">
                    <p :title="node.label">
                      {{ node.label }}
                    </p>
                  </div>
                </el-tree>
              </el-col>
               <el-col :span="18">
                <el-form-item label="逻辑判断">
                  <el-radio-group v-model="form.comtype">
                    <el-radio disabled :label="1">满足所有条件或者子组合</el-radio>
                    <el-radio disabled :label="2">满足任一条件或者子组合</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-table :data="form.list" class="main_tab" stripe border element-loading-spinner="el-icon-loading">
                  <el-table-column label="序号" type="index" width="50" />
                  <el-table-column label="触发条件" prop="title">
                  </el-table-column>
                  <el-table-column label="条件类型" prop="version"/>
                  <el-table-column label="条件结果" prop="uploadon"/>
                  <el-table-column label="子流程名称" prop="name"/>
                  <el-table-column label="循环发起" prop="name1"/>
                  <el-table-column label="控制字段" prop="name2"/>
                  <el-table-column width="50" label="操作">
                    <template slot-scope="scope">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="查看"
                        placement="top"
                      >
                        <el-button
                          type="text"
                          @click="view(scope.row)"
                        >查看</el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmForm">确 定</el-button>
        <el-button @click="isDialogsVisible = false">取 消</el-button>
      </div>
    </el-dialog>
     <el-dialog title="配置字段对应关系" width="50%" :visible.sync="isWordDialogsVisible" :append-to-body="true"
      :close-on-click-modal="false" :close-on-press-escape="false" class="childConfigDialog">
      <div>
        <el-form :model="wordForm" label-width="100px">
          <!-- <el-row>
              <el-col :span="24">
                <el-form-item label="主流程名称">
                  <el-input v-model="wordForm.name" disabled/>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="子流程类型">
                <el-input v-model="wordForm.name" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="子流程名称">
                <el-input v-model="wordForm.name" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
           <el-row>
            <el-col :span="12">
              <el-form-item label="服务名称">
                <el-input v-model="wordForm.name" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="请求方式">
                <el-input v-model="wordForm.post" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="服务地址">
                <el-input v-model="wordForm.address" disabled/>
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="wordForm.mark" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
             <el-tabs
              v-model="activeName"
              type="border-card"
            >
              <!-- 请求参数 -->
              <el-tab-pane
                name="first"
                label="请求参数"
              >
                <el-table :data="form.list" class="main_tab" stripe border element-loading-spinner="el-icon-loading">
                    <el-table-column label="主流程字段" prop="name">
                    </el-table-column>
                    <el-table-column label="子流程字段" prop="title" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane
                name="second"
                label="响应参数"
              >
              <el-table :data="form.list" class="main_tab" stripe border element-loading-spinner="el-icon-loading">
                    <el-table-column label="主流程字段" prop="name">
                    </el-table-column>
                    <el-table-column label="子流程字段" prop="title" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="isWordDialogsVisible = false">确 定</el-button>
        <el-button @click="isWordDialogsVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getParam,
} from '../../utils/utils'
import {
  getCombinationList,
  getConditionList,
  getRelationList
} from '../../api/childProcessDialog'
export default {
  data() {
    return {
      isDialogsVisible: false,
      form: {
        radio: 1,
        comtype: 1,
        treeData: [
        //   {
        //   label: '一级 1',
        //   children: [{
        //     label: '二级 1-1',
        //     children: [{
        //       label: '三级 1-1-1'
        //     }]
        //   }]
        // }, {
        //   label: '一级 2',
        //   children: [{
        //     label: '二级 2-1',
        //     children: [{
        //       label: '三级 2-1-1'
        //     }]
        //   }, {
        //     label: '二级 2-2',
        //     children: [{
        //       label: '三级 2-2-1'
        //     }]
        //   }]
        // }, {
        //   label: '一级 3',
        //   children: [{
        //     label: '二级 3-1',
        //     children: [{
        //       label: '三级 3-1-1'
        //     }]
        //   }, {
        //     label: '二级 3-2',
        //     children: [{
        //       label: '三级 3-2-1'
        //     }]
        //   }]
        // }
        ],
        list: [
        //   {
        //   name: '1',
        //   name1: '22',
        //   name2: '333',
        //   title: '221313'
        // }
        ]
      },
      isWordDialogsVisible: false,
      wordForm: {
        post: '213',
        mark: '131'
      },
      activeName: 'first',
      props: {
        label: function (data, node) {
          return data.label
        },
        children: 'children',
      },
      childProcessInfo: {},
      processInfo: {}
    };
  },
  methods: {
    nodeClick (data) {

    },
    view (row) {
      this.isWordDialogsVisible = true
    },
    confirmForm() {
      this.isDialogsVisible = false
    },
    close() {
      // this.isDialogsVisible = false
    },
    showDialog(){
      const id = JSON.parse(sessionStorage.getItem('processInfo'))?.id
      if(id){
      // this.isDialogsVisible = true
        console.log('window.location.href',window.location.href)
        console.log('setTimeout',getParam('id'))
        this.dialogParams = {
          ...this.dialogParams,
          modelid: getParam('listid'),
          bpmid: getParam('id'),
          treeId: getParam('id')
        }
        console.log(this.dialogParams)
        this.isDialogsVisible = true
        console.log('setTimeout2',this.isDialogsVisible)
      }else{
          this.$confirm('请先保存流程图')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    },
    // getParam(paramName) {
    // let paramValue = "";
    // let isFound = false;
    // if (location.search.indexOf("?") == 0 && location.search.indexOf("=") > 1) {
    //     let arrSource = decodeURI(location.search).substring(1, location.search.length).split("&"), i = 0;
    //     while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++
    // }
    // return paramValue == "" && (paramValue = null), paramValue
    // }
  },
  computed: {},
  mounted() {
    this.childProcessInfo = JSON.parse(sessionStorage.getItem('childProcessInfo'))
    this.processInfo = JSON.parse(sessionStorage.getItem('processInfo')) || {}
    let version = !!this.processInfo.item ? (this.processInfo.item.version || undefined) : undefined
    console.log(this.childProcessInfo, this.processInfo, 'childProcessInfo')
    this.isDialogsVisible = true
    getCombinationList(this.childProcessInfo.curId, version).then((res) => {
      getConditionList(this.childProcessInfo.curId, res.data.type || 'output', version).then((resp) => {

      })
      getRelationList(this.childProcessInfo.curId, version).then((rt) => {

      })
    })
  }

};
</script>
<style scoped lang="scss">
.childProcess {
  height: 0;
  overflow: hidden;
}
</style>
<style lang='scss'>

</style>
