<template>
  <div class="header">
    <el-button
      type="primary"
      icon="Plus"
      :disabled="type === 'view'"
      @click="openDialog({}, 'add')"
    >
      新增</el-button>
  </div>
  <div class="rate">
    <el-table
      ref="rateTableRef"
      :data="rateTableData"
      stripe
      :max-height="600"
    >
    <el-table-column label="评价规则" align="center" prop="name" show-overflow-tooltip />
    <el-table-column label="分值" align="center" prop="value" show-overflow-tooltip />
    <el-table-column label="操作" align="center" show-overflow-tooltip >
      <template #default="{ row, $index }">
        <el-button
          type="primary"
          link
          @click="openDialog(row, 'view')"
          :disabled="type === 'view'"
        >查看</el-button>
        <el-button
          type="primary"
          link
          @click="openDialog(row,  'edit')"
          :disabled="type === 'view'"
        >修改</el-button>
        <el-button
          type="danger"
          link
          @click="del($index)"
          :disabled="type === 'view'"
        >删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
  <el-dialog
    v-model="visible"
    :title="`${operateInfo.text}评级`"
    :close-on-click-modal="false"
    :before-close="close"
    class="dialog"
  >
    <el-form
      ref="dialogFormRef"
      :model="dialogForm"
      :rules="dialogFormRules"
      :disabled="operateInfo.type === 'view' || type === 'view'"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="评价规则:" prop="name">
            <el-input v-model="dialogForm.name" placeholder="请输入评价规则"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分值:" prop="value">
            <el-input v-model="dialogForm.value" placeholder="请输入分值"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer v-if="operateInfo.type !== 'view'">
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">保存</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue'
import { optTextMap } from '@/utils/map'
import { inheritAttr } from '@/utils/v3'
import { numberValidate } from '../validate'
const { proxy } = getCurrentInstance();
const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  operateJson: {
    type: String,
    default: ''
  }
})
const { type, operateJson } = props

const rateTableData = ref([])
const visible = ref(false)
const operateInfo = reactive({
  type: '',
  text: ''
})
const dialogForm = reactive({
  name: '',
  value: ''
})
const dialogFormRules = reactive({
  name: [
    { required: true, trigger: "blur", message: "评价规则不能为空" }
  ],
  value: [
    { required: true, trigger: "blur", validator: numberValidate }
  ]
})
const curRow = ref({})
const openDialog = (row, type) => {
  curRow.value = row
  operateInfo.type = type
  operateInfo.text = optTextMap.get(type)
  visible.value = true
  nextTick(() => {
    inheritAttr(row, dialogForm)
  })
}
const close = () => {
  curRow.value = {}
  operateInfo.type = ''
  operateInfo.text = ''
  proxy.$refs.dialogFormRef.resetFields()
  visible.value = false
}

const submit = () => {
  proxy.$refs.dialogFormRef.validate((valid) => {
    if(valid) {
      if(operateInfo.type === 'add'){
        rateTableData.value.push({ ...dialogForm })
      } else {
        curRow.value.name = dialogForm.name
        curRow.value.value = dialogForm.value
      }
      close()
    }
  })
}

const del = (index) => {
  proxy.$modal
  .confirm("是否确认删除？")
  .then(() => {
    rateTableData.value.splice(index, 1)
  })
  .catch(() => {})
}

onMounted(() => {
  if(operateJson){
    rateTableData.value = JSON.parse(operateJson)
  }
})

defineExpose({
  rateTableData
})
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
</style>