<template>
  <div>
    <el-drawer
      ref="companyDrawerRef"
      class="test"
      :model-value="true"
      @close="() => emits('onClose')"
      with-header="true"
      size="30%"
    >
      <template #header="{ titleId }">
        <p :id="titleId">{{ title }}</p>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        size="default"
        status-icon
      >
        <el-form-item label="机器人名称" prop="robotName">
          <el-input v-model="ruleForm.robotName" style="width: 200px" />
        </el-form-item>
        <el-form-item label="机器人地址" prop="robotUrl">
          <el-input v-model="ruleForm.robotUrl" style="width: 200px" />
        </el-form-item>
        <el-form-item label="场景" prop="workshopName">
          <el-tree-select
            v-model="ruleForm.workshopName"
            :data="scenesTree"
            :render-after-expand="false"
            :default-expand-all="true"
            check-strictly
            multiple
            placeholder="请选择场景"
            style="width: 200px"
            @change="handleTreeSelect"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="ruleForm.isPush"
            :active-value="true"
            :inactive-value="false"
            class="switchUse"
          />
        </el-form-item>
      </el-form>
      <div style="position: absolute; left: 108px; bottom: 67px">
        <el-button @click="resetDrawer">重置</el-button>
        <el-button type="primary" @click="subDrawer"> 提交 </el-button>
      </div>
    </el-drawer></div
  >
</template>

<script setup lang="ts">
  import { computed, reactive, ref, defineProps, defineEmits, onBeforeMount } from 'vue';
  import type { FormInstance, FormRules } from 'element-plus';
  import { RobotType } from '@/api/push/push';
  import useSceneInfos from '@/hooks/useSceneInfos';
  import { cloneDeep } from 'lodash-es';

  const sceneInfos = useSceneInfos();
  const { scenesTree, flattenedWorkshops, getScenesTree } = sceneInfos;

  const props = defineProps<{
    robotList: RobotType | null;
  }>();

  const title = computed(() => {
    if (props.robotList) {
      return '编辑机器人';
    }
    return '添加机器人';
  });

  const emits = defineEmits(['onClose', 'subAdd', 'subEdit']);

  //表格中的规则
  const ruleFormRef = ref<FormInstance>();

  const ruleForm = ref<RobotType>({
    robotName: '',
    robotUrl: '',
    workshopCodes: [],
    workshopName: [],
    isPush: true,
  });

  const rules = reactive<FormRules>({
    robotName: [{ required: true, message: '请输入机器人名称', trigger: 'blur' }],
    robotUrl: [{ required: true, message: '请输入机器人地址', trigger: 'blur' }],
    workshopName: [{ required: true, message: '请选择场景', trigger: 'blur' }],
  });

  //重置编辑框
  const resetDrawer = () => {
    ruleForm.value.robotName = '';
    ruleForm.value.robotUrl = '';
    ruleForm.value.workshopCodes = [];
    ruleForm.value.workshopName = [];
    ruleForm.value.isPush = true;
  };
  //提交
  const subDrawer = () => {
    if (props.robotList) {
      const data = {
        id: props.robotList.id,
        robotName: ruleForm.value.robotName,
        robotUrl: ruleForm.value.robotUrl,
        workshopCodes: ruleForm.value.workshopCodes,
        isPush: ruleForm.value.isPush,
      };
      emits('subEdit', data);
    } else {
      const data = {
        robotName: ruleForm.value.robotName,
        robotUrl: ruleForm.value.robotUrl,
        workshopCodes: ruleForm.value.workshopCodes,
        isPush: ruleForm.value.isPush,
      };
      emits('subAdd', data);
    }
  };

  const handleTreeSelect = (code: string) => {
    ruleForm.value.workshopCodes = flattenedWorkshops.value
      .filter((item) => code.includes(item.code))
      .map(({ code, name }) => ({ code, name }));
  };

  onBeforeMount(() => {
    getScenesTree({ level: 2, valueKey: 'code', labelKey: 'name', disabled: true });
    if (props.robotList) {
      ruleForm.value = cloneDeep(props.robotList);
      ruleForm.value.workshopName = ruleForm.value.workshopCodes!.map((item) => item.code);
    }
  });
</script>

<style scoped></style>
