<template>
  <div class="common-page-content">
    <div class="common-search-container" ref="contentPanel">
      <el-form v-form
        data-vv-scope="form"
        label-width="auto"
        label-position="right "
        :inline="true">
            <el-form-item label="标题关键字查询">
              <el-input
                clearable
                v-model="querys[1].value"
                placeholder="请输入关键字"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                class="form_date_picker"
                v-model="querys[2].value"
                type="datetimerange"
                size="small"
                format="yyyy-MM-DD HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
            <el-button
              type="primary"
              @click="handleSearch"
              icon="el-icon-search"
            >
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">
              重置
            </el-button>
      </el-form>
    </div>
    <el-row
      class="common-table-container flex searchPanel"
    >
      <el-col :span="24" class="common-table-wrapper">
        <div class="common-table-content btn-pagenation" ref="contentPanel">
          <el-table
            border
            size="mini"
            v-loading="loading"
            ref="multipleSelection"
            :data="tableData"
            :style="{width: '100%'}"
            height="100%"
            :header-cell-style="{'text-align': 'center'}"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              fixed
              type="index"
              width="55"
              align="center"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              min-width="160"
              fixed
              align="center"
              prop="subject"
              label="标题"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="110"
              fixed
              align="center"
              prop="procDefName"
              label="流程名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="110"
              fixed
              align="center"
              prop="name"
              label="流程节点"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="100"
              fixed
              align="center"
              prop="status"
              label="状态"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div>
                  <el-tag type="success" v-if="scope.row.status == 'NORMAL'"
                    >待办</el-tag
                  >
                  <el-tag type="danger" v-if="scope.row.status == 'BACK'"
                    >被驳回</el-tag
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              min-width="110"
              fixed
              align="center"
              prop="ownerName"
              label="审核人"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="110"
              fixed
              align="center"
              prop="createTime"
              label="创建时间"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
          <el-pagination
            ref="paginationPanel"
            align="right"
            class="bbsl-pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParam.pageBean.page"
            :page-sizes="[50, 200, , 500]"
            :page-size="queryParam.pageBean.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {TableMixin} from '@/mixins/tableMixin'
import api from '@/api/basicData.js'
export default {
  name: 'CardNumberMangment',
  mixins: [TableMixin],
  components: {},
  data() {
    return {
      params: {},
      multipleSelection: [],
      addBank: false,
      pageTotal: 0,
      loading: false,
      tableData: [{}],
      dialogVisible: false,
      queryParam: {
        querys: [],
        pageBean: {
          page: 1,
          pageSize: 20,
        },
      },
      querys: [
        {
          group: 'main',
          operation: 'EQUAL',
          parentGroup: '',
          property: 'procDefKey',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'subject',
          relation: 'AND',
          value: '',
        },
        {
          group: 'main',
          operation: 'BETWEEN',
          parentGroup: '',
          property: 'createTime',
          relation: 'AND',
          value: '',
        },
      ],
    }
  },
  created() {
    this.loadData()
  },
  mounted() {},
  methods: {
    // 重置
    handleReset() {
      this.querys[1].value = ''
      this.querys[2].value = ''
      this.loadData()
    },
    //
    loadData() {
      this.loading = true
      this.tableData = []
      this.queryParam.querys = []
      if (this.querys[0].value) {
        this.queryParam.querys.push(this.querys[0])
      }
      if (this.querys[1].value) {
        this.queryParam.querys.push(this.querys[1])
      }
      if (this.querys[2].value) {
        this.queryParam.querys.push(this.querys[2])
      }
      this.queryParam.sorter = [
        {
          direction: 'DESC',
          property: 'createTime',
        },
      ]
      this.$http.post('${portal}/myTask/getTaskList', this.queryParam).then((res) => {
        console.log(res, 'res')
        this.tableData = res.data.rows
        this.pageTotal = res.data.total
        this.queryParam.pageBean.page = res.data.page
        this.queryParam.pageBean.pageSize = res.data.pageSize
        this.loading = false
      })
    },
    handleSearch(){
      this.loadData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {
        return item.id
      })
    },
    handleRowClick(row, newWin) {
      //判断是否显示撤回按钮
      console.log(row)
      let type = 'request'
      // if (
      //   !(row.status != 'running' || row.opinionStatus != 'agree') ||
      //   row.opinionStatus == 'inqu'
      // ) {
      //   type = 'done'
      // } else {
      //   type = 'doneList'
      // }
      if (this.defKey) {
        this.handleOpenUrl(
          '/sysModuleInst/' + row.id + '/' + type + '/' + this.defKey,
          newWin
        )
      } else {
        this.handleOpenUrl('/inst/' + row.id + '/' + type, newWin)
      }
    },
    handleOpenUrl(url, newWin) {
      if (!newWin) {
        this.$router.push(url)
        return
      }
      if (!url) {
        return
      }
      let token = this.$store.state.login.currentUser.token
      if (!url.toLowerCase().startsWith('http')) {
        url = window.context.front + url
      }
      if (url.indexOf('?') == -1) {
        url = url + '?token=' + token
      } else {
        url = url + '&token=' + token
      }
      window.open(url, '_blank')
    },
    getMethodauth(elAuth) {
      let allMethod = window.sessionStorage.allMethod
      let methodAuth = window.sessionStorage.methodAuth
      let allMethodArray = allMethod && allMethod.split(',')
      let methodAuthArray = methodAuth && methodAuth.split(',')
      // 无权限则隐藏按钮
      if (
        methodAuthArray &&
        methodAuthArray.includes(elAuth) &&
        allMethodArray &&
        allMethodArray.includes(elAuth)
      ) {
        return true
      } else {
        return false
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.common-table-container {
  height: calc(100% - 10px);
}
.common-table-content.btn-pagenation {
  height: calc(100% - 60px);
}
</style>
