<template>
  <el-drawer append-to-body
             class="avue-dialog"
             title="数据源管理"
             :close-on-click-modal="false"
             v-model="box"
             size="40%">
    <el-form label-width="80px">
      <div class="avue-collapse__top">
        <el-button type="primary"
                   @click="dataParent.handleAdd()">新增数据源</el-button>
      </div>
      <el-collapse class="avue-collapse"
                   v-model="activeName">
        <el-collapse-item :name="index"
                          v-for="(item,index) in contain.activeObj.dataList"
                          :key="index">
          <template #title>
            <div class="avue-collapse__header">
              <div class="avue-flex"
                   @click="dataParent.stopCollapse">
                <el-tooltip effect="dark"
                            content="激活"
                            placement="top">
                  <el-checkbox v-model="item.switch"
                               size="small"></el-checkbox>
                </el-tooltip>
                <div class="index">{{ index+1 }}.</div><avue-input v-model="item.name"
                            :disabled="!item.switch"></avue-input>
              </div>
              <el-icon @click.stop="handleDel(item,index)">
                <el-icon-delete></el-icon-delete>
              </el-icon>
            </div>
          </template>
          <el-form-item label="数据类型">
            <avue-select v-model="item.dataType"
                         :dic="contain.dicOption.dataType"></avue-select>
            &nbsp;
            <template v-if="dataParent.isStatic(item)">
              <el-button type="primary"
                         icon="el-icon-edit"
                         @click="contain.openCode({type:'data',title:'数据值',parent:'dataList',index,isObject:true})">编辑</el-button>
              &nbsp;
              <el-upload :show-file-list="false"
                         :auto-upload="false"
                         style="display:inline-block"
                         accept=".xls,.xlsx"
                         :on-change="(file) => handleImport(file, item)">
                <el-button icon="el-icon-upload"
                           type="success">导入数据(Excel)</el-button>
              </el-upload>
            </template>
            <template v-else-if="dataParent.isApi(item)">
              <el-checkbox v-model="item.proxy"
                           @click="dataParent.handleRes"
                           size="small">跨域</el-checkbox>
            </template>
          </el-form-item>
          <template v-if="dataParent.isSql(item)">
            <el-form-item label="数据源选择">
              <div class="avue-flex">
                <avue-select :dic="dataParent.DIC.sql"
                             v-model="dataParent.db[item.id]"></avue-select>
                <el-button @click="handleTest(item,index)"
                           v-if="dataParent.isSql(item)&&dataParent.db[item.id]"
                           icon="el-icon-connection"
                           type="success">点击连接</el-button>
              </div>
            </el-form-item>

            <el-form-item label="SQL语句">
              <el-tooltip effect="dark"
                          content="如果要获取变量，直接写成函数返回sql语句即可"
                          placement="top">
                <el-icon>
                  <el-icon-info-filled></el-icon-info-filled>
                </el-icon>
              </el-tooltip>
              <monaco-editor v-model="dataParent.sql[item.id]"
                             language="sql"
                             height="200"></monaco-editor>
              <el-button type="primary"
                         class="el-button--bottom"
                         icon="el-icon-edit"
                         @click="contain.openCode({type:'sql',title:'SQL语句',parent:'dataList',index,id:item.id,sql:dataParent.sql})">编辑</el-button>
            </el-form-item>
          </template>
          <template v-else-if="dataParent.isApi(item) || dataParent.isNode(item)">
            <el-form-item label="地址">
              <avue-select v-model="item.dataMethod"
                           style="width:100px"
                           placeholder="请求方式"
                           :dic="contain.dicOption.dataMethod"></avue-select>
              <avue-input v-model="item.url"
                          placeholder="请输入地址"></avue-input>
            </el-form-item>
          </template>
          <template v-else-if="dataParent.isWs(item)">
            <el-form-item label="WS地址">
              <el-input v-model="item.wsUrl">
              </el-input>
            </el-form-item>
          </template>
          <template v-else-if="dataParent.isRecord(item)">
            <el-form-item label="数据集">
              <avue-select :dic="dataParent.DIC.recordType"
                           placeholder="请选择分类"
                           :empty-values="[undefined]"
                           @change="(params)=>{dataParent.handleRecordTypeChange(params,item)}"
                           :props="{label:'categoryKey',value:'categoryValue'}"
                           v-model="item.recordType"></avue-select>
              <avue-select :dic="dataParent.DIC.record[item.id]"
                           filterable
                           placeholder="请选择数据集"
                           v-model="item.record"></avue-select>
            </el-form-item>

          </template>
          <template v-else-if="dataParent.isPublic(item)">
            <el-form-item label="数据集选择">
              <avue-select filterable
                           :dic="dataParent.DIC.public"
                           v-model="item.public"></avue-select>
            </el-form-item>
          </template>
          <template v-else-if="dataParent.isFill(item)">
            <el-form-item label="数据填报">
              <avue-select :dic="dataParent.DIC.fillType"
                           placeholder="请选择分类"
                           :empty-values="[undefined]"
                           @change="(params)=>{dataParent.handleFillTypeChange(params,item)}"
                           :props="{label:'categoryKey',value:'categoryValue'}"
                           v-model="item.fillType"></avue-select>
              <avue-select :dic="dataParent.DIC.fill[item.id]"
                           filterable
                           placeholder="请选择数据填报"
                           v-model="item.fill"></avue-select>
            </el-form-item>
            <el-form-item label="其他参数">
              <monaco-editor v-model="item.fillParams"
                             height="300"></monaco-editor>
            </el-form-item>
          </template>
          <template v-else-if="dataParent.isMqtt(item)">
            <el-form-item label="MQTT地址">
              <el-input v-model="item.mqttUrl">
              </el-input>
            </el-form-item>
            <el-form-item label="主题">
              <avue-input v-model="item.topicName"
                          placeholder="多个主题用,间隔"></avue-input>
            </el-form-item>
            <el-form-item label="用户名">
              <avue-input v-model="item.username"
                          placeholder="用户名"></avue-input>
            </el-form-item>
            <el-form-item label="密码">
              <avue-input v-model="item.password"
                          placeholder="密码"></avue-input>
            </el-form-item>
            <el-form-item label="MQTT配置">
              <monaco-editor v-model="item.mqttConfig"
                             height="300"></monaco-editor>
            </el-form-item>
          </template>
          <el-form-item label="请求配置"
                        v-if="dataParent.isWs(item) || dataParent.isApi(item)">
            <el-tabs class="menu__tabs"
                     v-model="dataTabs">
              <el-tab-pane label="请求参数（Body）"
                           :name="0">
                <template v-if="dataTabs==0">
                  <el-radio-group v-if="['post','put'].includes(item.dataMethod)"
                                  v-model="item.dataQueryType">
                    <el-radio label="json">JSON数据</el-radio>
                    <el-radio label="form">FORM表单</el-radio>
                  </el-radio-group>
                  <avue-highlight v-model="item.dataQuery"
                                  height="100"></avue-highlight>
                  <el-button class="el-button--edit"
                             type="primary"
                             icon="el-icon-edit"
                             @click="contain.openCode({type:'dataQuery',title:'请求参数',parent:'dataList',index})">编辑</el-button>
                </template>

              </el-tab-pane>
              <el-tab-pane label="请求头（Headers）"
                           :name="1"
                           v-if="dataParent.isApi(item)">
                <template v-if="dataTabs==1">
                  <avue-highlight v-model="item.dataHeader"
                                  height="100"></avue-highlight>
                  <el-button class="el-button--edit"
                             type="primary"
                             icon="el-icon-edit"
                             @click="contain.openCode({type:'dataHeader',title:'请求头',parent:'dataList',index})">编辑</el-button>
                </template>

              </el-tab-pane>

            </el-tabs>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
      <el-form-item label="过滤器">
        <avue-select v-model="contain.activeObj.dataFormatterId"
                     :dic="dataParent.DIC.filter"
                     :placeholder="contain.activeObj.dataFormatter?'自定义过滤器':'暂无过滤器'"
                     :props="{label:'name',value:'id'}"></avue-select>
        <avue-highlight :model-value="contain.activeObj.dataFormatterId?contain.config.filters[contain.activeObj.dataFormatterId].dataFormatter:contain.activeObj.dataFormatter"
                        height="100"></avue-highlight>
        <el-button class="el-button--edit"
                   style="top:44px"
                   v-if="!contain.activeObj.dataFormatterId"
                   type="primary"
                   icon="el-icon-edit"
                   @click="contain.openCode({type:'dataFormatter',title:'编辑过滤器',dataView:dataParent.dataOldRes})">编辑</el-button>

      </el-form-item>
      <el-form-item label="响应数据">
        <el-tabs class="menu__tabs"
                 v-model="dataParent.resTabs">
          <el-tab-pane label="过滤器后数据"
                       :name="0">
            <json-viewer v-loading="dataParent.dataLoading"
                         v-bind="$loadingParams"
                         :value="dataParent.dataRes"
                         copyable
                         theme="avue-json-theme"
                         boxed></json-viewer>
          </el-tab-pane>
          <el-tab-pane label="原始数据"
                       :name="1">
            <json-viewer v-loading="dataParent.dataLoading"
                         v-bind="$loadingParams"
                         :value="dataParent.dataOldRes"
                         copyable
                         theme="avue-json-theme"
                         boxed></json-viewer>

          </el-tab-pane>
        </el-tabs>
      </el-form-item>
    </el-form>
    <span class="avue-dialog__footer avue-dialog__footer--right">
      <el-button icon="el-icon-edit"
                 type="danger"
                 @click="contain.openCode({type:'stylesFormatter',title:'编辑样式'})">编辑样式</el-button>
      <el-button type="primary"
                 icon="el-icon-refresh"
                 @click="dataParent.handleRes">请求数据</el-button>
      <el-button type="danger"
                 icon="el-icon-close"
                 @click="box=false">关闭</el-button>
    </span>
    <DbContent ref="db" />
  </el-drawer>
</template>

<script>
import DbContent from '@/page/components/DbContent.vue'
import MonacoEditor from '@/page/components/monaco-editor'
export default {
  inject: ["contain", "dataParent"],
  components: {
    DbContent,
    MonacoEditor
  },
  data () {
    return {
      activeName: 0,
      dataTabs: 0,
      box: false
    }
  },
  methods: {
    handleTest (item, index) {
      this.$refs.db.handleOpen(this.dataParent.db[item.id])
    },
    handleImport (file, item) {
      this.$Export.xlsx(file.raw)
        .then(data => {
          item.data = data.results;
          this.$message.success('导入成功')
          this.dataParent.handleRes()
        })
    },
  }
}
</script>