<template>
  <div class="flame-query">
   <div class="filter">
      <!-- <el-select size="mini" v-model="app_id" clearable filterable style="width: 400px;" @change="changeApp" placeholder="请选择要操作的模型">
        <el-option v-for="(option, index) in options" :key="index" :label="option.label" :value="option.value"></el-option>
      </el-select> -->
      <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>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        row-key="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="query_code" width="200" fixed></el-table-column>
        <el-table-column label="查询相关的其它" header-align="center">
          <el-table-column label="查询说明" :width="InputWidth" prop="query_name" header-align="center" fixed>
            <template slot-scope="{ row }">
              <div style="text-align:center"><input class="edit-cell" v-model="row.query_name" /></div>
            </template>
          </el-table-column>
          <el-table-column label="类型" :width="InputWidth" prop="query_type" header-align="center">
            <template slot-scope="{ row }">
              <div style="text-align:center">
                <el-select v-model="row.query_type" placeholder="请选择">
                  <el-option v-for="item in options_query_types" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="执行的SQL" :width="InputWidth" prop="db_sql" header-align="center">
            <template slot-scope="{ row }">
              <div style="text-align:center"><input class="edit-cell" v-model="row.db_sql" /></div>
            </template>
          </el-table-column>
          <el-table-column label="参数列表" :width="InputWidth" prop="params" header-align="center">
            <template slot-scope="{ row }">
              <div style="text-align:center"><input class="edit-cell" v-model="row.params" /></div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="备注" header-align="center">
          <el-table-column label="备注1" prop="remrak_01" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
               <div style="text-align:center"><input class="edit-cell" v-model="row.remark_01" /></div>
            </template>
          </el-table-column>
          <el-table-column label="备注3" prop="remrak_02" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
             <div style="text-align:center"><input class="edit-cell" v-model="row.remrak_02" /></div>
            </template>
          </el-table-column>
          <el-table-column label="备注3" prop="remrak_03" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
               <div style="text-align:center"><input class="edit-cell" v-model="row.remrak_03" /></div>
            </template>
          </el-table-column>
          <el-table-column label="备注4" prop="remrak_04" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
              <div style="text-align:center"><input class="edit-cell" v-model="row.remrak_04" /></div>
            </template>
          </el-table-column>

          <el-table-column label="备注5" prop="remrak_05" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
             <div style="text-align:center"><input class="edit-cell" v-model="row.remrak_05" /></div>
            </template>
          </el-table-column>
          <el-table-column label="备注6" prop="remrak_06" :width="InputWidth" header-align="center">
            <template slot-scope="{ row }">
              <div style="text-align:center"><input class="edit-cell" v-model="row.remrak_06" /></div>
            </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';
export default {
  name: 'Frame-custom-query',
  data() {
    return {
      table_height: null,
      checkWidth: 80,
      InputWidth: 180,
      app_id:null,
      options_query_types: [{ label: '存储过程', value: 'proc' }, { label: 'SQL脚本', value: 'sql' }],
      options: [{ value: '', label: '' }],
      dropCol: [],
      tableData: [],
      options_table: [],
      currentRow: null
    };
  },
  created() {
    // this.getTableHeight();
  },
  mounted() {
    let that = this;
    that.changeApp();
    // that.getComBox();
    this.rowDrop();
    // this.columnDrop();
  },
  computed: {
    ...mapGetters('global', ['flameQuerys'])
  },
  methods: {
    ...mapActions('global',['reloadFrame']),
    getComBox() {
      let that = this;
      that.options = [];

      flame.getAppInfo({}, res => {
        res.forEach(element => {
          that.options.push({ value: element.flame_id, label: element.app_code + '--' + element.app_name });
        });
      });
    },
    // App选择项发生变化时
    changeApp() {
      this.loadTableData();
    },
    // 加载表的字段信息
    loadTableData() {
      let that = this;
      that.tableData = [];

      let temp_all = that.flameQuerys;
      
      let temp = [];
      temp_all.forEach( e=> {
        // if (e.app_id === that.app_id){
          temp.push(e);
        // }
      });
      that.tableData = [];
      
      console.log('flameQuerys',temp);
      // 复制数据到tableData 中,先通过JSON.stringify将对象转换字符串，再通过JSON.parse转换一个一个新的对象，这样就实现深copy
      // JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象
      that.tableData = JSON.parse(JSON.stringify(temp));
      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_query', 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: '操作失败'
          });
        }
      });
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    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];
          console.log('currRow:', currRow);
          _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;
    }
  }
};
</script>

<style lang="scss" scoped>
.flame-query {
  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>
