<template>
  <div class="row items-center">
    <div v-if="state.treeData.edit">
      <n-input v-model:value="state.editTitle" style="width: 120px" />
    </div>

    <n-popover trigger="hover" v-else>
      <template #trigger>
        <div style="width: 120px" class="fl-px-sm sf-text-ellipsis">
          {{ state.treeData.title }}
        </div>
      </template>
      <div>{{ state.treeData.title }}</div>
    </n-popover>
    <div class="row" style="width: calc(100% - 120px)">
      <div class="col-4 row items-center">
        <n-icon
          :component="CreateOutline"
          class="fl-ml-sm"
          size="20"
          v-if="config?.actions.includes('edit') && !state.treeData.edit"
          @click.stop="handleTreeEdit(state.treeData)"
        />
        <n-icon
          :component="Remove"
          size="20"
          v-if="
            config?.actions.includes('subtraction') &&
            !state.treeData.edit &&
            visibleFormItem(config.subtractionShow, state.treeData)
          "
          class="fl-ml-sm"
          @click.stop="handleTreeSubtraction(state.treeData)"
        />
        <n-icon
          :component="Add"
          size="20"
          v-if="
            config?.actions.includes('add') &&
            !state.treeData.edit &&
            visibleFormItem(config.addShow, state.treeData)
          "
          class="fl-ml-sm"
          @click.stop="handleTreeAdd(state.treeData)"
        />
        <drag-outlined
          v-if="
            config?.actions.includes('move') &&
            !state.treeData.edit &&
            visibleFormItem(config.moveShow, state.treeData)
          "
          class="fl-ml-sm"
          @click.stop="handleTreeMove(state.treeData)"
        />

        <!-- <n-icon :component="MoveOutline"
            size="20"
            v-if="config?.actions.includes('move')&&!state.treeData.edit&&visibleFormItem(config.moveShow, state.treeData)"
            class="fl-ml-sm"
            @click.stop="handleTreeMove(state.treeData)" /> -->

        <n-icon
          :component="Checkmark"
          size="20"
          v-if="state.treeData.edit"
          class="fl-ml-sm"
          @click.stop="handleTreeSave(state.treeData)"
        />
        <n-icon
          :component="Close"
          size="20"
          v-if="state.treeData.edit"
          class="fl-ml-md"
          @click.stop="handleTreeNotSave(state.treeData)"
        />
      </div>
      <div class="col-8 row items-center justify-end" @click.stop>
        <div>
          <n-radio-group
            v-model:value="state.radioVal"
            @update:value="handleRadioChange"
          >
            <n-space>
              <n-radio :value="true"> 是 </n-radio>
              <n-radio :value="false"> 否 </n-radio>
            </n-space>
          </n-radio-group>
        </div>
        <div class="fl-ml-md" style="width: 200px" @click="handleSelectClick">
          <n-select
            v-model:value="state.selectVal"
            size="small"
            filterable
            clearable
            placeholder="请选择对应部门"
            label-field="alias"
            value-field="storeId"
            :options="options"
            @update:value="handleSelectChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, onMounted, watch, getCurrentInstance } from "vue";
import { visibleFormItem } from "@/utils/helper/form";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
import {
  UpOutlined,
  DownOutlined,
  CloseCircleOutlined,
  PlusOutlined,
  DragOutlined,
} from "@ant-design/icons-vue";
import {
  Add,
  Checkmark,
  Close,
  CreateOutline,
  Remove,
  MoveOutline,
} from "@vicons/ionicons5";
let props = defineProps({
  dataRef: Object,
  checked: Boolean,
  config: Object,
  clickKey: [String, Number],
  options: Array,
});
const state = reactive({
  expandedKeys: [],
  editTitle: "",
  treeData: [],
  radioVal: null,
  selectVal: null,
});
onBeforeMount(() => {
  state.treeData = props.dataRef.option;
  state.radioVal = state.treeData.sync;
  if (state.treeData.syncId) {
    state.selectVal = state.treeData.syncId * 1;
  }
});
watch(
  () => props.dataRef.option,
  (val) => {
    state.treeData = props.dataRef.option;
  },
  { deep: true }
);

onMounted(() => {});
const emit = defineEmits(["triggerTreeAction", "triggerTreeClick"]);

// const myComponentRef = ref(null);
const handleTreeEdit = () => {
  state.editTitle = state.treeData.title;
  state.treeData.edit = true;
  // myComponentRef.value.$forceUpdate();
};
const handleTreeAdd = () => {
  emit("triggerTreeAction", { type: "add", val: state.treeData });
};
const handleTreeMove = () => {
  emit("triggerTreeAction", { type: "move", val: state.treeData });
};

const handleTreeSubtraction = () => {
  emit("triggerTreeAction", { type: "subtraction", val: state.treeData });
};
const handleTreeSave = () => {
  state.treeData.title = state.editTitle;
  emit("triggerTreeAction", { type: "save", val: state.treeData });
};
const handleTreeNotSave = () => {
  state.editTitle = "";
  emit("triggerTreeAction", { type: "cancel", val: state.treeData });
};
const handleRadioChange = (val) => {
  let url = "department/v2/update";
  let params = {
    ID: state.treeData.key,
    name: state.treeData.title,
    sync: val,
    syncID: state.treeData.syncId,
  };
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.treeData.sync = val;
      } else {
        processError(res.msg || "操作失败！");
      }
    },
    () => {
      processError("操作失败！");
    },
    () => {
      processError("操作失败！");
    }
  );
};
const handleSelectChange = (val) => {
  let syncID = "";
  if (val === null || val === undefined || val === "") {
    syncID = "";
  } else {
    syncID = val + "";
  }
  let url = "department/v2/update";
  let params = {
    ID: state.treeData.key,
    name: state.treeData.title,
    sync: state.treeData.sync,
    syncID: syncID,
  };
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.treeData.syncId = syncID;
      } else {
        processError(res.msg || "操作失败！");
      }
    },
    () => {
      processError("操作失败！");
    },
    () => {
      processError("操作失败！");
    }
  );
};
const handleSelectClick = () => {
  console.log(props.options);
};
</script>
