<template>
  <div class="wraaap">
    <div class="left">
      <BaseMenuTree
        :menuData="treeData"
        :filterShow="true"
        :Allshow="false"
        :treeButton="false"
        :filterButtonShow="false"
        style="height: 100%"
        :treeProps="treeProps"
        @handleNodeClick="homeHandleNodeClick"
        ref="menuTree"
        @add="treeAddHandle"
        @append="treeAppendHandle"
        @revise="treeReviseHandle"
        @remove="treeRemoveHandle"
      ></BaseMenuTree>
    </div>
    <div class="right">
      <header style="background: #fff; padding: 20px">
        <div class="search">
          <BaseNewForm
            :spanNumber="8"
            refName="searchForm"
            :formRow="SearchformRow"
            :formRule="false"
            :ruleForm="searchForm"
            :newFlag="true"
            :isFunBtn="false"
          ></BaseNewForm>
        </div>
        <div class="btn">
          <el-button type="primary" @click="newPage">新增</el-button>
          <el-button type="primary" @click="searchHandle">搜索</el-button>
          <el-button @click="resizeSearchHandle">重置</el-button>
        </div>
      </header>
      <main style="background: #fff; padding: 0px 0px 0">
        <div>
          <BaseTable
            ref="mainTable"
            :tableData="tableData"
            :tableColumn="tableColumn"
            :funData="funData"
            :funWidth="funWidth"
            :showIndex="true"
            :tabLoading="mainTabLoading"
            @onFunc="tableButtonHandle"
            :tableHeight="'53vh'"
            :border="false"
          >
            <template #taskStatus="{row}">
              {{ row.taskStatus == 1 ? '启用' : '停用' }}
            </template>
            <template #taskPlugin="{row}">
              {{ pluginDist[row.taskPlugin] }}
            </template>
          </BaseTable>
        </div>
      </main>
      <footer>
        <basePage
          :pageModel="pageModel"
          @update:pageModel="currentChangeHandle"
        ></basePage>
      </footer>
    </div>
    <baseRightDialog
      @handleConfirmClick="handleConfirmClick"
      :dialogVisible="rightDialogSwitch"
      :title="treeTitle"
      @handleClose="rightDialogSwitch = false"
    >
      <div class="treeChunk" v-if="treeRuleForm.class_superiors_name">
        <div class="text">上级节点：</div>
        <div class="input">
          <el-input
            :disabled="true"
            v-model="treeRuleForm.class_superiors_name"
            placeholder=""
          ></el-input>
        </div>
      </div>
      <div class="treeChunk">
        <div class="text">节点名：</div>
        <div class="input">
          <el-input
            v-model="treeRuleForm.class_name"
            placeholder="请输入节点名"
          ></el-input>
        </div>
      </div>
    </baseRightDialog>
  </div>
</template>

<script>
import basePage from './compoments/basePage.vue'
import BaseMenuTree from './compoments/baseMenuTree'
import BaseNewForm from './compoments/baseNewForm'
import BaseTable from './compoments/baseTable'
import { getUserModuleApi } from '@/api/integrationOption/integrationOption.js'
import baseRightDialog from '@/components/base/baseRightDialog'
import { authApi } from '@/api/apis/auth'

export default {
  data() {
    return {
      rightDialogSwitch: false, //右侧dialog
      lookFlag: false, //是否打开查看模式
      newFlag: false, //是否打开新增模式
      pageModel: {
        //页码控制
        pageIndex: 1,
        total: 10,
        limit: 10
      },
      mainTabLoading: false, //表格loding控制
      treeData: [
        //左侧分类数据
        {
          label: '测试',
          id: 1,
          children: [
            {
              id: 3,
              label: '哈哈'
            }
          ]
        }
      ],
      treeForm: { class_name: '', class_superiors: '', class_code: '' },
      searchForm: {}, //搜索框数据
      SearchformRow: [
        //搜索框数据
        {
          elCol: [
            {
              type: 'input',
              title: '任务编码',
              id: 'taskCode',
              row: 8
            },
            {
              type: 'input',
              title: '任务名称',
              id: 'taskName',
              row: 8
            },
            {
              type: 'radio',
              title: '任务状态',
              id: 'taskStatus',
              row: 8,
              options: [
                {
                  label: '启用',
                  id: '1'
                },
                {
                  label: '停用',
                  id: '2'
                }
              ]
            }
          ]
        }
        ,
        {
          elCol: [
            {
              type: 'select',
              title: '插件',
              id: 'taskPlugin',
              row: 8,
              options: []
            }
          ]
        }
      ],
      funData: [
        //table操作
        {
          type: 'edit',
          text: '编辑',
          color: '#5a9cf8'
        },
        {
          type: 'view',
          text: '查看',
          color: '#5a9cf8'
        },
        {
          type: 'start',
          text: '启用',
          color: '#5a9cf8'
        },
        {
          type: 'stop',
          text: '停用',
          color: '#e47470'
        },
        {
          type: 'dele',
          text: '删除',
          color: '#e47470'
        }
      ],
      tableData: [], //table主表数据
      tableColumn: [
        //数据咧数据
        {
          id: 'taskName',
          title: '任务名称'
        },
        {
          id: 'taskCode',
          title: '任务编码'
        },
        {
          id: 'taskStatus',
          title: '任务状态'
        },
        {
          id: 'taskPlugin',
          title: '插件'
        },
        {
          id: 'taskCron',
          title: '任务策略'
        }
      ],
      treeProps: {
        children: 'childClassifications',
        label: 'name'
      },
      treeTitle: '',
      treeRuleForm: {},
      treeAddFlag: false,
      appId: '',//左侧树id
      pluginDist: {}//插件字典用于列表显示
    }
  },
  methods: {
    // 右dialog提交
    async handleConfirmClick() {
      if (!this.treeRuleForm.class_name) {
        this.$message({
          type: 'error',
          message: '请输入树名称'
        })
        return
      }
      if (this.treeAddFlag) {
        const res = await getUserModuleApi(
          {
            tl: 'integrationTaskClassificationService',
            as: 'integrationTaskClassification',
            dj: 'saveTaskClassification'
          },
          this.treeRuleForm
        )
        if (res.status == 200) {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.rightDialogSwitch = false
          this.initTreeData()
        }
      } else {
        const res = await getUserModuleApi(
          {
            tl: 'integrationTaskClassificationService',
            as: 'integrationTaskClassification',
            dj: 'updateTaskClassification'
          },
          this.treeRuleForm
        )
        if (res.status == 200) {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
          this.rightDialogSwitch = false
          this.initTreeData()
        }
      }
    },
    // 树初始化
    async initTreeData() {
      const res = await getUserModuleApi(
        {
          tl: 'sysApplicationService',
          as: '',
          dj: 'queryEntity'
        },
        {}
      )
      if (res.status == 200) {
        this.treeData = res.attribute
        this.$nextTick(() => {
          this.$refs.menuTree.clickFirst()
        })
      }
    },
    // 树添加
    treeAppendHandle(data) {
      this.treeRuleForm = {}
      this.treeTitle = '子节点增加'
      this.treeAddFlag = true
      this.$set(this.treeRuleForm, 'class_superiors_name', data.class_name)
      this.$set(this.treeRuleForm, 'class_superiors', data.id)
      this.$set(this.treeRuleForm, 'class_code', data.class_code)
      this.$set(this.treeRuleForm, 'lvl', String(data.lvl * 1 + 1))
      this.rightDialogSwitch = true
    },
    treeReviseHandle(data) {
      this.treeRuleForm = {}
      this.treeAddFlag = false
      this.rightDialogSwitch = true
      this.$set(this.treeRuleForm, 'id', data.id)
      this.$set(this.treeRuleForm, 'class_code', data.class_code)
      this.$set(this.treeRuleForm, 'class_name', data.class_name)
      this.$set(this.treeRuleForm, 'lvl', String(data.lvl))
      this.treeTitle = '子节点编辑'
    },
    treeRemoveHandle(data) {
      this.$confirm('确认删除？')
        .then(async() => {
          const res = await getUserModuleApi(
            {
              tl: 'integrationTaskClassificationService',
              as: 'integrationTaskClassification',
              dj: 'updateTaskClassificationSts'
            },
            {
              id: data.id //任务id
            }
          )
          if (res.status == 200) {
            this.$nextTick(() => {
              this.initTreeData()
            })
          }
        })
        .catch(() => {
        })
    },
    // 左侧树加号点击事件
    treeAddHandle() {
      this.treeRuleForm = {}
      this.treeAddFlag = true
      this.rightDialogSwitch = true
      this.treeTitle = '根节点增加'
      this.$set(this.treeRuleForm, 'class_code', new Date().getTime())
      this.$set(this.treeRuleForm, 'lvl', '0')
    },
    // 初始化表单
    async initTableData(obj = {}) {
      const res = await getUserModuleApi(
        {
          tl: 'integrationTaskService',
          as: '',
          dj: 'queryEntityPage'
        },
        {
          pageNum: this.pageModel.pageIndex,
          pageSize: this.pageModel.limit,
          task_app: this.appId,
          ...obj
        }
      )
      if (res.status == 200) {
        this.tableData = res.attribute.list
        this.pageModel.total = res.attribute.total
      }
    },
    // 搜索按钮
    searchHandle() {
      this.initTableData({ ...this.searchForm })
    },
    // 重置按钮
    resizeSearchHandle() {
      this.searchForm = {}
    },
    // 新建路由跳转
    newPage() {
      this.$router.push({ name: 'taskAdd' })
    },
    // 树点击事件
    homeHandleNodeClick(data) {
      this.pageModel.pageIndex = 1
      this.pageModel.total = 0
      this.pageModel.limit = 10
      this.appId = data.id
      this.searchForm = {}
      this.tableData = []
      this.lookFlag = false
      this.newFlag = false
      //树点击完毕后调用插件查询接口
      this.plugSelectInit()
      //初始化表单
      this.initTableData()
    },
    //查询条件下啦接口
    async plugSelectInit() {
      const res = await authApi('sysApplicationPluginService', '', 'queryEntity', '', {
        appId: this.appId
      })
      if (res.status === '200') {
        this.pluginDist = {}
        res.attribute.forEach(item => {
          item.label = item.pluginName
          this.$set(this.pluginDist, item.id, item.label)
        })
        this.SearchformRow[1].elCol[0].options = res.attribute
      }
    },
    // 页面
    currentChangeHandle(pageModel) {
      this.pageModel = pageModel
      this.$nextTick(() => {
        this.initTableData({ ...this.searchForm })
      })
    },
    // 表格按钮
    async tableButtonHandle(val, item) {
      if (item.type === 'view') {
        this.$router.push({
          name: 'taskAdd',
          query: { id: val.id, lookFlag: true }
        })
      } else if (item.type === 'dele') {
        this.$confirm('确认删除？')
          .then(async() => {
            const res = await getUserModuleApi(
              {
                tl: 'integrationTaskService',
                as: '',
                dj: 'deleteEntity'
              },
              {
                id: val.id //任务id
              }
            )
            if (res.status == 200) {
              if (
                this.pageModel.total - 1 + this.pageModel.limit <=
                this.pageModel.pageIndex * this.pageModel.limit
              ) {
                this.pageModel.pageIndex--
              }
              this.$nextTick(() => {
                this.$vmNews('删除成功', 'success')
                this.initTableData({ ...this.searchForm })
              })
            }
          })
          .catch((err) => {
          })
      } else if (item.type === 'edit') {
        this.$router.push({ name: 'taskAdd', query: { id: val.id } })
      } else if (item.type === 'start') {
        const res = await authApi('integrationTaskService', '', 'enableDisableEntity', '', {
          'id': val.id,
          'taskStatus': '1' //1、启用2、停用
        })
        if (res.status === '200') {
          this.$vmNews(res.msg, 'success')
          this.initTableData()
        }
      } else if (item.type === 'stop') {
        const res = await authApi('integrationTaskService', '', 'enableDisableEntity', '', {
          'id': val.id,
          'taskStatus': '2' //1、启用2、停用
        })
        if (res.status === '200') {
          this.$vmNews(res.msg, 'success')
          this.initTableData()
        }
      }
    }
  },
  components: {
    BaseMenuTree,
    BaseNewForm,
    BaseTable,
    basePage,
    baseRightDialog
  },
  mounted() {
    // this.$refs.menuTree.clickFirst();
    // this.initTableData()
    this.initTreeData()
  },
  computed: {
    // 操作框的宽度
    funWidth() {
      return this.funData.length * 70
    }
  }
}
</script>

<style scoped lang="scss">
.treeChunk {
  padding: 20px;
  display: flex;
  align-items: center;

  > .text {
    flex: 1;
  }

  > .input {
    flex: 5;
  }
}

.wraaap {
  display: flex;

  .right {
    width: 85%;
    margin-left: 20px;
    border-radius: 20px !important;
  }

  .left {
    border-radius: 20px;
    width: 15%;
    background-color: #fff;
  }

  .btn {
    display: flex;
    justify-content: flex-end;
  }

  main {
    margin-top: 20px;
    border-radius: 20px;
  }

  footer {
    margin-top: 15px;
  }

  header {
    border-radius: 20px;
  }
}
</style>
