<template>
  <div class="flame-table-info">
    <div class="filter">
      <el-button type="primary" class="bt_search" @click="submit" size="mini" icon="el-icon-upload">提交</el-button>
      <el-button type="primary" class="bt_search" @click="reloadServerFrameTable" size="mini" icon="el-icon-upload">重置模型</el-button>
      <el-button type="primary" class="bt_search" @click="initServerFrameTable" size="mini" icon="el-icon-upload">实始化模型</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border row-key="flame_id" fit stripe highlight-current-row @current-change="handleCurrentChange" align="left" height="100%" max-height="100%">
        <el-table-column type="index" label="序号" width="50" align="center" header-align="center" fixed></el-table-column>
        <el-table-column label="表名" prop="table_name" width="200" fixed></el-table-column>
        <el-table-column label="表相关的其它" header-align="center">
          <el-table-column label="表说明" :width="InputWidth" prop="table_description" header-align="center" fixed>
            <template slot-scope="{ row }">
              <div style="text-align:center"><input class="edit-cell" v-model="row.table_description" /></div>
            </template>
          </el-table-column>
          <el-table-column label="显示值的字段" :width="InputWidth" prop="display_value_field_name" header-align="center">
            <template slot-scope="{ row }">
              <div style="text-align:center">
                <el-select v-model="row.display_value_field_name"  size="mini" clearable placeholder="请选择">
                  <el-option v-for="item in options_col[row.table_name]" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>

              <!-- <div style="text-align:center"><input class="edit-cell" v-model="row.display_value_field_name" /></div> -->
            </template>
          </el-table-column>
          <el-table-column label="显示标签的字段" :width="InputWidth" prop="field_description" header-align="center">
            <template slot-scope="{ row }">
             <div style="text-align:center">
               <el-select v-model="row.display_label_field_name" size="mini" clearable placeholder="请选择">
                 <el-option v-for="item in options_col[row.table_name]" :key="item.value" :label="item.label" :value="item.value"></el-option>
               </el-select>
             </div>
              <!-- <div style="text-align:center"><input class="edit-cell" v-model="row.display_label_field_name" /></div> -->
            </template>
          </el-table-column>
         <!-- <el-table-column label="显示引用字段" :width="InputWidth" prop="display_ref_field_names" header-align="center">
            <template slot-scope="{ row }">
             <el-select v-model="row.display_ref_field_names_commbox" multiple collapse-tags size="mini" clearable placeholder="请选择">
                <el-option v-for="item in options_col[row.table_name]" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <div style="text-align:center"><input class="edit-cell" v-model="row.display_ref_field_names_commbox" /></div>
            </template>
          </el-table-column> -->
          <el-table-column label="显示引用字段" :width="InputWidth" prop="display_ref_field_names" header-align="center">
            <template slot-scope="{ row }">
              <div style="text-align:center"><input class="edit-cell" v-model="row.display_ref_field_names" /></div>
            </template>
          </el-table-column>
          <el-table-column label="排序字段" :width="InputWidth" prop="field_description" header-align="center">
            <template slot-scope="{ row }">
              <el-select v-model="row.sort_field_string" size="mini" clearable placeholder="请选择">
                <el-option v-for="item in options_col[row.table_name]" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <!-- <div style="text-align:center"><input class="edit-cell" v-model="row.sort_field_string" /></div> -->
            </template>
          </el-table-column>
          <el-table-column label="父节点字段" :width="InputWidth" prop="field_description" header-align="center">
            <template slot-scope="{ row }">
              <el-select v-model="row.parent_col_name" size="mini" clearable placeholder="请选择">
                <el-option v-for="item in options_col[row.table_name]" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <!-- <div style="text-align:center"><input class="edit-cell" v-model="row.parent_col_name" /></div> -->
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="缓存相关" header-align="center">
          <el-table-column label="是否缓存" style="text-align: center;" prop="is_data_cache" :width="checkWidth" header-align="center">
            <template slot-scope="{ row }" align="center">
              <div style="text-align:center"><el-checkbox v-model="row.is_data_cache"></el-checkbox></div>
            </template>
          </el-table-column>
          <el-table-column label="单位" :width="InputWidth" prop="cache_unit" header-align="center">
            <template slot-scope="{ row }">
              <div style="text-align:center">
                <el-select v-model="row.cache_unit"  size="mini" placeholder="请选择">
                  <el-option v-for="item in options_units" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="缓存的值" :width="InputWidth" prop="cache_value" header-align="center" fixed>
            <template slot-scope="{ row }">
              <div style="text-align:center"><input class="edit-cell" v-model="row.cache_value" /></div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="从表相关" header-align="center">
          <el-table-column label="从表1" prop="detail_table_name01" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
              <el-select v-model="row.detail_table_name01"  size="mini" clearable placeholder="请选择">
                <el-option v-for="item in options_table" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="从表3" prop="detail_table_name02" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
              <el-select v-model="row.detail_table_name02"  size="mini" clearable placeholder="请选择">
                <el-option v-for="item in options_table" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="从表3" prop="detail_table_name03" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
              <el-select v-model="row.detail_table_name03"  size="mini" clearable placeholder="请选择">
                <el-option v-for="item in options_table" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="从表4" prop="detail_table_name04" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
              <el-select v-model="row.detail_table_name04"  size="mini" clearable placeholder="请选择">
                <el-option v-for="item in options_table" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="从表5" prop="detail_table_name05" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
              <el-select v-model="row.detail_table_name05"  size="mini" clearable placeholder="请选择">
                <el-option v-for="item in options_table" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="从表6" prop="detail_table_name06" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
              <el-select v-model="row.detail_table_name06"  size="mini" clearable placeholder="请选择">
                <el-option v-for="item in options_table" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- <hr />
      <pre style="text-align: left">
        {{tableData}}
      </pre>-->
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import { mapState, mapActions, mapGetters } from 'vuex';
import config from '../../../api/config.js';
import system from '../../../api/system.js';
import flame from '../../../api/flame.js';
import _ from 'lodash';
export default {
  name: 'Frame-table-info',
  data() {
    return {
      table_height: null,
      app_id: null,
      checkWidth: 80,
      InputWidth: 180,
      options_units: [{ label: '分钟', value: '分钟' }, { label: '小时', value: '小时' }, { label: '天', value: '天' }, { label: '周', value: '周' }, { label: '月', value: '月' }],
      options: [{ value: '', label: '' }],
      options_app: [{ value: '', label: '' }],
      dropCol: [],
      tableData: [],
      options_table: [],
      options_col: {},
      currentRow: null
    };
  },
  created() {
    // this.getTableHeight();
  },
  mounted() {
    let that = this;
    that.loadTableData();
    // that.getComBox();
    this.rowDrop();
    // this.columnDrop();
  },
  destroyed() {
    console.log('关闭页面');
  },
  computed: {
    ...mapGetters('global', ['flameTableInfos', 'flameTableInfoItems', 'getOneTableInfoItemByTableName'])
  },
  methods: {
    ...mapActions('global', ['reloadFrame']),
    getComBox() {
      let that = this;
      that.options = [];
      that.options.push({ value: 1681308428271620292, label: '二维码管理系统' });
    },
    // 选择项发生变化时
    changeApp() {
      let that = this;
      that.loadTableData();
    },
    // 加载表的字段信息
    loadTableData() {
      let that = this;
      let temp_all = that.flameTableInfos;
      let temp = [];
      console.log('app_id', that.app_id);
      temp_all.forEach(e => {
        // if (e.app_id === that.app_id) {
        temp.push(e);
        // }
      });
      that.tableData = [];
      // 复制数据到tableData 中,先通过JSON.stringify将对象转换字符串，再通过JSON.parse转换一个一个新的对象，这样就实现深copy
      // JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象
      
      that.tableData =_.cloneDeep(temp);
      // JSON.parse(JSON.stringify(temp));
      // that.tableData.forEach(e=>{
      //   e['display_ref_field_names_commbox'] =[]
      //   let temp_display_ref_field_names = e.display_ref_field_names;
      //   if( temp_display_ref_field_names!==null){
      //     e['display_ref_field_names_commbox'] = e.display_ref_field_names.split(',')
      //   }
      // });
      that.options_table = [];
      that.options_col = {};

      that.tableData.forEach(e => {
        // if (e.app_id === that.app_id) {
        that.options_table.push({ value: e.table_name, label: e.table_name + '--' + e.table_description });

        let table_col = [];
        let table_info_item = that.getOneTableInfoItemByTableName(e.table_name);
        table_info_item.forEach(e => {
          table_col.push({ label: e.field_description, value: e.field_name });
        });
        that.options_col[e.table_name]= table_col ;
        // }
      });
      console.log('options_col:', that.options_col);
      that.rowDrop();
    },
    // 提交方法
    submit() {
      let that = this;
      let k = 1;
      that.tableData.forEach(element => {
        element.field_color_der = k;
        element.search_sort = k;
        k += 1;
      });
      let commit_data = { data: that.tableData };
      system.batchUpdateInstance('flame_table_info', commit_data, res => {
        if (res.result === true) {
          // that.reloadFrame();
          that.$message({
            type: 'success',
            message: '操作成功'
          });
        } else {
          that.$message({
            type: 'error',
            message: '操作失败'
          });
        }
      });
    },
    // 重置服务器上的缓存数据
    reloadServerFrameTable() {
      let that = this;
      flame.initFrameData({}, res => {
        if (res.result === true) {
          that.reloadFrame();
          that.$message({
            type: 'success',
            message: '操作成功,请重新登陆,才会有效.'
          });
        } else {
          that.$message({
            type: 'error',
            message: '操作失败'
          });
        }
      });
    },
    // 重置服务器上的缓存数据
    initServerFrameTable() {
      let that = this;
      flame.initFrame({}, res => {
        if (res.result === true) {
          that.reloadFrame();
          that.$message({
            type: 'success',
            message: '操作成功,请重新登陆,才会有效.'
          });
        } else {
          that.$message({
            type: 'error',
            message: '操作失败'
          });
        }
      });
    },
    handleCurrentChange(val) {
      let that = this;
      this.currentRow = val;
      console.log('handleCurrentChange==', val);
      // let table_info_item = that.getOneTableInfoItemByTableName(val.table_name);
      // that.options_col= [];
      // table_info_item.forEach(e=>{
      //   that.options_col.push({ label: e.field_description, value: e.field_name });
      // });
      // that.opptions_col = _.cloneDeep(table_info_item);

      // console.log('handleCurrentChange==fk_table_info_item',that.options_col);
    },
    getCurrrenRowIndex() {
      let that = this;
      for (let i = 0; i < that.tableData.length; i++) {
        if (that.tableData[i].field_name == that.currentRow.field_name) {
          return i;
        }
      }
      return -1;
    },
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody');
      const _this = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        }
      });
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex];
          this.dropCol.splice(evt.oldIndex, 1);
          this.dropCol.splice(evt.newIndex, 0, oldItem);
        }
      });
    },
    getTableHeight() {
      let that = this;
      that.table_height = window.innerHeight - 195;
      console.log('表格高度', that.table_height);
    }
  }
};
</script>

<style lang="scss" scoped>
.flame-table-info {
  height: calc(100% - 31px - #{$spacing-small});
}
.filter {
  padding: 0 $spacing-normal;
  width: calc(100% - #{$spacing-normal * 2});
  height: 60px;
  background: $theme-white-1;
  display: flex;
  align-items: center;
}
.table {
  height: calc(100% - 50px);
  overflow-y: scroll;
}
</style>
