<template>
  <div style="padding: 20px">
    <el-form :model="form" :rules="formRules" ref="taskForm">
      <el-form-item prop="videoTasksName" label="算法名称">
        <el-input
          v-model="form.videoTasksName"
          size="mini"
          style="width: 200px"
          clearable
          placeholder="请输入算法名称"
        ></el-input>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" type="flex">
      <el-col :span="8">
        <el-card
          shadow="hover"
          :body-style="{ padding: '20px', height: 'calc(100vh - 280px)' }"
        >
          <span slot="header"
            >选择算法
            <p>
              已选则 <span class="number">{{ checkAnalysisList.length }}</span
              >个算法
            </p>
          </span>
          <div>
            <el-checkbox-group v-model="checkAnalysisList" size="small">
              <!-- 自定义复选框组件 -->
              <div
                class="custom-checkbox"
                :class="{
                  'is-checked': checkAnalysisList.some(
                    (val) => item.id === val.id
                  ),
                }"
                @click="handleCheckboxChange(item)"
                v-for="(item, index) in analysisList"
                :key="index"
              >
                <div class="checkbox-inner">
                  <i
                    v-show="checkAnalysisList.some((val) => item.id === val.id)"
                    class="el-icon-check"
                  ></i>
                </div>
                <div class="checkbox-content">
                  <p>{{ item.name }}</p>
                  <span>ID : {{ item.id }} </span>
                  <span>版本 {{ item.version }} </span>
                </div>
              </div>
            </el-checkbox-group>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card
          shadow="hover"
          :body-style="{ padding: '20px', height: 'calc(100vh - 280px)' }"
        >
          <span slot="header"
            >选择摄像头
            <p>
              已选则<span class="number">{{ checkCameraList.length }}</span
              >个摄像头
            </p>
          </span>
          <div>
            <el-table :data="cameraList" @selection-change="cameraChange">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="名称" prop="name"></el-table-column>
              <el-table-column label="地址" prop="address"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card
          shadow="hover"
          :body-style="{ padding: '20px', height: 'calc(100vh - 280px)' }"
        >
          <span slot="header"
            >视频分析任务内容
            <p>
              <el-button type="primary" plain size="mini" @click="submitForm()">
                <i class="el-icon-switch-button el-icon--left"></i>
                创建任务
              </el-button>
              <el-button type="primary" size="mini" @click="submitForm()">
                <i class="el-icon-finished el-icon--left"></i>
                立即启用
              </el-button>
            </p>
          </span>
          <div>
            <transition-group name="list" tag="div">
              <div
                class="custom-checkbox"
                v-for="(item, index) in checkAnalysisList"
                :key="index"
              >
                <div class="checkbox-content">
                  <p>{{ item.name }}</p>
                  <el-tag
                    v-for="tag in item.checkCameraList"
                    :key="tag.name"
                    closable
                    size="mini"
                    @close="deleteTag(item, tag)"
                    :type="tag.type"
                  >
                    {{ tag.name }}
                  </el-tag>
                  <p>
                    <span>ID : {{ item.id }} </span>
                    <span>版本 {{ item.version }} </span>
                  </p>
                </div>
              </div>
            </transition-group>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "addVideoAnlysisTasks",
  props: {
    editData: {
      type: Object,
      default: () => null,
    },
  },
  components: {},
  data() {
    return {
      form: {
        videoTasksName: "", // 将原videoTasksName移到form对象中
      },
      formRules: {
        videoTasksName: [
          { required: true, message: "算法名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
      checkAnalysisList: [], // 选中的算法名称
      // 算法列表
      analysisList: [
        {
          id: 1,
          name: "摄像头挪移角度识别检测算无模型",
          version: "v1.0",
          checkCameraList: [],
        },
        {
          id: 2,
          name: "巡检人员长时间停留训练版",
          version: "v1.0",
          checkCameraList: [],
        },
        {
          id: 3,
          name: "长时间无人巡检训练版",
          version: "v1.0",
          checkCameraList: [],
        },
      ],
      cameraList: [
        {
          id: 1,
          name: "摄像头1",
          address: "地址一",
        },
        {
          id: 2,
          name: "摄像头2",
          address: "地址2",
        },
        {
          id: 3,
          name: "摄像头3",
          address: "地址3",
        },
      ],
      checkCameraList: [], // 选中的摄像头
    };
  },
  computed: {},
  watch: {
    editData: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          console.log(newVal);
          // 填充表单数据
          this.form.videoTasksName = newVal.name;
          // 其他字段赋值...
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 修改后的复选框点击方法
    handleCheckboxChange(item) {
      const index = this.checkAnalysisList.findIndex((i) => i.id === item.id);
      if (index > -1) {
        this.checkAnalysisList.splice(index, 1);
      } else {
        // 新增时初始化摄像头列表
        this.checkAnalysisList.push({
          ...item,
          checkCameraList: [],
        });
      }
      // 同步更新树形选择
      this.$nextTick(() => {});
    },
    // 摄像头选择
    cameraChange(val) {
      console.log(val);
      this.checkCameraList = val;
      const selectedCamera = val.map((item) => ({
        name: item.name,
        type: "success", // 可以根据需要设置不同的标签类型
      }));
      // 为每个算法项添加摄像头列表
      this.checkAnalysisList.forEach((item) => {
        item.checkCameraList = [...selectedCamera];
      });
    },
    // 删除标签
    deleteTag(item, tag) {
      const index = item.checkCameraList.findIndex((i) => i.name === tag.name);
      if (index > -1) {
        item.checkCameraList.splice(index, 1);
      }
      console.log(this.checkAnalysisList);
    },
    //提交

    // 在提交时触发验证
    submitForm() {
      this.$refs.taskForm.validate((valid) => {
        if (valid) {
          // 执行提交操作
          this.$emit("close-drawer");
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
// 自定义复选框样式
.custom-checkbox {
  display: flex;
  align-items: center;
  padding: 8px;
  margin: 4px 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  transition: all 0.4s;

  &:hover {
    border-color: #409eff;
  }

  &.is-checked {
    border-color: #409eff;
    background-color: #f5f7fa;
    // 新增内部框体选中样式
    .checkbox-inner {
      border-color: #409eff;
      background-color: #409eff;
      i {
        color: #fff;
      }
    }
  }

  .checkbox-inner {
    width: 16px;
    height: 16px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    margin-right: 8px;
    position: relative;
    background: #fff;
    transition: all 0.2s; // 添加过渡动画

    i {
      position: absolute;
      left: 50%;
      top: 55%; // 微调垂直居中
      transform: translate(-50%, -50%);
      color: #409eff;
      font-weight: bold;
      font-size: 14px; // 增大图标尺寸
    }
  }

  .checkbox-content {
    p {
      margin: 0 0 4px 0;
      font-size: 14px;
    }
    span {
      font-size: 12px;
      color: #909399;
      margin-right: 8px;
    }
  }
}
// 新增动画样式
.list-enter-active {
  transition: all 0.5s ease;
}
.list-leave-active {
  transition: all 0.3s ease;
  position: absolute;
}
.list-enter {
  opacity: 0;
  transform: translateX(-30px);
}
.list-leave-to {
  opacity: 0;
}
.number {
  color: rgb(24, 114, 240);
  font-size: 25px;
}
</style>
