<!--
 * @Author: wlo_o
 * @Date: 2022-02-08 09:25:38
 * @LastEditors: Jone
 * @LastEditTime: 2022-07-04 11:07:01
 * @FilePath: /frontend/lib/components/MdCategoryTag.vue
 * @Description: 分类-标签
 *
 * Copyright (c) 2022 by 青岛百洋智能科技股份有限公司, All Rights Reserved.
-->
<template>
  <div
    v-if="data&&data.name"
    class="oecp-md-category-tag"
  >
    <template v-if="editable">
      <el-tag
        :effect="effect"
        @click="!disabled&&$emit('click',data)"
      >
        {{data.name}}<i
          class="el-icon-loading"
          v-show="loading"
        />
        <i
          v-show="!loading&&data.isSys!='1'"
          v-oecp-auth:[{type:type}]="'category.del'"
          @click="!disabled&&handlerFind()"
          class="el-icon-close oecp_category_delete"
        />
      </el-tag>
    </template>
    <template v-else>
      <el-popover
        v-if="data.name.length>tagShowLenght"
        placement="top-start"
        trigger="hover"
        :content="data.name"
      >
        <el-tag
          slot="reference"
          :effect="effect"
          :closable="closable"
          size="small"
          @click="!disabled&&$emit('click',data)"
          @close="!disabled&&handleDel()"
        >
          {{data.name.substr(0,tagShowLenght)}}... <i
            class="el-icon-loading"
            v-show="loading"
          />
        </el-tag>
      </el-popover>
      <el-tag
        v-else
        size="small"
        :effect="effect"
        :closable="closable"
        @click="!disabled&&$emit('click',data)"
      >
        {{data.name}} <i
          class="el-icon-loading"
          v-show="loading"
        />
      </el-tag>
    </template>
  </div>
</template>
<script>
import { fetchApi } from '../common/apis.js'
import OptionsMixin from '../mixins/OptionsMixin'
import get from 'lodash/get'

export default {
  mixins: [OptionsMixin],
  props: {
    editable: { type: Boolean, default: false }, // 能否编辑
    disabled: { type: Boolean, default: false }, // 禁用
    data: { type: Object, default: () => ({}) }, // 当前标签数据
    values: { type: Array, default: () => [] }, // 选中的值
    type: { type: [String, null], default: null },
  },
  computed: {
    effect: function () {
      if (this.editable) return 'plain'
      return this.stateValues.includes(this.data.id) ? 'dark' : 'plain'
    },
    closable: function () {
      let isSys = parseInt(get(this.data, 'isSys', ''))
      return this.editable && isSys === 0 && !this.loading
    },
    tagShowLenght: function () {
      // 标签名称超长显示「...」
      let len = this.getMbOption('tagShowLenght')
      return len ? parseInt(len) : 10
    },
  },
  watch: {
    values: {
      handler: function (values) {
        this.stateValues = values
      },
      deep: true,
    },
  },
  data() {
    return {
      loading: false, // 控制显示删除按钮
      stateValues: this.values,
    }
  },
  methods: {
    handlerFind() {
      // 先查询是否有关联的数据，再进行删除的提示操作
      let that = this
      fetchApi
        .call(this, '/category/findCategoryRelationships', { categoryId: that.data.id, type: that.data.type })
        .then(function (res) {
          that.handleDel(res)
        })
        .catch(err => {
          console.log(err)
        })
        .finally(() => {})
    },
    handleDel(data) {
      let that = this
      let msg = data > 0 ? '此标签有关联数据，是否继续永久删除?' : '此操作将永久删除该标签, 是否继续?'
      this.$confirm(msg, '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        that.loading = true
        fetchApi
          .call(this, '/category/delete', { id: this.data.id })
          .then(function (res) {
            that.$message({ type: 'success', message: '删除成功!' })
            that.$emit('close', that.data)
            that.$emit('success', that.data)
          })
          .catch(err => {
            console.log(err)
          })
          .finally(() => {
            that.loading = false
          })
      })
    },
  },
}
</script>
<style scoped>
.oecp-md-category-tag {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}
.oecp-md-category-tag .el-tag {
  font-size: 14px;
}
.oecp_category_delete {
  cursor: pointer;
  /* color: rgb(245, 108, 108) !important; */
}
/deep/.el-icon-close {
  font-size: 18px;
}
.el-tag--plain {
  background-color: #edf2ff;
  border-color: #90afff;
  color: #497ee1;
  cursor: pointer;
}

.el-tag--dark {
  background-color: #73b9ff;
  border-color: #7399ff;
  color: #fff;
}
</style>
