<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <div>
        <el-button type="primary" size="medium" @click="addCheckBtn">
          {{ $t("message.safeManage.checkItemList.newInspection") }}
        </el-button>
      </div>
    </div>
    <div class="background whiteBlock">
      <el-table
        :data="tableData"
        row-key="id"
        :tree-props="{ children: 'children' }"
      >
      <!-- 检查项名称 -->
        <el-table-column prop="checkname" :label="$t('message.safeMangeCheck.checkedProjectName')"> </el-table-column>
       <!-- 操作 -->
        <el-table-column :label="$t('message.safeMangeCheck.operate')" width="230" align="center">
          <template slot-scope="scope">
            <div class="flex2">
              <el-button
                class="operationText"
                v-show="scope.row.parentId == 0"
                size="small"
                type="primary"
                @click="addChildBtn(scope.row)"
                ><i class="el-icon-circle-plus"></i
                >{{ $t("message.safeManage.checkItemList.subitem") }}
              </el-button>
              <img
                src="@/assets/images/icon-edit.png"
                width="15px"
                height="15px"
                class="icon"
                style="margin: 0 10px 0 20px"
                @click="editPoint(scope.row)"
              />
              <img
                src="@/assets/images/icon-delete.png"
                width="15px"
                height="15px"
                class="icon"
                style="margin: 0 10px"
                @click="removePoint(scope.row)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增检查项弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="title"
      :visible.sync="dialogVisible"
      width="667px"
      :close-on-click-modal="false"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="form"
          ref="checkForm"
          label-width="110px"
          class="dialogFormBox"
        >
          <el-form-item
            :label="$t('message.safeManage.checkItemList.inspectionName')"
            prop="checkname"
            :rules="[{ required: true, message: $t('message.safeMangeCheck.placeholder'), trigger: 'blur' }]"
            v-if="type == 1"
          >
            <el-input
              v-model="form.checkname"
              :placeholder="$t('message.safeManage.placeholder')"
            ></el-input>
          </el-form-item>
          <!-- 子项名称 -->
          <el-form-item
            v-else
            :label="$t('message.safeMangeCheck.childProjectName')"
            prop="checkname"
            :rules="[{ required: true, message:  $t('message.safeMangeCheck.placeholder'), trigger: 'blur' }]"
          >
            <el-input
              v-model="form.checkname"
              :placeholder="$t('message.safeManage.placeholder')"
            ></el-input>
          </el-form-item>
        </el-form>

        <div class="dialog-footer">
          <el-button
            class="cancleBtn"
            @click="dialogVisible = false"
            icon="el-icon-circle-close"
            size="medium"
            >
            <!-- 取 消 -->
            {{$t('message.safeMangeCheck.cancel')}}
            </el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            @click="addSaveBtn"
            size="medium"
            >
            <!-- 确 定 -->
             {{$t('message.safeMangeCheck.confirm')}}
            </el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  addCheckPointsApi,
  getCheckPointsListApi,
  editCheckPointsApi,
  deleteCheckPointsApi
} from "@/assets/js/api/safeManage";
export default {
  data() {
    return {
      projectSn: "",
      dialogVisible: false,
      type: 1, //新增检查项 1 ； 新增子项 2
      addOrEdit: "add",
      title: /* "新增检查项", */this.$t('message.safeMangeCheck.addNewCheckedProject'),
      input: "",
      form: {
        checkname: "",
      },
      rulesForm: {},
      tableData: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.getListData();
  },
  methods: {
    //获取列表数据
    getListData() {
      let data = {
        projectSn: this.projectSn,
      };
      getCheckPointsListApi(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.tableData = res.result;
        }
      });
    },

    //新增检查项按钮
    addCheckBtn() {
      this.dialogVisible = true;
      this.type = 1;
      this.title = /* "新增检查项"; */this.$t('message.safeMangeCheck.addNewCheckedProject')
      this.form = {
        checkname: "",
      };
      this.addOrEdit = "add";
    },

    //保存检查项
    addSaveBtn() {
      this.$refs.checkForm.validate((valid) => {
        if (valid) {
          let data = this.form;
          data.sn = this.$store.state.userInfo.headquartersSn;
          if (this.addOrEdit == "add") {
            addCheckPointsApi(data).then((res) => {
              if (res.code == 200) {
                this.dialogVisible = false;
                // "新增成功"
                this.$message.success(this.$t('message.safeMangeCheck.addSuccess'));
                this.getListData();
              } else {
                this.$message.error(res.message);
              }
            });
          } else {
            editCheckPointsApi(data).then((res) => {
              if (res.code == 200) {
                this.dialogVisible = false;
                this.$message.success(this.$t('message.safeMangeCheck.addSuccess'));
                this.getListData();
              } else {
                this.$message.error(res.message);
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    //新增子项按钮
    addChildBtn(val) {
      this.dialogVisible = true;
      this.type = 2;
      this.title = /* "新增子项"; */this.$t('message.safeMangeCheck.addNewChildrenProject')
      this.form = {
        checkname: "",
        parentId: val.id,
      };
      this.addOrEdit = "add";
    },

    //编辑检查项
    editPoint(val) {
      this.dialogVisible = true;
      this.addOrEdit = "edit";
      if (val.parentId == 0) {
        this.form = {
          checkname: val.checkname,
          id: val.id,
        };
        this.title =/*  "编辑检查项"; */this.$t('message.safeMangeCheck.editCheckedProject')
        this.type = 1;
      } else {
        this.form = {
          checkname: val.checkname,
          id: val.id,
          parentId: val.parentId,
        };
        this.type = 2;
        this.title = /* "编辑子项"; */this.$t('message.safeMangeCheck.editChildrenProject')
      }
    },

    removePoint(val){
         this.$confirm(this.$t('message.safeMangeCheck.dialog.confirmDelete'), this.$t('message.safeMangeCheck.dialog.tip'), {
          confirmButtonText:/*  '确定', */this.$t('message.safeMangeCheck.dialog.confirm'),
          cancelButtonText: /* '取消', */this.$t('message.safeMangeCheck.dialog.cancel'),
          type: 'warning'
        }).then(() => {
            let data = {
                id:val.id
            };
           deleteCheckPointsApi(data).then(res=>{
               if(res.code==200){
                   this.getListData();
                    this.$message({
                        type: 'success',
                        message: /* '删除成功!' */this.$t('message.safeMangeCheck.dialog.deleteSuccess'),
                    });
               }else{
                   this.$message.error(res.message)
               }
           }) 

        }).catch(() => {
          this.$message({
            type: 'info',
            message:/*  '已取消删除' */this.$t('message.safeMangeCheck.dialog.cancelDeleteSuccess'),
          });          
        });
    },
  

  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.background {
  height: calc(100% - 94px);
  padding: 15px 20px;
  box-sizing: border-box;
}

.zdy-tree {
  /*border: 1px solid #ccc;*/

  .zdy-tree-title {
    font-size: 16px;
    padding: 16px 0 16px 30px;
    // background-color: #fff !important;
  }

  > li {
    //一级项
    /*padding: 8px 0;*/

    .el-icon-circle-plus {
      margin-right: 5px;
    }
    > div {
      .flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 30px;

      > p {
        cursor: pointer;
        position: relative;

        > i {
          position: absolute;
          left: -15px;
          top: 24%;
          transform: translate(-15, -24%);
        }
      }
    }

    > ul {
      padding-left: 30px;
      padding-right: 30px;
      // background-color: #F0F0F0;

      > li {
        //二级项
        padding: 8px 0;
        .flex;
        justify-content: space-between;
      }
    }
  }

  // > li:nth-child(odd) {
  //     background-color: #fff;
  // }

  > li:nth-child(even) {
    background-color: #fbfbfb;
  }

  /*> li > div :hover {
            background-color: #F5F7FA;
        }*/
}
.icon {
  cursor: pointer;
}
</style>