<template>
  <div class="shceme-info">
    <a-form
      ref="formRef"
      :rules="rules"
      :model="formState"
      labelAlign="left"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :disabled="data.componentDisabled"
    >
      <template v-if="!data.componentDisabled">
        <a-form-item label="模板编号" name="code">
          <a-input v-model:value="formState.code" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="模板名称" name="name">
          <a-input v-model:value="formState.name" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="模板图标" name="icon">
          <IconPicker v-model:value="formState.icon" />
        </a-form-item>
        <a-form-item label="图标颜色" name="color">
          <a-input
            type="color"
            :key="formState.color"
            :default-value="formState.color"
            v-model="formState.color"
            placeholder="请输入"
            @change="(e) => colorChange(e.target.value)"
          />
        </a-form-item>
        <a-form-item label="模板分类" name="category">
          <a-select
            v-model:value="formState.category"
            placeholder="请选择"
            :options="data.optionsType"
            :field-names="{ label: 'itemName', value: 'itemName' }"
          />
        </a-form-item>
        <a-form-item label="我的任务创建">
          <a-radio-group v-model:value="formState.mark" name="radioGroup">
            <a-radio
              v-for="(item, index) in data.optionsNotOrOk"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-radio
            >
          </a-radio-group>
        </a-form-item>
        <a-form-item label="移动端创建">
          <a-radio-group v-model:value="formState.isInApp" name="radioGroup">
            <a-radio
              v-for="(item, index) in data.optionsNotOrOk"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-radio
            >
          </a-radio-group>
        </a-form-item>
        <a-textarea
          v-model:value="formState.description"
          placeholder="请填写备注"
          :auto-size="{ minRows: 5, maxRows: 8 }"
        />
      </template>
      <a-divider plain="true">撤销操作</a-divider>
      <a-tabs v-model:activeKey="formState.undoType" type="card" size="small" centered="true">
        <a-tab-pane key="1" tab="执行SQL">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-space-compact block>
              <a-select
                v-model:value="formState.undoDbCode"
                placeholder="请选择执行SQL数据库"
                :options="sqlOptions"
                :field-names="{ label: 'text', value: 'id', options: 'childNodes' }"
              />
            </a-space-compact>
            <a-space-compact block>
              <a-textarea
                v-model:value="formState.undoDbSQL"
                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
        <a-tab-pane key="2" tab=".NET方法">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-space-compact block>
              <a-textarea
                v-model:value="formState.undoIOCName"
                placeholder="请填写.NET方法IOC别名"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
        <a-tab-pane key="3" tab="第三方接口">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-space-compact block>
              <a-textarea
                v-model:value="formState.undoUrl"
                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
      </a-tabs>

      <a-divider plain="true">作废操作</a-divider>
      <a-tabs v-model:activeKey="formState.deleteType" type="card" size="small" centered="true">
        <a-tab-pane key="1" tab="执行SQL">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-space-compact block>
              <a-select
                v-model:value="formState.deleteDbCode"
                placeholder="请选择执行SQL数据库"
                :options="sqlOptions"
                :field-names="{ label: 'text', value: 'id', options: 'childNodes' }"
              />
            </a-space-compact>
            <a-space-compact block>
              <a-textarea
                v-model:value="formState.deleteDbSQL"
                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
        <a-tab-pane key="2" tab=".NET方法">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-space-compact block>
              <a-textarea
                v-model:value="formState.deleteIOCName"
                placeholder="请填写.NET方法IOC别名"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
        <a-tab-pane key="3" tab="第三方接口">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-space-compact block>
              <a-textarea
                v-model:value="formState.undoUrl"
                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
      </a-tabs>

      <a-divider plain="true">删除草稿</a-divider>
      <a-tabs
        v-model:activeKey="formState.deleteDraftType"
        type="card"
        size="small"
        centered="true"
      >
        <a-tab-pane key="1" tab="执行SQL">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-space-compact block>
              <a-select
                v-model:value="formState.deleteDraftDbCode"
                placeholder="请选择执行SQL数据库"
                :options="sqlOptions"
                :field-names="{ label: 'text', value: 'id', options: 'childNodes' }"
              />
            </a-space-compact>
            <a-space-compact block>
              <a-textarea
                v-model:value="formState.deleteDraftDbSQL"
                placeholder="请填写SQL语句，参数有 @processId流程进程主键 @userId用户Id @userAccount用户账号 @companyId用户公司 @departmentId用户部门"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
        <a-tab-pane key="2" tab=".NET方法">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-space-compact block>
              <a-textarea
                v-model:value="formState.deleteDraftIOCName"
                placeholder="请填写.NET方法IOC别名"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
        <a-tab-pane key="3" tab="第三方接口">
          <a-space direction="vertical" size="middle" class="site-space-compact-wrapper">
            <a-space-compact block>
              <a-textarea
                v-model:value="formState.undoUrl"
                placeholder="请填写第三方接口地址(POST),JSON 格式,参数有 userId用户Id,userAccount用户账号,companyId用户公司,departmentId用户部门"
                :auto-size="{ minRows: 5, maxRows: 8 }"
              />
            </a-space-compact>
          </a-space>
        </a-tab-pane>
      </a-tabs>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, onMounted, defineProps } from 'vue';
  import type { Rule } from 'ant-design-vue/es/form';
  import { IconPicker } from '@/components/Icon/index';
  import { getLoad } from '@/api/sys/sysDataItemDetail';
  import { getLoadDataBaseLinkTree } from '@/api/demo/system';

  const formRef = ref();
  const labelCol = { span: 7 };
  const wrapperCol = { span: 17 };
  const props = defineProps({
    pageType: String,
  });
  const data = reactive({
    optionsNotOrOk: [
      { label: '允许', value: 1 },
      { label: '不允许', value: 2 },
    ],
    optionsType: [],
    componentDisabled: props.pageType == 'detail' ? true : false,
  });
  const sqlOptions = ref([]);

  let formState = ref({
    code: '',
    name: '',
    category: '',
    enabledMark: 1,
    mark: 1,
    isInApp: 2,
    description: '',
    titleRules: '',
    undoType: '1',
    undoDbCode: '',
    undoDbSQL: '',
    undoIOCName: '',
    undoUrl: '',
    deleteType: '1',
    deleteDbCode: '',
    deleteDbSQL: '',
    deleteIOCName: '',
    deleteUrl: '',
    deleteDraftType: '1',
    deleteDraftDbCode: '',
    deleteDraftDbSQL: '',
    deleteDraftIOCName: '',
    deleteDraftUrl: '',
    icon: 'ant-design:appstore-outlined',
    color: '#409EFF',
  });
  const rules: Record<string, Rule[]> = {
    code: [
      { required: true, message: '请输入模板编号' },
      // { validator: lr_existDbFiled, keyValue: () => { return data.formData.f_Id }, tableName: 'lr_wf_schemeinfo', keyName: 'f_Id', trigger: 'blur' }
    ],
    name: [{ required: true, message: '请输入模板名称' }],
    category: [{ required: true, message: '请选择模板分类' }],
    icon: [{ required: true, message: '请选择图标' }],
    color: [{ required: true, message: '请选择颜色' }],
  };
  function colorChange(color) {
    formState.value.color = color;
  }
  async function getSQL() {
    const data = await getLoadDataBaseLinkTree();
    let res: any = [];
    data.forEach((element) => {
      if (element.childNodes == null) {
        element.childNodes = [];
      }
      let point = {};
      if (element.id == 'hcsystemdb') {
        point = {
          id: '1',
          text: '常用数据库',
          childNodes: [
            {
              id: element.id,
              text: element.text,
            },
          ],
        };
        res.push(point);
      } else {
        res.push(element);
      }
    });
    sqlOptions.value = res;
  }
  async function fetch() {
    let list = await getLoad({ code: 'FlowSort' });
    data.optionsType = list;
  }
  async function validateForm() {
    let res = await formRef.value
      .validate()
      .then(() => {
        return true;
      })
      .catch(() => {
        return false;
      });
    return res;
  }
  function setForm(data) {
    formState.value = data;
  }
  function getForm() {
    return formState.value;
  }
  defineExpose({
    setForm,
    getForm,
    validateForm,
  });
  onMounted(() => {
    fetch();
    getSQL();
  });
</script>
<style lang="less" scoped>
  .site-space-compact-wrapper {
    width: 100%;

    .ant-select {
      width: 100%;
    }
  }

  ::v-deep .ant-tabs {
    padding: 0 !important;
  }
</style>
