<template>
  <div class="body slider-right">
    <div class="top-title">基础信息管理</div>
    <div class="method-details-page">
      <div class="flex justify-between items-center">
        <span v-if="editTitle">
          <el-input class="input" v-model="itemName"></el-input>
          <i
            class="el-icon-check cursor-pointer ml-4 font-16"
            style="color: #409eff"
            @click="handleSaveTitle"
          ></i>
        </span>
        <span v-else
          >{{ itemName }}
          <i
            class="el-icon-edit cursor-pointer ml-4 font-16"
            style="color: #409eff"
            @click="editTitle = !editTitle"
          ></i
        ></span>
        <el-button @click="$router.go(-1)" size="small">返回</el-button>
      </div>
      <div class="flex items-center mt-12">
        <span class="flex-shrink-0 font-14">内容检索</span>
        <el-input
          style="width: 180px; margin-left: 12px"
          v-model="searchVal"
          placeholder="请输入"
        />
        <el-button
          type="primary"
          size="small"
          class="!ml-10"
          @click="handleSearch"
          >检索</el-button
        >
      </div>
      <div class="table-box">
        <el-row class="item-row">
          <el-col :span="2">
            <div class="item-row-content">序号</div>
          </el-col>
          <el-col :span="3">
            <div class="item-row-content">检查项目</div>
          </el-col>
          <el-col :span="9">
            <div class="item-row-content">问题描述</div>
          </el-col>
          <el-col :span="8">
            <div class="item-row-content item-row-content2">
              <div class="title-1">问题等级</div>
              <div class="flex w-full title-2">
                <div class="w-33 justify-center flex items-center pt-4 pb-4">
                  一般
                </div>
                <div class="w-33 justify-center flex items-center pt-4 pb-4">
                  较重
                </div>
                <div class="flex-1 justify-center flex items-center pt-4 pb-4">
                  严重
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="item-row-content">操作</div>
          </el-col>
        </el-row>
        <el-row
          class="item-row color-333"
          v-for="(item, index) in questList"
          :key="index"
        >
          <el-col :span="2">
            <div class="item-row-content">{{ index + 1 }}</div>
          </el-col>
          <el-col :span="3">
            <div class="item-row-content">{{ item.projectName }}</div>
          </el-col>
          <el-col :span="9">
            <div class="item-row-content">
              <el-input
                v-if="item.edit"
                v-model="item.content"
                :maxlength="500"
              ></el-input>
              <div v-else>{{ item.content }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item-row-content item-row-content2">
              <div class="flex w-full title-2 h-full">
                <div class="w-33 text-center flex items-center p-10">
                  <el-input
                    v-if="item.edit"
                    v-model="item.sameGrade"
                    :maxlength="100"
                  ></el-input>
                  <div v-else class="word-break">{{ item.sameGrade }}</div>
                </div>
                <div class="w-33 text-center flex items-center p-10">
                  <el-input
                    v-if="item.edit"
                    v-model="item.heavyGrade"
                    :maxlength="100"
                  ></el-input>
                  <div v-else class="word-break">{{ item.heavyGrade }}</div>
                </div>
                <div class="flex-1 text-center flex items-center p-10">
                  <el-input
                    v-if="item.edit"
                    v-model="item.seriousGrade"
                    :maxlength="100"
                  ></el-input>
                  <div v-else class="word-break">{{ item.seriousGrade }}</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="item-row-content">
              <el-button
                type="text"
                v-if="index == questList.length - 1"
                @click="handleAddNewItem"
                >添加</el-button
              >
              <el-button type="text" v-if="!item.edit" @click="item.edit = true"
                >修改</el-button
              >
              <el-button type="text" v-else @click="handleSaveItem(item)"
                >保存</el-button
              >
              <el-button
                type="text"
                v-if="questList.length > 1"
                @click="handleDelItem(item, index)"
                >删除</el-button
              >
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getSuperviseWayItemDetailsData,
  getSuperviseWayItemDetailsListData,
  addSuperviseWayItemDetailsItemData,
  updateSuperviseWayItemDetailsItemData,
  updateSuperviseWayItemData,
  delSuperviseWayItemDetailsItemData,
} from "@/api/dike";
export default {
  data() {
    return {
      itemName: "",
      editTitle: false,
      searchVal: "",
      questList: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      getSuperviseWayItemDetailsData(this.$route.query.id).then((res) => {
        this.itemName = res?.data?.name;
        getSuperviseWayItemDetailsListData({
          projectId: this.$route.query.id,
          content: this.searchVal,
        }).then((res2) => {
          this.questList = res2.data.map((v) => {
            return {
              ...v,
              edit: false,
            };
          });
          if (this.questList.length <= 0) {
            this.questList.push({
              projectName: this.itemName,
              content: "",
              sameGrade: "",
              heavyGrade: "",
              seriousGrade: "",
              edit: true,
            });
          }
        });
      });
    },
    handleAddNewItem() {
      this.questList.push({
        projectName: this.itemName,
        content: "",
        sameGrade: "",
        heavyGrade: "",
        seriousGrade: "",
        edit: true,
      });
    },
    handleSaveItem(item) {
      if (!item.content) {
        this.$message.warning("请填写问题描述");
        return;
      }
      if (item.id) {
        updateSuperviseWayItemDetailsItemData({
          ...item,
          projectName: this.itemName,
          projectId: this.$route.query.id,
        })
          .then((res) => {
            item.edit = false;
          })
          .catch(() => {
            this.$message.error("修改失败");
          });
      } else {
        addSuperviseWayItemDetailsItemData({
          ...item,
          projectName: this.itemName,
          projectId: this.$route.query.id,
        })
          .then((res) => {
            if (res.data) {
              item.id = res.data.id;
            }
            item.edit = false;
          })
          .catch(() => {
            this.$message.error("保存失败");
          });
      }
    },
    // 删除问题项
    handleDelItem(item) {
      if (!item.id) {
        this.questList.splice(index, 1);
      } else {
        this.$confirm("是否删除该问题项", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            delSuperviseWayItemDetailsItemData(item.id).then((res) => {
              this.questList = this.questList.filter((v) => v.id !== item.id);
            });
          })
          .catch(() => {});
      }
    },
    handleSaveTitle() {
      updateSuperviseWayItemData({
        id: this.$route.query.id,
        name: this.itemName,
      }).then((res) => {
        this.$message.success("修改成功");
        this.editTitle = !this.editTitle;
        this.questList.forEach((item) => {
          item.projectName = this.itemName;
        });
      });
    },
    handleSearch() {
      this.initData();
    },
  },
};
</script>
<style scoped lang="scss">
.body {
  width: 100%;
  min-height: calc(100vh - 56px);
  padding-left: 24px;

  .top-title {
    height: 40px;
    background-color: white;
    display: flex;
    padding-left: 16px;
    align-items: center;
    font-weight: 600;
  }
  .method-details-page {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    height: calc(100% - 16px);
    .table-box {
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-top: 12px;
      .item-row {
        display: flex;
        .el-col {
          box-sizing: border-box;
        }
        .item-row-content {
          padding: 10px;
          border: 1px solid #ccc;
          height: 100%;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
        }
        .item-row-content2 {
          padding: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          .title-1 {
            width: 100%;
            padding: 4px;
            text-align: center;
            border-bottom: 2px solid #ccc;
          }
          .title-2 {
            // border-top: 1px solid #ccc;
            & > *:nth-of-type(2) {
              border-left: 2px solid #ccc;
              border-right: 2px solid #ccc;
            }
          }
        }
      }
    }
  }
  .input {
    width: 200px;
  }
  .w-33 {
    width: 33%;
  }

  .color-333 {
    color: #333;
  }
}
</style>
