openForm<template>
  <div class="full-page bg" element-loading-text="数据加载中..." element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255,255,255, 0.5)" v-loading.fullscreen.lock="markLoading">
    <div :class="['search-container', isAdvanced ? 'advanced-search' : '']">
      <el-form ref="form" :model="searchForm" label-width="auto" style="width: 100%">
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="项目名称">
              <el-input v-model="searchForm.projectName" clearable placeholder="请输入项目名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="项目分类">
              <dict-select dictCode="sgyp-xmfl" :hasDefaultOption="true" clearable v-model="searchForm.projectCategory"
                style="width: 100%" placeholder="请选择项目分类" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="所属领域">
              <dict-select dictCode="ggbb_ssly" :hasDefaultOption="true" clearable v-model="searchForm.projectField"
                style="width: 100%" @select="(val, obj) => hanldeCommonSelect(val, obj, 'serch')"
                placeholder="请选择所属领域" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="牵头市领导">
              <el-input v-model="searchForm.leader" clearable placeholder="请输入牵头市领导"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button icon="el-icon-search" type="primary" class="btn btn-plus" @click="handleSearch(1)">
              {{ this.$t('common.search') }}
            </el-button>
          </el-col>
          <el-col :span="2" class="search-action-btn">
            <el-link :underline="false" type="primary" @click="advanced">
              {{ isAdvanced ? '基础搜索' : '高级搜索' }}
            </el-link>
            <el-link :underline="false" type="danger" @click="clearSearchForm">
              重置
            </el-link>
          </el-col>
          <el-col :span="5">
            <el-form-item label="所属跑道">
              <el-select v-model="searchForm.projectRunway" style="width: 100%" clearable placeholder="请选择所属跑道">
                <el-option v-for="item in demandRunwaOoptionsSerch" :key="item.value" :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row :gutter="10" :class="[
      'main-table-container',
      'flex',
      isAdvanced ? 'advanced-search-table' : '',
    ]">
      <el-col :span="24" class="table-container" ref="contentPanel" style="padding: 20px">
        <div style="margin-bottom: 10px" ref="btnPanel">
          <!-- <el-switch
                        :width="80"
                        class="defineSwitch"
                        v-model="switchStatus"
                        active-text="已审核"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        inactive-text="待审核"
                        @change="handleSwitch"
                    ></el-switch> -->
          <el-button type="danger" plain :class="['btn', 'btn-plus', switchStatus ? '' : 'btn-reviewed']"
            @click="handleSwitch(false)">
            待审核
          </el-button>
          <el-button slot="reference" type="success" plain
            :class="['btn', 'btn-delete', switchStatus ? 'btn-audited' : '']" @click="handleSwitch(true)">
            已审核
          </el-button>
        </div>
        <div :style="{ width: '100%', height: `${tableMaxHeight}` + 'px' }">
          <el-table stripe size="mini" v-loading="tableLoading" ref="multipleSelection" :data="tableData"
            :max-height="tableMaxHeight" :style="{ width: '100%' }" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="55" label="序号" align="center">
            </el-table-column>
            <el-table-column prop="projectName" show-overflow-tooltip min-width="120" align="center" label="项目名称">
            </el-table-column>
            <el-table-column prop="leader" show-overflow-tooltip min-width="120" align="center" label="牵头市领导">
            </el-table-column>
            <el-table-column prop="projectField" show-overflow-tooltip min-width="120" align="center" label="所属领域">
              <template v-slot="{ row }">
                {{ getDictName('ggbb_ssly', row.projectField) }}
              </template>
            </el-table-column>
            <el-table-column prop="projectRunway" show-overflow-tooltip min-width="120" align="center" label="所属跑道">
              <template v-slot="{ row }">
                {{ getDictName('ggbb_sspd', row.projectRunway) }}
              </template>
            </el-table-column>
            <el-table-column prop="status" min-width="120" show-overflow-tooltip align="center" label="审核状态">
              <template v-slot="{ row }">
                <el-tag :type="row.status == 3 || row.status == 1 || row.status == 5
                  ? '' : row.status == 2 || row.status == 4 || row.status == 6 ? 'danger' : 'success'
                  ">{{ getDictName('shzt-zxxz', row.status) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip min-width="120" align="center" fixed="right" label="操作">
              <template v-slot="{ row }">
                <el-link icon="el-icon-s-check" type="primary" :underline="false" class="cloumn-btn"
                  v-if="row.status === 3" @click="handleAudits(row)">
                  审核
                </el-link>
                <el-link v-else icon="el-icon-view" type="primary" :underline="false" class="cloumn-btn"
                  @click="handleDetils(row)">
                  详情
                </el-link>
                <el-link v-if="row.status == 4 || row.status == 5" icon="el-icon-refresh-left" type="danger"
                  :underline="false" class="cloumn-btn withdraw" @click="revokeReviewQua(row)">
                  撤回
                </el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination ref="paginationPanel" style="margin-top: 10px" :pageResult="params.pageBean"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-col>
    </el-row>
    <QuaObjDialog ref="QuaObjDialog" />
  </div>
</template>

<script>
import pagination from '@/components/pagination'
import { TableMixin } from '@/mixins/tableMixin'
import apiList from '@/api/MajorReformProjects/QuaObj'
import QuaObjDialog from './components/QuaObjDialog.vue'
const portal = window.context.portal
export default {
  name: 'QuaObjGroupReview',
  components: {
    pagination,
    QuaObjDialog
  },
  mixins: [TableMixin],
  data() {
    return {
      markLoading: false,
      searchForm: {
        projectName: '',
        projectField: '',
        projectRunway: '',
        leader: '',
        status: 1,
        projectCategory: ''
      }, // 顶部搜索对象
      tableMaxHeight: 400,
      tableLoading: false,
      params: {
        pageBean: {
          page: 1,
          pageSize: 20,
          showTotal: true
        },
        querys: [
          {
            group: 'main',
            operation: 'IN',
            parentGroup: '',
            property: 'a.status_',
            relation: 'AND',
            value: [3]
          }
        ]
      },
      tableData: [],
      multipleSelection: [],
      operation: 'EQUAL',
      deleteIds: '', // 是否选中列表解锁删除按钮
      switchStatus: false
    }
  },

  created() {
    this.getDataList(this.params)
  },
  methods: {
    // 撤回
    revokeReviewQua(row) {
      this.$confirm('确认执行撤销操作吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.markLoading = true
        let data = {
          flowType: row.flowType,
          id: row.id,
          status: 3,
          approvalResults: 2
        }
        apiList.verify(data, res => {
          if (res.state) {
            this.$message.success('撤销操作成功')
            this.handleSearch()
          } else {
            this.$message.success('撤销操作失败')
          }
          this.markLoading = false
        })
      })
    },
    reload() {
      this.getDataList(this.params)
    },
    // 分页查询数据
    getDataList(data) { 
      this.tableLoading = true
      apiList.getGroupAuditData(data, res => {
        if (res) {
          this.tableData = res.rows
          this.params.pageBean = {
            page: res.page || 1,
            pageSize: res.pageSize || 20,
            total: res.total
          }
        }
        this.tableLoading = false
      })
    },
    // 顶部搜索
    handleSearch(page) {
      let {
        projectName,
        projectField,
        projectRunway,
        leader,
        status,
        projectCategory
      } = this.searchForm
      let data = [
        {
          group: 'main',
          operation: 'LIKE',
          property: 'projectName',
          relation: 'AND',
          value: projectName
        },
        {
          group: 'main',
          operation: 'EQUAL',
          property: 'projectField',
          relation: 'AND',
          value: projectField
        },
        {
          group: 'main',
          operation: 'EQUAL',
          property: 'projectRunway',
          relation: 'AND',
          value: projectRunway
        },
        {
          group: 'main',
          operation: 'LIKE',
          property: 'leader',
          relation: 'AND',
          value: leader
        },
        {
          group: 'main',
          operation: this.operation,
          // operation: 'IN',
          parentGroup: '',
          property: 'a.status_',
          relation: 'AND',
          // value: [1, 2, 3]
          value: status
        },
        {
          group: 'main',
          operation: 'LIKE',
          property: 'project_Category_',
          relation: 'AND',
          value: projectCategory
        },
      ]
      this.params.querys = data
      if (page) {
        this.params.pageBean.page = page - 0
      }
      this.getDataList(this.params)
    },
    // 页面中swatch回调事件
    handleSwitch(bol) {
      this.switchStatus = bol
      if (bol) {
        // 已办
        this.operation = 'IN'
        this.searchForm.status = [4, 5, 6, 7]
      } else {
        // 代办
        this.operation = 'EQUAL'
        this.searchForm.status = 3
      }
      this.handleSearch()
    },
    // 详情
    handleDetils(item) {
      console.log(item)
      this.$refs.QuaObjDialog.openForm(item, '详情', 2, 'read')
    },
    // 审核
    handleAudits(item) {
      this.$refs.QuaObjDialog.openForm(item, '审核', 2, 'audit')
    },
    handleSelectionChange(currentData) {
      if (currentData.length === 0) return (this.deleteIds = '')
      let ids = []
      currentData.forEach(item => {
        ids.push(item.id)
      })
      this.deleteIds = ids.join(',')
    },
    handleCurrentChange(page) {
      this.params.pageBean = { ...this.params.pageBean, page }
      this.getDataList(this.params)
    },
    handleSizeChange(pageSize) {
      this.params.pageBean = { ...this.params.pageBean, pageSize }
      this.getDataList(this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/element-variables.scss';

.cloumn-btn {
  border: 1px solid #2761ff;
  padding: 3px 10px;
  border-radius: 5px;

  &:nth-child(1) {
    margin-right: 5px;
  }

  &:nth-child(1):hover {
    background-color: #2761ff;
    color: #fff;
  }

  &:nth-child(2):hover {
    background-color: #2761ff;
    color: #fff;
    border-color: #2761ff;
  }

  /deep/ i,
  span {
    font-size: 16px;
  }
}

.del-btn {
  font-weight: bold;
  margin-left: 10px;
  color: $--color-danger;
  cursor: pointer;
}
</style>