<template>
    <div>
        <Icon :type="colObj.icon" size="20" :style="iconbtnStyle" @click="handleCollection" :title = "colObj.title" v-if="Menus"/>
        <!-- <svg-icon name="card-group" :style="iconbtnStyle" @on-click="handleGroup(item.key)" title="分类"/> -->
        <Icon :type="visObj.icon" size="20" :style="iconbtnStyle" v-if = "item.creater == userId" @click="handleVisiblity" :title = "visObj.title"/>
        <Icon :type="delObj.icon" size="20" :style="iconbtnStyle" v-if = "item.creater == userId" @click="handleDelete"  :title = "delObj.name"/>
        <Icon :type="statObj.icon"  size="20" :style="iconbtnStyle" v-if = "item.creater != userId" @click="handleStatus"  :title = "statObj.title" />
    </div>
</template>
<script>
import taskApi from "../../api/task.js";
export default {
  name: "TaskIcon",
  props: ["mess", "tag", "item", "iconbtnStyle", "userId","Menus"],
  data: () => ({
    delObj: {
      name: "删除",
      icon: "ios-trash-outline"
    },
    statObj: {
      title: "",
      icon: ""
    },
    visObj: {
      title: "",
      icon: ""
    },
    colObj: {
      title: "",
      icon: ""
    }
  }),
  mounted() {
    this.initIcon();
  },
  methods: {
    initIcon() {
      this.updateStatObj();
      this.updateVisObj();
      this.updateColObj();
    },
    updateStatObj() {
      if (this.tag == 6) {
        this.statObj = {
          title: "显示",
          icon: "ios-eye-off"
        };
      } else {
        this.statObj = {
          title: "隐藏",
          icon: "ios-eye-outline"
        };
      }
    },
    updateVisObj() {
      if (this.item.visible) {
        this.visObj = {
          title: "私有",
          icon: "ios-lock-outline"
        };
      } else {
        this.visObj = {
          title: "公开",
          icon: "ios-lock"
        };
      }
    },
    updateColObj() {
      if (this.item.groupIds == 0) {
        this.colObj = {
          title: "取消收藏",
          icon: "ios-star"
        };
      } else {
        this.colObj = {
          title: "收藏",
          icon: "ios-star-outline"
        };
      }
    },

    handleCollection() {
      let self = this,
        item = self.item,
        type = item.groupIds == 0 ? "CancelCollectionTask" : "CollectionTask";
      taskApi.handleCard(type, { taskId: item.key }, function(result) {
        if (result && !result.message) {
          if (item.groupIds == 0) {
            item.groupIds = undefined;
            if(self.tag == 4) {
              self.removeTask(item.key);
            }
            self.$Message.success("取消收藏成功！");
          } else {
            item.groupIds = 0;           
            self.$Message.success("已收藏！");
          }
          self.updateColObj();
        }
      });
    },
    handleGroup(item) {},
    handleVisiblity() {
      let self = this,
        item = self.item,
        title = item.visible ? "私有表格" : "公开表格",
        content = item.visible
          ?"当前表格对所有下级可见，如果私有，您的下级将不能看到这个表格，您确定要私有吗？":
           "当前表格仅您自己可见，如果公开，您的下级都将能看到这个表格，您确定要公开吗？";
      self.$Modal.confirm({
        title: title,
        content: "<p>" + content + "</p>",
        onOk: () => {
          taskApi.handleCard(
            "SetTaskVisiblity",
            { taskId: item.key, visible: !item.visible },
            function(result) {
              if (result && !result.message) {
                if (item.visible) {
                  item.visible = false;
                  self.updateVisObj();
                  self.$Message.success("私有成功！");
                } else {
                  item.visible = true;
                  self.updateVisObj();
                  self.$Message.success("公开成功！");
                }
              }
            }
          );
        },
        onCancel: () => {}
      });
    },
    handleDelete() {
      let self = this,
        taskId = self.item.key;
      self.$Modal.confirm({
        title: "删除表格",
        content: "<p>删除当前表格后，表格内容将无法恢复，您确定要删除吗？</p>",
        onOk: () => {
          taskApi.handleCard("DelTaskByIds", { ids: [taskId] }, function(
            result
          ) {
            if (result && !result.message) {
              self.removeTask(taskId);
              self.$Message.success("删除成功！");
            }
          });
        },
        onCancel: () => {}
      });
    },
    handleStatus() {
      let self = this,
        taskId = self.item.key;
      if (self.tag == 6) {
        taskApi.handleCard("ShowTask", { taskId: taskId }, function(result) {
          if (result && !result.message) {
            self.removeTask(taskId);
            self.$Message.success("显示成功！");
          }
        });
      } else {
        self.$Modal.confirm({
          title: "隐藏表格",
          content: "<p>隐藏当前表格后，您可以在【我隐藏的】类别下继续查看。</p>",
          onOk: () => {
            taskApi.handleCard("HideTask", { taskId: taskId }, function(
              result
            ) {
              if (result && !result.message) {
                self.removeTask(taskId);
                self.$Message.success("隐藏成功！");
              }
            });
          },
          onCancel: () => {}
        });
      }
    },
    removeTask(taskId) {
      let _index = this.mess.indexOf(this.mess.find(t => t.key == taskId));
      this.mess.splice(_index, 1);
    }
  }
};
</script>

