<template>
  <div id="dataCard" class="dg-card" @contextmenu="showMenu">
    <vue-context-menu :context-menu-data="contextMenuData"></vue-context-menu>
    <template v-for="(item, index) in Data">
      <el-col :key="index" :span="8" class="r_m_b_10 my-el-card" @dblclick.native="cardDataSource(item)">
        <el-card
          shadow="hover"
          :body-style="{ padding: '5px 10px', background: '#f5f8f9' }"
          class="dcCard"
          @click.native="getChooseItem(item)"
        >
          <div slot="header">
            <el-row class="m_h100 my_cb_row">
              <el-col :span="4">
                <img :src="`/dc/static/original/${$styleVars.themeImgType}/${item.OBJ_TYPE}.png`" style="width: 100%" />
              </el-col>
              <el-col :span="18" class="r_m_b_10" style="height: 52px">
                <el-col :span="24" class="tn_overflow" :title="item.OBJ_CNNAME">
                  <span class="card_title fw_700">{{ item.OBJ_CNNAME }} </span>
                </el-col>
                <el-col :span="24" class="tn_overflow fz_12" :title="item.OBJ_NAME">
                  <span>{{ item.OBJ_NAME }}</span>
                </el-col>
                <el-col :span="24" class="tn_overflow fz_12" :title="item.DB_NAME + ' / ' + item.SCHEMA_NAME">
                  <span>{{ item.DB_NAME + ' / ' + item.SCHEMA_NAME }}</span>
                </el-col>
              </el-col>
              <el-col :span="1">
                <i
                  v-if="isMyFav(item)"
                  ref="fagImg"
                  class="fav-icon el-icon-dg-heart2"
                  @click="collectTable(item, true)"
                ></i>
                <i v-else ref="fagImg" class="fav-icon el-icon-dg-heart-o" @click="collectTable(item, false)"></i>
              </el-col>
              <el-col :span="24" class="color909399">
                <p class="remark_3" :title="item.REMARK" style="font-size: 14px; height: 40px; margin-bottom: 0px">
                  <a class="a_desc fw_400">描述：</a>{{ item.REMARK ? item.REMARK : '暂无描述信息' }}
                </p>
              </el-col>
            </el-row>
          </div>
          <div id="iconBtn">
            <template v-for="(action, index) in actionBtns">
              <el-button
                v-if="!action.judge || action.judge(item)"
                :key="index"
                style="margin-right: 6px"
                :type="action.type"
                :icon="action.icon"
                :plain="action.plain"
                @click="cardClickHandle(item, action, $event)"
                >{{ action.title }}
              </el-button>
            </template>
            <el-dropdown
              v-if="moreActionBtns && moreActionBtns.length"
              style="float: right"
              size="mini"
              @command="
                (val) => {
                  selectDropdow(val, item)
                }
              "
            >
              <el-button size="mini" class="el-dropdown-link" icon="el-icon-edit-outline"> 更多操作 </el-button>
              <el-dropdown-menu slot="dropdown">
                <template v-for="(dropItem, index) in moreActionBtns">
                  <el-dropdown-item :key="index" :command="index" :icon="dropItem.icon" :disabled="dropItem.disabled">{{
                    dropItem.title
                  }}</el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-card>
      </el-col>
    </template>
  </div>
</template>

<script>
export default {
  name: 'DgCard',

  props: {
    cardData: {
      type: Array,
      default: () => [],
    },
    actionBtns: {
      type: Array,
      default: () => [],
    },
    moreActionBtns: {
      type: Array,
      default: () => [],
    },
    cardType: {
      type: String,
      default: () => '',
    },
  },

  data() {
    return {
      Data: [],
      chooseItem: {}, // 右键菜单对应数据
      myFavList: [], // 我的收藏
      // contextmenu data (菜单数据)
      contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
        menuName: 'demo',
        // The coordinates of the display(菜单显示的位置)
        axis: {
          x: null,
          y: null,
        },
        menumap: {
          表详情: {
            icoName: 'fa fa-share-alt',
            btnName: '表详情',
            fnHandler: 'tableDetail',
          },
        },
        // Menu options (菜单选项)
        menulists: [
          {
            btnName: '元数据',
            icoName: 'fa fa-home',
            children: [
              {
                icoName: 'fa fa-share-alt',
                btnName: '表详情',
                fnHandler: 'tableDetail',
              },
              {
                icoName: 'fa fa-share-alt',
                btnName: '表结构导出',
                fnHandler: 'tableExport',
              },
            ],
          },
          {
            btnName: '数据目录',
            icoName: 'fa fa-home',
            children: [
              // {
              //   icoName: 'fa fa-bar-chart',
              //   btnName: '创建自助分析'
              // },
              {
                icoName: 'fa fa-file-audio-o',
                btnName: '发布API',
                fnHandler: 'ShareAPI',
              },
              {
                icoName: 'fa fa-file-audio-o',
                btnName: '多维分析',
                fnHandler: 'mulAnalysis',
              },
              // {
              //   icoName: 'fa fa-edit',
              //   btnName: '数据订阅',
              //   fnHandler: 'subscribe',
              // },
              // {
              //   icoName: 'fa fa-eye',
              //   btnName: '360信息'
              // },
              // {
              //   icoName: 'fa fa-lemon-o',
              //   btnName: '图谱分析'
              // },
              // {
              //   icoName: 'fa fa-file-audio-o',
              //   btnName: '发布共享',
              //   fnHandler: 'dataShare'
              // },
              // {
              //   icoName: 'fa fa-history',
              //   btnName: '历史版本'
              // },
            ],
          },
          {
            btnName: '数据关系',
            icoName: 'fa fa-home',
            children: [
              // {
              //   icoName: 'fa fa-database',
              //   btnName: '表采集'
              // },
              {
                icoName: 'fa fa-share-alt',
                btnName: '表血缘分析',
                fnHandler: 'tabBlood',
              },
              {
                icoName: 'fa fa-share-alt',
                btnName: '表影响分析',
                fnHandler: 'tabEffect',
              },
              {
                icoName: 'fa fa-share-alt',
                btnName: '字段血缘分析',
                fnHandler: 'colBlood',
              },
              {
                icoName: 'fa fa-share-alt',
                btnName: '字段影响分析',
                fnHandler: 'colEffect',
              },
              // {
              //   icoName: 'fa fa-share-alt',
              //   btnName: '表全链路分析'
              // },
              // {
              //   icoName: 'fa fa-share-alt',
              //   btnName: '表的字段级分析'
              // },
              // {
              //   icoName: 'fa fa-share-alt',
              //   btnName: '表数据组分析'
              // }
            ],
          },
          {
            btnName: '数据质量',
            icoName: 'fa fa-home',
            children: [
              {
                icoName: 'fa fa-edit',
                btnName: '质量规则设置',
                fnHandler: 'ruleInfoConfig',
              },
              {
                icoName: 'fa fa-edit',
                btnName: '表质量稽核',
                fnHandler: 'dqRuleFunDeploy',
              },
              // {
              //   icoName: 'fa fa-file-audio-o',
              //   btnName: '企业标准评估'
              // },
              // {
              //   icoName: 'fa fa-history',
              //   btnName: '数据源标准评估'
              // },
              // {
              //   icoName: 'fa fa-share-alt',
              //   btnName: '质量特征'
              // },
              // {
              //   icoName: 'fa fa-share-alt',
              //   btnName: '质量监控'
              // },
              // {
              //   icoName: 'fa fa-share-alt',
              //   btnName: '质量配置'
              // }
            ],
          },
          {
            btnName: '数据开发',
            icoName: 'fa fa-home',
            children: [
              // {
              //   icoName: 'fa fa-edit',
              //   btnName: '变更登记',
              //   fnHandler: 'dataChange'
              // },
              // {
              //   icoName: 'fa fa-edit',
              //   btnName: '类似创建表'
              // },
              // {
              //   icoName: 'fa fa-edit',
              //   btnName: '数据导入'
              // },
              {
                icoName: 'fa fa-edit',
                btnName: '数据分发',
              },
              // {
              //   icoName: 'fa fa-edit',
              //   btnName: '查看脚本'
              // },
              {
                icoName: 'fa fa-edit',
                btnName: '数据加工',
                fnHandler: 'dataRel',
              },
              // {
              //   icoName: 'fa fa-edit',
              //   btnName: '创建表'
              // },
              {
                icoName: 'fa fa-edit',
                btnName: '数据下载',
              },
              {
                icoName: 'fa fa-edit',
                btnName: '仪表盘制作',
                fnHandler: 'makePanel',
              },
            ],
          },
          // {
          //   btnName: '数据安全',
          //   icoName: 'fa fa-home',
          //   children: [
          //     {
          //       icoName: 'fa fa-copyright',
          //       btnName: '数据查询申请'
          //     },
          //     {
          //       icoName: 'fa fa-creative-commons',
          //       btnName: '数据分发申请'
          //     },
          //     {
          //       icoName: 'fa fa-cogs',
          //       btnName: '数据安全设置'
          //     }
          //   ]
          // },
          // {
          //   btnName: '数据图谱',
          //   icoName: 'fa fa-home',
          //   children: [
          //     {
          //       icoName: 'fa fa-share-alt',
          //       btnName: '图谱分析'
          //     }
          //   ]
          // },
          {
            btnName: '其他',
            icoName: 'fa fa-home',
            children: [
              {
                icoName: 'fa fa-heart-o',
                btnName: '表收藏/取消收藏',
                fnHandler: 'tableFav',
              },
              // {
              //   icoName: 'fa fa-edit',
              //   btnName: '关注'
              // },
              // {
              //   icoName: 'fa fa-copy',
              //   btnName: '复制'
              // },
              // {
              //   icoName: 'fa fa-paste',
              //   btnName: '粘贴'
              // },
              // {
              //   icoName: 'fa fa-male',
              //   btnName: '移交给'
              // }
            ],
          },
        ],
      },
      applyMap: {},
    }
  },

  // 数据改变监听事件
  watch: {
    cardData(val) {
      this.Data = val
    },
    cardType: {
      deep: true,
      handler: function (newVal, oldVal) {
        console.log(newVal)
        this.initMenu()
      },
    },
  },

  created() {
    // 初始化卡片数据
    if (this.cardData.length) this.Data = this.cardData
    this.initMenu()
    // 初始化个人收藏
    this.getMyFav()
  },

  methods: {
    // 右键菜单维护
    initMenu() {
      console.log(this.cardType, 1111)
      if (this.cardType == 'dcShare') {
        for (var i in this.contextMenuData.menulists[1].children) {
          var item = this.contextMenuData.menulists[1].children[i]
          if (item.btnName == '发布共享') {
            this.contextMenuData.menulists[1].children.splice(i, 1)
          }
        }
        for (var j in this.contextMenuData.menulists[4].children) {
          var item = this.contextMenuData.menulists[4].children[j]
          if (item.btnName == '变更登记') {
            this.contextMenuData.menulists[4].children.splice(j, 1)
          }
        }
        this.contextMenuData.menulists[1].children.push({
          icoName: 'fa fa-edit',
          btnName: '数据订阅',
          fnHandler: 'subscribe',
        })
      } else {
        for (var i in this.contextMenuData.menulists[1].children) {
          var item = this.contextMenuData.menulists[1].children[i]
          if (item.btnName == '数据订阅') {
            this.contextMenuData.menulists[1].children.splice(i, 1)
          }
        }
        this.contextMenuData.menulists[1].children.push({
          icoName: 'fa fa-file-audio-o',
          btnName: '发布共享',
          fnHandler: 'dataShare',
        })
        this.contextMenuData.menulists[4].children.push({
          icoName: 'fa fa-edit',
          btnName: '变更登记',
          fnHandler: 'dataChange',
        })
      }
    },
    // 下拉操作
    selectDropdow(val, item) {
      if (this.moreActionBtns[val].fn) {
        this.moreActionBtns[val].fn(item)
      }
    },
    // 获取右键菜单选中数据
    getChooseItem(item) {
      this.chooseItem = item
      console.log(this.chooseItem)
    },
    // 获取个人收藏
    getMyFav() {
      this.$api
        .DgJsonStore({
          apiCode: 'queryFavInfo',
          params: `command=init&userId=${this.$store.state.user.info.userId}`,
        })
        .then((res) => {
          this.myFavList = res.root
        })
    },
    // 右键菜单表详情
    tableDetail() {
      this.cardDataSource(this.chooseItem)
    },
    // 右键菜单表导出
    tableExport() {
      this.$emit('dataExport', this.chooseItem)
    },
    // 右键菜单表收藏
    tableFav() {
      var isFav = this.isMyFav(this.chooseItem)
      this.collectTable(this.chooseItem, isFav)
    },
    // 右键菜单发布到API
    ShareAPI() {
      this.$emit('dataShareAPI', this.chooseItem)
    },
    // 右键菜单数据订阅
    subscribe() {
      this.$emit('dataSubscribe', this.chooseItem)
    },
    // 右键菜单发布共享
    dataShare() {
      this.$emit('dataShare', this.chooseItem)
    },
    // 右键菜单质量规则设置
    ruleInfoConfig() {
      this.$emit('ruleInfoConfig', this.chooseItem)
    },
    // 右键菜单变更登记
    dataChange() {
      this.$emit('dataChange', this.chooseItem)
    },
    // 右键菜单表血缘分析
    tabBlood() {
      this.$emit('tabBlood', this.chooseItem)
    },
    // 右键菜单表影响分析
    tabEffect() {
      this.$emit('tabEffect', this.chooseItem)
    },
    // 右键菜单仪表盘制作
    makePanel() {
      this.$emit('makePanel', this.chooseItem)
    },
    // 右键数据加工
    dataRel() {
      console.log(this.chooseItem)
      this.$emit('dataRel', this.chooseItem)
    },
    // 右键菜单字段血缘分析
    colBlood() {
      this.$emit('colBlood', this.chooseItem)
    },
    // 右键菜单字段影响分析
    colEffect() {
      this.$emit('colEffect', this.chooseItem)
    },
    // 右键菜单表质量稽核
    dqRuleFunDeploy() {
      this.$emit('dqRuleFunDeploy', this.chooseItem)
    },
    // 收藏/取消收藏
    async collectTable(item, isMyFav) {
      let data = {
        TAB_ID: item.OBJ_ID,
        USER_ID: this.$store?.state?.user?.info?.userId,
        DB_NAME: item.DB_NAME,
        SCHEMA_NAME: item.SCHEMA_NAME,
        TAB_NAME: item.OBJ_NAME,
        TAB_CNNAME: item.OBJ_CNNAME,
        FAV_TIME: new Date(),
      }
      if (isMyFav) {
        // 删除收藏操作
        const res = await this.$api.DgJsonStore({
          apiCode: 'queryFavInfo',
          params: `command=delete&records=[${JSON.stringify(data)}]`,
        })
        if (res.success) {
          this.$message({
            message: '取消收藏成功',
            type: 'success',
          })
          this.getMyFav()
        } else {
          this.$message({
            message: '取消收藏失败',
            type: 'danger',
          })
        }
      } else {
        // 新增收藏操作
        const res = await this.$api.DgJsonStore({
          apiCode: 'queryFavInfo',
          params: `command=insert&records=[${JSON.stringify(data)}]`,
        })
        console.log(res)
        if (res.success) {
          this.$message({
            message: '收藏成功',
            type: 'success',
          })
          this.getMyFav()
        } else {
          this.$message({
            message: '收藏失败',
            type: 'danger',
          })
        }
      }
    },
    // 判断是否已收藏
    isMyFav(item) {
      for (var i in this.myFavList) {
        let fav = this.myFavList[i]
        if (item.DB_NAME == fav.DB_NAME && item.SCHEMA_NAME == fav.SCHEMA_NAME && item.OBJ_NAME == fav.TAB_NAME) {
          return true
        }
      }
      return false
    },
    cardSelect(row, event) {
      this.$emit('cardSelect', row, event)
    },
    cardShare(row) {
      this.$emit('cardShare', row)
    },
    // 路由跳转
    cardDataSource(row) {
      this.$emit('dataSource', row)
    },
    cardClickHandle(row, action, event) {
      if (action.fn) {
        this.$emit('buttonClick', row, action, event)
      }
    },
    // 多维分析
    mulAnalysis() {
      this.$emit('mulAnalysis', this.chooseItem)
    },
    showMenu() {
      if (!this.chooseItem.OBJ_NAME) return
      event.preventDefault()
      var x = event.clientX
      var y = event.clientY
      // Get the current location
      this.contextMenuData.axis = {
        x,
        y,
      }
    },
  },
}
</script>
