<template>
  <div>
    <div class="form-box">
      <div class="item">
        <div class="label"><em class="text-red-600">*</em>{{ t('规则流程') }}</div>
        <div @click="open" class="inline-block w-full">
          <InputModel
            :value="props.config.name || data.config.name"
            :placeholder="t('点击选择规则流程')"
            style="width: 100%; min-width: 100px"
          />
        </div>
      </div>
    </div>

    <a-modal
      :width="1200"
      v-model:visible="visible"
      :title="t('选择规则流程')"
      :maskClosable="false"
      @ok="handleSubmit"
      @cancel="handleClose"
    >
      <TemplateList v-if="visible" v-model:id="data.config.id" />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import { InputModel } from '/@/components/ApiConfig';
  import TemplateList from './TemplateList.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { message } from 'ant-design-vue';
  import { RuleProcessConfig } from '../interface';
  import { getRuleProcessInfo } from '/@/api/ruleProcess';
  const { t } = useI18n();
  const emit = defineEmits(['setConfig']);
  const props = withDefaults(defineProps<{ config: RuleProcessConfig }>(), {
    config: () => {
      return {
        id: '',
        name: '',
        processParamConfigs: [],
      };
    },
  });
  let data: { config: RuleProcessConfig } = reactive({
    config: {
      id: '',
      name: '',
      processParamConfigs: [],
    },
  });
  const visible = ref<boolean>(false);
  onMounted(() => {
    if (props.config.id) {
      data.config.id = props.config.id;
      // getApiData();
    }
  });
  function open() {
    visible.value = true;
  }
  async function handleSubmit() {
    if (data.config.id) {
      getApiData();
      visible.value = false;
    } else {
      message.warning('请选择一个模板');
    }
  }
  async function getApiData() {
    let res = await getRuleProcessInfo(data.config.id);
    if (res.id) data.config.id = res.id;
    if (res.name) data.config.name = res.name;
    emit('setConfig', res);
  }
  function handleClose() {
    data.config.id = props.config.id; //还原
    visible.value = false;
  }
</script>

<style lang="less" scoped>
  .title {
    display: flex;
    height: 40px;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
  }

  .form-box {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
  }

  .item {
    flex: 1;
    padding: 0 16px;
  }

  .label {
    width: 120px;
    line-height: 14px;
    margin-bottom: 8px;
  }

  .select-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #d9d9d9;
    padding: 0 4px;
    height: 30px;
    width: 100%;
  }

  .rule-text {
    color: #d0cfd0;
  }

  .list {
    .row {
      height: 40px;
      line-height: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      span {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .common {
        flex-basis: 25%;
        margin-right: 4px;
      }
    }

    .head {
      background-color: #f9f9f9;
    }

    .item {
      border-bottom: 1px solid #f9f9f9;
    }

    .delete-icon {
      color: @clear-color;
    }
  }
</style>
