<template>
  <div class="dataset-list">
    <!--    <div class="category-list">-->
    <!--      &lt;!&ndash;      <el-input&ndash;&gt;-->
    <!--      &lt;!&ndash;        v-model="categoryKey" size="small" style="margin-bottom: 20px" @input="onSearchCategory" placeholder="搜索分类"&ndash;&gt;-->
    <!--      &lt;!&ndash;      ></el-input>&ndash;&gt;-->
    <!--      <el-menu :default-active="nowCategoryId" @select="onSelectCategory">-->
    <!--        <el-menu-item :index="0">-->
    <!--          <div class="name" style="flex: 1">全部分类</div>-->
    <!--        </el-menu-item>-->
    <!--        <template v-for="category in categoryList">-->
    <!--          <el-menu-item :key="category.id" :index="category.id">-->
    <!--            <div class="name" style="flex: 1">{{ category.fullName }}</div>-->
    <!--          </el-menu-item>-->
    <!--        </template>-->
    <!--      </el-menu>-->
    <!--    </div>-->
    <div class="JNPF-common-layout-center">
      <div class="my-menu">
        <div style="display: flex">
          <el-input size="mini" v-model="keyword" placeholder="请输入关键词查询" clearable />
          <el-button style="margin-left: 10px" size="mini" type="primary" icon="el-icon-search" @click="initData()">查询</el-button>
          <el-button style="margin-left: 10px" size="mini" icon="el-icon-refresh-right" @click="reset()">重置</el-button>
        </div>
      </div>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <el-table
          :data="flowEngineList"
          ref="JNPFTable"
          :border="true"
          size="small"
          height="100%"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: '' }"
          default-expand-all
          element-loading-text="加载中"
        >
          <el-table-column type="index" width="50" label="序号" align="center" />
          <el-table-column prop="fullName" label="名称" show-overflow-tooltip min-width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.top" style="font-weight: bold">{{ scope.row.fullName }}【{{ scope.row.num }}】</span>
              <span v-else>{{ scope.row.fullName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="表单ID" width="200" />
          <el-table-column prop="creatorUser" label="创建人" width="120" />
          <el-table-column label="创建时间" width="120">
            <template slot-scope="scope">
              {{ scope.row.creatorTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="lastModifyUser" label="最后修改人" width="120" />
          <el-table-column label="最后修改时间" width="120">
            <template slot-scope="scope">
              {{ scope.row.lastModifyTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="状态" width="70" align="center">
            <template slot-scope="scope" v-if="!scope.row.top">
              <el-tag :type="scope.row.state == 1 ? 'success' : 'danger'" disable-transitions> {{ scope.row.state == 1 ? '正常' : '停用' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="160">
            <template slot-scope="scope" v-if="!scope.row.top">
              <!--              <el-button size="mini" type="text" @click="addOrUpdateHandle(scope.row.id)" :disabled="false">编辑</el-button>-->
              <!--              <el-button size="mini" type="text" class="JNPF-table-delBtn" @click="handleDel(scope.row.id)" :disabled="false">删除</el-button>-->
              <el-button size="mini" type="text" class="" @click.native="getSelect(scope.row)" :disabled="false">选择表单</el-button>
              <!--              <el-button size="mini" type="text" class="" @click.native="addPreview(scope.row.id)" :disabled="false">新增预览</el-button>-->
              <!--              <el-dropdown>-->
              <!--                <span class="el-dropdown-link">-->
              <!--                    <el-button type="text" size="mini">更多<i-->
              <!--                      class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
              <!--                    </el-button>-->
              <!--                  </span>-->
              <!--                <el-dropdown-menu slot="dropdown">-->
              <!--                  <el-dropdown-item @click.native="copy(scope.row.id)">-->
              <!--                    复制流程</el-dropdown-item>-->
              <!--                  <el-dropdown-item @click.native="handleExport(scope.row.id)">-->
              <!--                    导出流程</el-dropdown-item>-->
              <!--                  <el-dropdown-item @click.native="preview(scope.row.id)">-->
              <!--                    预览表单</el-dropdown-item>-->
              <!--                </el-dropdown-menu>-->
              <!--              </el-dropdown>-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: right; margin-top: 10px"
          @size-change="settlementSizeChange"
          @current-change="settlementCurrentChange"
          :current-page="page"
          :page-sizes="[3, 5, 10, 20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="limit"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="showEditCategory" title="编辑分类" append-to-body width="400px">
      <el-form size="mini" label-width="80px">
        <el-form-item label="分类名">
          <el-input v-model="addName"></el-input>
        </el-form-item>
      </el-form>
      <el-button size="mini" type="primary" @click="onEditCategoryConfirm" style="width: 100px; margin: 30px auto 0; display: block"> 保存 </el-button>
    </el-dialog>
    <el-dialog :visible.sync="showCategory" title="分类列表" append-to-body>
      <el-table size="mini" :data="categoryList" border row-key="id" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column label="分类名" prop="fullName"></el-table-column>
        <el-table-column label="分类排序" prop="sortCode"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" plain @click="onEditCategory(scope.row)"> 编辑</el-button>
            <el-button size="mini" type="danger" plain @click="onDelCategory(scope.row)"> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { Delete, Copy, exportData, getCateList, getCateInfo } from '@/api/onlineDev/visualDev'

export default {
  name: 'webDesign',
  filters: {
    // 时间格式自定义 只需把字符串里面的改成自己所需的格式
    formatDate(time) {
      if (!time) return '/'
      return XEUtils.toDateString(time, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  data() {
    return {
      page: 1,
      limit: 10,
      total: 10,
      flowEngineList: [],
      categoryList: [],
      keyword: '',
      type: 1,
      listLoading: false,
      formVisible: false,
      addVisible: false,
      nowCategoryId: 0,
      cateId: '',
      addName: '',
      addId: '',
      categoryKey: '',
      showEditCategory: false,
      showCategory: false,
      originHost: null
    }
  },
  created() {
    this.initData()
    this.originHost = document.location.origin
  },
  methods: {
    initData() {
      this.listLoading = true
      getCateList().then((res) => {
        this.categoryList = res.data.data
      })
      this.getListPage()
    },
    getListPage() {
      let query = {
        cateId: this.cateId,
        current: this.page,
        size: this.limit,
        name: this.keyword
      }
      getCateInfo(query).then((res) => {
        this.flowEngineList = res.data.data.records
        this.page = res.data.data.current
        this.limit = res.data.data.size
        this.total = res.data.data.total
        this.listLoading = false
      })
    },
    // 每页数量
    settlementSizeChange(val) {
      this.page = 1
      this.limit = val
      this.getListPage()
    },
    // 当前页
    settlementCurrentChange(val) {
      this.page = val
      this.getListPage()
    },
    reset() {
      this.keyword = ''
      this.initData()
    },
    handleAdd(webType) {
      this.addVisible = false
      this.addOrUpdateHandle('', webType)
    },
    // 新增 / 修改
    addOrUpdateHandle(id, webType) {
      this.formVisible = true
      let token = getToken()
      const keyName = website.key + '-token'
      if (env.NODE_ENV === 'development') {
        window.open(`http://localhost:1888/work/#/form/webDesign?token=${token}&id=${id}&type=${this.type}&webType=${webType}`)
      } else if (env.NODE_ENV === 'production') {
        window.open(this.originHost + `/work/#/form/webDesign?token=${keyName}&id=${id}&type=${this.type}&webType=${webType}`)
      }
    },
    handleDel(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续？', '提示', {
        type: 'warning'
      })
        .then(async () => {
          const param = new URLSearchParams()
          param.append('id', id)
          const res = await Delete(param)
          if (res.data.code === 200) {
            this.$message({ type: 'success', message: res.data.msg })
            this.initData()
          }
        })
        .catch(() => {})
    },
    copy(id) {
      this.$confirm('您确定要复制该流程表单, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          Copy(id).then((res) => {
            this.$message({
              type: 'success',
              message: res.data.msg,
              duration: 1000,
              onClose: () => {
                this.initData()
              }
            })
          })
        })
        .catch(() => {})
    },
    handleExport(id) {
      this.$confirm('您确定要导出该流程, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          exportData(id).then((res) => {
            if (res.data.data.url) window.location.href = website.url + res.data.data.url
          })
        })
        .catch(() => {})
    },
    preview(id) {
      let token = getToken()
      const keyName = website.key + '-token'
      if (env.NODE_ENV === 'development') {
        window.open(`http://localhost:1888/work/#/previewModel?isPreview=1&token=${token}&id=${id}`)
      } else if (env.NODE_ENV === 'production') {
        window.open(this.originHost + `/work/#/previewModel?isPreview=1&token=${keyName}&id=${id}`)
      }
    },
    addPreview(id) {
      let token = getToken()
      const keyName = website.key + '-token'
      if (env.NODE_ENV === 'development') {
        window.open(`http://localhost:1888/work/#/dataCreate?token=${token}&id=${id}`)
      } else if (env.NODE_ENV === 'production') {
        window.open(this.originHost + `/work/#/dataCreate?token=${keyName}&id=${id}`)
      }
    },
    //分类切换
    onSelectCategory(index) {
      this.cateId = index === 0 ? '' : index
      this.getListPage()
    },
    //添加分类
    onEditCategory(category) {
      if (!category) {
        this.addName = ''
        this.addId = ''
      } else {
        this.addName = category.fullName
        this.addId = category.id
      }
      this.showEditCategory = true
    },
    //提交修改或添加
    async onEditCategoryConfirm() {
      if (!this.addName) return this.$message({ type: 'warning', message: '请填写分类名' })
      const param = new URLSearchParams()
      param.append('name', this.addName)
      if (this.addId) {
        param.append('id', this.addId)
      }
      const formMethod = this.addId ? getCateUpdate : getCateAdd
      const res = await formMethod(param)
      if (res.data.code === 200) {
        this.$message({ type: 'success', message: '保存成功' })
        this.initData()
        this.showEditCategory = false
      }
    },
    //删除
    onDelCategory(row) {
      this.$confirm('确定删除此分类?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getCateDelete({ id: row.id })
          .then((res) => {
            this.$message({ type: 'success', message: '删除成功' })
            this.initData()
          })
          .catch(() => {})
      })
    },
    //分类搜索
    onSearchCategory(k) {
      this.categoryList = this.categoryList.filter((i) => i.fullName.includes(k))
    },

    getSelect(row) {
      this.$emit('getSelect', row)
    }
  }
}
</script>

<style lang="scss" scoped>
.dataset-list {
  display: flex;
  height: 100%;
  .el-menu-item.is-active {
    color: #ffffff !important;
  }
  .btns {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    .el-button {
      width: 125px;
    }
  }
  .category-list {
    flex: 0 0 260px;
    padding-top: 10px;
    padding-right: 10px;
    border-right: 1px solid #ccc;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .el-menu {
      flex: 1;
      overflow-y: auto;
      .el-menu-item {
        padding: 0 5px 0 10px;
        display: flex;
        align-items: center;
        height: 50px;
        line-height: 50px;
        .is-active {
          color: #fff2f5;
        }
        .name {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .main-wrapper {
    flex: 1;
    padding: 10px 10px 0;
    overflow-y: auto;
  }

  .JNPF-flex-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .JNPF-common-layout-center {
    padding-left: 10px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .JNPF-common-search-box {
    background: #fff;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-bottom: 10px;
    padding: 15px 10px 0;
    position: relative;
  }
  .JNPF-common-search-box .el-form-item {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 14px !important;
  }
  ::v-deep .JNPF-common-search-box .el-form-item .el-form-item__content {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  ::v-deep .JNPF-common-search-box .el-form-item .el-form-item__label {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 12px;
  }
  .JNPF-common-search-box .el-form-item .el-input,
  .JNPF-common-search-box .el-form-item .el-select,
  .JNPF-common-search-box .el-form-item .el-cascader,
  .JNPF-common-search-box .el-form-item .comSelect-container,
  .JNPF-common-search-box .el-form-item .el-date-editor {
    width: 100%;
  }
  .JNPF-common-layout-center .JNPF-common-layout-main {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 0 10px;
    background-color: #fff;
    height: 100%;
    overflow: hidden;
  }
}
</style>
