<script setup name="projectTemp">
import ElTree from '@/components/elTree/index.vue'
import { getCurrentInstance, h, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { del, enable, list, copy } from '@/http/apis/performanceEvaluation/indicatorTemplate'
import store from '@/store'
const { proxy } = getCurrentInstance(),
  router = useRouter(),
  { operationTypeOptions } = store.dictStore.globalDicts || {},
  searchForm = reactive({
    planName: undefined
  }),
  tableListRef = ref(),
  total = ref(2),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '模板名称',
      key: 'name',
      prop: 'name'
    },
    {
      label: '审核状态',
      key: 'auditStatusName',
      slot: 'auditStatusName',
      width: 100
    },
    {
      label: '状态',
      slot: 'isEnable',
      width: '100'
    },
    {
      label: '创建时间',
      key: 'createOn',
      prop: 'createOn',
      width: '170'
    },
    {
      label: '操作',
      slot: 'action',
      width: 180,
      fixed: 'right'
    }
  ]),
  column1 = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '指标模板名称',
      key: 'name',
      prop: 'name',
      minWidth: 200,
      showOverflowTooltip: true
    },
    {
      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: 180
    }
  ],
  data = ref([]),
  activeName = ref('1'),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await list(activeName.value, {
      ...pageParams,
      ...searchForm,
      auditType: activeName.value === '2' ? 1 : undefined
    })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.planName = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  enabled = (data) => {
    const text = !data.status ? '启用' : '禁用'
    proxy.$messageBox
      .confirm(`是否${text}该模板?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await enable(data.id, !data.status)
        proxy.$message.success(`${text}成功！`)
        getTableData()
      })
  },
  getTree = (data) => {
    searchForm.regionCode = data.regionLevel === 3 ? data.regionCode : undefined
    tableListRef.value.pageParams.pageNumber = 1
    getTableData()
  },
  delData = (data) => {
    proxy.$messageBox
      .confirm(`是否删除${data.name}?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await del(data.id)
        proxy.$message.success(`删除成功！`)
        getTableData()
      })
  },
  copyData = (data) => {
    proxy.$messageBox
      .confirm(`是否复制${data.name}?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await copy(data.id)
        proxy.$message.success(`复制成功！`)
        getTableData()
      })
  },
  tabChange = (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">
      <div>
        <el-card class="search mb-16">
          <el-form label-suffix=":" :model="searchForm" size="small">
            <el-row :gutter="16">
              <el-col :span="8">
                <el-form-item label="模板名称">
                  <el-input
                    v-model="searchForm.planName"
                    placeholder="请输入"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item class="btn">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
        <el-card class="tab-card">
          <template #header>
            <div class="flex justify-between items-center">
              <el-tabs v-model="activeName" @tab-change="tabChange">
                <el-tab-pane label="模板列表" name="1" />
                <el-tab-pane label="草稿箱" name="3" />
                <el-tab-pane label="审核列表" name="2" />
              </el-tabs>
              <el-button
                type="primary"
                icon="Plus"
                size="small"
                @click="router.push({ name: 'editTemplate',query:{regionCode:searchForm.regionCode} })"
              >
                新增模板
              </el-button>
            </div>
          </template>
          <table-list
            ref="tableListRef"
            :column="activeName==='2'?column1:column"
            :data="data"
            :total="total"
            @get-table-data="getTableData"
          >
            <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 #isEnable="{ scope }">
              <div
                class="dot"
                :style="{
                  background: !scope.row.status? '#FF3B30' : '#4ECB74',
                }"
              ></div>
              &nbsp;<span
                :style="{
                  color: !scope.row.status? '#FF3B30' : '#4ECB74',
                }"
              >{{ !scope.row.status ? "禁用中" : "启用中" }}</span>
            </template>
            <template #action="{ scope }">
              <template v-if="activeName==='1'">
                <template v-if="scope.row.auditStatus===2">
                  <a @click="enabled(scope.row)">{{ scope.row.status ?'禁用':'启用' }}</a>
                  <a @click="$router.push({name:'editTemplate',query:{id:scope.row.id,regionCode:searchForm.regionCode,auditId:scope.row.auditId,auditStatus:scope.row.auditStatus}})">编辑</a>
                  <a @click="copyData(scope.row)">复制</a>
                </template>
                <a v-if="scope.row.auditStatus===3" @click="$router.push({name:'editTemplate',query:{id:scope.row.id,regionCode:searchForm.regionCode,auditId:scope.row.auditId,auditStatus:scope.row.auditStatus}})">重新提交</a>
              </template>
              <a v-if="activeName==='3'" @click="$router.push({name:'editTemplate',query:{draftId:scope.row.draftId,regionCode:searchForm.regionCode,auditId:scope.row.auditId,auditStatus:scope.row.auditStatus}})">编辑</a>
              <a v-if="scope.row.auditStatus===3&&activeName==='2'" @click="$router.push({name:'editTemplate',query:{id:scope.row.appraisalId,regionCode:searchForm.regionCode,auditId:scope.row.id,auditStatus:scope.row.auditStatus}})">重新提交</a>
              <a v-if="activeName!=='3'" @click="$router.push({name:'templateDetail',query:{id:activeName==='2'?scope.row.id:scope.row.auditId}})">查看</a>
              <a v-if="!scope.row.status&&false" class="text-danger" @click="delData(scope.row)">删除</a>
            </template>
          </table-list>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>
