<template>
  <el-drawer
      v-model="visible"
      v-loading="loading"
      :title="dataForm.id ? '编辑快速开发报表' : '新增快速开发报表'"
      :before-close="handleClose"
      :modal="false"
      size="85%"
      :wrapper-closable="false"
      class="detailDrawer"
  >
    <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="280px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="表单ID" prop="formId">
            <el-input v-model="dataForm.formId" readonly placeholder="请输入表单ID" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="按钮名称" prop="btnLabel">
            <el-input v-model="dataForm.btnLabel" readonly placeholder="请输入按钮名称" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="按钮编码" prop="btnCode">
            <el-input v-model="dataForm.btnCode" readonly placeholder="请输入按钮编码" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="btnShowType">
            <template #label>
              列表按钮方式
              <el-popover placement="top-start" effect="dark" :width="380" trigger="hover" content="列表按钮方式(10 单个还是 20批量)针对列表有效">
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-radio-group v-model="dataForm.btnShowType">
              <el-radio label="10">单个</el-radio>
              <el-radio label="20">批量</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="按钮排序" prop="btnOrder">
            <el-input v-model="dataForm.btnOrder" placeholder="请输入按钮排序" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="按钮权限编码(未开发)" prop="btnPermission">
            <el-input v-model="dataForm.btnPermission" placeholder="请输入按钮权限编码" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="" prop="btnShowEnhance">
            <template #label>
              按钮显示增强
              <el-popover
                  placement="top-start"
                  effect="dark"
                  :width="380"
                  trigger="hover"
                  content="按钮显示增强(单个时变量row,bl;给变量bl设置true和false，false不往下执行，不可写return) 例如：
bl=(row.erpOrderStatus=='10' || row.erpOrderStatus=='ITEM_P')
"
              >
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-input v-model="dataForm.btnShowEnhance" type="textarea" placeholder="请输入按钮显示增强" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="按钮说明(未开发)" prop="btnTip">
            <el-input v-model="dataForm.btnTip" placeholder="请输入按钮说明" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="" prop="btnClickBeforeEnhance">
            <template #label>
              按钮点击前增强
              <el-popover
                  placement="top-start"
                  effect="dark"
                  :width="380"
                  trigger="hover"
                  content="按钮点击前增强(变量rows，bl;如果是单个时去rows[0],批量时rows为选中的数据;给变量bl设置true和false，false不往下执行，不可写return)
例如：
if(rows.length<=0){
  ElMessage.warning('请选择数据')
  bl= false;
}else{
  for(var i=0;i<rows.length;i++){
    if(rows[i].erpOrderStatus!='10' || rows[i].isLj!='0'){
      ElMessage.warning('请选择已提交或未拦截的数据审核')
      bl= false;
      break;
    }
  }
}

按钮跳转时增强(跳转列表时变量：rows,跳转表单时变量：formData,传输到跳转页面变量：clickForm，如果跳转到列表，clickForm 会覆盖查询条件，如果跳转到表单，clickForm会覆盖表单)
"
              >
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-input v-model="dataForm.btnClickBeforeEnhance" type="textarea" placeholder="请输入按钮点击前增强" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="btnClickAfterEnhance">
            <template #label>
              按钮请求后增强
              <el-popover
                  placement="top-start"
                  effect="dark"
                  :width="380"
                  trigger="hover"
                  content="按钮请求后增强(变量res:接口返回的数据;变量reqData:请求的数据)"
              >
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-input v-model="dataForm.btnClickAfterEnhance" type="textarea" placeholder="请输入按钮请求后增强" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="按钮点击后是否关闭(未开发)" prop="btnClickAfterClose">
            <el-input v-model="dataForm.btnClickAfterClose" placeholder="请输入按钮点击后是否关闭,默认关闭" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="按钮点击后是否刷新(未开发)" prop="btnClickAfterRefresh">
            <el-input v-model="dataForm.btnClickAfterRefresh" placeholder="请输入按钮点击后是否刷新,默认刷新" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="按钮是否需要提示确认(未开发)" prop="btnIsConfirm">
            <el-input v-model="dataForm.btnIsConfirm" placeholder="请输入按钮是否需要提示确认" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="按钮提示确认内容" prop="btnConfirmContent">
            <el-input v-model="dataForm.btnConfirmContent" placeholder="按钮提示确认内容" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="按钮归类(一般为更多操作，不支持表单下级的按钮归类)" prop="btnGroupName">
            <template #label>
              按钮归类
              <el-popover
                  placement="top-start"
                  effect="dark"
                  :width="380"
                  trigger="hover"
                  content="按钮归类(一般为更多操作，不支持表单下级的按钮归类)"
              >
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-input v-model="dataForm.btnGroupName" placeholder="请输入按钮归类" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="按钮点击到对应类型" prop="btnLinkType">
            <el-radio-group v-model="dataForm.btnLinkType">
              <el-radio label="10">表单</el-radio>
              <el-radio label="20">菜单(未开发)</el-radio>
              <el-radio label="30">列表(目前只对导出有用)</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="按钮点击到对应表单/列表" prop="btnLinkForm">
            <el-select v-model="dataForm.btnLinkForm" placeholder="请输入按钮点击到对应表单/列表" clearable="clearable">
              <el-option v-for="data in dataForm.formFunctionList" :key="data.code" :label="data.name" :value="data.code">
                {{ data.name }}
              </el-option>
            </el-select>
            <el-input v-model="dataForm.btnLinkForm" placeholder="请输入按钮点击到对应表单" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="对应表单显示方式" prop="btnLinkFormShow">
            <el-radio-group v-model="dataForm.btnLinkFormShow">
              <el-radio label="10">弹框</el-radio>
              <el-radio label="20">抽屉</el-radio>
              <el-radio label="30">新菜单(未开发)</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="对应表单显示标题" prop="btnLinkFormTitle">
            <el-input v-model="dataForm.btnLinkFormTitle" placeholder="请输入按钮点击到对应表单显示标题" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="对应表单显示宽度%" prop="btnLinkFormWidth">
            <el-input v-model="dataForm.btnLinkFormWidth" placeholder="对应表单显示宽度%" clearable />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="报表ID" prop="reportId">
            <el-input v-model="dataForm.reportId" readonly placeholder="请输入报表ID" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="后台方式" prop="serviceType">
            <el-radio-group v-model="dataForm.serviceType">
              <el-radio label="10">新增(如果是列表下的按钮则需要填写【按钮点击到对应表单】)</el-radio>
              <el-radio label="15">流程提交(如果是列表下的按钮则需要填写【按钮点击到对应表单】)</el-radio>
              <el-radio label="20">修改(如果是列表下的按钮则需要填写【按钮点击到对应表单】)</el-radio>
              <el-radio label="25">详情(如果是列表下的按钮则需要填写【按钮点击到对应表单】)</el-radio>
              <el-radio label="30">删除(如果是列表下的按钮则需要填写【按钮点击到对应表单】)</el-radio>
              <el-radio label="40">导出(需要链接到对应的列表)</el-radio>
              <el-radio label="50">导入(需要链接到对应的列表，只支持单表)</el-radio>
              <el-radio label="55">无逻辑请求(但是可以使用按钮后台增强和按钮SQL增强,批量操作必定传ids(ids为数组类型))</el-radio>
              <el-radio label="60">自定义</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="dataForm.serviceType == 40">
        <el-col :span="12">
          <el-form-item label="" prop="execlTempFileName">
            <template #label>
              导出模版文件名称
              <el-popover placement="top-start" effect="dark" :width="380" trigger="hover" content="导出模版文件名称需要放在服务器指定位置">
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-input v-model="dataForm.execlTempFileName" placeholder="" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="dataForm.serviceType == 50">
        <el-col :span="12">
          <el-form-item label="导入模板下载地址" prop="importTempUrl">
            <el-input v-model="dataForm.importTempUrl" placeholder="" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="dataForm.serviceType == 10 || dataForm.serviceType == 50">
        <el-col :span="12">
          <el-form-item label="自动生成单号属性名" prop="billCodeAutoColumn">
            <el-input v-model="dataForm.billCodeAutoColumn" placeholder="" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="自动生成单号开头" prop="billCodeAutoColumnStart">
            <el-input v-model="dataForm.billCodeAutoColumnStart" placeholder="单号前缀" clearable />
            <el-input v-model="dataForm.billCodeAutoColumnNum" placeholder="流水号位数" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="dataForm.serviceType == 60">
        <el-col :span="24">
          <el-form-item label="" prop="btnServerUrl">
            <template #label>
              自定义URL
              <el-popover placement="top-start" effect="dark" :width="380" trigger="hover" content="自定义URL(全部为post请求，json格式)">
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-input v-model="dataForm.btnServerUrl" placeholder="自定义URL" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="" prop="btnServerEnhance">
            <template #label>
              按钮后台增强
              <el-popover
                  placement="top-start"
                  effect="dark"
                  :width="380"
                  trigger="hover"
                  content="按钮后台增强(SpringBean，implements BtnServerEnhanceJavaInter)"
              >
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-input v-model="dataForm.btnServerEnhance" placeholder="按钮后台执行后增强" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="" prop="btnAfterSqlEnhance">
            <template #label>
              按钮SQL增强
              <el-popover
                  placement="top-start"
                  effect="dark"
                  :width="280"
                  trigger="hover"
                  content="按钮SQL增强(执行后再执行的SQL变量有:【主表ID】,【主表IDS】【租户】、【用户名】、【姓名】、【用户ID】,请求数据变量【请求参数key】,表格多选透传到表单固定变量【listIds】,请求数据变量要自行加单引号(后期处理),listIds除外,多语句用;分割)"
              >
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-input v-model="dataForm.btnAfterSqlEnhance" placeholder="按钮SQL增强" type="textarea" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="submitForm()">确认</el-button>
            <el-button @click="handleClose">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-form-item label="是否有效 0否 1是" prop="isUsabled">
                          <el-input v-model="form.isUsabled"  placeholder="请输入是否有效 0否 1是" clearable />
                        </el-form-item> -->
    </el-form>
  </el-drawer>
</template>

<script setup lang="ts">
import { getBtnCode, saveBtnCode } from '../api/formDevReview'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refreshDataList'])
const visible = ref(false)
const loading = ref(false)
const dataFormRef = ref()
const dataForm = reactive({
  id: null,
  formId: null,
  btnLabel: null,
  btnCode: null,
  btnShowType: null,
  btnOrder: null,
  btnPermission: null,
  btnShowEnhance: null,
  btnClickBeforeEnhance: null,
  btnClickAfterEnhance: null,
  btnClickAfterClose: null,
  btnClickAfterRefresh: null,
  btnIsConfirm: null,
  btnTip: null,
  btnGroupName: null,
  btnLinkType: null,
  btnLinkForm: null,
  btnLinkFormShow: null,
  isUsabled: null,
  reportId: null,
  serviceType: null,
  btnLinkFormTitle: '',
  btnLinkFormWidth: '',
  billCodeAutoColumn: '',
  billCodeAutoColumnStart: '',
  billCodeAutoColumnNum: 5,
  btnServerEnhance: null,
  btnAfterSqlEnhance: null,
  btnServerUrl: null,
  btnConfirmContent: null,

  formFunctionList: []
})

const init = (btnCode?: string) => {
  dataForm.id = null
  dataForm.btnCode = null
  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields()
  }
  visible.value = true

  if (btnCode) {
    getInfo(btnCode)
  }
}
const getInfo = (btnCode: any) => {
  getBtnCode(btnCode)
      .then(response => {
        const { data } = response
        if (data.btnShowEnhance && data.btnShowEnhance != '') {
          data.btnShowEnhance = decodeURIComponent(data.btnShowEnhance)
        }

        if (data.btnClickBeforeEnhance && data.btnClickBeforeEnhance != '') {
          data.btnClickBeforeEnhance = decodeURIComponent(data.btnClickBeforeEnhance)
        }

        if (data.btnClickAfterEnhance && data.btnClickAfterEnhance != '') {
          data.btnClickAfterEnhance = decodeURIComponent(data.btnClickAfterEnhance)
        }


        Object.assign(dataForm, data)
      })
      .finally(() => {
        loading.value = false
      })
}

const handleClose = () => {
  visible.value = false
}
const submitForm = () => {
  //---- 需要手工填写此代码 -----
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false
    }
    if (dataForm.btnShowEnhance && dataForm.btnShowEnhance != '') {
      dataForm.btnShowEnhance = encodeURIComponent(dataForm.btnShowEnhance)
    }

    if (dataForm.btnClickBeforeEnhance && dataForm.btnClickBeforeEnhance != '') {
      dataForm.btnClickBeforeEnhance = encodeURIComponent(dataForm.btnClickBeforeEnhance)
    }

    if (dataForm.btnClickAfterEnhance && dataForm.btnClickAfterEnhance != '') {
      dataForm.btnClickAfterEnhance = encodeURIComponent(dataForm.btnClickAfterEnhance)
    }

    saveBtnCode(dataForm).then(() => {
      ElMessage.success({
        message: '操作成功',
        duration: 500,
        onClose: () => {
          //visible.value = false
          //emit('refreshDataList')
        }
      })
      if (dataForm.btnShowEnhance && dataForm.btnShowEnhance != '') {
        dataForm.btnShowEnhance = decodeURIComponent(dataForm.btnShowEnhance)
      }

      if (dataForm.btnClickBeforeEnhance && dataForm.btnClickBeforeEnhance != '') {
        dataForm.btnClickBeforeEnhance = decodeURIComponent(dataForm.btnClickBeforeEnhance)
      }

      if (dataForm.btnClickAfterEnhance && dataForm.btnClickAfterEnhance != '') {
        dataForm.btnClickAfterEnhance = decodeURIComponent(dataForm.btnClickAfterEnhance)
      }

      getInfo(dataForm.btnCode)
    })
  })
}

const dataRules = ref({})

defineExpose({
  init
})
</script>

<style scoped></style>
