<template>
  <YaEditForm
    ref="applyForm"
    direction="rtl"
    v-model="formData"
    :formColumns="formColumns"
    labelWidth="120px"
    @custom="getRulesSucess"
    :hideSaveBtn="true"
  >
    <template #yaProductModule>
      <YaTag
        ref="yaTagChild"
        :canAdd="!disabledStatus"
        :tag="tagValue"
        @tabChange="tabChange"
      ></YaTag>
    </template>
  </YaEditForm>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  onMounted,
  unref,
  watchEffect,
  watch,
  nextTick,
} from 'vue';
import {
  getDictTypeList,
  getDeptList,
  firstLevelList,
  getSubDeptTreeById,
} from '../../../../api/common';
import { getLeftTreeJson } from '../../../../api/permission/userManagement';
import YaTag from '../../../../components/tag/index.vue';
import { useRoute, useRouter } from 'vue-router';
import { provinceData } from '../../../../assets/js/province';
import { getDeptInfo } from '../../../../api/collection/infoCollection/inventory';
interface props {
  applyData?: Object; // 图片路径
  dictArr?: Object; // 共用字典
  deptList?: Array; // 部门
}
// const { applyData = {} } = defineProps<props>();
const props = defineProps({
  applyData: {},
  dictArr: {},
  deptList: [],
});
const emit = defineEmits(['getFormData', 'getFormApplyData']);
const applyForm = ref();
const formData = ref({});
const tagValue = ref([]); // 标签值
watch(
  () => props.applyData,
  (newValue, oldValue) => {
    applyForm.value && applyForm.value.clearFormData();
    nextTick(() => {
      formData.value = newValue;
      tagValue.value = newValue.feature && newValue.feature.assetTagCodeSet ? newValue.feature.assetTagCodeSet : [];
    });
  },
  { immediate: true, deep: true }
);
watch(
  () => formData,
  (newValue, oldValue) => {
    emit('getFormData', newValue.value);
  },
  { immediate: true, deep: true }
);
watch(
  () => props.deptList,
  (newValue, oldValue) => {
    if (newValue && newValue.length > 0) {
      formColumns.forEach((item) => {
        if (item.key == 'feature.deptId') {
          item.options = newValue;
        }
      });
    }
  },
  { immediate: true, deep: true }
);
const router = useRouter();

const formColumns = reactive([
  {
    title: '基本信息',
    formItemClassName: 'line',
  },
  // {
  //   key: 'input1',
  //   type: 'input',
  //   // customType: 'ipv4',
  //   label: '资产IP',
  //   rules: true,
  //   disabled: true,
  // },
  // {
  //   key: 'input2',
  //   type: 'select',
  //   label: '网络域',
  //   disabled: true,
  //   options: [
  //     {
  //       label: '选项一',
  //       value: '1',
  //     },
  //     {
  //       label: '选项二',
  //       value: '2',
  //     },
  //   ],
  //   rules: true,
  // },
  {
    key: 'port',
    type: 'input',
    label: '开放端口',
    rules: true,
    disabled: true,
  },
  {
    key: 'name',
    type: 'input',
    label: '资产名称',
  },
  {
    key: 'assetTypeCode',
    type: 'select',
    label: '资产类型',
    rules: true,
  },
  {
    key: 'feature.position',
    type: 'cascader',
    label: '资产所在区域',
    // options: provinceData,
    props: {
      checkStrictly: true,
      value: 'dictValue',
      label: 'dictName',
      emitPath: false,
    },
    showAllLevels: false,
  },

  {
    key: 'feature.serviceType',
    type: 'select',
    label: '服务类型',
    options: [
      {
        label: '选项一',
        value: '1',
      },
      {
        label: '选项二',
        value: '2',
      },
    ],
    rules: true,
  },
  {
    key: 'feature.appMappingIp',
    type: 'input',
    label: '应用映射地址',
    rules: true,
  },
  {
    key: 'feature.loadBearingSoftwareName',
    type: 'input',
    label: '承载软件名称',
  },
  {
    key: 'feature.loadBearingSoftwareVersion',
    type: 'input',
    label: '承载软件版本',
  },
  {
    key: 'webAccessUrl',
    label: 'web应用访问地址',
    type: 'textarea',
    rows: 6,
  },
  {
    key: 'feature.importanceLevel',
    type: 'select',
    label: '资产重要级别',
    options: [],
  },
  {
    key: 'feature.assetTagCodeSet',
    label: '资产标签',
    slotName: 'yaProductModule',
  },
  {
    title: '资产归属',
    formItemClassName: 'line',
  },
  {
    key: 'feature.companyId',
    type: 'select',
    label: '所属单位',
    rules: true,
    onChange(e) {
      getOneDept(e);
    },
  },
  {
    key: 'feature.deptId',
    label: '所属部门',
    type: 'cascader',
    props: {
      checkStrictly: true,
      value: 'id',
      emitPath: false,
    },
    showAllLevels: false,
    rules: true,
    onChange(e) {
      getPeopel(e);
    },
  },
  {
    key: 'feature.contact',
    type: 'input',
    label: '负责人',
  },
  {
    key: 'feature.contactMobile',
    type: 'input',
    label: '联系方式',
  },
  {
    key: 'feature.contactEmail',
    type: 'input',
    label: '邮箱',
  },
  {
    key: 'feature.isOwn',
    type: 'radio',
    label: '是否自有资产',
    options: [
      {
        key: '是',
        value: '1',
      },
      {
        key: '否',
        value: '2',
      },
    ],
  },
  {
    key: 'feature.businessSystem',
    type: 'input',
    label: '所属业务系统',
  },
  {
    title: '合规信息',
    formItemClassName: 'line',
  },
  {
    key: 'feature.networkUnitType',
    type: 'select',
    label: '网络单元类型',
  },
  {
    key: 'feature.ratingObjectName',
    type: 'input',
    label: '定级对象名称',
  },
  {
    key: 'feature.ratingLevel',
    type: 'select',
    label: '定级级别',
  },
  {
    key: 'feature.protectionLevel',
    type: 'select',
    label: '等保级别',
  },
]);
/**
 * @description: 字典数据初始化
 */
const resetDictData = (e) => {
  let list = e.map((item) => {
    return {
      label: item.dictName,
      value: item.dictValue,
    };
  });
  return list;
};
/**
 * @description 获取公共字典
 */
const commDict = () => {
  // 资产重要级别
  if (
    props.dictArr.importanceLevelList &&
    props.dictArr.importanceLevelList.length > 0
  ) {
    // formData.value['feature.importanceLevel'] =  props.dictArr.importanceLevelList[0].value;
    formColumns.forEach((item) => {
      if (item.key == 'feature.importanceLevel') {
        item.options = props.dictArr.importanceLevelList;
      }
    });
  }
  // 定级级别
  if (
    props.dictArr.ratingLevelList &&
    props.dictArr.ratingLevelList.length > 0
  ) {
    // formData.value['feature.ratingLevel'] =  props.dictArr.ratingLevelList[0].value;
    formColumns.forEach((item) => {
      if (item.key == 'feature.ratingLevel') {
        item.options = props.dictArr.ratingLevelList;
      }
    });
  }
  // 等保级别
  if (
    props.dictArr.protectionLevelList &&
    props.dictArr.protectionLevelList.length > 0
  ) {
    // formData.value['feature.protectionLevel'] =  props.dictArr.protectionLevelList[0].value;
    formColumns.forEach((item) => {
      if (item.key == 'feature.protectionLevel') {
        item.options = props.dictArr.protectionLevelList;
      }
    });
  }
  // 所属部门
  if (props.dictArr.companyIdList && props.dictArr.companyIdList.length > 0) {
    // formData.value['feature.companyId'] =  props.dictArr.companyIdList[0].value;
    formColumns.forEach((item) => {
      if (item.key == 'feature.companyId') {
        item.options = props.dictArr.companyIdList;
      }
    });
  }
  // 资产所在区域
  if (props.dictArr.positionList && props.dictArr.positionList.length > 0) {
    formColumns.forEach((item) => {
      if (item.key == 'feature.position') {
        item.options = props.dictArr.positionList;
      }
    });
  }
  // 网络单元类型
  if (
    props.dictArr.networkUnitTypeList &&
    props.dictArr.networkUnitTypeList.length > 0
  ) {
    formColumns.forEach((item) => {
      if (item.key == 'feature.networkUnitType') {
        item.options = props.dictArr.networkUnitTypeList;
      }
    });
  }
};
const getDictList = () => {
  // 服务类型
  getDictTypeList({ dictType: 'appServiceType' }).then((res) => {
    if (res.code == 200) {
      if (res.data && res.data.length > 0) {
        formData.value.serviceType = resetDictData(res.data)[0].value;
      }
      formColumns.forEach((item) => {
        if (item.key == 'feature.serviceType') {
          item.options = resetDictData(res.data);
        }
      });
    }
  });
  // 资产类型
  getDictTypeList({ dictType: 'appAssetType' }).then((res) => {
    if (res.code == 200) {
      if (res.data && res.data.length > 0) {
        formData.value.assetTypeCode = resetDictData(res.data)[0].value;
      }
      formColumns.forEach((item) => {
        if (item.key == 'assetTypeCode') {
          item.options = resetDictData(res.data);
        }
      });
    }
  });
};
/**
 * @description 重置省市区数据格式
 */
const getProvinceAndCity = (data) => {
  if (!data || !data.length) return;
  data.forEach((item) => {
    item.value = item.label;
    if (item.children) {
      getProvinceAndCity(item.children);
    }
  });
};
/**
 * @description 获取部门联系人
 */
const getPeopel = (e) => {
  getDeptInfo({ id: e }).then((res) => {
    if (res.code == 200 && res.data && res.data.owner) {
      formData.value['feature.contact'] = res.data.owner.realityName;
      formData.value['feature.contactMobile'] = res.data.owner.mobile;
    }
  });
};
const restData = (data) => {
  data = data.map((item) => {
    return {
      ...item.data,
      label: item.data.deptName,
      children: item.children ? restData(item.children) : item.children,
    };
  });
  return data;
};
const getOneDept = (id) => {
  // 获取部门层级
  getSubDeptTreeById({ deptId: id }).then((res) => {
    const { code, data } = res || {};
    if (code === 200) {
      formColumns.forEach((item) => {
        if (item.key == 'feature.deptId') {
          item.options = data ? restData(data) : [];
        }
      });
    }
  });
};
/**
 * @description 获取标签值
 */
const disabledStatus = ref(false);
const tabChange = (params) => {
  formData.value.feature.assetTagCodeSet = params || null;
};
/**
 * @description 组件传参
 */
const getHostForm = () => {
  return applyForm.value.ruleVarify();
};
/**
 * @description 清除规则
 */
const clearRules = () => {
  applyForm.value.clearRules();
};
const getRulesSucess = (e) => {
  emit('getFormApplyData', e);
};
defineExpose({
  getHostForm,
  clearRules,
});
watch(
  () => props.dictArr,
  (newValue, oldValue) => {
    commDict();
  },
  { immediate: true, deep: true }
);
onMounted(() => {
  getDictList();
  getProvinceAndCity(provinceData);
});
</script>

<style lang="scss" scoped>
::v-deep .ya-form .el-cascader {
  width: calc((100% - 54px) / 2);
}
.custom {
  width: calc((100% - 54px) / 2);
  .content {
    width: 100%;
    .el-input,
    .el-select {
      max-width: 100% !important;
    }
  }
}
.custom-label {
  ::v-deep .el-form-item__content {
    display: block;
  }
  .flex-st {
    display: flex;
  }
  .port-list {
    color: var(--el-color-primary);
    text-decoration: underline;
  }
  .port-range {
    flex: 1;
  }
  ::v-deep .el-radio {
    margin-right: 12px;
  }
}
.ml-8 {
  margin-left: 8px;
}
.flex-bt {
  display: flex;
  width: 100%;
}
.mt-8 {
  margin-top: 8px;
}
.btn-one {
  color: #fff;
  margin-left: 25px;
  height: 30px;
  margin-bottom: 12px;
}
</style>
