<template>
  <div>
    <div class="bigBox">
      <MOSTY.FromPage :title="'编辑安全责任清单'" @closeDialog="CloseEvent">
        <template #content>
          <div class="addbtns">
            <span @click="addzrfw()"><span style="margin-right: 5px;">新增</span><el-icon>
                <Plus />
              </el-icon></span>
          </div>
          <div class="demo-collapse">
            <div class="boxfrom">
              <el-collapse v-model="activeName" accordion @change="change">
                <el-collapse-item v-for="(item, index) in data.dialogForm.dutyList" :key="index" :name="index + 1">
                  <template #title>
                    <div class="custom-title">
                      <span style="margin-left: 10px">{{ item.scope }}</span>
                    </div>
                  </template>
                  <div>
                    <ul>
                      <li v-for="(e, i) in data.dialogForm.listItem" :key="i">
                        <div v-if="item.id == e.dutyListId"
                          style="padding: 10px;border: 1px solid var(--el-color-primary);">
                          <span class="titname">{{ i + 1 }}、{{ e.dutyFactor
                            }}</span>
                          <div style="margin: 10px 10px; font-size: 16px">{{ e.dutyDesc }}</div>
                          <div class="li-btn" style="margin-left: 10px">
                            <span @click="editzrx(e)">编辑</span>
                            <span @click="delzrx(e)">删除</span>
                          </div>
                        </div>

                      </li>
                    </ul>
                    <div class="bottom-btn">
                      <el-button @click="addzrx(item)" size="small"><el-icon>
                          <Plus />
                        </el-icon>添加</el-button>
                      <el-button @click="editzrfw(item)" size="small"
                        style="background-color: #FD9F29FF;border-color:#FD9F29FF ;"><el-icon>
                          <Edit />
                        </el-icon>修改</el-button>
                      <el-button @click="delzrfw(item)" size="small"
                        style="background-color: #B90000FF;border-color:#B90000FF;"><el-icon>
                          <Delete />
                        </el-icon>删除</el-button>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </template>
      </MOSTY.FromPage>

    </div>
    <!-- 新增编辑 -->
    <el-dialog v-model="dialogzrfw" :title="editTitle" width="50%" height="50%" :before-close="closezrfw">
      <p v-if="deletezrfw">确定删除责任清单范围，不能恢复？</p>
      <el-form v-if="!deletezrfw" v-model="data.scope" label-width="120px">
        <el-form-item label="责任范围：" :rules="[{ required: true, message: '请输入责任范围', trigger: 'blur' }]">
          <el-input style="width: 100%" v-model="data.scope.scope" type="textarea" row="10" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">

          <el-button type="primary" @click="savezrfw"> 确定 </el-button>
          <el-button @click="closezrfw">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogzrx" :title="editTitle" width="50%" :before-close="closezrx">
      <p v-if="deletezrx">确定删除所有的责任内容，不能恢复？</p>
      <el-form v-if="!deletezrx" v-model="data.zrx" label-width="120px">
        <el-form-item label="责任要素：" :rules="[{ required: true, message: '请输入责任要素', trigger: 'blur' }]">
          <el-input style="width: 100%" v-model="data.zrx.dutyFactor" type="textarea" row="10" />
        </el-form-item>
        <el-form-item label="责任内容：" :rules="[{ required: true, message: '请输入责任内容', trigger: 'blur' }]">
          <el-input style="width: 100%" v-model="data.zrx.dutyDesc" type="textarea" row="10" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">

          <el-button type="primary" @click="savezrx"> 确定 </el-button>
          <el-button @click="closezrx">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { reactive, ref, defineProps, watch, getCurrentInstance } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
const emits = defineEmits(["close", "edit"]);
const { proxy } = getCurrentInstance();
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  userid: String,
  rowData: {
    default: {},
    type: Object
  }
});
const data = reactive({
  No: 1,
  dialogForm: {},
  zrxnr: {},
  zrx: {},
  zrfw: {},
  addzrx: {},
  scope: {}
});
const deletezrfw = ref(false);
const deletezrx = ref(false);
const editTitle = ref("");
const dialogzrfw = ref(false);
const dialogzrx = ref(false);
const activeName = ref([]);
watch(
  () => props.userid,
  (val) => {
    if (val) {
      getdata()
    }
  },
  { deep: true, immediate: true }
);
//及时更新数据
function getdata() {
  // activeName.value = []
  getApi({ userid: props.userid }, "/mosty-jcgl/dutyList/queryZrsDetail").then((res) => {
    if (res) {
      activeName.value = []
      data.dialogForm = res;
      for (let i = 1; i <= data.dialogForm.dutyList.length; i++) {
        activeName.value.push(i)
      }
    }
  });
}
// 方法
const closezrx = () => {
  if (!deletezrx.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        dialogzrx.value = false;
        data.zrxnr = {};
      })
      .catch(() => {
        // catch error
      })
  } else {
    dialogzrx.value = false;
    data.zrxnr = {};
  }

};
const closezrfw = () => {
  if (!deletezrfw.value) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        dialogzrfw.value = false;
        deletezrx.value = false;
        data.zrfw = {};
      })
      .catch(() => {
        // catch error
      })
  } else {
    dialogzrfw.value = false;
    deletezrx.value = false;
    data.zrfw = {};
  }


};

//责任项编辑
const editzrx = (row) => {
  editTitle.value = "责任项编辑";
  data.zrx.dutyFactor = row.dutyFactor;
  data.zrx.dutyDesc = row.dutyDesc;
  data.zrxnr = row;
  dialogzrx.value = true;
  deletezrx.value = false;
};
//责任项新增
const addzrx = (row) => {
  editTitle.value = "责任项新增";
  data.zrx = {};
  data.addzrx = row;
  dialogzrx.value = true;
  deletezrx.value = false;
};
//责任项删除
const delzrx = (row) => {
  editTitle.value = "责任项删除";
  data.zrxnr = row;
  dialogzrx.value = true;
  deletezrx.value = true;
};
//责任项保存
const savezrx = () => {
  if (editTitle.value === "责任项新增") {
    let params = {
      dutyDesc: data.zrx.dutyDesc,
      dutyFactor: data.zrx.dutyFactor,
      dutyListId: data.addzrx.id
    };
    postApi(params, "/mosty-jcgl/dutyList/addDutyItem").then((res) => {
      dialogzrx.value = false;
      ElMessage.success("新增成功");
      getdata();
    });
  }
  if (editTitle.value === "责任项删除") {
    postApi({}, "/mosty-jcgl/dutyList/delDutyItem/" + data.zrxnr.id).then(() => {
      dialogzrx.value = false;
      ElMessage.success("删除成功");
      getdata();
    });
  }
  if (editTitle.value === "责任项编辑") {
    let params = {
      dutyDesc: data.zrx.dutyDesc,
      dutyFactor: data.zrx.dutyFactor,
      dutyListId: data.zrxnr.dutyListId,
      id: data.zrxnr.id
    };
    postApi(params, "/mosty-jcgl/dutyList/editDutyItem").then((res) => {
      dialogzrx.value = false;
      ElMessage.success("修改成功");
      getdata();
    });
  }
};
//责任范围编辑
const editzrfw = (row) => {
  editTitle.value = "责任范围编辑";
  data.scope.scope = row.scope;
  data.zrfw = row;
  dialogzrfw.value = true;
  deletezrfw.value = false;
};
//责任范围新增
const addzrfw = () => {
  editTitle.value = "责任范围新增";
  data.scope.scope = '';
  dialogzrfw.value = true;
  deletezrfw.value = false;
};
//责任范围删除
const delzrfw = (row) => {
  editTitle.value = "责任范围删除";
  data.zrfw = row;
  dialogzrfw.value = true;
  deletezrfw.value = true;
};
//责任范围保存
const savezrfw = () => {
  if (editTitle.value === "责任范围新增") {
    let params = {
      scope: data.scope.scope,
      userid: props.userid
    };
    postApi(params, "/mosty-jcgl/dutyList/addDutyScope").then((res) => {
      dialogzrfw.value = false;
      ElMessage.success("新增成功");
      getdata();
    });
  }
  if (editTitle.value === "责任范围删除") {
    postApi({}, "/mosty-jcgl/dutyList/delDutyScope/" + data.zrfw.id).then(
      (res) => {
        dialogzrfw.value = false;
        ElMessage.success("删除成功");
        getdata();
      }
    );
  }
  if (editTitle.value === "责任范围编辑") {
    let params = {
      scope: data.scope.scope,
      id: data.zrfw.id
    };
    postApi(params, "/mosty-jcgl/dutyList/editDutyScope").then((res) => {
      dialogzrfw.value = false;
      ElMessage.success("修改成功");
      getdata();
    });
  }
};
//关闭综合配置表
const CloseEvent = () => {
  emits("close");
};
</script>
<style lang="scss" scoped>
.titname {
  font-weight: 400;
  font-size: 16px;
  color: rgba(7, 187, 142, 1);
  line-height: 16px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

::v-deep .el-collapse-item__header.is-active {
  // color: var(--el-color-primary) !important;
  color: #fff !important;
  background: var(--el-color-primary) !important;
}

.el-form {
  flex-wrap: wrap;

  .el-form-item {
    width: 100%;
  }
}

.demo-collapse {
  margin: 10px 0px 0px 10px;
  height: calc(100vh - 20vh);
  overflow-y: scroll;
}





.boxfrom {
  // width: 1333px;
  margin: 20px auto;
}

.li-btn {
  cursor: pointer;
  margin-bottom: 10px;

  span {
    padding: 4px 18px;
    margin-right: 20px;
    background: rgb(104 220 155 / 45%);
    border-radius: 3px;
    border: 1px solid #006E4A;
    // padding: ;
    color: var(--el-color-primary);
  }
}

.bottom-btn {
  margin-top: 10px;
  padding-top: 5px;
}

.el-collapse-item__content {
  color: #000 !important;
}

.el-link.el-link--default {
  color: var(--el-color-primary) !important;
  text-decoration: underline;
}

::v-deep .el-collapse-item__header {
  background-color: var(--el-color-primary) !important;
  color: #fff !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-top: 5px;
}

.custom-title {
  width: 100%;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  text-transform: none;

}

.addbtns {
  display: flex;
  width: 80px;
  color: #fff !important;
  cursor: pointer;
  height: 30px;
  background: var(--el-color-primary);
  border-radius: 0px 0px 0px 0px;
  margin: 10px 0px 0px 10px;

  >span {
    font-weight: 400;
    font-size: 15px;
    // color: var(--el-color-primary);
    line-height: 30px;
    text-align: left;
    margin-left: 20px;
    font-style: normal;
    text-transform: none;
  }
}
</style>