<template>
  <ul class="right-actions">
    <li>操作</li>
    <li
      class="span-item shareLink"
      @click="copyChartConfirm('url')"
      :data-clipboard-text="linkUrl"
      v-if="!chartInfo.Disabled"
    >
      <i class="el-icon-share" />&nbsp;分享
    </li>
    <li class="span-item" @click="addMychartHandle(chartInfo)">
      <img
        :src="$icons.chart_join_ico"
        alt=""
        style="width: 13px; height: 12px; vertical-align: middle"
      />加入我的图库
    </li>
    <li class="span-item" @click="refreshHandle">
      <span
        ><i class="el-icon-refresh" style="margin-left: 0" />&nbsp;刷新
      </span>
    </li>
    <li class="span-item" v-if="['/commordityChartBase'].includes($route.path)">
      <span @click="saveChartHandle">
        <i class="el-icon-collection" />&nbsp;保存
      </span>
    </li>
    <li class="span-item" v-if="chartInfo.Button.IsCopy">
      <span @click="saveChartOtherHandle">
        <i class="el-icon-document-add" />&nbsp;另存为
      </span>
    </li>
    <li class="span-item" v-if="chartInfo.Button.IsEdit" @click="editChartHandle">
      <img
        src="~@/assets/img/set_m/edit.png"
        alt=""
        style="width: 13px; height: 12px"
      />&nbsp;编辑
    </li>
    <li
      class="span-item copy"
      @click="copyChartConfirm('office')"
      v-if="!chartInfo.Disabled"
    >
      <i class="el-icon-document-copy" />&nbsp;复制至office
    </li>
    <li
      class="span-item copy"
      @click="copyChartConfirm('微信')"
      v-if="!chartInfo.Disabled"
    >
      <img
        style="width: 13px; height: 12px; vertical-align: middle"
        src="~@/assets/img/chart_m/WeChat.jpg"
      />&nbsp;复制至微信
    </li>
    <li class="span-item copy" @click="openEnNameDia">
      <img
        style="width: 16px; vertical-align: middle"
        :src="$icons.to_en"
      />&nbsp;设置英文名称
    </li>
    <li
      class="span-item"
      style="color: #ff4040"
      @click="delChartHandle"
      v-if="chartInfo.Button.IsEdit"
    >
      <i class="el-icon-delete" style="color: #ff4040" />&nbsp;删除
    </li>
  </ul>
</template>
<script>
export default {
  props: ['chartInfo','linkUrl'],
  methods: {
    copyChartConfirm(type) {
      this.$emit('copyChartConfirm',type)
    },
    addMychartHandle(item) {
      this.$emit('addMychartHandle',item)
    },
    refreshHandle() {
      this.$emit('refreshHandle')
    },
    saveChartHandle() {
      this.$emit('saveChartHandle')
    },
    saveChartOtherHandle() {
      this.$emit('saveChartOtherHandle')
    },
    editChartHandle() {
      this.$emit('editChartHandle')
    },
    openEnNameDia() {
      this.$emit('openEnNameDia')
    },
    delChartHandle() {
      this.$emit('delChartHandle')
    }
  },
};
</script>
<style scoped lang="scss">
.right-actions {
  /* max-width: 160px; */
  height: 100%;
  padding: 20px 10px;
  border-left: 1px solid #DCDFE6;
  li {
    margin-bottom: 15px;
  }
  @media screen and (max-width: 1710px) {
    font-size: 12px;
  }
  .span-item {
    color: #409eff;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
    .el-icon-collection,
    .el-icon-document-copy {
      color: #409eff;
    }
  }
}
</style>
