<template>
  <div class="clause-type-setting">
    <el-radio-group
      v-bind="$attrs"
      style="flex-direction: column; align-items: flex-start"
      :model-value="modelValue"
      @change="change"
    >
      <el-radio v-for="item in ArticleType.getAllEnumValues()" :key="item.value" :label="item.value">
        {{ item.value === ArticleEnum.OHTER ? "去条文溯源" : `设置为${item.label}` }}
      </el-radio>
    </el-radio-group>
    <template v-if="modelValue === ArticleEnum.RELATED">
      <span class="mr5" style="word-break: keep-all">关联首见条文</span>
      <el-select v-model="parentId" filterable placeholder="请选择" fit-input-width>
        <el-option
          v-for="item in options"
          :key="item.firstArticleNo"
          :label="`SJ${item.firstArticleNo} ${item.articleContent}`"
          :value="item.firstArticleNo"
        >
          <div class="h-flex flex-space-between" :title="item.articleContent">
            <span style="color: #333333">SJ{{ item.firstArticleNo }}</span>
            <el-text class="ml10" truncated>{{ item.articleContent }}</el-text>
          </div>
        </el-option>
      </el-select>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, computed, ref, watch } from "vue";
import { ElMessageBox } from "element-plus";
import { ArticleType, ArticleEnum } from "@/enums";
import { Common } from "@/api/interface";
import { getFirstClauseOptions } from "@/api/modules/common";

const props = defineProps({
  modelValue: {
    type: Number
  },
  relatedPid: {
    // 关联首见条文ID
    type: Number
  },
  publicationDate: {
    type: Number
  }
});

const emit = defineEmits(["update:relatedPid", "update:modelValue"]);

const parentId = computed<number | undefined>({
  get() {
    return props.relatedPid;
  },
  set(val) {
    emit("update:relatedPid", val);
  }
});
const options = ref<Common.ClauseOptions[]>([]);

watch(
  () => props.modelValue,
  val => {
    if (val === ArticleEnum.RELATED) {
      loadOptions();
    }
  },
  {
    immediate: true
  }
);

watch(
  () => props.relatedPid,
  val => {
    if (val) {
      checkTips();
    }
  }
);

async function loadOptions() {
  if (options.value.length > 0) return;
  const res = await getFirstClauseOptions();
  options.value = res.data || [];
}

function change(val: string | number | boolean | any) {
  emit("update:modelValue", val as number);
  emit("update:relatedPid", undefined);
}

function checkTips() {
  const row = options.value.find(item => item.firstArticleNo === props.relatedPid);
  console.log(props.publicationDate, row);
  if (typeof props.publicationDate !== "number" || typeof row!.publicationDate !== "number") return;
  if (props.publicationDate < row!.publicationDate) {
    ElMessageBox.confirm(`当前条文的成书年代早于SJ${row!.firstArticleNo}的成书年代`, "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      showCancelButton: false,
      type: "warning",
      draggable: true
    });
  }
}
</script>

<style lang="scss" scoped>
.clause-type-setting {
  display: flex;
  align-items: center;
  width: 100%;
  .el-select {
    width: 100%;
  }
}
</style>
