<template>
  <app-drawer v-model="visible" :loading="loading" append-to-body class="tree-drawer" hide-footer
              title="数据库选择"
              width="70%"
              @cancel="closeChange" @confirm="onConfirm"
  >
    <div class="page-view flex-row-sb">
      <app-sync-tree
        ref="appAsyncTree"
        :actions="treeActions"
        :default-checked-keys="defaultCheckedKeys"
        :default-data="{ customConfigField: 'custom config field' }"
        :default-expanded-keys="defaultExpandedKeys"
        :expand-all="false"
        :fields="treeFields"
        :props="treeProps"
        :request-method="getTreeNodes"
        highlight-first
        title="贴源层目录"
        @select="onTreeNodeClick"
      />
      <div class="page-view flex-1 ml-11">
        <div class="searchFlex">
          <div class="nameFlex">
            <div style="width: 110px">表中文名称</div>
            <el-input v-model="searchFrom.querys[0].value" clearable placeholder="请输入" />
          </div>
          <div>
            <el-button icon="el-icon-search" size="mini" type="primary" @click="searchChange">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetChange">重置</el-button>
          </div>
        </div>
        <div class="pa-11 bg-white h-100 flex-col mt-11 border-radius-5 relactive">
          <div v-if="cardList.length>0" class="grid-box flex-1 overflow-y bg-white pa-10 border-radius-4">
            <div v-for="item in cardList" :key="item.id" class="bg-white">
              <el-card :class="{active:selectIndex === item.id}" class="box-card"
                       @click.native="selectClick(item)"
              >
                <div slot="header" class="flex-row-sb-c">
                  <span />
                </div>
                <div class="">
                  <div class="text-c pb-10" style="margin: 8px 0">
                    <span class="text-color-light fs-17 fw-bold"> {{ item.name }}</span>
                  </div>
                  <table class="descriptions-table flex-1">
                    <tr>
                      <th>数据库表名</th>
                      <td>{{ item.tableNameEn }}</td>
                    </tr>
                    <tr v-if="!item.fieldCode">
                      <th>表资源编码</th>
                      <td>{{ item.code }}</td>
                    </tr>
                    <tr v-if="!item.fieldCode">
                      <th>实体表类型</th>
                      <td>{{ item.tableType === '1' ? '主表' : '子表' }}</td>
                    </tr>
                    <tr v-if="item.fieldCode">
                      <th>字段名</th>
                      <td :style="{color:'#409EFF'}">{{ item.fieldCode }}</td>
                    </tr>
                    <tr v-if="item.fieldName">
                      <th>字段中文名</th>
                      <td :style="{color:'#409EFF'}">{{ item.fieldName }}</td>
                    </tr>
                  </table>
                </div>
              </el-card>
            </div>
          </div>
          <el-empty v-else description="暂无数据表" style="height: 100%" />

          <el-pagination
            ref="paginationPanel"
            :current-page="searchFrom.pageBean.page"
            :page-size="searchFrom.pageBean.pageSize"
            :page-sizes="[9, 18]"
            :total="total"
            align="right"
            background
            layout="total, prev, pager, next, jumper"
            style="margin: 20px 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <div v-if="fieldSelectionShow" class="dialog-footer">
            <el-button size="small" type="primary" @click="onConfirm">确 定</el-button>
            <el-button size="small" @click="closeChange">取 消</el-button>
          </div>
        </div>
      </div>
    </div>
    <field-list v-if="fielsShow" v-model="fielsShow" :data="selectData" @confirm="confimChange" />
  </app-drawer>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import API from '@/api/business/dataODSCatalog';
import FieldList from './FieldList.vue';

export default {
  name: 'TableDrawer',
  components: { FieldList },
  mixins: [dialogMixin],
  props: {
    tableClass: {
      type: String,
      default: '1',
    },
    treeId: {
      type: String,
      default: '',
    },
    tableId: {
      type: String,
      default: '',
    },
    sheetPage: {
      type: Number,
      default: 0,
    },
    sheetPageSize: {
      type: Number,
      default: 0,
    },
    dataRow: {
      type: Object,
      default: () => {
      },
    },
  },
  data() {
    const TREE_CONFIG = {
      treeProps: {
        value: 'id',
        label: 'name',
      },
      expandAll: false,
      defaultExpandedKeys: ['1'],
      defaultCheckedKeys: ['1'],
      treeFields: [
        { label: '目录名称', prop: 'name', rules: [{ required: true, message: '资源目录名称不能为空' }] },
        { label: '目录编码', prop: 'code', rules: [{ required: true, message: '资源目录编码不能为空' }] },
      ],
      curNode: {}, // 当前选择节点
    };
    return {
      ...TREE_CONFIG,
      total: 0,
      name: '',
      loading: false,
      selectIndex: '',
      selectData: {},
      fielsShow: false,
      searchFrom: {
        'querys': [
          {
            'group': 'quick',
            'operation': 'LIKE',
            'relation': 'OR',
            'value': '',
            'property': 'name',
          },
          {
            'operation': 'EQUAL',
            'property': 'odsCatalogsId',
            'relation': 'AND',
            'value': '',
          },
          {
            'operation': 'EQUAL',
            'property': 'deployed',
            'relation': 'AND',
            'value': '1',
          },
        ],
        'pageBean': {
          'page': 1,
          'pageSize': 9,
        },
        'sorter': [],
      },
      cardList: [],
      fieldSelectionShow: false,
    };
  },
  created() {
    // console.log(this.dataRow, 'dataRowdataRow');
    // console.log(this.tableClass, this.treeId, this.tableId, this.sheetPage, this.sheetPageSize, '-----', typeof this.sheetPage);
    if (this.tableId !== '') {
      this.searchFrom.querys[1].value = this.treeId;
      this.selectIndex = this.tableId;
      this.searchFrom.pageBean.page = Number(this.sheetPage);
      this.searchFrom.pageBean.pageSize = Number(this.sheetPageSize);
    }
  },
  methods: {
    selectClick(data) {
      this.selectIndex = data.id;
      this.selectData = data;
      this.fielsShow = true;
    },
    searchChange() {
      this.searchFrom.pageBean.page = 1;
      this.searchFrom.pageBean.pageSize = 9;
      this.getCardChange();
    },
    resetChange() {
      this.searchFrom.querys[0].value = '';
      this.searchFrom.pageBean.page = 1;
      this.searchFrom.pageBean.pageSize = 9;
      this.getCardChange();
    },
    // 获取卡片列表
    async getCardChange() {
      const data = await API.getSourceList(this.searchFrom);
      this.total = data.total;
      this.cardList = data.rows;
      this.searchFrom.pageBean.page = data.page;
      this.searchFrom.pageBean.pageSize = data.pageSize;

      // 表字段你回显
      if (this.tableId !== '') {
        this.cardList = this.cardList.map((item) => {
          if (item.id === this.tableId) {
            item.fieldCode = this.dataRow.fieldCloumn;
            item.fieldName = this.dataRow.fieldName;
          }
          return item;
        });
      }
    },
    handleSizeChange(pageSize) {
      this.searchFrom.pageBean.pageSize = pageSize;
      this.getCardChange();
    },
    handleCurrentChange(page) {
      this.searchFrom.pageBean.page = page;
      this.getCardChange();
    },
    closeChange() {
      this.selectIndex = '';
      this.visible = false;
    },
    onConfirm() {
      const data = this.cardList.filter(item => item.id === this.selectIndex);
      this.$emit('confirm', data[0]);
      this.visible = false;
    },
    confimChange(fieldData, tableData) {
      // console.log(fieldData, 'fieldDatafieldDatafieldData');
      this.fieldSelectionShow = true;
      this.cardList.forEach(obj => {
        if (obj.id === tableData.id) {
          obj.fieldName = fieldData.name;
          obj.fieldCode = fieldData.code;
          obj.fieldId = fieldData.id;
          obj.dimensionId = fieldData.dimensionId;
          obj.fieldValueType = fieldData.fieldValueType;
          // 回显 treeid page pagesize
          obj.sheetTreeId = this.searchFrom.querys[1].value;
          obj.sheetPage = this.searchFrom.pageBean.page;
          obj.sheetPageSize = this.searchFrom.pageBean.pageSize;
        }
      });
    },
    // 左边数
    async getTreeNodes() {
      const { value } = await API.queryTreeData();
      this.defaultExpandedKeys = [value?.[0].id || ''];
      return { data: value || [] };
    },
    reloadTree() {
      this.$refs.appAsyncTree.getTreeData();
    },
    treeActions(data) {
      return [];
    },
    onTreeNodeClick(node) {
      if (node.id === this.curNode?.id) return;
      this.curNode = { ...node };
      this.searchFrom.querys[1].value = node.id;
      this.searchFrom.pageBean.page = 1;
      this.searchFrom.pageBean.pageSize = 9;
      this.getCardChange();
    },

  },
};
</script>

<style lang="scss" scoped>
::v-deep .app-drawer .app-drawer-content {
  padding: 0 !important;
}

.searchFlex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 10px;
  border-radius: 5px;

  .nameFlex {
    display: flex;
    align-items: center;
  }
}

.relactive {
  position: relative;
  top: 0;
  left: 0;
}

.dialog-footer {
  //position: absolute;
  //left: 0;
  //bottom: 20px;
  text-align: center;
  width: 100%;
}

.active {
  box-shadow: 0 2px 12px 0 #1890FF;
}

.selectIcon {
  position: absolute;
  right: 0;
  top: 0;
  color: #1890FF;
  font-size: 20px;
  transform: rotate(45deg);
}

.box-card {
  cursor: pointer;
}

.grid-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px 20px;

  ::v-deep {
    .el-card {
      flex: 1;
      height: 100%;
      position: relative;
      background: linear-gradient(-210deg, transparent 1.5em, #fff 0);

      &::before {
        content: '';
        display: block;
        width: 1.73em;
        height: 3em;
        position: absolute;
        background: linear-gradient(-60deg, #ebeef5 50%, transparent 0);
        left: -4px;
        top: 0;
        border-bottom-left-radius: inherit;
        transform: translateY(-0.5em) rotate(30deg);
        transform-origin: bottom right;
        box-shadow: 0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.25);
      }
    }

    .el-card__body {
      padding: 11px;
    }

    .el-card__header {
      padding: 0 15px;
      border: 0;
    }
  }
}

.icon {
  width: 10em;
  height: 5em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
