dingxin_toolbox_vue/src/components/ec_api/TabArea.vue

<script setup>
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onBeforeUnmount,
  onUnmounted,
  watch,
  computed
} from "vue";
import Sortable from "sortablejs";
import {useStore, mapState} from "vuex";
import JsonEditorVue from "json-editor-vue3";
import {
  ec_api_send_request,
  get_ec_api_request_url,
  ec_api_get_suggest,
  ec_api_get_suggest_timestamp
} from "@/apis/ec_api.js";
import {Eleme, Refresh} from "@element-plus/icons-vue";
import "@/VueAceEditor/aceConfig"
import {VAceEditor} from "vue3-ace-editor";
import {ElMessage} from "element-plus";
import MovieShow from "@/components/ec_api/MovieShow.vue";
import SeatStatus from "@/components/ec_api/SeatStatus.vue";
import CinemaGoods from "@/components/ec_api/CinemaGoods.vue";
import EcardLevel from "@/components/ec_api/EcardLevel.vue";
import CheckQuan from "@/components/ec_api/CheckQuan.vue";
import ApiLockBuySelector from "@/components/ec_api/ApiLockBuySelector.vue";
import MapiLockBuySelector from "@/components/ec_api/MapiLockBuySelector.vue";
import CardLevel from "@/components/ec_api/CardLevel.vue";

// 注册store
const store = useStore()

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


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

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

// 发送按键的loading状态
const req_loading = ref(false)
const send_btn = ref('发送')

// 这对添加券接口和售卖接口的售卖类型
const saleType = ref('ticket')

// 售卖接口中的支付类型
const payType = ref('cash')

// 会员售卖接口中的价格类型
const priceType = ref({
  select_price_type: "cinema_price",
  ticket_info: {
    ticket_price: "20",
    have_service_fee: true,
  },
  ticket_quan_check: false,
  ticket_quan: {
    ticket_quan_num: 0,
    ticket_quan_value: "0.00",
  },
  goods_quan_check: false,
  goods_quan: {
    goods_quan_num: 0,
    goods_quan_value: "0.00",
    goods_quan_type: "兑换券",
  },
  card_num: null,
})

// 表格逻辑
// 多选改变后处理逻辑
function handleParamsChange(newCheckedResult) {
  // console.log('handleParamsChange', newCheckedResult)
  // console.log('activeTab.value', activeTab.value)
  // console.log('UserApiData.value.api[activeTab.value]', UserApiData.value.api[activeTab.value])
}

// 遍历当前标签页下的参数如果勾选则标记is_checked为true
function handleParamsSelect(val) {
  UserApiData.value.api[activeTab.value].params.forEach(param => {
    param['is_checked'] = val.indexOf(param) >= 0;
  })
}

// 自动勾选行 切换标签后检查全部字段，如果字段的is_checked是true则在页面上勾选字段
function markIsChecked() {
  if (UserApiData.value.hasOwnProperty('api') || UserApiData.value.api.length > 0) {
    UserApiData.value.api[activeTab.value].params.forEach(item => {
      if (item['is_checked'] === true) {
        ApiTableRef.value[UserApiData.value.tab[activeTab.value]].toggleRowSelection(item, true)
      } else {
        ApiTableRef.value[UserApiData.value.tab[activeTab.value]].toggleRowSelection(item, false)
      }
    })
  }
}

// 过滤生成url的必须参数，必须包含'format', 'pid', '_sig'否则后端会报错
function checkboxFilter(row) {
  const special_params = ['format', 'pid', '_sig']
  return special_params.indexOf(row.param) < 0;
}

// 初始逻辑数据逻辑处理
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,
  }
  // 根据store.state.ecApiModule.ec_api_data.api来创建本都数据
  let api_id_array = []
  let api_tab = {}
  if (store.state.ecApiModule.ec_api_data.api) {
    store.state.ecApiModule.ec_api_data.api.forEach((item, index) => {
      api_id_array.push(item.id)
      api_tab[item.id] = index
      if (!UserApiData.value['api'].hasOwnProperty(item.id)) {
        UserApiData.value['api'][item.id] = {
          'id': item.id,
          'description': item.description,
          'path': item.path,
          'type': item.type,
          'url': '',
          'response': '{"root": "root"}',
          'handled': '',
          'sig': '',
          'format': 'json',
          'reload': true,
          'timestamp': 0,
          'params': store.state.ecApiModule.ec_api_data.api_params[item.id]
        }
      }
    })
    // 如果删除某接口后同步删除UserApiData中的数据
    Object.values(UserApiData.value['api']).forEach((api) => {
      if (api_id_array.indexOf(api['id']) < 0) {
        delete UserApiData.value['api'][api['id']]
      }
    })
    // 处理cid和pid
    Object.keys(UserApiData.value['api']).forEach(api_id => {
      UserApiData.value['api'][api_id]['params'].forEach(
          param_item => {
            if (param_item['param'] === 'cid') {
              param_item['value'] = UserApiData.value['base_info']['cinema']
            }
            if (param_item['param'] === 'pid') {
              param_item['value'] = UserApiData.value['base_info']['channel']
            }
            // 写入默认值
            param_item['default'] = param_item['value']
          }
      )
    })

    // 把生成的接口数据赋给UserApiData
    UserApiData.value.tab = api_tab
  }
}

// 添加新字段
function addNewParams() {
  UserApiData.value.api[activeTab.value].params.push({
    id: Date.now(),
    api_id: activeTab.value,
    param: '',
    value: '',
    is_request: false,
    is_checked: false,
    is_preset: false
  })
}

// 读取参数默认值
function loadDefault(param) {
  console.log(param)
  UserApiData.value.api[activeTab.value].reload = true
  get_suggest()
}

// 切换返回数据格式
function changeFormat() {
  UserApiData.value.api[activeTab.value]['params'].forEach(p => {
    if (p['param'] === 'format') {
      if (['json', 'xml'].indexOf(p['value']) < 0) {
        alert('format参数值支持json和xml')
        return
      }
      if (p['value'] === 'json') {
        UserApiData.value.api[activeTab.value]['format'] = 'json'
        p['response'] = '{"root": "root"}'
      }
      if (p['value'] === 'xml') {
        UserApiData.value.api[activeTab.value]['format'] = 'html'
        UserApiData.value.api[activeTab.value]['response'] = '<root></root>'
      }
    }
  })
}


// 准备获取url和发送请求需要的参数
function handle_request_data() {
  let data = {}
  let req_data = {}
  UserApiData.value.api[activeTab.value]['params'].forEach(
      p => {
        if (p['param'] !== '_sig' && p['is_checked'] === true) {
          req_data[p['param']] = p['value']
        }
      }
  )
  data['env'] = UserApiData.value.base_info['env']
  data['type'] = UserApiData.value.api[activeTab.value]['type']
  data['api'] = UserApiData.value.api[activeTab.value]['path']
  data['pid'] = UserApiData.value.base_info['channel']
  data['cid'] = UserApiData.value.base_info['cinema']
  data['params'] = JSON.stringify(req_data)
  return data
}

// 生成请求的url，用于页面展示
function handle_request_url() {
  console.log('UserApiData.value', UserApiData.value)
  if (UserApiData.value.base_info['cinema'] === '' || UserApiData.value.base_info['channel'] === '') {
    alert('请选择影院和渠道！')
    return
  }
  const data = handle_request_data()
  get_ec_api_request_url(data).then(res => {
    console.log('handle_update_url', res)
    UserApiData.value.api[activeTab.value]['url'] = res['url']
    UserApiData.value.api[activeTab.value]['params'].forEach(p => {
      if (p['param'] === '_sig') {
        p['value'] = res['sig']
      }
    })
  }).catch(err => console.log(err))
}

// 发送api请求
function send_request() {
  // 处理按钮状态
  req_loading.value = true
  send_btn.value = '请求中'
  // 处理请求
  if (UserApiData.value.api[activeTab.value].format === 'json') {
    UserApiData.value.api[activeTab.value].response = '{"root": "root"}'
  }
  if (UserApiData.value.api[activeTab.value].format === 'html' || UserApiData.value.api[activeTab.value].format === 'xml') {
    UserApiData.value.api[activeTab.value].response = '<root></root>'
  }
  const data = handle_request_data()
  ec_api_send_request(data).then(res => {
        UserApiData.value.api[activeTab.value].handled = JSON.parse(res.handled)
        if (res.format === 'json') {
          UserApiData.value.api[activeTab.value].response = JSON.stringify(JSON.parse(res.data), null, 2)
        }
        if (res.format === 'xml') {
          const xmlDoc = new DOMParser().parseFromString(res.data, 'application/xml');
          const serializer = new XMLSerializer();
          UserApiData.value.api[activeTab.value].response = serializer.serializeToString(xmlDoc);
        }
        // 处理按钮状态
        req_loading.value = false
        send_btn.value = '发送'
      }
  ).catch(err => {
    req_loading.value = false
    send_btn.value = '发送'
    ElMessage.error('获取请求结果失败！')
  })
}

async function get_suggest(options = {sale_type: saleType.value, pay_type: payType.value}) {
  if (UserApiData.value.api[activeTab.value].reload === true) {
    const api_type = UserApiData.value.api[activeTab.value].type
    const api = UserApiData.value.api[activeTab.value].path
    const env = UserApiData.value.base_info['env']
    const cid = UserApiData.value.base_info['cinema']
    const pid = UserApiData.value.base_info['channel']
    if (api_type === 'member') {
      UserApiData.value.api[activeTab.value]['params'].forEach(p => {
        if (p['param'] === 'card') {
          const reg = /^\d*?$/
          const result = reg.test(p['value'])
          console.log('正则结果', result)
          if (result) {
            priceType.value['card_num'] = p['value']
          }
        }
      })
      options['pay_type'] = JSON.stringify(priceType.value)
      console.log('options.pay_type', options.pay_type)
      console.log('priceType.value', priceType.value)
    }

    await ec_api_get_suggest(api_type, api, env, cid, pid, options).then(
        (res) => {
          console.log('get_suggest', api, res)
          let result = true
          if (res.length === 0) {
            result = true
          }
          res.forEach((suggest) => {
            UserApiData.value.api[activeTab.value].params.forEach((param) => {
              if (suggest.result === false) {
                result = false
              }
              if (param.param === suggest.param) {
                param['value'] = suggest['value']
                param['default'] = suggest['value']
                param['is_checked'] = suggest['is_checked']
              }
            })
          })
          UserApiData.value.api[activeTab.value].reload = !result
          markIsChecked()
        }
    ).catch((err) => {
      console.log(err)
    })
  }
}

async function get_timestamp(options = {sale_type: saleType.value, pay_type: payType.value}) {
  const api_type = UserApiData.value.api[activeTab.value].type
  const api = UserApiData.value.api[activeTab.value].path
  const env = UserApiData.value.base_info['env']
  const cid = UserApiData.value.base_info['cinema']
  const pid = UserApiData.value.base_info['channel']
  if (api_type === 'member') {
    UserApiData.value.api[activeTab.value]['params'].forEach(p => {
      if (p['param'] === 'card') {
        const reg = /^\d*?$/
        const result = reg.test(p['value'])
        console.log('正则结果', result)
        if (result) {
          priceType.value['card_num'] = p['value']
        }
      }
    })
    options['pay_type'] = JSON.stringify(priceType.value)
    console.log('options.pay_type', options.pay_type)
    console.log('priceType.value', priceType.value)
  }
  await ec_api_get_suggest_timestamp(api_type, api, env, cid, pid, options).then(
      res => {
        console.log('get_timestamp', res['timestamp'])
        if (res['timestamp'] > UserApiData.value.api[activeTab.value].timestamp) {
          UserApiData.value.api[activeTab.value].reload = true
          UserApiData.value.api[activeTab.value].timestamp = res['timestamp']
        }
      }
  ).catch((err) => {
    console.log(err)
  })
}

// 通过传参来勾选和取消勾选字段
function check_params(checked, unchecked) {
  UserApiData.value.api[activeTab.value].params.forEach(param => {
    if (checked.indexOf(param.param) >= 0) {
      param.is_checked = true
    }
    if (unchecked.indexOf(param.param) >= 0) {
      param.is_checked = false
    }
  })
  // get_suggest()
}

// 获取售卖类型并自动勾选字段
function get_sale_type(sale_type) {
  saleType.value = sale_type
  if (UserApiData.value.api[activeTab.value].path === "order/buy-goods")
    saleType.value = 'goods'
  console.log('sale_type', sale_type)

  if (UserApiData.value.api[activeTab.value].path === "seat/check-coupon") {
    switch (saleType.value) {
      case 'ticket':
        check_params(["play_id", "price", "seat_num"], ["goods"]);
        break;
      case 'goods':
        check_params(["goods"], ["play_id", "price", "seat_num"]);
        break;
      case 'all':
        check_params(["play_id", "price", "seat_num", "goods"], []);
        break;
    }
  }
  if (UserApiData.value.api[activeTab.value].path === "seat/lock-buy") {
    switch (saleType.value) {
      case 'ticket':
        check_params(["play_id", "play_update_time", "seat", "lock_flag"], ["goods"]);
        break;
      case 'goods':
        check_params(["goods"], ["play_id", "play_update_time", "seat", "lock_flag"]);
        break;
      case 'all':
        check_params(["play_id", "play_update_time", "seat", "lock_flag", "goods"], []);
        break;
    }
  }
  if (UserApiData.value.api[activeTab.value].path === "order/buy-goods") {
    switch (saleType.value) {
      case 'goods':
        check_params(["goods"], ["play_id", "play_update_time", "seat", "lock_flag"]);
        break;
    }
  }
  get_timestamp()
  get_suggest()
  markIsChecked()
}

// 设置券的回调函数
function get_quan_detail(quan, cardQuan, quanType) {
  console.log('quanType', quanType)
  if (quanType === 'yushouquan') {
    console.log('yushouquan')
    UserApiData.value.api[activeTab.value].params.forEach(param => {
      if (param['param'] === 'coupons') {
        console.log('coupons', quan)
        param['value'] = quan.join(',')
        param['is_checked'] = true
      }
      if (param['param'] === 'card_coupons') {
        param['value'] = null
        param['is_checked'] = false
      }
    })
  } else {
    UserApiData.value.api[activeTab.value].params.forEach(param => {
      if (param['param'] === 'card_coupons') {
        param['value'] = JSON.stringify(cardQuan)
        param['is_checked'] = true
      }
      if (param['param'] === 'coupons') {
        param['value'] = null
        param['is_checked'] = false
      }
    })
  }
  console.log('get_quan_detail - saleType.value', saleType.value)
  get_timestamp()
  get_suggest()
  markIsChecked()
}

function get_pay_type(pay_type) {
  console.log('pay_type', pay_type)
  payType.value = pay_type
  switch (pay_type) {
    case 'cash':
      check_params(["cash"], ["ecard_number", "coupons", "card_coupons"]);
      break;
    case 'ecard':
      check_params(["cash", "ecard_number"], ["coupons", "card_coupons"]);
      break;
    case 'yushouquan':
      check_params(["cash", "coupons"], ["ecard_number", "card_coupons"]);
      break;
    case 'equan':
      check_params(["cash", "card_coupons"], ["ecard_number", "coupons"]);
      break;
  }
  get_timestamp()
  get_suggest()
  markIsChecked()
}

function setup_sale_type() {
  console.log('UserApiData.value.api[activeTab.value].path', UserApiData.value.api[activeTab.value].path)
  console.log('saleType.value', saleType.value)
  if (UserApiData.value.api[activeTab.value].path === "order/buy-goods")
    console.log('UserApiData.value.api[activeTab.value].path === "order/buy-goods"')
  saleType.value = 'goods'
}

function get_sale_type_member(sale_type) {
  saleType.value = sale_type
  console.log('sale_type', sale_type)

  if (UserApiData.value.api[activeTab.value].path === "seat/lock-buy") {
    switch (saleType.value) {
      case 'ticket':
        check_params(["play_id", "play_update_time", "seat", "lock_flag"], ["goods", "goods_card_balance_pay", "goods_cash", "delivery_type", "delivery_location", "delivery_appoint_time", "contact_number"]);
        break;
      case 'goods':
        check_params(["goods", "goods_card_balance_pay", "goods_cash"], ["play_id", "play_update_time", "seat", "lock_flag"]);
        break;
      case 'all':
        check_params(["play_id", "play_update_time", "seat", "lock_flag", "goods", "goods_card_balance_pay", "goods_cash"], []);
        break;
    }
  }
  if (UserApiData.value.api[activeTab.value].path === "order/buy-goods") {
    switch (saleType.value) {
      case 'goods':
        check_params(["goods", "goods_card_balance_pay", "goods_cash"], ["play_id", "play_update_time", "seat", "lock_flag"]);
        break;
    }
  }
  get_timestamp()
  get_suggest()
  markIsChecked()
}

function get_price_type_member(price_type) {
  console.log('price_type', price_type)
  priceType.value = price_type
  console.log('get_price_type_member', price_type.value)
  if (payType.value["select_price_type"] === "cinema_price") {
    check_params(["is_cinema_price", "t3d_pay_amount"], ["is_split_service_fee", "seat_coupons"]);
  } else {
    check_params(["is_cinema_price", "t3d_pay_amount", "is_split_service_fee"], []);
  }
  if (payType.value["ticket_quan_check"] === true) {
    check_params(["seat_coupons"], []);
  } else {
    check_params([], ["seat_coupons"]);
  }

  get_timestamp()
  get_suggest()
  markIsChecked()
}


// 用于测试，可以添加到需要的方法中
function test() {
  console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data)
  console.log('UserApiData.value', UserApiData.value)
  console.log('activeTab.value', activeTab.value)
  console.log('ApiTableRef.value', ApiTableRef.value)
  console.log('ApiTableRef.value', ApiTableRef.value[0].$parent.label)
  // store.state.ecApiModule.ec_api_data.api = []
  // store.state.ecApiModule.show_tab_area = false
}

// 计算属性用来处理场次接口获取的数据，并同步给对应的选择模块
const showList = computed(() => {
  const api = UserApiData.value.api[activeTab.value]
  if (api.path === 'cinema/plays') {
    if (api.format === 'json') {
      if (api.response === '{"root": "root"}') {
        return []
      } else {
        return api.handled['res']['data'] ? api.handled['res']['data'] : []
      }
    }
    if (api.format === 'xml' || api.format === 'html') {
      if (api.response === '<root></root>') {
        return []
      } else {
        return api.handled['res']['data'] ? api.handled['res']['data'] : []
      }
    }
  }
  return []
})

// 计算属性用来处理座位接口获取的数据，并同步给对应的选择模块
const seatList = computed(() => {
  const api = UserApiData.value.api[activeTab.value]
  if (api.path === 'play/seat-status') {
    if (api.format === 'json') {
      if (api.response === '{"root": "root"}') {
        return []
      } else {
        console.log("api.handled['res']['data']", api.handled['res']['data'])
        return api.handled['res']['data'] ? api.handled['res']['data'] : []
      }
    }
    if (api.format === 'xml' || api.format === 'html') {
      if (api.response === '<root></root>') {
        return []
      } else {
        console.log("api.handled['res']['data']", api.handled['res']['data'])
        return api.handled['res']['data'] ? api.handled['res']['data'] : []
      }
    }
  }
  return []
})

// 计算属性用来处理卖品接口获取的数据，并同步给对应的选择模块
const goodsList = computed(() => {
  const api = UserApiData.value.api[activeTab.value]
  if (api.path === 'cinema/goods') {
    if (api.format === 'json') {
      if (api.response === '{"root": "root"}') {
        return []
      } else if (String(api.handled['res']['status']) !== '1') {
        console.log("api.handled['res']['data'] else-if", api.handled['res']['data'])
        console.log("api.handled['res']['status']", api.handled['res']['status'])
        console.log("typeof api.handled['res']['status']", typeof api.handled['res']['status'])
        return []
      } else {
        console.log("api.handled['res']['data']", api.handled['res']['data'])
        return api.handled['res']['data']
      }
    }
    if (api.format === 'xml' || api.format === 'html') {

      if (api.response === '<root></root>') {
        return []
      } else if (String(api.handled['res']['status']) !== '1') {
        console.log("api.handled['res']['status']", api.handled['res']['status'])
        console.log("typeof api.handled['res']['status']", typeof api.handled['res']['status'])
        return []
      } else {
        console.log("api.handled['res']['data']", api.handled['res']['data'])
        return api.handled['res']['data']
      }
    }
  }
  return []
})


const levelList = computed(() => {
  const api = UserApiData.value.api[activeTab.value]
  if (api.path === 'ecard/ecard-levels') {
    if (api.format === 'json') {
      if (api.response === '{"root": "root"}') {
        return []
      } else {
        console.log("api.handled['res']['data']['ecardLevelData']", api.handled['res']['data']['ecardLevelData'])
        return api.handled['res']['data']['ecardLevelData']
      }
    }
    if (api.format === 'xml' || api.format === 'html') {
      if (api.response === '<root></root>') {
        return []
      } else {
        console.log("api.handled['res']['data']['ecardLevelData']", api.handled['res']['data']['ecardLevelData'])
        return api.handled['res']['data']['ecardLevelData']
      }
    }
  }
  if (api.path === 'cinema/card-level-rule') {
    if (api.format === 'json') {
      if (api.response === '{"root": "root"}') {
        return []
      } else {
        console.log("api.handled['res']['data']['ecardLevelData']", api.handled['res']['data']['rule'])
        return api.handled['res']['data']['rule']
      }
    }
    if (api.format === 'xml' || api.format === 'html') {
      if (api.response === '<root></root>') {
        return []
      } else {
        console.log("api.handled['res']['data']['rule']", api.handled['res']['data']['rule'])
        return api.handled['res']['data']['rule']
      }
    }
  }
  return []
})

// 监测ec_select_api的变化 生成新的本地数据，如果当前选中的标签被取消勾选，则选择剩下标签的第一个
watch(() => store.state.ecApiModule.ec_api_data.api, (oldValue, newValue) => {
  console.log('watch.store.state.ecApiModule.ec_api_data.api')
  // 接口数据变化后初始化本地数据
  initApiData()
  // 处理空标签逻辑
  const select_api_id = store.getters['ecApiModule/ec_select_api_getter']
  if (select_api_id.indexOf(activeTab.value) < 0) {
    activeTab.value = select_api_id[0]
  }
}, {deep: true})


// 监测activeTab， 如果切换标签页，则执行自动勾选的函数
watch(activeTab, () => {
  console.log('watch.activeTab')
  setup_sale_type()
  markIsChecked()
  get_timestamp()
  get_suggest()
  handle_request_url()
})

// 监视本地用户数据，如果数据改变，则更新url
watch(UserApiData.value, () => {
  console.log('watch UserApiData', UserApiData.value)
  console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data)
  get_suggest()
  handle_request_url()
}, {deep: true, flush: "post"})


/*
生命周期逻辑
*/
onBeforeMount(
    () => {
      // console.log('TabArea onBeforeMount')
      // 处理请求参数生成本地数据结构
      initApiData()
    }
)

// 挂载后
onMounted(() => {
  // console.log('TabArea onMounted')
  // 勾选is_checked选项
  markIsChecked()
  // 处理拖拽
  const elTabsHeader = tabsRef.value.$el.querySelector('.el-tabs__header .el-tabs__nav');
  const sortTabs = new Sortable(elTabsHeader, {
    animation: 150,
    ghostClass: 'dragging',
    draggable: '.el-tabs__item',
    onEnd: (evt) => {
      console.log('sortTabs-onEnd')
      store.commit('ecApiModule/handle_sort_ec_select_api', {'newIndex': evt.newIndex, 'oldIndex': evt.oldIndex})
    },
  });
});

// 设置vue3-ace-editor
const ace_options = {
  useWorker: false, // 启用语法检查,必须为true
  enableBasicAutocompletion: false, // 自动补全
  enableLiveAutocompletion: false, // 智能补全
  enableSnippets: true, // 启用代码段
  showPrintMargin: false, // 去掉灰色的线，printMarginColumn
  highlightActiveLine: true, // 高亮行
  highlightSelectedWord: true, // 高亮选中的字符
  tabSize: 2, // tab锁进字符
  fontSize: 14, // 设置字号
  wrap: false, // 是否换行
  readonly: true, // 是否可编辑
  minLines: 30, // 最小行数，minLines和maxLines同时设置之后，可以不用给editor再设置高度
  maxLines: 30, // 最大行数
}

</script>

<template>
  <el-tabs ref="tabsRef" v-model="activeTab" type="border-card">
    <el-tab-pane
        v-for="(api, index) in store.state.ecApiModule.ec_api_data.api"
        :key="api['id']"
        :label="api['description']"
        :name="api['id']"
        :disabled="req_loading"
    >
      <CheckQuan v-if="api['path'] === 'seat/check-coupon'" @getQuan="get_quan_detail" @getSaleType="get_sale_type"
                 :cid="UserApiData['base_info']['cinema']"></CheckQuan>
      <ApiLockBuySelector v-if="api['path'] === 'seat/lock-buy' && api['type'] === 'nonmember'"
                          @getSaleType="get_sale_type"
                          @getPayType="get_pay_type" type="ticket"></ApiLockBuySelector>
      <ApiLockBuySelector v-if="api['path'] === 'order/buy-goods' && api['type'] === 'nonmember'"
                          @getSaleType="get_sale_type"
                          @getPayType="get_pay_type" type="goods"></ApiLockBuySelector>
      <MapiLockBuySelector v-if="api['path'] === 'seat/lock-buy' && api['type'] === 'member'"
                           @getSaleType="get_sale_type_member"
                           @getPriceType="get_price_type_member" type="ticket"></MapiLockBuySelector>
      <MapiLockBuySelector v-if="api['path'] === 'order/buy-goods' && api['type'] === 'member'"
                           @getSaleType="get_sale_type_member"
                           @getPriceType="get_price_type_member" type="goods"></MapiLockBuySelector>
      <el-table
          ref='ApiTableRef'
          :data="UserApiData.api[api['id']].params"
          @selection-change="handleParamsChange"
          @select="handleParamsSelect"
          :key="api['id']"
      >
        <el-table-column type="selection" width="50" :selectable="checkboxFilter"/>
        <el-table-column label="字段名" width="200">
          <template v-slot="scope">
            <span v-if="scope.row.is_preset">{{ 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"
                      @blur="changeFormat()"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="刷新推荐值" width="100" align="center">
          <template v-slot="scope">
            <el-button @click="loadDefault(scope.row.param)">
              <el-icon>
                <Refresh/>
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="必选" width="80" align="center">
          <template v-slot="scope">
            <span>{{ scope.row.is_request ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" 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>
      <hr id="break_line"/>
      <el-row class="BtnRow" style="width: 100%" :gutter="10" align="middle">
        <el-col :span="2"><span style="font-weight: bold; color: #909399">请求地址：</span></el-col>
        <el-col :span="12">
          <el-input type="text" v-model="UserApiData.api[api['id']].url" :style="{'font-size': '18px'}"></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="send_request" :loading="req_loading" :disabled="req_loading">
            {{ send_btn }}
          </el-button>
          <!--          <el-button @click="test" >-->
          <!--            测试-->
          <!--          </el-button>-->
        </el-col>
        <el-col :span="8">
        </el-col>
      </el-row>
      <v-ace-editor v-model:value="UserApiData.api[api['id']].response" :lang="UserApiData.api[api['id']]['format']"
                    theme="chrome" :options="ace_options" class="vue-ace-editor" :wrap="true" style="width: 1200px"/>
      <MovieShow v-if="showList.length > 0" :show="showList" :data="UserApiData.api[activeTab]"
                 :base_info="UserApiData.base_info"/>
      <SeatStatus v-if="seatList.length > 0" :seat="seatList" :data="UserApiData.api[activeTab]"
                  :base_info="UserApiData.base_info"/>
      <CinemaGoods v-if="goodsList.length > 0" :goods="goodsList" :data="UserApiData.api[activeTab]"
                   :base_info="UserApiData.base_info"/>
      <EcardLevel v-if="levelList.length > 0 && api['path'] === 'ecard/ecard-levels'" :level="levelList"
                  :data="UserApiData.api[activeTab]"
                  :base_info="UserApiData.base_info"/>
      <CardLevel v-if="levelList.length > 0 && api['path'] === 'cinema/card-level-rule'" :level="levelList"
                 :data="UserApiData.api[activeTab]"
                 :base_info="UserApiData.base_info"/>
    </el-tab-pane>
  </el-tabs>
  <el-backtop :right="300" :bottom="100" :visibility-height="100"/>
</template>

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

.editor {
  margin-top: 20px;
  margin-bottom: 20px;
}

.vue-ace-editor {
  /* ace-editor默认没有高度，所以必须设置高度，或者同时设置最小行和最大行使编辑器的高度自动增高 */
  margin-top: 20px;
  margin-left: 20px;
  border: 1px solid rgba(144, 147, 153, 0.5);
  border-radius: 10px;
}

#break_line {
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: rgba(144, 147, 153, 0.5);
  height: 1px;
  border: none
}
</style>