<template>
  <div id="searchMasterData">
    <!-- 左侧的目录 -->
    <div class="tree-wrap" ref="tree_wrap">
      <!--左侧收回框-->
      <div class="recover" ref="recover" @click="recover">&lt;</div>
      <h2>任务目录</h2>
      <div class="title">
        <a-input-search
          placeholder="请输入目录名称"
          style="margin-bottom: 8px"
          @change="onSearch" />
      </div>
      <!--树状结构-->
      <a-tree
        v-if="treeData.length>0 && (!isClose)"
        :replaceFields="{
          title:'label',
          key: 'id',
          children:'children',
          value:'id'
        }"
        show-line
        :defaultExpandAll="true"
        :expandedKeys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :tree-data="treeData"
        @expand="onExpand"
        @select="onClassSelect">
        <template slot="label" slot-scope="{ label }">
          <span v-if="label.indexOf(searchValue) > -1">
            {{ label.substr(0, label.indexOf(searchValue)) }}
            <span style="color: #f50">{{ searchValue }}</span>
            {{ label.substr(label.indexOf(searchValue) + searchValue.length) }}
          </span>
          <span v-else>{{ label }}</span>
        </template>
      </a-tree>
    </div>
    <!-- 右侧表格展示 -->
    <div class="table-wrap" ref="table_wrap">
      <div class="header">
        <div class="title">任务实例</div>
      </div>
      <div class="main">
        <Table
          ref="table"
          class="table"
          :columns="columns"
          :visible="visible"
          :listData="listData"
          :data-source="dataSource"
          @changeParams="changeParams"
          :total="total"></Table>
        <!--弹出对话框-->
        <a-modal
          width="80%"
          title="结果"
          :visible="visible"
          :confirm-loading="confirmLoading"
          @ok="handleOk"
          @cancel="handleCancel"
          :destroyOnClose="true"
        >
          <!--切换运行结果或日志-->
          <div id="audit-wrap">
            <div class="main">
              <a-tabs default-active-key="1">
                <a-tab-pane key="1" tab="运行结果"> <Result :listData="listData" :data1="data1" :data2="data2"/> </a-tab-pane>
                <!-- <a-tab-pane key="2" tab="运行日志" force-render> <Journal/> </a-tab-pane> -->
              </a-tabs>
            </div>
          </div>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
import Journal from './components/Journal'
import Result from './components/Result'
import { taskList, runResult, getTaskInstanceTree } from '@/api/system/taskInstance.js'
import Table from './components/Table.vue'
const dataList = []
const generateList = (data) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i]
    const id = node.id
    const label = node.label
    dataList.push({ id, label: label })
    if (node.children) {
      generateList(node.children)
    }
  }
}
const getParentKey = (key, tree) => {
  let parentKey
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i]
    if (node.children) {
      if (node.children.some((item) => item.id === key)) {
        parentKey = node.id
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children)
      }
    }
  }
  return parentKey
}
export default {
  data() {
    // var vm = this
    return {
      searchValue: '',
      isClose: false,
      data1: [],
      data2: [],
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: ['0-0-0'],
      selectedKeys: [],
      versionsTableData: [],
      treeData: [],
      listData: {},
      visible: false,
      showlista: [],
      tableData: [],
      lifecycleData: [],
      dataSource: [
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验0',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   play: '结果&日志'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验1',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   play: '结果&日志'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验2',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   play: '结果&日志'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验3',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   play: '结果&日志'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验4',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   play: '结果&日志'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验5',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   play: '结果&日志'
        // },
        // {
        //   date: '2020/12/14  12:04:14',
        //   rule: '固定电话格式校验6',
        //   model: '人员模型',
        //   attribute: 'CARD ID 人员',
        //   example: '测试任务1',
        //   state: '失败',
        //   play: '结果&日志'
        // }
      ],
      selectedRowKeys: [],
      confirmLoading: false,
      selectedRows: [],
      dataTemplate: [],
      columns: [
        {
            title: '序号',
            dataIndex: 'orderNum',
            key: 'sort',
            width: 10,
            align: 'center',
            customRender: (text, record, index) => {
              return (<span>{++index}</span>)
            }
        },
        {
          title: '任务实例名称',
          dataIndex: 'taskInstanceName',
          key: 'taskInstanceName',
          align: 'center',
          width: 60
        },
        {
          title: '运行状态',
          width: 30,
          dataIndex: 'runStatus',
          key: 'runStatus',
          align: 'center',
          customRender: (text, record, index) => {
							if (text === '运行失败') {
								return (<span style="color:#f03e3e">{{ text }}</span>)
							} else {
								return (<span class="error">{{ text }}</span>)
							}
						}
        },
        {
          title: '通知状态',
          width: 30,
          dataIndex: 'annStatus',
          key: 'annStatus',
          align: 'center',
          customRender: (text, record, index) => {
							if (text === '失败') {
								return (<span style="color:#f03e3e">{{ text }}</span>)
							} else {
								return (<span class="error">{{ text }}</span>)
							}
						}
        },
        {
          title: '开始时间',
          width: 30,
          dataIndex: 'beginTime',
          key: 'beginTime',
          align: 'center'
        },
        {
          title: '操作',
          width: 30,
          dataIndex: 'play',
          key: 'play',
          align: 'center',
          scopedSlots: { customRender: 'play' }
            // return (<span></span>)
            // var child = vm.$createElement('a', {
            //   domProps: {
            //     innerHTML: text = '结果'
            //   },
            //   on: {
            //     click: function() {
            //       vm.visible = true
            //       vm.showModal(record)
            //     }
            //   },
            //   style: {
            //     cursor: 'pointer'
            //   }
            // })
            // var obj = {
            //   children: child,
            //   attrs: {}
            // }
            // return obj
        }
      ],
      basicId: '',
      params: {
        pageSize: 10,
        pageNum: 1
      },
      total: 5
    }
  },
  components: {
    Table,
    Journal,
    Result
  },
  computed: {},
  created() {},
  mounted() {
    this.getList()
    this.taskInstanceTree()
  },
  methods: {
    // 左侧收回与展开
    recover() {
      if (this.isClose) {
        this.$refs.tree_wrap.style.width = '40%'
        this.$refs.recover.innerHTML = '<'
      } else {
        this.$refs.tree_wrap.style.width = '7%'
        this.$refs.recover.innerHTML = '>'
      }
      this.isClose = !this.isClose
    },
    // 搜索框函数
    onSearch(e) {
      const value = e.target.value
      // console.log(`dataList---`, dataList)
      const expandedKeys = dataList
        .map((item) => {
          if (item.label.indexOf(value) > -1) {
            return getParentKey(item.id, this.treeData)
          }
          return null
        })
        .filter((item, i, self) => item && self.indexOf(item) === i)
      // console.log(`expandedKeys`, expandedKeys)
      Object.assign(this, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true
      })
    },
    addAttr(data) {
      data.map((item) => {
        item.scopedSlots = { title: 'label' }
        if (item.children) this.addAttr(item.children)
      })
      return data
    },
    // 任务实例树形目录
    taskInstanceTree() {
      getTaskInstanceTree().then((res) => {
        this.treeData = this.addAttr(res)
        // console.log(res)
        generateList(this.treeData)
      })
    },
    // 获得列表信息
    getList() {
      const { basicId } = this
      // console.log('basicId >> ', basicId)
      taskList({ basicId, ...this.params }).then((res) => {
        // let lists = []
        if (res.code === 200) {
          this.total = res.total
          // lists = res.rows.reverse()
          this.dataSource = res.rows
          this.$refs.table.selectedRows = []
          this.$refs.table.selectedRowKeys = []
          // console.log('lists :>> ', lists)
        }
      })
    },
    onExpand(selectedKeys) {
      this.expandedKeys = selectedKeys
      this.autoExpandParent = false
    },
    onCheck(checkedKeys) {
      // console.log('onCheck', checkedKeys)
      this.checkedKeys = checkedKeys
    },
    onSelect(selectedKeys, info) {
      // console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    },
    onClassSelect(selectedKeys, info) {
      this.basicId = selectedKeys[0]
      if (selectedKeys[0] === '1') {
        this.basicId = ''
      }
      selectedKeys[0] && this.getList()
      info.node.onExpand()
      // console.log('selected', selectedKeys, info)
    },
    // 以下三个都是弹出对话框的方法
    // showModal() {
    //   this.visible = true
    // },
    showModal(e) {
      this.visible = true
      runResult(e.id).then((res) => {
        if (res.code === 200) {
          this.judge(res.data)
          this.listData = res.data
        }
      })
    },
     handleOk(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 1000)
    },
    handleCancel(e) {
      // console.log('Clicked cancel button')
      this.visible = false
    },
    // 判断赋值
    judge(e) {
      this.data1 = []
      this.data2 = []
      e.data_object.forEach((item) => {
        this.data1.push(item)
        // if (item.rule_type === 0) {
        //   this.data1.push(item)
        // }
        // if (item.rule_type === 1) {
        //   this.data2.push(item)
        // }
      })
    },
    // 改变params
    changeParams(key, value) {
      this.$set(this.params, key, value)
    }
  },
  watch: {
    params: {
      deep: true,
      immediate: true,
      handler(val) {
        this.getList()
      }
    }
  }
}
</script>

<style scoped lang="less">
#searchMasterData {
  padding: 20px;
  display: flex;
  justify-content: space-around;
  .tree-wrap {
    width: 40%;
    margin-right: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    position: relative;
    .recover {
      position: absolute;
      top: 40%;
      right: 0px;
      height: 120px;
      width: 8px;
      background-color: rgba(40, 40, 40, 0.5);
      color: white;
      line-height: 120px;
      cursor: pointer;
      transform: perspective(.5em) rotateY(351deg);
      transform-origin: left;
    }
    h2 {
      position: relative;
      color: #000;
      font-weight: 700;
      font-size: 20px;
      &::before {
        content: '';
        width: 4px;
        height: 26px;
        background-color: #3b75f5;
        position: absolute;
        left: -18px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
.table-wrap {
  min-width: calc(100% - 25%);
  max-width: 100%;
  width: auto;
  background: #fff;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 25px 0;
  box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);
  .header {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0px 20px;
    &::before {
      content: '';
      width: 4px;
      height: 26px;
      background-color: #3b75f5;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    > div {
      font-size: 18px;
      color: #777;
      margin-right: 14px;
      font-weight: 700;
    }
    .title {
      color: #000;
      font-weight: 700;
      font-size: 20px;
      margin-right: 20px;
    }
  }
  .main {
    .table {
      margin: 20px;
    }
  }
}
</style>
