<script setup name="indexConfigApprove">
import { h, reactive, ref } from 'vue'
import ElTree from '@/components/elTree/index.vue'
import { list } from '@/http/apis/performanceEvaluation/performanceApprove'
import store from '@/store'
const
  activeName = ref('1'),
  { operationTypeOptions } = store.dictStore.globalDicts || {},
  searchForm = reactive({
    name: undefined,
    times: undefined
  }),
  column = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '指标模板名称',
      key: 'name',
      prop: 'name'
    },
    {
      label: '提交审核时间',
      key: 'createOn',
      prop: 'createOn'
    },
    {
      label: '审核操作',
      key: 'operationType',
      prop: 'operationType',
      render: row => h('span', operationTypeOptions[row.operationType] || '-')
    },
    {
      label: '操作',
      slot: 'action',
      fixed: 'right',
      width: 80
    }
  ],
  column1 = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '指标模板名称',
      key: 'name',
      prop: 'name'
    },
    {
      label: '提交审核时间',
      key: 'createOn',
      prop: 'createOn'
    },
    {
      label: '审核操作',
      key: 'operationType',
      prop: 'operationType',
      render: row => h('span', operationTypeOptions[row.operationType] || '-')
    },
    {
      label: '审核状态',
      slot: 'auditStatusName',
      prop: 'auditStatusName'
    },
    {
      label: '操作',
      slot: 'action',
      fixed: 'right',
      width: 80
    }
  ],
  total = ref(0),
  data = ref([]),
  tableListRef = ref(),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await list({
      ...pageParams,
      ...searchForm,
      start: searchForm.times?.[0] || undefined,
      end: searchForm.times?.[1] || undefined,
      times: undefined,
      auditType: 1,
      auditStatusType: activeName.value * 1
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.name = undefined
    searchForm.times = undefined
    getTableData()
  },
  getTree = (value) => {
    searchForm.regionCode = value.regionLevel === 3 ? value.regionCode : undefined
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  changeTab = (val) => {
    activeName.value = val
    reset()
  }

</script>

<template>
  <el-row>
    <el-col style="padding-right: 16px" :span="4">
      <elTree @get-tree="getTree" />
    </el-col>
    <el-col :span="20">
      <el-card class="w-full search">
        <el-form :model="searchForm" size="small" label-suffix=":">
          <el-row :gutter="16">
            <el-col :span="8">
              <el-form-item label="指标模板名称">
                <el-input v-model="searchForm.name" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="searchForm.times"
                  type="daterange"
                  :editable="false"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item class="btn">
                <div class="flex">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button @click="reset">重置</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="tab-card mt-8">
        <template #header>
          <el-tabs v-model="activeName" @tab-change="changeTab">
            <el-tab-pane name="1" label="待审核列表" />
            <el-tab-pane name="2" label="审核记录" />
          </el-tabs>
        </template>
        <table-list
          ref="tableListRef"
          :column="activeName==='1'?column:column1"
          :data="data"
          :total="total"
          @get-table-data="getTableData"
        >
          <template #auditStatusName="{scope}">
            <div class="flex items-center">
              <span :class="`dot mr-4 ${scope.row.auditStatus === 1 ? 'bg-warning' : scope.row.auditStatus === 2 ? 'bg-success' : 'bg-danger'}`"></span>
              <span :class="`${scope.row.auditStatus === 1 ? 'text-warning' : scope.row.auditStatus === 2 ? 'text-success' : 'text-danger'}`">{{ scope.row.auditStatusName }}</span>
              <el-tooltip
                v-if="scope.row.auditStatus===3"
                :content="scope.row.auditMessage"
                placement="bottom"
                effect="light"
              >
                <el-icon class="ml-4 cursor-pointer"><Warning /></el-icon>
              </el-tooltip>
            </div>
          </template>
          <template #action="{scope}">
            <a @click="$router.push({name:'indexConfigApproveDetail',query:{id:scope.row.id}})">{{ activeName==='1'?'审核':'查看' }}</a>
          </template>
        </table-list>
      </el-card>
    </el-col>
  </el-row>
</template>
