<template>
  <div class="content-detail content-box ele-body">
    <el-card
      shadow="never"
      element-loading-background="rgba(255, 255, 255, 1)"
      v-loading="allLoading"
    >
      <div class="base-info">
        <div class="title">基础信息:</div>
        <div class="base-body">
          <el-row v-if="type == 1 || type == 2" type="flex">
            <el-col :span="5" class="grey"><span>一级指标</span></el-col>
            <el-col :span="7"
              ><span>{{ data.quota1 }}</span></el-col
            >
            <el-col :span="5" class="grey"><span>二级指标</span></el-col>
            <el-col :span="7"
              ><span>{{ data.quota2 }}</span></el-col
            >
          </el-row>
          <el-row v-if="type == 3" type="flex">
            <el-col :span="5" class="grey"><span>考核指标</span></el-col>
            <el-col :span="19"
              ><span>{{ data.quota }}</span></el-col
            >
          </el-row>
          <el-row type="flex">
            <el-col :span="5" class="grey"><span>区牵头单位</span></el-col>
            <el-col :span="7"
              ><span>
                <pre>{{ data.leaderUnit }}</pre>
              </span></el-col
            >
            <el-col :span="5" class="grey"><span>封顶分值</span></el-col>
            <el-col :span="7"
              ><span>{{ data.points }}</span></el-col
            >
          </el-row>
          <el-row type="flex">
            <el-col :span="5" class="grey"><span>牵头部门</span></el-col>
            <el-col :span="7"
              ><span>
                <pre>{{ data.leaderDeptList | formatList }}</pre>
              </span></el-col
            >
            <el-col :span="5" class="grey"
              ><span>牵头部门责任领导</span></el-col
            >
            <el-col :span="7"
              ><span>
                <pre>{{ data.leaderPrincipalList | formatList }}</pre>
              </span></el-col
            >
          </el-row>
          <el-row type="flex">
            <el-col :span="5" class="grey"><span>配合部门</span></el-col>
            <el-col :span="7"
              ><span>
                <pre>{{ data.cooperateDeptList | formatList }}</pre>
              </span></el-col
            >
            <el-col :span="5" class="grey"
              ><span>配合部门责任领导</span></el-col
            >
            <el-col :span="7"
              ><span>
                <pre>{{ data.cooperatePrincipalList | formatList }}</pre>
              </span></el-col
            >
          </el-row>
          <el-row type="flex">
            <el-col :span="5" class="grey"><span>指标内容</span></el-col>
            <el-col :span="19"
              ><span>{{ data.content }}</span></el-col
            >
          </el-row>
        </div>
      </div>
      <div class="segmentation" style="margin-top: 30px">
        <div class="title">
          <span>分项信息</span>
          <el-button
            type="primary"
            size="small"
            style="margin-right: 50px"
            @click="change('add')"
            >添加</el-button
          >
        </div>
        <div style="overflow-x: scroll">
          <el-table
            :data="detailList"
            border
            highlight-current-row
            v-loading="tableLoading"
            style="min-height: 500px; min-width: 1500px"
          >
            <el-table-column
              type="index"
              label="编号"
              align="center"
              width="50"
            ></el-table-column>
            <el-table-column
              label="* 小项内容"
              align="center"
              min-width="160"
              max-width="200"
            >
              <template slot-scope="{ row }">
                <el-input
                  type="textarea"
                  placeholder="请输入小项内容"
                  v-model="form.itemContent"
                  v-if="row.edit || row.add"
                ></el-input>
                <span v-else>{{ row.itemContent }}</span>
              </template>
            </el-table-column>
            <el-table-column label="* 分值" align="center" width="80">
              <template slot-scope="{ row }">
                <el-input
                  placeholder="请输入分值"
                  v-if="row.edit || row.add"
                  v-model="form.points"
                ></el-input>
                <span v-else>{{ row.points }}</span>
              </template>
            </el-table-column>
            <el-table-column label="* 第一牵头部门" align="center" width="180">
              <template slot-scope="{ row }">
                <treeselect
                  :disable-branch-nodes="true"
                  @input="changePrincipal($event, 'leader')"
                  v-if="row.edit || row.add"
                  v-model="form.leaderDept"
                  :options="formatDep"
                  placeholder="请选择第一牵头部门"
                  :defaultExpandLevel="1"
                  :normalizer="
                    (d) => {
                      return {
                        id: d.id,
                        label: d.name,
                        children:
                          d.children && d.children.length > 0
                            ? d.children
                            : undefined,
                      };
                    }
                  "
                />
                <span v-else>
                  <pre>{{ row.leaderDeptList | formatList }}</pre>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="* 第一牵头部门责任领导"
              align="center"
              width="180"
            >
              <template slot-scope="{ row }">
                <treeselect
                  :disable-branch-nodes="true"
                  :disable="true"
                  v-if="row.edit || row.add"
                  v-model="form.leaderPrincipal"
                  :options="principalList"
                  placeholder="请选择第一牵头部门责任领导"
                  :defaultExpandLevel="1"
                  :normalizer="
                    (d) => {
                      return {
                        id: d.id,
                        label: d.realname,
                        children:
                          d.children && d.children.length > 0
                            ? d.children
                            : undefined,
                      };
                    }
                  "
                />
                <span v-else>
                  <pre>{{ row.leaderPrincipalList | formatList }}</pre>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="其他牵头部门" align="center" min-width="130">
              <template slot-scope="{ row }">
                <treeselect
                  :disable-branch-nodes="true"
                  v-if="row.edit || row.add"
                  @input="changePrincipal($event, 'other')"
                  :multiple="true"
                  v-model="form.otherDept"
                  :options="formatDep"
                  placeholder="请选择其他牵头部门"
                  :defaultExpandLevel="1"
                  :normalizer="
                    (d) => {
                      return {
                        id: d.id,
                        label: d.name,
                        children:
                          d.children && d.children.length > 0
                            ? d.children
                            : undefined,
                      };
                    }
                  "
                />
                <span v-else>
                  <pre>{{ row.otherDeptList | formatList }}</pre>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="其他牵头部门责任领导"
              align="center"
              width="180"
            >
              <template slot-scope="{ row }">
                <treeselect
                  :disable-branch-nodes="true"
                  :disabled="true"
                  v-if="row.edit || row.add"
                  :multiple="true"
                  v-model="form.otherPrincipal"
                  :options="principalList"
                  placeholder="请选择其他牵头部门责任领导"
                  :defaultExpandLevel="1"
                  :normalizer="
                    (d) => {
                      return {
                        id: d.id,
                        label: d.realname,
                        children:
                          d.children && d.children.length > 0
                            ? d.children
                            : undefined,
                      };
                    }
                  "
                />
                <span v-else>
                  <pre>{{ row.otherPrincipalList | formatList }}</pre>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="配合部门" align="center" width="180">
              <template slot-scope="{ row }">
                <treeselect
                  :disable-branch-nodes="true"
                  @input="changePrincipal($event, 'cooperate')"
                  v-if="row.edit || row.add"
                  :multiple="true"
                  v-model="form.cooperateDept"
                  :options="formatDep"
                  placeholder="请选择配合部门"
                  :defaultExpandLevel="1"
                  :normalizer="
                    (d) => {
                      return {
                        id: d.id,
                        label: d.name,
                        children:
                          d.children && d.children.length > 0
                            ? d.children
                            : undefined,
                      };
                    }
                  "
                />
                <span v-else>
                  <pre>{{ row.cooperateDeptList | formatList }}</pre>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="配合部门责任领导"
              align="center"
              width="180"
            >
              <template slot-scope="{ row }">
                <treeselect
                  :disable-branch-nodes="true"
                  v-if="row.edit || row.add"
                  :multiple="true"
                  :disabled="true"
                  v-model="form.cooperatePrincipal"
                  :options="principalList"
                  placeholder="请选择配合部门责任领导"
                  :defaultExpandLevel="1"
                  :normalizer="
                    (d) => {
                      return {
                        id: d.id,
                        label: d.realname,
                        children:
                          d.children && d.children.length > 0
                            ? d.children
                            : undefined,
                      };
                    }
                  "
                />
                <span v-else>
                  <pre>{{ row.cooperatePrincipalList | formatList }}</pre>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="{ row, $index }">
                <template v-if="row.add || row.edit">
                  <el-link
                    @click="add(row)"
                    icon="el-icon-edit"
                    type="primary"
                    :underline="false"
                    >保存</el-link
                  >
                  <el-link
                    @click="remove('cancel', $index, row)"
                    icon="el-icon-edit"
                    type="primary"
                    :underline="false"
                    >取消</el-link
                  >
                </template>

                <template v-else>
                  <el-link
                    @click="change('edit', $index, row)"
                    icon="el-icon-edit"
                    type="primary"
                    :underline="false"
                    >编辑</el-link
                  >
                  <el-popconfirm
                    title="确定要删除此表格？"
                    @confirm="remove('delete', row.id)"
                    class="ele-action"
                  >
                    <el-link
                      slot="reference"
                      icon="el-icon-delete"
                      type="danger"
                      :underline="false"
                      >删除</el-link
                    >
                  </el-popconfirm>
                </template>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div
            class="table"
            v-loading="tableLoading"
            :style="{ height: tableHeight + 'px' }"
          >
            <div class="scroll-x">
              <div class="header">
                <el-row type="flex">
                  <el-col :span="1" align="center" class="thead td"
                    ><span class="cell">编号</span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">小项内容</span></el-col
                  >
                  <el-col :span="1" align="center" class="thead td"
                    ><span class="cell">分值</span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">第一牵头部门</span></el-col
                  >
                  <el-col :span="2" align="center" class="thead td"
                    ><span class="cell">责任领导</span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">其他牵头部门</span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">责任领导</span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">配合部门</span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">责任领导</span></el-col
                  >
                  <el-col :span="2" align="center" class="thead td"
                    ><span class="cell">操作</span></el-col
                  >
                </el-row>
              </div>
              <div class="body">
                <el-row
                  type="flex"
                  v-for="(item, index) of detailList"
                  :key="index"
                >
                  <el-col :span="1" align="center" class="thead td"
                    ><span class="cell">{{ index + 1 }}</span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">
                      <el-input
                        type="textarea"
                        placeholder="请输入小项内容"
                        v-model="form.itemContent"
                        v-if="item.edit || item.add"
                        :row="5"
                      ></el-input>
                      <span v-else>{{ item.itemContent }}</span>
                    </span></el-col
                  >
                  <el-col :span="1" align="center" class="thead td"
                    ><span class="cell">
                      <el-input
                        placeholder="请输入分值"
                        v-if="item.edit || item.add"
                        v-model="form.points"
                      ></el-input>
                      <span v-else>{{ item.points }}</span>
                    </span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">
                      <treeselect
                        :disable-branch-nodes="true"
                        @input="changePrincipal($event, 'leader')"
                        v-if="item.edit || item.add"
                        v-model="form.leaderDept"
                        :options="formatDep"
                        placeholder="请选择第一牵头部门"
                        :defaultExpandLevel="1"
                        :normalizer="
                          (d) => {
                            return {
                              id: d.id,
                              label: d.name,
                              children:
                                d.children && d.children.length > 0
                                  ? d.children
                                  : undefined,
                            };
                          }
                        "
                      />
                      <span v-else>
                        <pre>{{ item.leaderDeptList | formatList }}</pre>
                      </span>
                    </span></el-col
                  >
                  <el-col :span="2" align="center" class="thead td"
                    ><span class="cell">
                      <treeselect
                        :disable-branch-nodes="true"
                        :disable="true"
                        v-if="item.edit || item.add"
                        v-model="form.leaderPrincipal"
                        :options="principalList"
                        placeholder="请选择牵头部门责任领导"
                        :defaultExpandLevel="1"
                        :normalizer="
                          (d) => {
                            return {
                              id: d.id,
                              label: d.realname,
                              children:
                                d.children && d.children.length > 0
                                  ? d.children
                                  : undefined,
                            };
                          }
                        "
                      />
                      <span v-else>
                        <pre>{{ item.leaderPrincipalList | formatList }}</pre>
                      </span>
                    </span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">
                      <treeselect
                        :disable-branch-nodes="true"
                        v-if="item.edit || item.add"
                        @input="changePrincipal($event, 'other')"
                        :multiple="true"
                        v-model="form.otherDept"
                        :options="formatDep"
                        placeholder="请选择其他牵头部门"
                        :defaultExpandLevel="1"
                        :normalizer="
                          (d) => {
                            return {
                              id: d.id,
                              label: d.name,
                              children:
                                d.children && d.children.length > 0
                                  ? d.children
                                  : undefined,
                            };
                          }
                        "
                      />
                      <span v-else>
                        <pre>{{ item.otherDeptList | formatList }}</pre>
                      </span>
                    </span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">
                      <treeselect
                        :disable-branch-nodes="true"
                        :disabled="true"
                        v-if="item.edit || item.add"
                        :multiple="true"
                        v-model="form.otherPrincipal"
                        :options="principalList"
                        placeholder="请选择牵头部门责任领导"
                        :defaultExpandLevel="1"
                        :normalizer="
                          (d) => {
                            return {
                              id: d.id,
                              label: d.realname,
                              children:
                                d.children && d.children.length > 0
                                  ? d.children
                                  : undefined,
                            };
                          }
                        "
                      />
                      <span v-else>
                        <pre>{{ item.otherPrincipalList | formatList }}</pre>
                      </span>
                    </span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">
                      <treeselect
                        :disable-branch-nodes="true"
                        @input="changePrincipal($event, 'cooperate')"
                        v-if="item.edit || item.add"
                        :multiple="true"
                        v-model="form.cooperateDept"
                        :options="formatDep"
                        placeholder="请选择配合部门"
                        :defaultExpandLevel="1"
                        :normalizer="
                          (d) => {
                            return {
                              id: d.id,
                              label: d.name,
                              children:
                                d.children && d.children.length > 0
                                  ? d.children
                                  : undefined,
                            };
                          }
                        "
                      />
                      <span v-else>
                        <pre>{{ item.cooperateDeptList | formatList }}</pre>
                      </span>
                    </span></el-col
                  >
                  <el-col :span="3" align="center" class="thead td"
                    ><span class="cell">
                      <treeselect
                        :disable-branch-nodes="true"
                        v-if="item.edit || item.add"
                        :multiple="true"
                        :disabled="true"
                        v-model="form.cooperatePrincipal"
                        :options="principalList"
                        placeholder="请选择配合部门责任领导"
                        :defaultExpandLevel="1"
                        :normalizer="
                          (d) => {
                            return {
                              id: d.id,
                              label: d.realname,
                              children:
                                d.children && d.children.length > 0
                                  ? d.children
                                  : undefined,
                            };
                          }
                        "
                      />
                      <span v-else>
                        <pre>{{
                          item.cooperatePrincipalList | formatList
                        }}</pre>
                      </span>
                    </span></el-col
                  >
                  <el-col :span="2" align="center" class="thead td"
                    ><span class="cell">
                      <template v-if="item.add || item.edit">
                        <el-link
                          @click="add(item)"
                          icon="el-icon-edit"
                          type="primary"
                          :underline="false"
                          >保存</el-link
                        >
                        <el-link
                          @click="remove('cancel', index, item)"
                          icon="el-icon-edit"
                          type="primary"
                          :underline="false"
                          >取消</el-link
                        >
                      </template>

                      <template v-else>
                        <el-link
                          @click="change('edit', index, item)"
                          icon="el-icon-edit"
                          type="primary"
                          :underline="false"
                          >编辑</el-link
                        >
                        <el-popconfirm
                          title="确定要删除此表格？"
                          @confirm="remove('delete', item.id)"
                          class="ele-action"
                        >
                          <el-link
                            slot="reference"
                            icon="el-icon-delete"
                            type="danger"
                            :underline="false"
                            >删除</el-link
                          >
                        </el-popconfirm>
                      </template>
                    </span></el-col
                  >
                </el-row>
              </div>
            </div>
          </div> -->
        </div>
        <div slot="footer" class="footer">
          <el-button @click="close">返回</el-button>&nbsp;
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import basicTableApi from "@/api/second/segmentation/basicTable";
import rewardApi from "@/api/second/segmentation/reward";
import constraintApi from "@/api/second/segmentation/constraint";
import { mapGetters } from "vuex";
let map = {
  1: "taskItemList",
  2: "specialPowerItemList",
  3: "rigidityConstraintItemList",
};
export default {
  props: {
    id: {
      type: [String, Number],
    },
    type: {
      type: [String, Number],
    },
  },
  components: {
    Treeselect,
  },
  data() {
    return {
      data: {},
      // dataDetail: {},
      allLoading: false,
      tableLoading: false,
      form: {},
      reducing: false,
      tableHeight: document.documentElement.clientHeight - 500,
    };
  },
  computed: {
    ...mapGetters(["formatDep", "principalList", "department"]),
    detailList() {
      let that = this;
      return this.data[map[this.type]];
    },
  },
  created() {
    this.getData();
    this.$store.dispatch("base/getDepartment", 1);
    this.$store.dispatch("base/getPrincipalList");
  },
  filters: { 
    formatList(val) {
      if (val) {
        return val.join("\n");
      }
    },
  },
  methods: {
    changePrincipal(e, type) {
      if (type == "other") {
        let eventId = e.id;
        let depts = this.form.otherDept;

        let nameIds = [];
        depts.forEach((dept) => {
          this.department.forEach((item) => {
            if (item.id == dept) {
              nameIds.push(parseInt(item.principal));
            }
          });
        });
        this.$set(this.form, "otherPrincipal", nameIds);
      }
      if (type == "cooperate") {
        let eventId = e.id;
        let depts = this.form.cooperateDept;
        let nameIds = [];
        depts.forEach((dept) => {
          this.department.forEach((item) => {
            if (item.id == dept) {
              nameIds.push(parseInt(item.principal));
            }
          });
        });
        this.$set(this.form, "cooperatePrincipal", nameIds);
      }
      if (type == "leader") {
        let nameId;
        let id = this.form.leaderDept;
        this.department.forEach((item) => {
          if (item.id == id) {
            nameId = item.principal;
            return;
          }
        });
        this.$set(this.form, "leaderPrincipal", parseInt(nameId)||null);
      }
    },
    getApi() {
      switch (parseInt(this.type)) {
        case 1:
          return basicTableApi;
        case 2:
          return rewardApi;
        case 3:
          return constraintApi;
      }
    },
    getData() {
      this.allLoading = true;
      return this.getApi()
        .getInfo(this.id)
        .then((res) => {
          this.data = res.data.data;
        })
        .catch((e) => {
          this.data = {};
        })
        .finally(() => {
          this.allLoading = false;
        });
    },
    getDataDetail() {
      this.tableLoading = true;
      return this.getApi()
        .getItemInfo(this.id)
        .then((res) => {})
        .catch((e) => {
          this.dataDetail = [];
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },
    change(type, index, row) {
      if (!this.reducing) {
        if (type == "add") {
          // document.documentElement.scrollTop =
          //   document.documentElement.offsetHeight;
          window.scroll({
            top: document.documentElement.offsetHeight,
            behavior: "smooth",
          });
          this.form = {};
          let data = this.data;
          data[map[this.type]].push({ add: true });
        }
        if (type == "edit") {
          let form = JSON.parse(JSON.stringify(row));
          form.cooperateDept = form.cooperateDept
            ? form.cooperateDept.split(",").map((item) => parseInt(item))
            : [];
          form.cooperatePrincipal = form.cooperatePrincipal
            ? form.cooperatePrincipal.split(",").map((item) => parseInt(item))
            : [];
          form.otherDept = form.otherDept
            ? form.otherDept.split(",").map((item) => parseInt(item))
            : [];
          form.otherPrincipal = form.otherPrincipal
            ? form.otherPrincipal.split(",").map((item) => parseInt(item))
            : [];
          this.form = form;
          this.$set(this.data[map[this.type]][index], "edit", true);
        }
        this.reducing = true;
      } else {
        this.$message({
          type: "warning",
          message: "请先完成当前操作",
        });
      }
    },
    close() {
      this.$router.back(-1);
    },
    add(data) {
      let form = this.form;
      let params = [
        "itemContent",
        "points",
        "leaderDept",
        "leaderPrincipal",
        // "otherDept",
        // "otherPrincipal",
        // "cooperateDept",
        // "cooperatePrincipal",
      ];
      for (let param of params) {
        if (Array.isArray(form[param])) {
          if (param == "cooperateDept" || param == "cooperatePrincipal") {
            if (form[param].length == 0) {
              this.$message({
                type: "warning",
                message: "请选择配合部门",
              });
              return;
            }
          }
          for (let item of form[param]) {
            if (item == 0) {
              continue;
            }
            if (!item) {
              debugger;
              this.$message({
                type: "warning",
                message: "请完善信息",
              });
              return;
            }
          }
        } else {
          if (!form[param]) {
            debugger;
            this.$message({
              type: "warning",
              message: "请完善信息",
            });
            return;
          }
          if (
            form[param] &&
            typeof form[param] == "string" &&
            form[param].trim() == ""
          ) {
            debugger;
            this.$message({
              type: "warning",
              message: "请完善信息",
            });
            return;
          }
          if (
            param == "points" &&
            parseInt(form[param]) !== parseInt(form[param])
          ) {
            this.$message({
              type: "warning",
              message: "分值请输入数字",
            });
            return;
          }
        }
      }
      this.allLoading = true;
      form.cooperateDept = form.cooperateDept && form.cooperateDept.join(",");
      form.cooperatePrincipal =
        form.cooperatePrincipal && form.cooperatePrincipal.join(",");
      form.otherDept = form.otherDept && form.otherDept.join(",");
      form.otherPrincipal =
        form.otherPrincipal && form.otherPrincipal.join(",");
      console.log(form);
      if (data.edit) {
        this.getApi()
          .editItem(form)
          .then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "修改小项内容成功",
              });
              this.getData();
            } else {
              this.$message.error(res.data.msg);
            }
          })
          .catch((e) => {
            console.log(e)
            this.$message.error("修改小项内容失败");
          })
          .finally(() => {
            this.reducing = false;
            this.allLoading = false;
            this.form = {};
          });
      }
      if (data.add) {
        let obj = {};
        switch (parseInt(this.type)) {
          case 1:
            obj["basicTaskId"] = this.id;
            break;
          case 2:
            obj["specialPowerId"] = this.id;
            break;
          case 3:
            obj["rigidityConstraintId"] = this.id;
            break;
        }
        this.getApi()
          .addItem(Object.assign({}, form, obj))
          .then((res) => {
            if (res.data.code === 0) {
              this.$message({
                type: "success",
                message: "添加小项内容成功",
              });
            } else {
              this.$message.error("添加小项内容失败");
            }
            this.getData();
          })
          .catch((e) => {
            this.$message.error("添加小项内容失败");
          })
          .finally(() => {
            this.allLoading = false;
            this.form = {};
            this.reducing = false;
          });
      }
    },
    remove(type, id, row) {
      if (type == "delete") {
        this.allLoading = true;
        this.getApi()
          .deleteItem(id)
          .then((res) => {
            this.$message({ type: "success", message: "删除小项成功" });
            this.getData();
          })
          .catch((e) => {
            this.$message.error("删除小项失败");
          })
          .finally(() => {
            this.allLoading = false;
          });
      }
      if (type == "cancel") {
        this.reducing = false;
        if (row.add) {
          this.$set(this.detailList[id], "add", null);
          this.detailList.splice(id, 1);
        }
        if (row.edit) {
          this.$set(this.detailList[id], "edit", null);
        }
      }
    },
  },
};
</script>

<style scoped>
.title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.base-body {
  border-left: 1px solid rgb(237, 237, 237);
  border-top: 1px solid rgb(237, 237, 237);
  max-width: 1200px;
  background: #fff;
}
/* .header {
  color: #262626;
  background-color: #fafafa;
} */
.el-row {
  align-items: stretch;
}
/* .table {
  overflow-x: scroll;
} */
/* .table .el-row:hover {
  background: #fafafa;
} */
.el-col {
  border-bottom: 1px solid rgb(237, 237, 237);
  border-right: 1px solid rgb(237, 237, 237);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
/* .body {
  border-left: 1px solid rgb(237, 237, 237);
  position: relative;
  width: calc(100%+16px);
  box-sizing: border-box;
} */
/* .scroll-x {
  min-width: 1500px;
  overflow-y: visible;
  border-top:1px solid rgb(237, 237, 237);
} */
.grey {
  background: #fafafa;
  border-bottom: 1px solid rgb(237, 237, 237);
}
.footer {
  margin-top: 20px;
  text-align: center;
}
.el-table,
/deep/ .el-table__header-wrapper,
/deep/ .cell,
/deep/ .el-table__body-wrapper {
  overflow: visible;
}
.table {
  box-sizing: border-box;
}
/deep/ .el-table--border th.gutter:last-of-type {
  width: 0 !important;
}
</style>