<template>
  <el-dialog :title="props.title" v-model="dialogTableVisible" width="1200px" :before-close="black" modal-append-to-body
    append-to-body>
    <div class="bigBox">
      <div class="fromBox">
        <el-form ref="ruleFormRef" :model="data.fromObj" :rules="rules" :disabled="tcType == 'see'" label-width="160px"
          class="demo-ruleForm" status-icon :inline="true">
          <el-form-item label="作业活动名称:" prop="name">
            <el-input v-model="data.fromObj.name" placeholder="请输入作业活动名称" clearable style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="作业活动类型:" prop="type">
            <el-select v-model="data.fromObj.type" placeholder="请选择作业活动类型" style="width: 220px">
              <el-option v-for="item in excludeType" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作业活动人数:" prop="peopleCount">
            <el-input v-model="data.fromObj.peopleCount" placeholder="作业活动人数" clearable style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="作业活动进场时间:" prop="startTime">
            <el-date-picker v-model="data.fromObj.startTime" style="width: 220px" type="date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" placeholder="请选择作业活动进场时间" />
          </el-form-item>
          <el-form-item label="作业活动竣工时间:" prop="endTime">
            <el-date-picker v-model="data.fromObj.endTime" style="width: 220px" type="date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" placeholder="请选择作业活动竣工时间" />
          </el-form-item>
          <el-form-item label="活动监督管理人:">
            <el-input v-model="data.fromObj.superviseUsername" placeholder="活动监督管理人" readonly clearable
              style="width: 220px">
              <template #append>
                <el-button class='cursor' @click="ChooesDdld('01')">选择</el-button></template></el-input>
          </el-form-item>
          <el-form-item label="活动属地责任人:">
            <el-input v-model="data.fromObj.username" placeholder="活动属地责任人" readonly clearable style="width: 220px">
              <template #append>
                <el-button class='cursor' @click="ChooesDdld('02')">选择</el-button></template></el-input>
          </el-form-item>
          <el-form-item label="活动属地责任部门:">
            <el-input v-model="data.fromObj.deptname" disabled clearable style="width: 220px" placeholder="活动属地责任部门">
            </el-input>
          </el-form-item>
          <el-form-item label="安全控制措施:">
            <el-input v-model="data.fromObj.measure" type="textarea" placeholder="请输入安全控制措施" clearable
              style="width: 900px"></el-input>
          </el-form-item>
          <el-form-item label="是否具备相应的资质:" prop="qualification">
            <el-select v-model="data.fromObj.qualification" placeholder="是否具备相应的资质" clearable style="width: 220px;">
              <el-option v-for="item in D_BZ_SF" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资质附件：">
            <MOSTY.Upload width="100%" :widthNumber="900" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
              v-model="data.fromObj.qualificationFiles" :showinput="true" :delrow="delrow">
            </MOSTY.Upload>
          </el-form-item>
          <el-form-item label="是否签订安全协议:" prop="safety">
            <el-select v-model="data.fromObj.safety" placeholder="是否签订安全协议" clearable style="width: 220px;">
              <el-option v-for="item in D_BZ_SF" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="签订时间:" prop="safetyTime" v-if="data.fromObj.safety == '1'">
            <el-date-picker v-model="data.fromObj.safetyTime" style="width: 220px" type="date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" placeholder="请选择签订时间" />
          </el-form-item>
          <el-form-item label="有效期至:" prop="safetyDuetime" v-if="data.fromObj.safety == '1'">
            <el-date-picker v-model="data.fromObj.safetyDuetime" style="width: 220px" type="date" format="YYYY-MM-DD"
              value-format="YYYY-MM-DD" placeholder="请选择有效期至" />
          </el-form-item>
          <el-form-item label="安全协议附件:">
            <MOSTY.Upload width="100%" :widthNumber="900" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
              v-model="data.fromObj.safetyFiles" :showinput="true" :delrow="delrow">
            </MOSTY.Upload>
          </el-form-item>
          <el-form-item label="安全交底附件:">
            <MOSTY.Upload width="100%" :widthNumber="900" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
              v-model="data.fromObj.safetyTellFiles" :showinput="true" :delrow="delrow">
            </MOSTY.Upload>
          </el-form-item>
          <el-form-item label="是否涉及危险作业:" prop="dangerActivity">
            <el-select v-model="data.fromObj.dangerActivity" placeholder="是否涉及危险作业" clearable style="width: 220px;">
              <el-option v-for="item in D_BZ_SF" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作业监督检查记录附件:">
            <MOSTY.Upload width="100%" :widthNumber="900" :limit="5" :nopicer="true" :isImg="false" :ShowfileList="true"
              v-model="data.fromObj.recordsFiles" :showinput="true" :delrow="delrow">
            </MOSTY.Upload>
          </el-form-item>
        </el-form>
      </div>

      <!-- 选择责任人 -->
      <ChooseUser v-model="chooseUserVisible" :Single="singleShow" :leaderid="leaderid" :deptId="dept.ssdwid"
        @choosedUsers="choosedUsers"></ChooseUser>
    </div>
    <template #footer>
      <div class="flex just-center align-center">
        <el-button type="primary" @click="submit(ruleFormRef)" v-loading='loadingshow' v-if="props.tcType != 'see'">
          <el-icon>
            <DocumentChecked />
          </el-icon>
          <span>保存</span></el-button>
        <el-button @click="black"> <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span></el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getItem } from "@/utils/storage";
import * as MOSTY from "@/components/MyComponents/index";
import { reactive, ref, watchEffect, getCurrentInstance, onMounted, computed } from "vue";
import * as rule from "@/utils/rules.js";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader.vue";
const { proxy } = getCurrentInstance();
const { D_TB_RELATED, D_BZ_SF } =
  proxy.$dict("D_TB_RELATED", "D_BZ_SF");
const props = defineProps({
  title: String,
  rowId: String,
  xgfid: String,
  tcType: String,
  /** 相关方类型 */
  xgfywlx: {
    type: Array,
    default: () => []
  },
  savebtn: {
    type: Boolean,
    default: false
  },
});
const loadingshow = ref(false)

const dialogTableVisible = ref(true) // 外面v-if控制
const chooseUserVisible = ref(false); //选择负责人弹窗
const leaderid = ref("");
const singleShow = ref(true); //单选多选
const delrow = ref({}); //删除文件列表
const dept = getItem('deptId')
const emit = defineEmits("close");
const ruleFormRef = ref();
const xgf = ref({})
/** 作业活动类型 */
const excludeType = computed(() => {
  const relatedArr = Array.isArray(D_TB_RELATED.value) ? D_TB_RELATED.value : []
  /** 当前相关方类型 */
  const xgfywlx = Array.isArray(props.xgfywlx) ? props.xgfywlx : []

  const needArr = []
  relatedArr.forEach(item => {
    xgfywlx.forEach(it => {
      if (item.value == it) {
        needArr.push(item)
      }
    })
  })
  return needArr
})
const data = reactive({
  formData: {},
  fromObj: {}
});
const zzlx = ref(null);
const rules = reactive({
  ...rule.phoneRule({ require: true, validator: true }, "contactsphone"),
  ...rule.phoneRule({ require: false, validator: true }, 'legalpersonphone'),
  ...rule.identityCardRule({ require: false, validator: true }, "legalpersonidnumber"),
  ...rule.numberzzsRule({ validator: true, require: true, num: 999999 }, "peopleCount"),
  name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
  type: [{ required: true, message: "请选择作业活动类型", trigger: "blur" }],
  startTime: [{ required: true, message: "请选择进场时间", trigger: "blur" }],
  endTime: [{ required: true, message: "请选择竣工时间", trigger: "blur" }],
  qualification: [{ required: true, message: "请选择是否具备相应的资质", trigger: "blur" }],
  safety: [{ required: true, message: "请选择是否签订安全协议", trigger: "blur" }],
  safetyTime: [{ required: true, message: "请选择签订时间", trigger: "blur" }],
  safetyDuetime: [{ required: true, message: "请选择有效期至", trigger: "blur" }],
  dangerActivity: [{ required: true, message: "请选择是否涉及危险作业", trigger: "blur" }],
});
onMounted(() => {
  if (props.rowId) {
    getXgf(props.rowId);
  }

});
watchEffect(() => {

});
//点击带队领导选择按钮
function ChooesDdld(val) {
  zzlx.value = val;
  leaderid.value = "";
  if (val == "01") {
    leaderid.value = data.fromObj.superviseUserid;
    singleShow.value = true;
    chooseUserVisible.value = true;
  } else if (val == "02") {
    leaderid.value = data.fromObj.userid;
    singleShow.value = true;
    chooseUserVisible.value = true;
  }
}
const choosedUsers = (value) => {
  if (zzlx.value == "01") {
    data.fromObj.superviseUsername = value[0].userName;
    data.fromObj.superviseUserid = value[0].id;
  } else if (zzlx.value == "02") {
    data.fromObj.username = value[0].userName;
    data.fromObj.userid = value[0].id;
    data.fromObj.deptid = value[0].deptId;
    data.fromObj.deptname = value[0].deptName;
  }
};
// 保存
const submit = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      data.fromObj.relatedId = props.xgfid
      data.fromObj.qualificationFiles = data.fromObj.qualificationFiles ? data.fromObj.qualificationFiles.toString() : "";
      data.fromObj.safetyFiles = data.fromObj.safetyFiles ? data.fromObj.safetyFiles.toString() : "";
      data.fromObj.safetyTellFiles = data.fromObj.safetyTellFiles ? data.fromObj.safetyTellFiles.toString() : "";
      data.fromObj.recordsFiles = data.fromObj.recordsFiles ? data.fromObj.recordsFiles.toString() : "";

      if (data.fromObj.id) {
        loadingshow.value = true
        postApi(data.fromObj, "/mosty-jcgl/activity/edit").then(() => {
          ElMessage.success("修改成功");
          emit("close", "Details");
          loadingshow.value = false
        }).finally(() => {
          loadingshow.value = false
        })
      } else {
        postApi(data.fromObj, "/mosty-jcgl/activity/add").then(() => {
          ElMessage.success("新增成功");
          emit("close", "Details");
          loadingshow.value = false
        }).finally(() => {
          loadingshow.value = false
        })
      }
    } else {
      ElMessage.error("请检查表单!");
    }
  });
};
//获取详情
function getXgf(id) {
  if (id) {
    getApi({ id }, "/mosty-jcgl/activity/getInfo").then((res) => {
      if (res) {
        data.fromObj = res
      }
    });
  }
}
const black = () => {
  if (props.savebtn) {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
      .then(() => {
        // 关闭上一次的表单校验
        ruleFormRef.value.clearValidate();
        emit("close");
      })
      .catch(() => {
        // catch error
      })
  } else {
    // 关闭上一次的表单校验
    ruleFormRef.value.clearValidate();
    emit("close");
  }

};

</script>

<style lang="scss" scoped>
.bigBox {
  padding: 0 20px;
  display: block;
  box-sizing: border-box;
  height: 58vh;
  overflow-y: auto;
}


.fromBox {
  // width: 1246px;
  margin: 0 auto;
}

.ld_box {
  display: flex;
  margin-right: 20px;
}

.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.addbtn {
  margin-bottom: 10px;
}


.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}

::v-deep .el-collapse {
  width: 100%;
}
</style>