<template>
  <div class="item-wrapper flex">
    <div class="item flex" :class="{ active: isActive }">
      <div class="left flex">
        <div class="left-item flex" :class="{ active: isActive }">
          <div class="text">
            <i class="iconfont icon-24gl-checklist" />

            <span v-if="!isActive">{{ infoData.title }}</span>
            <el-input
              v-else
              v-model="infoData.title"
              placeholder="请输入内容"
              style="width: 140px; margin-left: 5px"
            ></el-input>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="top">参与培训人员</div>
        <div class="bottom">
          <el-checkbox-group class="" v-model="infoData.checkedActive">
            <el-checkbox
              :disabled="!isActive"
              v-for="(city, index) in cityOptions"
              :label="index"
              :key="city"
              >{{ city }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </div>
      <div class="right flex">
        <template v-if="!isActive">
          <el-button type="text" @click="edit">编辑</el-button>
          <!-- <el-button type="text">删除</el-button> -->
        </template>
        <template v-else>
          <el-button type="text" @click="save">保存</el-button>
          <el-button type="text" @click="cancel(false)">取消</el-button>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "trainingProgram-item",
  props: {
    cityOptions: {
      type: Array,
    },
    isActiveId: {
      type: [String, Number],
      default: 999,
    },
    infoData: {
      type: Object,
      default: () => {
        return {
          id: 1,
          title: "安全岗位生产",
          checkedActive: [1, 2, 3, 4],
        };
      },
    },
  },
  computed: {
    // isActive() {
    //   return this.isActiveId === this.infoData.id;
    // },
  },
  mounted() {},
  watch: {
    isActiveId(newVal) {
      if (newVal === this.infoData.id) {
        this.isActive = true;
      } else {
        this.cancel(true);
        this.isActive = false;
      }
    },
  },
  data() {
    return {
      // 记录初始的选项
      oldInfoData: JSON.stringify(this.infoData),
      isActive: false,
    };
  },
  methods: {
    edit() {
      // 编辑
      this.$emit("edit", this.infoData.id);
      console.log('编辑')
    },
    save() {
      // 成功也要将oldInfoData 变成最新的
      // this.oldInfoData = "newInfoData";
      const dataJson = JSON.stringify(this.infoData);

      setTimeout(() => {
        alert("成功");
        this.$emit("save", dataJson);
        // 成功之后
        this.oldInfoData = dataJson;
      }, 1000);
    },
    // 当bool为true时候，监听用的，不去改videoID，这样就不会监听锁死
    // 当bool为false时，是取消用的，会变成999
    cancel(bool=false) {
      // 取消的时候将初始的传出去
      // console.log(this.isActive)
      // 如果是选中状态才会走下面的方法
      if (this.isActive === false) return;
      this.$emit("cancel", this.oldInfoData);
      if(!bool){
        this.$emit("edit", 999)
      }

    },
  },
};
</script>
<style lang="scss" scoped>
.item-wrapper {
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  .item {
    width: 93.2%;
    max-width: 1600px;
    height: 111px;
    border: 1px solid #cecece;
    box-shadow: -4px 0px 0px 0px rgba(0, 0, 0, 0.1);
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 100%
    );

    border-radius: 5px;
    &.active {
      box-shadow: -4px 0px 0px 0px #1d84ff, 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
    }
    // background: blue;
    .left {
      width: 225px;
      height: 100%;
      align-items: center;
      justify-content: right;
      .left-item {
        width: 200px;
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        padding-left: 25px;
        border: 1px solid #efefef;
        border-radius: 5px;
        box-sizing: border-box;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0) 8%,
          rgba(239, 239, 239, 1) 100%
        );
        &.active {
          background: #1d84ff;
          color: #fff;
        }
        span {
          margin-left: 10px;
        }
      }
    }
    .middle {
      flex: 1;
      // background: white;
      padding-left: 25px;
      padding-top: 25px;
      padding-right: 25px;
      .top {
        font-size: 14px;
        margin-bottom: 9px;
      }
      .bottom {
        justify-content: space-between;
        font-size: 14px;
      }
    }
    .right {
      padding-right: 20px;
      width: 120px;
      height: 100%;
      justify-items: center;
    }
  }
}
</style>