<template>
  <div>
    <!-- input 框 -->
    <el-col :span="18" class="r_m_b_5">
      <div v-if="showInput" class="r_m_b_10 r_p_lr_5">
        <el-input
          v-model.trim="inlineInputValue"
          clearable
          placeholder="支持模糊查询表名，表中文名"
          class="input-with-select"
          @keyup.enter.native="queryBtn"
        >
          <el-select
            v-if="needSelect"
            slot="prepend"
            v-model="inlineSelectValue"
            class="w110"
            @change="queryFilterChange"
          >
            <el-option label="全局目录" value="1">全局目录</el-option>
            <el-option label="当前目录" value="2">当前目录</el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" type="primary" @click="queryBtn">搜索</el-button>
        </el-input>
      </div>
    </el-col>
    <!-- 按钮组 -->
    <el-col :span="6" class="r_m_b_5">
      <div class="title_all">
        <div class="f_r">
          <el-button-group>
            <el-button
              v-if="chooseMode.includes('table')"
              title="表格"
              type="primary"
              :class="layout == 'table' ? '' : 'is-plain'"
              size="mini"
              icon="el-icon-s-grid"
              @click="layout = 'table'"
            ></el-button>
            <el-button
              v-if="chooseMode.includes('card')"
              title="卡片"
              type="primary"
              :class="layout == 'card' ? '' : 'is-plain'"
              size="mini"
              icon="el-icon-menu"
              @click="layout = 'card'"
            ></el-button>
            <el-button
              v-if="chooseMode.includes('cardline')"
              title="条形"
              type="primary"
              :class="layout == 'cardline' ? '' : 'is-plain'"
              size="mini"
              icon="el-icon-folder"
              @click="layout = 'cardline'"
            ></el-button>
            <el-button
              v-if="chooseMode.includes('cardtxt')"
              title="简单"
              type="primary"
              :class="layout == 'cardtxt' ? '' : 'is-plain'"
              size="mini"
              icon="el-icon-tickets"
              @click="layout = 'cardtxt'"
            ></el-button>
          </el-button-group>
        </div>
      </div>
    </el-col>
    <!-- 各模式区 -->
    <el-col v-if="layout === 'table'" :span="24">
      <dg-table
        :api-code="apiCode"
        :table-data.sync="apiCode.length ? [] : tableData.length ? tableData : commonData"
        :height="480"
        :table-items="tableItems"
        :toolbar-items="toolbarItems"
        :form-items="formItems"
        @selectionChange="selectionChange"
        @rowClick="rowClick"
      ></dg-table>
    </el-col>
    <el-col v-if="layout === 'card'" :span="24">
      <dg-card :card-data="mapCards" @cardDataSource="handleCardClick"></dg-card>
      <el-col :span="24" class="r_m_b_10">
        <div class="Pagination" style="text-align: right; float: left">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[5, 10, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </el-col>
    </el-col>
    <el-col v-if="layout === 'cardline'" :span="24">
      <div class="table_container card_content">
        <!-- cardline 组件引入 -->
        <dg-cardline :card-line-data="mapCards" @cardLineDataSource="handleCardlineClick"></dg-cardline>
        <el-col :span="24" class="r_m_b_10">
          <div class="Pagination" style="text-align: right; float: left">
            <el-pagination
              background
              :current-page="currentPage"
              :page-sizes="[5, 10, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </div>
        </el-col>
      </div>
    </el-col>
    <el-col v-if="layout === 'cardtxt'" :span="24">
      <div class="topicCard" style="height: auto">
        <div class="table_container card_content">
          <dg-cardtxt :cardtxt-data="mapCards" @cardtxtDataSource="handleCardtxtClick"></dg-cardtxt>
        </div>
      </div>
      <el-col :span="24" class="r_m_b_10">
        <div class="Pagination" style="text-align: right; float: left">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[5, 10, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </el-col>
    </el-col>
  </div>
</template>

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

  props: {
    defaultLayout: {
      type: String,
      default: 'card',
    },
    chooseMode: {
      type: Array,
      default: () => ['table', 'card', 'cardline', 'cardtxt'],
    },
    showInput: {
      type: Boolean,
      default: true,
    },
    inputValue: {
      type: String,
      default: '',
    },
    needSelect: {
      type: Boolean,
      default: true,
    },
    selectValue: {
      type: String,
      default: '',
    },
    apiCode: {
      type: String,
      default: '',
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    tableItems: {
      type: Array,
      default: () => [],
    },
    toolbarItems: {
      type: Array,
      default: () => [],
    },
    formItems: {
      type: Array,
      default: () => [],
    },
    allCardData: {
      type: Array,
      default: () => [],
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
    },
  },

  data() {
    return {
      layout: this.defaultLayout,
      inlineInputValue: this.inputValue,
      inlineSelectValue: this.selectValue,
      commonData: this.allCardData,
      mapCards: [], // 单独用 card 相关三种模式组件传数据的数据结构可以参考这里，具体在 created 钩子函数中。
    }
  },

  watch: {
    inlineInputValue(val) {
      this.$emit('update:inputValue', val)
    },
    inlineSelectValue(val) {
      this.$emit('update:selectValue', val)
    },
    commonData(val) {
      this.$emit('update:allCardData', val)
    },
  },

  created() {
    const cardItem = {}
    this.tableItems.forEach((item) => {
      if (item.card && item.card === 'title') cardItem['title'] = item.field
      if (item.card && item.card === 'subTitle') {
        cardItem['subTitle'] = item.field
      }
      if (item.card && item.card === 'url') cardItem['url'] = item.field
      if (item.card && item.card === 'remark') cardItem['remark'] = item.field
    })
    // console.log('test cardItem 数据结构:', cardItem)
    this.commonData.forEach((item) => {
      let middlePerson = {}
      for (let key2 in cardItem) {
        middlePerson[key2] = item[cardItem[key2]]
      }
      this.mapCards.push(middlePerson)
      middlePerson = null
    })
    console.log('test mapCards 数据结构: ', this.mapCards)
  },

  methods: {
    queryBtn() {
      // input 的搜索回调
      this.$emit('queryBtn')
    },
    queryFilterChange(val) {
      // select 的 change 回调
      this.$emit('queryFilterChange', val)
    },
    selectionChange(val) {
      this.$emit('selectionChange', val)
    },
    rowClick(row, column, event) {
      this.$emit('rowClick', row, column, event)
    },
    handleCardClick(row) {
      this.$emit('handleCardClick', row)
    },
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
    handleCardlineClick(val) {
      this.$emit('handleCardlineClick', val)
    },
    handleCardtxtClick(val) {
      this.$emit('handleCardtxtClick', val)
    },
  },
}
</script>
