<script setup name="appTemp">
import { h, nextTick, onMounted, reactive, ref, getCurrentInstance } from 'vue'
import {
  appIndexList,
  appIndexDetail,
  appIndexSave,
  appIndexDel,
  appEnable
} from '@/http/apis/performanceEvaluation/indicatorTemplate'

const { proxy } = getCurrentInstance(),
  searchForm = reactive({
    indexName: undefined
  }),
  tableListRef = ref(),
  total = ref(0),
  data = ref([]),
  column = [
    {
      label: '序号',
      type: 'index',
      width: '60'
    },
    {
      label: '指标名称',
      key: 'indexName',
      prop: 'indexName'
    },
    {
      label: '排序',
      key: 'sort',
      prop: 'sort',
      width: 80
    },
    {
      label: '指标所属模块',
      key: 'indexOwningModule',
      prop: 'indexOwningModule'
    },
    {
      label: '指标类型',
      key: 'indexType',
      prop: 'indexType',
      width: 80,
      render: row => h('span', row.indexType === 1 ? '通用指标' : row.indexType === 2 ? '辅助指标' : '-')
    },
    {
      label: '是否显示',
      key: 'isDisplay',
      slot: 'isDisplay',
      width: 80
    },
    {
      label: '操作',
      slot: 'action',
      width: '120',
      fixed: 'right'
    }
  ],
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await appIndexList({
      ...pageParams,
      ...searchForm
    })
    data.value = res?.data?.records || []
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.indexName = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  // 新增编辑指标
  dialogVisible = ref(false),
  editType = ref(),
  formData = ref({}),
  formRef = ref(),
  rules = {
    indexName: [{ required: true, message: '请输入' }],
    indexOwningModule: [{ required: true, message: '请输入' }],
    sort: [{ required: true, message: '请输入' }],
    displayForm: [{ required: true, message: '请选择' }],
    indexType: [{ required: true, message: '请选择' }],
    indexScore: [{ required: true, message: '请输入' }],
    unit: [{ required: true, message: '请输入' }],
    indexDef: [{ required: true, message: '请输入' }]
  },
  loading = ref(false),
  showDialog = async (type, data) => {
    if (type === 2) {
      const res = await appIndexDetail(data.id)
      formData.value = {
        ...res.data
      }
    }
    editType.value = type
    dialogVisible.value = true
    await nextTick()
    formRef.value.clearValidate()
  },
  save = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async valid => {
      if (valid) {
        loading.value = true
        const postData = {
          ...formData.value
        }
        try {
          await appIndexSave(postData)
          proxy.$message.success('提交成功！')
          getTableData()
          loading.value = false
          close(true)
        } catch (e) {
          loading.value = false
        }
      }
    })
  },
  close = () => {
    formData.value = {}
    dialogVisible.value = false
  },
  // 删除
  delData = (data) => {
    proxy.$messageBox
      .confirm(`是否删除${data.indexName}?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await appIndexDel(data.id)
        proxy.$message.success('删除成功！')
        await getTableData()
      })
  },
  changeIsDisplay = async (row) => {
    try {
      await appEnable(row.id, !row.isDisplay)
      proxy.$message.success(`${row.isDisplay ? '禁用' : '启用'}成功！`)
      getTableData()
      return true
    } catch (e) {
      return false
    }
  }
onMounted(() => {
  getTableData()
})
</script>

<template>
  <div>
    <el-card shadow="never" 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.indexName"
                maxlength="10"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <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 shadow="never">
      <template #header>
        <div class="flex justify-between items-center">
          <span>指标列表</span>
          <el-button
            type="primary"
            size="small"
            icon="Plus"
            @click="showDialog(1)"
          >新增指标</el-button>
        </div>
      </template>
      <table-list
        ref="tableListRef"
        :column="column"
        :data="data"
        :total="total"
        @get-table-data="getTableData"
      >
        <template #isDisplay="{scope}">
          <el-switch v-model="scope.row.isDisplay" :before-change="()=>changeIsDisplay(scope.row)" />
        </template>
        <template #action="{scope}">
          <a @click="showDialog(2,scope.row)">编辑</a>
          <a class="text-danger" @click="delData(scope.row)">删除</a>
        </template>
      </table-list>
    </el-card>
  </div>
  <el-dialog :title="editType===1?'新增指标':'编辑指标'" :model-value="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-suffix="："
      label-width="130"
    >
      <el-form-item label="指标名称" prop="indexName">
        <el-input v-model="formData.indexName" :maxlength="50" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="指标所属模板" prop="indexOwningModule">
        <el-input v-model="formData.indexOwningModule" :maxlength="50" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number
          v-model="formData.sort"
          :min="1"
          :precision="0"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="展示形式" prop="displayForm">
        <el-radio-group v-model="formData.displayForm">
          <el-radio :label="1">图表</el-radio>
          <el-radio :label="2">文字</el-radio>
          <el-radio :label="3">评分</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="指标类型" prop="indexType">
        <el-radio-group v-model="formData.indexType">
          <el-radio :label="1">通用指标</el-radio>
          <el-radio :label="2">辅助指标</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="单位" prop="unit">
        <el-input v-model="formData.unit" :maxlength="50" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="指标定义" prop="indexDef">
        <el-input
          v-model="formData.indexDef"
          :maxlength="500"
          placeholder="请输入"
          type="textarea"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="指标分值" prop="indexScore">
        <el-input-number
          v-model="formData.indexScore"
          :max="100"
          :min="0"
          :precision="2"
          placeholder="请输入"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button
        type="primary"
        size="small"
        :loading="loading"
        @click="save(formRef)"
      >
        保存
      </el-button>
      <el-button size="small" @click="close">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>
