<template>
  <div>

    <div class="t-right mb-12">
      <el-button type="primary" round icon="el-icon-plus" @click="toCreateEvaluation">添加评价</el-button>
    </div>

    <TableLayout :column="column" :data="list">
      <template v-slot:indicator="{ row }">
        <div>
          <div class="edit_tag t-left" v-for="(indicator, i) in row.indicators" :key="i">
            <div
              class="edit_tag_input"
              contenteditable
              v-text="indicator.name"
              @keyup.enter="$event.target.blur()"
              @blur="toHandleIndicator($event, row, indicator)"
            />
            <i class="el-icon-close" @click="toDeleteIndicator(indicator)" />
          </div>
          <div
            contenteditable
            class="create_tag t-left"
            data-hint="点击此处输入新的指标项"
            @keyup.enter="$event.target.blur()"
            @blur="toHandleIndicator($event, row)"
          />
        </div>
      </template>

      <template v-slot:action="{ row }">
        <el-button type="text" class="color-danger" icon="el-icon-delete" @click="toDeleteEvaluation(row)">删除</el-button>
      </template>
    </TableLayout>

    <DialogLayout
      title="新建评价"
      :visible="create_form_data"
      @onCancel="create_form_data=null"
      @onConfirm="onCreateEvaluation"
    >
      <FormLayout
        ref="formLayoutRef"
        :items="createForm"
        :model="create_form_data"
        :rules="createRules"
        label-width="86px"
        label-position="right"
      ></FormLayout>
    </DialogLayout>
  </div>
</template>

<script>
import { TableLayout } from '@/components/layout'
import DialogLayout from '@/components/layout/DialogLayout.vue'
import FormLayout from '@/components/layout/FormLayout.vue'
import { createEvaluationApi, createEvaluationIndicatorApi, deleteEvaluationApi, deleteEvaluationIndicatorApi, findAllEvaluationApi, updateEvaluationIndicatorApi } from '@/api/evaluation'

export default {
  components: { TableLayout, DialogLayout, FormLayout },

  data: () => ({ list: [], create_form_data: null }),

  created () {
    this.column = [
      { prop: 'name', label: '评价名称', width: '180px' },
      { prop: 'appModule', label: '应用模块', width: '180px' },
      { prop: 'indicator', label: '评价指标' },
      { prop: 'action', label: '操作', width: '100px' }
    ]

    this.createForm = [
      { prop: 'name', label: '评价名称', model: { tag: 'el-input' } },
      { prop: 'appModule', label: '应用模块', model: { tag: 'el-input' } }
    ]

    const validator = (r, v, c) => c(v && /^\S+$/.test(v) ? undefined : 1)
    this.createRules = {
      name: { required: true, message: '请输入评价名称', trigger: 'change', validator },
      appModule: { required: true, message: '请输入应用模块', trigger: 'change', validator }
    }

    this.findAllEvaluation()
  },

  methods: {
    async findAllEvaluation () {
      const { data } = await findAllEvaluationApi()
      this.list = data
    },

    toCreateEvaluation () {
      this.create_form_data = { name: '', appModule: '' }
    },

    async onCreateEvaluation () {
      await this.$refs.formLayoutRef.validate()
      await createEvaluationApi(this.create_form_data)
      this.findAllEvaluation()
    },

    async toDeleteEvaluation (row) {
      await this.$confirm('将删除一个评价，是否继续？', '操作提示', { type: 'warning' })
      await deleteEvaluationApi(row.id)
      this.findAllEvaluation()
      this.create_form_data = null
    },

    async toHandleIndicator ({ target }, row, indicator) {
      const name = target.innerText = target.innerText.trim()

      if (!indicator) target.innerText = ''
      if (indicator && !name) return (target.innerText = indicator.name)
      if (!name || indicator?.name === name) return

      await (indicator ? updateEvaluationIndicatorApi : createEvaluationIndicatorApi)({
        id: indicator?.id, name, evaluationId: row.id
      })
      this.findAllEvaluation()
    },

    async toDeleteIndicator (indicator) {
      await this.$confirm('将删除一个评价指标，是否继续？', '操作提示', { type: 'warning' })
      await deleteEvaluationIndicatorApi(indicator.id)
      this.findAllEvaluation()
    }
  }
}
</script>

<style lang="scss" scoped>
.edit_tag .edit_tag_input,
.create_tag {
  padding: 8px 0;
  line-height: 18px;
  background-color: transparent;
  outline: none;
  border-bottom: 1px solid transparent;

  &:empty::after {
    content: attr(data-hint);
    color: #bbb;
  }
}

.create_tag,
.edit_tag {
  margin-right: 12px;
  margin-bottom: 6px;
}

.create_tag {
  cursor: pointer;
  opacity: 0.6;

  &:hover, &:focus {
    border-color: $--color-primary;
  }

  &:focus {
    opacity: 1;
  }
}

.edit_tag {
  display: flex;
  align-items: center;
  counter-increment: item;

  &::before {
    content: counter(item) '.';
    color: #ccc;
  }

  .edit_tag_input {
    flex: 1;
    margin-left: 6px;
    padding-right: 24px;
    outline: none;
  }

  .edit_tag_input:focus + .el-icon-close,
  &:hover .el-icon-close {
    display: block;
  }

  .edit_tag_input:focus,
  &:hover .edit_tag_input {
    border-color: $--color-primary;
  }

  .el-icon-close {
    display: none;
    margin-left: -20px;
    padding: 3px;
    font-weight: 600;
    color: $--color-primary;
    cursor: pointer;
  }
}
</style>
