<script setup lang="ts">
import { ref, watch } from "vue";
import { message } from "@/utils/message";
import { FormInstance } from "element-plus";
import ReCol from "@/components/ReCol";
// import logon from "@/assets/static/logo_icon.png";
import AlgorithmCard from "./algorithmCard.vue";

// const SELECT_OPTIONS = [
//   { label: "网关", value: 1 },
//   { label: "人工智能", value: 2 },
//   { label: "CVM", value: 3 },
//   { label: "防火墙", value: 4 },
//   { label: "未知", value: 5 }
// ];

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: ""
  },
  data: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const ruleFormRef = ref<FormInstance>();
const formVisible = ref(false);
const formData = ref(props.data);
const title = ref("新建应用算法");
const customWidth = ref(560);
const customType = ref(props.type);
console.log(customType, "customType");
const pagination = ref({ current: 1, pageSize: 12, total: 48 });
const onPageSizeChange = (size: number) => {
  pagination.value.pageSize = size;
  pagination.value.current = 1;
};
const onCurrentChange = (current: number) => {
  pagination.value.current = current;
};

const activeStep = ref(0);

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036"
  }
];

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      message("提交成功", { type: "success" });
      formVisible.value = false;
      resetForm(formEl);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const closeDialog = () => {
  formVisible.value = false;
  activeStep.value = 0;
  resetForm(ruleFormRef.value);
};

const nextStep = () => {
  if (activeStep.value++ > 2) activeStep.value = 0;
};

const phoneChecked = ref(false);
const httpFirst = ref(false);
const httpSecond = ref(false);
const httpThird = ref(false);
const count = ref(3);

const emit = defineEmits(["update:visible"]);
watch(
  () => formVisible.value,
  val => {
    emit("update:visible", val);
  }
);

watch(
  () => props.type,
  val => {
    if (val == "newBuilt") {
      title.value = "新建应用算法";
      customWidth.value = 580;
    } else if (val == "history") {
      title.value = "历史推理";
      customWidth.value = 790;
    } else if (val == "alarm") {
      title.value = "告警配置";
      customWidth.value = 580;
    } else if (val == "algorithm") {
      title.value = "算法配置";
      customWidth.value = 580;
    }
    customType.value = val;
  }
);

watch(
  () => props.visible,
  val => {
    formVisible.value = val;
  }
);

watch(
  () => props.data,
  val => {
    formData.value = val;
  }
);

const rules = {
  name: [{ required: true, message: "请输入产品名称", trigger: "blur" }]
};
</script>

<template>
  <el-dialog
    v-model="formVisible"
    :title="title"
    class="project-dialog"
    :width="customWidth"
    draggable
    :before-close="closeDialog"
  >
    <el-row :gutter="30" class="mb-5" v-if="customType == 'newBuilt'">
      <re-col :value="30" :xs="24" :sm="24">
        <el-steps :space="200" :active="activeStep" simple>
          <el-step title="算法配置" />
          <el-step title="告警配置" />
        </el-steps>
      </re-col>
    </el-row>
    <!-- 表单内容 -->
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-position="top"
      label-width="160px"
      v-if="
        (activeStep == 0 && customType == 'newBuilt') ||
        customType == 'algorithm'
      "
    >
      <el-row :gutter="30">
        <re-col :value="18" :xs="24" :sm="24">
          <el-form-item label="输入源" prop="name">
            <el-select
              v-model="formData.name"
              placeholder="请选择输入源"
              :style="{ width: '100%' }"
            >
              <el-option label="视频源1" value="1" />
              <el-option label="视频源2" value="2" />
            </el-select>
          </el-form-item>
        </re-col>
        <re-col :value="6" :xs="24" :sm="24">
          <el-image
            preview-teleported
            loading="lazy"
            src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
            :preview-src-list="[
              'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
            ]"
            :initial-index="1"
            fit="cover"
          />
        </re-col>
        <re-col :value="24" :xs="24" :sm="24">
          <el-form-item label="选择算法">
            <template v-for="i in count" :key="i">
              <AlgorithmCard />
            </template>
          </el-form-item>
        </re-col>
      </el-row>
    </el-form>
    <el-form
      ref="ruleFormRef"
      :model="formData"
      :rules="rules"
      label-position="top"
      v-if="
        (activeStep == 1 && customType == 'newBuilt') || customType == 'alarm'
      "
    >
      <el-row :gutter="30">
        <re-col :value="24" :xs="24" :sm="24">
          <el-form-item label="平台警告" prop="name">
            <el-select
              v-model="formData.name"
              placeholder="请选择检测方向"
              :style="{ width: '100%' }"
            >
              <el-option label="类型1" value="1" />
              <el-option label="类型2" value="2" />
            </el-select>
          </el-form-item>
        </re-col>

        <re-col :value="24" :xs="24" :sm="24">
          <el-form-item label="短信通知" prop="leader" class="flex">
            <el-input
              v-model="formData.leader"
              :style="{ width: '95%', 'margin-right': 'auto' }"
              placeholder="请输入手机号"
            />
            <el-checkbox v-model="phoneChecked" fill="#1C0D82" size="large" />
          </el-form-item>
        </re-col>
        <re-col :value="24" :xs="24" :sm="24">
          <el-form-item
            label="设备警告"
            prop="leader"
            class="flex form-item-style"
          >
            <el-input
              v-model="formData.leader"
              :style="{ width: '95%', 'margin-right': 'auto' }"
              placeholder="请输入HTTP调用地址"
            />
            <el-checkbox v-model="httpFirst" fill="#1C0D82" size="large" />
          </el-form-item>
          <el-form-item prop="leader" class="flex form-item-style">
            <el-input
              v-model="formData.leader"
              :style="{ width: '95%', 'margin-right': 'auto' }"
              placeholder="请输入HTTP调用地址"
            />
            <el-checkbox v-model="httpSecond" fill="#1C0D82" size="large" />
          </el-form-item>
          <el-form-item prop="leader" class="flex form-item-style">
            <el-input
              v-model="formData.leader"
              :style="{ width: '95%', 'margin-right': 'auto' }"
              placeholder="请输入HTTP调用地址"
            />
            <el-checkbox v-model="httpThird" fill="#1C0D82" size="large" />
          </el-form-item>
        </re-col>
      </el-row>
    </el-form>
    <el-row v-if="customType == 'history'">
      <div class="w-full flex justify-end mb-4">
        <el-button type="primary" color="#1C0D82"> 批量导出 </el-button>
      </div>
      <re-col class="mb-4">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ background: '#F5F5F5' }"
          height="500"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="date" label="检测项" width="150" />
          <el-table-column prop="name" label="开始时间" />
          <el-table-column prop="state" label="结束时间" />
          <el-table-column prop="city" label="耗时" />
          <el-table-column prop="address" label="缺陷检出" />
          <el-table-column prop="zip" label="导出">
            <template #default>
              <el-button link type="primary" size="small">
                {{ "导出" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </re-col>
      <re-col>
        <el-pagination
          class="table-footer justify-end"
          v-model:currentPage="pagination.current"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          :page-sizes="[12, 24, 36]"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          :small="false"
          @size-change="onPageSizeChange"
          @current-change="onCurrentChange"
        />
      </re-col>
    </el-row>
    <template #footer v-if="customType != 'history'">
      <div class="dialog-footer">
        <el-button @click="closeDialog" class="btn-color">取消</el-button>
        <el-button
          @click="nextStep"
          class="btn-color"
          v-if="customType == 'newBuilt' && activeStep < 1"
          >下一步</el-button
        >
        <el-button
          type="primary"
          color="#1C0D82"
          @click="submitForm(ruleFormRef)"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss">
.project-dialog {
  border-radius: 8px;

  .el-dialog__header {
    margin-right: 0;
    border-bottom: 1px solid #e0e0e0;
  }

  .form-item-style {
    margin-bottom: 10px;
  }

  .btn-color:hover {
    color: #fff;
    background-color: #1c0d82;
    opacity: 0.25;
  }
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #1c0d82 !important;
  border-color: #1c0d82 !important;
}

.el-steps {
  --el-color-primary: #1c0d82;
}

.table-footer {
  --el-pagination-hover-color: #1c0d82;
  // .el-pagination.is-background .el-pager li:not(.disabled).active {
  //   background-color: #67c23a;
  //   color: #fff !important;
  // }
  // .el-pager li:hover {
  //   color: #67c23a !important;
  // }
  // .el-pager li:active {
  //   color: #67c23a !important;
  // }
}
</style>
