<script setup name="evaluationPlan">
import { getCurrentInstance, h, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import ElTree from '@/components/elTree/index.vue'
import { list, del } from '@/http/apis/performanceEvaluation/evaluationPlan'
import store from '@/store'

const { proxy } = getCurrentInstance(),
  { operationTypeOptions } = store.dictStore.globalDicts || {},
  router = useRouter(),
  searchForm = reactive({
    name: undefined,
    times: undefined
  }),
  targetOptions = {
    1: '项目',
    2: '应用'
  },
  column = [{
    label: '序号',
    type: 'index',
    width: '60'
  },
  {
    label: '计划名称',
    key: 'name',
    prop: 'name',
    minWidth: 200,
    showOverflowTooltip: true
  },
  {
    label: '自评时间',
    key: 'seltTime',
    slot: 'seltTime',
    width: 200
  },
  {
    label: '评价对象',
    key: 'target',
    prop: 'target',
    render: row => h('span', row.target.split(',').map(i => targetOptions[i]).join('，')),
    width: 100
  },
  {
    label: '创建时间',
    key: 'createOn',
    prop: 'createOn',
    width: '180'
  },
  {
    label: '审核状态',
    key: 'auditStatusName',
    slot: 'auditStatusName',
    width: 100
  },
  {
    label: '操作',
    slot: 'action',
    fixed: 'right',
    width: 190
  }
  ],
  column1 = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '计划名称',
      key: 'name',
      prop: 'name',
      minWidth: 200,
      showOverflowTooltip: true
    },
    {
      label: '评价对象',
      key: 'target',
      prop: 'target',
      render: row => h('span', row.target?.split(',').map(i => targetOptions[i]).join('，')),
      width: 100
    },
    {
      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: 190
    }
  ],
  total = ref(0),
  data = ref([]),
  getTree = (value) => {
    searchForm.regionCode = value.regionLevel === 3 ? value.regionCode : undefined
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  tableListRef = ref(),
  activeName = ref('1'),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    data.value = []
    const res = await list(activeName.value, {
      ...pageParams,
      ...searchForm,
      start: searchForm.times?.[0] || undefined,
      end: searchForm.times?.[1] || undefined,
      times: undefined,
      auditType: 2
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  reset = () => {
    tableListRef.value.pageParams.pageNumber = 1
    searchForm.name = undefined
    searchForm.times = undefined
    getTableData()
  },
  // 新建计划
  addPlan = () => {
    router.push({ name: 'addPlan', query: { regionId: searchForm.regionId }})
  },
  // 删除计划
  delData = (data) => {
    proxy.$messageBox
      .confirm(`是否删除${data.name}?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await del(data.id)
        proxy.$message.success('删除成功！')
        getTableData()
      })
  },
  tabChange = (val) => {
    activeName.value = val
    reset()
  }
onMounted(() => {
})
</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="w-full mt-8 tab-card">
        <template #header>
          <div class="flex justify-between">
            <el-tabs v-model="activeName" @tab-change="tabChange">
              <el-tab-pane label="计划列表" name="1" />
              <el-tab-pane label="审核列表" name="2" />
            </el-tabs>
            <div>
              <el-button
                type="primary"
                size="small"
                icon="plus"
                @click="addPlan"
              >新建计划</el-button>
            </div>
          </div>
        </template>
        <table-list
          ref="tableListRef"
          :column="activeName==='1'?column:column1"
          :data="data"
          :total="total"
          @get-table-data="getTableData"
        >
          <template #seltTime="{scope}">
            项目终验{{ scope.row.startSelfDays }}天后开始自评，并且在{{ scope.row.completeSelfDays }}天完成自评
          </template>
          <template #auditStatusName="{scope}">
            <div v-if="scope.row.auditStatus" 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"><Warning /></el-icon>
              </el-tooltip>
            </div>
            <span v-else>-</span>
          </template>
          <template #action="{scope}">
            <!--            计划列表操作按钮-->
            <template v-if="activeName==='1'">
              <a
                v-if="scope.row.auditStatus===2||scope.row.auditStatus===3"
                @click="router.push({name:'addPlan',query:{id:activeName==='1'?scope.row.id:scope.row.appraisalId,auditId:activeName==='2'?scope.row.id:''}})"
              >{{ scope.row.auditStatus===2?'编辑':'重新提交' }}</a>
              <a
                v-if="scope.row.auditStatus===2"
                @click="router.push({name:'projectGroup',query:{appraisalId:scope.row.id}})"
              >项目分组</a>
              <a
                v-if="activeName==='1'"
                @click="router.push({name:'planDetail',query:{id:scope.row.id}})"
              >详情</a>
            </template>
            <!--            审核列表操作按钮-->
            <template v-else>
              <a v-if="scope.row.auditStatus===3" @click="router.push({name:'addPlan',query:{id:activeName==='1'?scope.row.id:scope.row.appraisalId,auditId:activeName==='2'?scope.row.id:''}})">重新提交</a>
              <a @click="$router.push({name:'planDetail',query:{id:scope.row.appraisalId,auditId:scope.row.id}})">详情</a>
            </template>
            <a
              v-if="false"
              class="text-danger"
              @click="delData(scope.row)"
            >删除</a>
          </template>
        </table-list>
      </el-card>
    </el-col>
  </el-row>
</template>
<style lang='less' scoped>
</style>
