<template>
  <el-dialog
    v-loading="loading"
    :title="form.id?'编辑报表':'新增报表'"
    :visible.sync="show"
    width="70%"
    :before-close="handleClose"
    top="1vh"
    :close-on-click-modal="false"
  >
    <el-form ref="item" :model="form" :rules="rules" label-width="90px">
      <eb-detail-page>
        <eb-detail-page-block title="基本信息">
          <el-row>
            <el-col :span="8">
              <el-form-item label="报表名称" prop="name">
                <el-input v-model="form.name" clearable placeholder="请输入报表名称"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="查询sql" prop="sql">
            <monaco-editor
              v-model.trim="form.sql"
              language="sql"
              style="height: 300px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="parseSql">解析</el-button>
          </el-form-item>
        </eb-detail-page-block>
        <eb-detail-page-block title="字段信息">
          <el-table :data="form.fieldInfoList">
            <el-table-column label="序号" type="index" width="50"/>
            <el-table-column label="字段名" prop="name" label-class-name="must">
              <template slot-scope="{row,$index}">
                <el-form-item :prop="`fieldInfoList.${$index}.name`" :rules="rules.input">
                  <el-input v-model="row.name" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="属性" prop="prop"/>
            <el-table-column label="值类型" prop="type" >
              <template slot="header">
                <el-popover
                  placement="top-start"
                  trigger="hover">
                  <template>
                    不同类型会适配对应的转换器，默认转换文本
                  </template>
                  <div slot="reference" class="must">
                    值类型
                    <i class="el-icon-question"></i>
                  </div>
                </el-popover>
              </template>
              <template slot-scope="{row}">
                <el-select v-model="row.type">
                  <el-option value="text" label="文本" />
                  <el-option value="boolean" label="布尔值" />
                  <el-option value="enum" label="状态枚举" />
                  <el-option value="dict" label="词汇" />
                  <el-option value="dateTime" label="日期时间" />
                  <el-option value="custom" label="自定义" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="编码标识" prop="code">
              <template slot="header">
                <el-popover
                  placement="top-start"
                  trigger="hover">
                  <template>
                    值类型的辅助字段
                  </template>
                  <div slot="reference" class="must">
                    编码标识
                    <i class="el-icon-question"></i>
                  </div>
                </el-popover>
              </template>
              <template slot-scope="{row}">
                <el-input v-model="row.code" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{row,$index}">
                <el-button type="text" @click="form.fieldInfoList.splice($index, 1)">删除</el-button>
                <el-button type="text" @click="form.conditionList.push({row})">添加查询</el-button>
              </template>
            </el-table-column>
          </el-table>
        </eb-detail-page-block>
        <eb-detail-page-block title="查询条件">
          <el-table :data="form.conditionList">
            <el-table-column label="序号" type="index" width="50"/>
            <el-table-column label="字段名" prop="name" label-class-name="must" width="150">
              <template slot-scope="{row}">
                <el-input v-model="row.name" />
              </template>
            </el-table-column>
            <el-table-column label="属性" prop="prop" label-class-name="must" width="150">
              <template slot-scope="{row,$index}">
                <el-form-item :prop="`conditionList.${$index}.prop`" :rules="rules.input">
                  <el-input v-model="row.prop" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="条件类型" prop="type" width="130">
              <template slot="header">
                <el-popover
                  placement="top-start"
                  trigger="hover">
                  <template>
                    文本：文本选择框<br/>
                    状态：填写状态类型会自动加载对应的枚举<br/>
                    时间日期：当类型为时间日期时输入组件为一个时间范围选中框，会自动根据属性拼接Start和End来区分开始和结束。<br/>比如createTime实际的变量为createTimeStart和createTimeEnd
                  </template>
                  <div slot="reference" class="must">
                    条件类型
                    <i class="el-icon-question"></i>
                  </div>
                </el-popover>
              </template>
              <template slot-scope="{row}">
                <el-select v-model="row.type">
                  <el-option value="text" label="文本" />
                  <el-option value="enum" label="状态枚举" />
                  <el-option value="dict" label="词汇" />
                  <el-option value="dateTime" label="时间日期" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="编码" prop="code" width="150">
              <template slot-scope="{row}">
                <el-input v-model="row.code" />
              </template>
            </el-table-column>
            <el-table-column label="条件sql" prop="conditionSql" width="300">
              <template slot="header">
                <el-popover
                  placement="top-start"
                  trigger="hover">
                  <template>
                    条件sql以#{属性}作为占位符，无需以and开始，会自动追加
                  </template>
                  <div slot="reference" class="must">
                    条件sql
                    <i class="el-icon-question"></i>
                  </div>
                </el-popover>
              </template>
              <template slot-scope="{row,$index}">
                <el-form-item :prop="`conditionList.${$index}.conditionSql`" :rules="rules.input">
                  <el-input type="textarea" autosize v-model="row.conditionSql" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot="header">
                <el-button type="primary" @click="form.conditionList.push({})">添加</el-button>
              </template>
              <template slot-scope="{row,$index}">
                <el-button type="text" @click="form.conditionList.splice($index, 1)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </eb-detail-page-block>
        <template #button>
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="handleClose">取消</el-button>
        </template>
      </eb-detail-page>
    </el-form>
  </el-dialog>
</template>

<script>
import MonacoEditor from "./components/MonacoEditor";
import {parseSql, saveOrUpdate, getById} from "./api/report/design";

export default {
  name: 'Edit',
  components: {
    MonacoEditor,
  },
  props: {
    show: {
      type: Boolean,
      required: true
    },
    id: {
      type: Number,
      require: true
    }
  },

  data() {
    return {
      form: {
        fieldInfoList: [], // 字段信息
        conditionList:[] // 查询条件
      },
      loading: false,

      rules: {
        name: [{required: true, message: '请输入名称', trigger: 'change'}],
        input: [{required: true, message: '请输入名称'}],
        category: [{required: true, message: '请选择', trigger: 'change'}],
      }
    }
  },
  watch: {
    show(show) {
      if (!show) {
        return
      }
      if (this.id == null) {
        this.form = {sql: "", isEnabled: false, fieldInfoList: [], conditionList: []}
        return
      }
      this.getDetail()
    }
  },
  methods: {
    getDetail() {
      this.loading = true
      getById(this.id).then((res) => {
        this.form = res.data
      }).finally(() => {
        this.loading = false
      })
    },
    handleDelete(index) {
      this.form.nodeList.splice(index, 1)
    },
    handleClose() {
      this.$emit('close')
    },
    submitForm() {
      this.$refs.item.validate((valid) => {
        if (!valid) {
          return false
        }
        saveOrUpdate(this.form).then(()=>{
          this.$message.success("操作成功")
          this.handleClose()
        })
      })
    },
    parseSql() {
      let sql = this.form.sql;
      parseSql(sql).then((request) => {
        let dataList = request.data;
        dataList.forEach((item)=>{
          let index = this.form.fieldInfoList.findIndex((i)=>i.label===item.label)
          if (index > -1) {
            return
          }
          this.form.fieldInfoList.push(item);
        })
      });
    },

  }

}
</script>

<style scoped>
</style>
