<script setup>
import {ref, reactive, onMounted, watch} from "vue";
import {getCurrentInstance} from 'vue'
import Sortable from "sortablejs";
import {useStore, mapState} from "vuex";
import {nextTick} from "vue";
import JsonEditorVue from "json-editor-vue3";


// 注册store
const store = useStore()

// 标签相关的定义
const tabsRef = ref(null);  // tabs的Ref
const activeTab = ref(store.state.ecApiModule.first_tab_api_id); // 当前选项卡


// 表格相关的定义
const ApiTableRef = ref(null)  // 表格的Ref
const multipleSelection = ref([])  // checkbox的处理

// 定义变量用于存储接口设置的数据
const UserApiData = ref({})

// 表格逻辑
// 多选改变后处理逻辑
function handleSelectionChange(val) {
  multipleSelection.value = val
}


// 自动勾选行
function markIsRequestSelection() {
  console.log('checkRequestSelection')
  if (store.state.ecApiModule.ec_api_data.api_params_data) {
    store.state.ecApiModule.ec_api_data.api_params_data[activeTab.value].forEach(item => {
      console.log('item', item)
      if (item['is_checked'] === true) {
        ApiTableRef.value[0].toggleRowSelection(item, true)
      }
    })
    console.log(multipleSelection.value)

  }
}

// 初始逻辑数据逻辑处理
function initApiData() {
  UserApiData.value['base_info'] = {
    env: store.state.ecApiModule.ec_api_data.env,
    cinema: store.state.ecApiModule.ec_api_data.cinema,
    channel: store.state.ecApiModule.ec_api_data.channel,
  }
  if (store.state.ecApiModule.ec_api_data.api_data) {
    const params = mapState(store.state.ecApiModule.ec_api_data.api_params_data)
    console.log(params[1])
    store.state.ecApiModule.ec_api_data.api_data.forEach(item => {
      if (UserApiData.value.hasOwnProperty('api') === false) {
        UserApiData.value['api'] = [{
          'id': item.id,
          'desc': item.desc,
          'path': item.path,
          'type': item.type,
          'param': store.state.ecApiModule.ec_api_data.api_params_data[String(item.id)]
        }]
      }
      if (UserApiData.value['api'].filter(api => api.id === item.id).length === 0) {
        UserApiData.value['api'].push({
          'id': item.id,
          'desc': item.desc,
          'path': item.path,
          'type': item.type,
          'param': store.state.ecApiModule.ec_api_data.api_params_data[String(item.id)]
        })
      }
    })
  }
  console.log('UserApiData', UserApiData.value)
}

// 监测ec_select_api的变化 如果当前选中的标签被取消勾选，则选择剩下标签的第一个
watch(store.state.ecApiModule.ec_select_api, (oldValue, newValue) => {
  let tempId = 1
  if (newValue.length > 0) {
    tempId = newValue[0].id
  }
  newValue.forEach(item => {
    if (item.id === activeTab.value) {
      tempId = activeTab.value
    }
  })
  activeTab.value = tempId

  // 处理请求参数生成本地数据结构
  initApiData()
}, {deep: true})
/*
生命周期逻辑
*/
// 挂载后
onMounted(() => {
  console.log('TabArea onMounted')
  // 处理拖拽
  const elTabsHeader = tabsRef.value.$el.querySelector('.el-tabs__header .el-tabs__nav');
  new Sortable(elTabsHeader, {
    animation: 150,
    ghostClass: 'dragging',
    draggable: '.el-tabs__item',
    onEnd: (evt) => {
      store.commit('ecApiModule/handle_sort_ec_select_api', {'newIndex': evt.newIndex, 'oldIndex': evt.oldIndex})
    },
  });

  // initApiData()

  // console.log('UserApiData', UserApiData.value)
  //
  // nextTick(() => {
  //   checkRequestSelection()
  // })
});

// 添加新字段
function addNewParams() {
  store.state.ecApiModule.ec_api_data.api_params_data[activeTab.value].push({
    param: '',
    value: '',
    is_request: false,
    is_checked: false
  })
}
</script>

<template>
  <el-tabs ref="tabsRef" v-model="activeTab">
    <el-tab-pane
        v-for="(tab,index) in store.getters['ecApiModule/ec_select_api_getter']"
        :key="tab.id"
        :label="tab.desc"
        :name="tab.id"
    >
      <el-table
          ref='ApiTableRef'
          :data="store.state.ecApiModule.ec_api_data.api_params_data[tab.id]"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"/>
        <el-table-column label="字段名" width="120">
          <template v-slot="scope">
            <span v-if="scope.row.param">{{ scope.row.param }}</span>
            <span v-else><el-input type="text" placeholder="输入字段名" v-model="scope.row.param"></el-input></span>
          </template>
        </el-table-column>
        <el-table-column label="字段值" width="800">
          <template v-slot="scope">
            <el-input type="textarea" placeholder="输入字段值" v-model="scope.row.value" rows="1"
                      v-if="scope.row.value === 'json' && scope.row.param === 'format'" disabled></el-input>
            <el-input type="textarea" placeholder="输入字段值" v-model="scope.row.value" rows="1" v-else></el-input>
          </template>
        </el-table-column>
        <el-table-column label="必选" width="80">
          <template v-slot="scope">
            <span>{{ scope.row.is_request ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="描述" show-overflow-tooltip/>
      </el-table>
      <el-row class="BtnRow" style="width: 100%">
        <el-col :span="2">
          <el-button type="primary" @click="addNewParams">添加新字段</el-button>
        </el-col>
      </el-row>
      <el-row class="BtnRow" style="width: 100%" :gutter="10">
        <el-col :span="2"><span>请求地址：</span></el-col>
        <el-col :span="12">
          <el-input type="text">1111</el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary">发送</el-button>
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row>
      <!--      <JsonEditorVue class="editor" v-model="json_data" language="zh-CN" @change="handleRunningChange"-->
      <!--                     style="width: 1200px"/>-->
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped>
.BtnRow {
  margin-top: 10px;
}

.editor {
  margin-top: 20px;
}
</style>
