<template>
  <div id="dataCardLine" class="dg-cardline">
    <template v-for="(item, index) in propData">
      <el-col :key="index" :span="24" class="r_m_b_10 my-el-card" @dblclick.native="cardLineDataSource(item)">
        <el-card shadow="hover" :body-style="{ padding: '15px', background: '#f5f8f9' }">
          <div slot="header">
            <el-row class="m_h100 my_cb_row">
              <el-col :span="2">
                <img
                  :src="`/meta/static/original/${$styleVars.themeImgType}/dg_wendang_86.png`"
                  style="width: 60px; height: 60px"
                />
              </el-col>
              <el-col :span="19" class="r_m_b_10" style="height: 52px">
                <el-col :span="24" class="tn_overflow" :title="initObjectMap(item).cnName">
                  <span class="card_title fw_700">
                    {{ initObjectMap(item).cnName }}
                  </span>
                </el-col>
                <el-col :span="24" class="tn_overflow fz_12" :title="initObjectMap(item).name">
                  <span>{{ initObjectMap(item).name }}</span>
                </el-col>
                <el-col :span="24" class="tn_overflow fz_12" :title="initObjectMap(item).info">
                  <span>{{ initObjectMap(item).info }}</span>
                </el-col>
              </el-col>
              <el-col :span="24" class="color909399">
                <p class="remark_3" :title="initObjectMap(item).remark" style="height: 56px; margin-bottom: 0px">
                  <a class="a_desc fw_400">描述：</a>
                  {{ initObjectMap(item).remark ? initObjectMap(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)) && action.ACTTYPE == 'action'"
                :key="index"
                :title="action.title"
                :type="action.type"
                :icon="action.icon"
                :plain="action.plain"
                @click="cardLineClickHandle(item, action, $event)"
                >{{ action.title }}</el-button
              >
            </template>
          </div>
        </el-card>
      </el-col>
    </template>
  </div>
</template>

<script>
export default {
  name: 'DgCardline',
  props: {
    cardLineData: {
      type: Array,
      default() {
        return []
      },
    },
    actionBtns: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      propData: [],
    }
  },
  // 数据改变监听事件
  watch: {
    cardLineData(val) {
      this.propData = val
    },
  },
  created() {
    if (this.cardLineData.length) this.propData = this.cardLineData
  },
  methods: {
    initObjectMap(data) {
      let objectMap = {}
      switch (data.OBJ_TYPE) {
        case 'COLUMN':
          objectMap = {
            name: data.COL_NAME,
            cnName: data.COL_CNNAME,
            info: `${data.DB_NAME}/${data.SCHEMA_NAME}/${data.OBJ_NAME}`,
            remark: data.REMARK,
          }
          break

        default:
          objectMap = {
            name: data.OBJ_NAME,
            cnName: data.OBJ_CNNAME,
            info: `${data.DB_NAME}/${data.SCHEMA_NAME}`,
            remark: data.REMARK,
          }
          break
      }
      return objectMap
    },
    cardLineClickHandle(row, action, event) {
      if (action.fn) {
        this.$emit('buttonClick', row, action, event)
      }
    },
  },
}
</script>
