<template>
  <div class="pa-3">
    <div class="pa-3 text-right">
      <v-btn color="primary" rounded class="buttons" @click="onShow">查看方案</v-btn>
    </div>
    <v-card
      class="mb-3"
      v-if="showCard"
    >
      <v-card-title>方案明细 [ {{ itemData.title }} ]</v-card-title>
      <v-card-text>
        <v-tabs v-model="active">
          <v-tab
            v-for="rules in rulesItems"
            :key="rules.category"
          >
            {{ rules.category }}
          </v-tab>
        </v-tabs>
        <v-tabs-items v-model="active" style="min-height: 400px;">
          <v-tab-item
            v-for="rules in rulesItems"
            :key="rules.category"
          >
            <div class="pa-3">
              <v-banner>参数列表</v-banner>
              <v-list>
                <v-list-item-group color="primary">
                  <v-list-item
                    v-for="configurations in rules.calculateConfigurations"
                    :key="configurations.calculateConfigurationId"
                    @click="onSend(`${configurations.name} ${configurations.value}`)"
                  >
                    <v-list-item-content>
                      <v-list-item-title>{{ configurations.name }} {{ configurations.value }}</v-list-item-title>
                    </v-list-item-content>
                  </v-list-item>
                </v-list-item-group>
              </v-list>
              <v-banner>计算公式</v-banner>
              <v-treeview
                activatable
                color="primary"
                item-key="uuid"
                item-text="content"
                :items="rules.calculateFormulas"
                return-object
                @update:active="onSendTree"
              ></v-treeview>
            </div>
          </v-tab-item>
        </v-tabs-items>
      </v-card-text>
    </v-card>
    <div class="box d-flex flex-column">
      <v-textarea
        v-model="code"
        label="请输入执行代码"
        outlined
        rows="6"
        dense
      ></v-textarea>
    </div>
    <v-navigation-drawer
      v-model="show"
      width="500"
      absolute
      temporary
      right
    >
      <div v-loading="loading" style="height: 100%; overflow: auto;">
        <v-banner class="mt-3">方案列表</v-banner>
        <v-list>
          <v-list-item-group color="primary">
            <v-list-item
              v-for="(item, i) in items"
              :key="i"
              @click="handleClick(item)"
            >
              <v-list-item-content>
                <v-list-item-title>{{ item.title }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </div>
    </v-navigation-drawer>
  </div>
</template>

<script>
import axios from 'axios'
// import { api } from '@/api/dataGovernance'
export default {
  name: 'execute-script',
  data () {
    return {
      active: 0,
      show: false,
      code: '',
      loading: false,
      items: [],
      showCard: false,
      itemData: {},
      rulesItems: []
    }
  },
  methods: {
    onShow () {
      this.show = true
      this.getList()
    },
    onSend (e) {
      console.log(e)
      this.code += `${e} `
    },
    onSendTree (e) {
      if (!e.length) {
        return
      }
      this.onSend(e[0].content)
    },
    async handleClick (e) {
      this.show = false
      this.showCard = true
      this.itemData = e
      this.loading = true
      try {
        const { data } = await this.fetchData('/op/base/performance/solution/detail', {
          performanceSolutionId: e.performanceSolutionId
        })
        this.rulesItems = data.performanceSolutionDetailRespCategoryVos
        this.active = 0
      } catch (error) {
        this.$snackbar.error(error)
      } finally {
        this.loading = false
      }
    },
    async getList () {
      try {
        this.loading = true
        const { data } = await this.fetchData('/op/base/performance/solution/page', {
          page: {
            size: 999,
            current: 1
          }
        })
        this.items = data.records.map(e => e.entity)
      } catch (err) {
        this.items = []
        this.$snackbar.error(err)
      } finally {
        this.loading = false
      }
    },
    fetchData (url, params) {
      return new Promise((resolve, reject) => {
        axios.post(url, params, { // 配置对象
          headers: {
            'Content-Type': 'application/json'
          },
          timeout: 5000, // 超时时间(毫秒)
          responseType: 'json' // 响应数据类型
        }).then(res => {
          const { data } = res
          if (data.code !== 20000) {
            reject(data.message)
            return
          }
          resolve(data)
        }).catch(reject)
      })
    }
    // async handleSubmit () {
    //   this.loading = true
    //   try {
    //     await api.savePythonCode({
    //       code: this.code
    //     })
    //     this.$snackbar.success('保存成功')
    //   } catch (error) {
    //     this.$snackbar.error(error)
    //   } finally {
    //     this.loading = false
    //   }
    // }
  }

}
</script>

<style lang="scss" scoped>
</style>
