<template>
  <div>
    <el-dialog :visible="dialogVisible" title="创建练习" width="670px" @close="dialogClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-form-item label="练习名称" prop="name">
          <el-input v-model="form.name" maxlength="100" placeholder="请输入练习名称" />
        </el-form-item>
        <el-form-item label="标签">
          <div class="label-list">
            <el-tag v-for="(item, i) in form.label_list" :key="`${item}${i}`" type="info" closable>{{ item }}</el-tag>
            <el-button class="label-item" icon="el-icon-plus" circle @click="showVisible" />
          </div>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="form.intro" type="textarea" maxlength="500" placeholder="请输入" rows="10" />
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogClose">取消</el-button>
          <el-button type="primary" @click="createdExercise">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible="visible" title="创建标签" width="300px" @close="dialogCloseLabel">
      <el-autocomplete
        v-model="label_name"
        class="inline-input"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
      />
      <template #footer>
        <el-button @click="dialogCloseLabel">取消</el-button>
        <el-button type="primary" @click="addLabel">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { CreateExercise, GetLabelList } from '@/api/exercise';

export default {
  name: 'CreateExercise',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      label_name: '',
      label_list: [],
      form: {
        name: '',
        label_list: [],
        intro: '',
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入练习名称',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  created() {
    this.getLabelList();
  },
  methods: {
    querySearch(queryString, cb) {
      let label_list = this.label_list;
      let results = (queryString ? label_list.filter(this.createFilter(queryString)) : label_list).map((item) => {
        return { value: item };
      });
      cb(results);
    },
    createFilter(queryString) {
      return (label) => {
        return label.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      };
    },
    addLabel() {
      if (this.label_name) {
        this.form.label_list.push(this.label_name);
        this.label_name = '';
      }
      this.visible = false;
    },
    showVisible() {
      this.visible = true;
    },
    dialogCloseLabel() {
      this.visible = false;
    },
    getLabelList() {
      GetLabelList({ store_type: 0 }).then(({ label_list }) => {
        this.label_list = label_list;
      });
    },
    dialogClose() {
      this.$emit('update:dialogVisible', false);
    },
    createdExercise() {
      this.$refs.form.validate((valid) => {
        if (!valid) return false;

        CreateExercise(this.form)
          .then(({ id }) => {
            this.$message.success('创建成功');
            this.dialogClose();
            this.$router.push({ path: '/exercise', query: { id } });
          })
          .catch(() => {});
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input,
.el-textarea,
.label-list {
  width: calc(100% - 40px);
}

.el-autocomplete {
  width: 100%;
}

.label-list {
  padding: 0 4px;
  background-color: $fill-color;
  border-radius: 2px;

  .el-button.label-item {
    width: 24px;
    height: 24px;
    padding: 4px;
    background-color: #fff;
  }
}
</style>
