<template>
  <el-row class="row_class" v-if="isFlag" :key="isKeyflag">
    <el-col>
      <div class="label">项目变编号</div>
      <div class="props">
        {{ tableData.projectNo }}
      </div>
    </el-col>
    <el-col
      :span="i.span"
      v-for="i in projectChangetableCloum"
      :style="{
        minHeight:
          i.props == 'amongContent' ||
          i.props == 'designParam' ||
          i.props == 'totalityQuantities' ||
          i.props == 'investDetailed' 
            ? '100px'
            : '',
        lineHeight:
          i.props == 'amongContent' ||
          i.props == 'designParam' ||
          i.props == 'totalityQuantities' ||
          i.props == 'investDetailed' 
            ? '100px'
            : '',
      }"
    >
      <div class="label">
        {{ i.label }}
      </div>
      <div
        class="props_cont"
        v-if="
          i.props == 'amongContent' ||
          i.props == 'designParam' ||
          i.props == 'totalityQuantities' ||
          i.props == 'investDetailed'
        "
      >
        <ul>
          <li v-for="v in tableData.originalProjectInfo[i.props]">
            <span
              class="origin"
              v-if="
                v.paramValue ==
                tableData.originalProjectInfo[i.props].paramValue
              "
              >原</span
            >
            v
            {{ v.paramName }}
            <span class="paramValue_class">{{ v.paramValue }}</span>
          </li>
        </ul>
        <ul>
          <li v-for="v in tableData.projectInfo[i.props]">
            <dir>
              <span
                v-if="
                  v.paramValue ==
                  tableData.originalProjectInfo[i.props].paramValue
                "
                class="change"
                >改</span
              >
              {{ v.paramName }}
              <span class="paramValue_change">{{ v.paramValue }} </span>
            </dir>
          </li>
        </ul>
      </div>
      <!-- <div class="props_cont" v-else-if="i.props == 'drainagePartition'">
        <ul>
         
          <li v-for="v in tableData.originalProjectInfo[i.props]?.split(',')">
            <span
              class="origin"
              v-if="v != tableData.projectInfo[i.props] "
              >原</span>
            {{ v }}  
          </li>
        </ul>
        <ul>
          <li v-for="v in tableData.projectInfo[i.props]">
            <dir v-if="v != tableData.originalProjectInfo[i.props]">
              <span class="change">改</span> {{ v }}
            </dir>
          </li>
        </ul>
      </div> -->
      <div class="props_cont" v-else>
        <ul>
          <li v-if="tableData.originalProjectInfo[i.props]">
            <span
              v-show="
                tableData.originalProjectInfo[i.props] !=
                  tableData.projectInfo[i.props] &&
                tableData.projectInfo[i.props]
              "
              class="origin paramValue_class"
              >原</span
            >
            <span v-if="i.props == 'buildCategory'">{{
              build_categoryM(tableData.originalProjectInfo[i.props])
            }}</span>
            <span v-else-if="i.props == 'projectTypeId'">{{
              project_TypeIdM(tableData.originalProjectInfo[i.props])
            }}</span>
            <span v-else-if="i.props == 'projectOperationPattern'">{{
              project_operation_patternM(tableData.originalProjectInfo[i.props])
            }}</span>
            <span
              v-else-if="
                i.props == 'designUnit' ||
                i.props == 'constructUnit' ||
                i.props == 'operationUnit'
              "
              >{{ unit_listM(tableData.originalProjectInfo[i.props]) }}</span
            >
            <span v-else> {{ tableData.originalProjectInfo[i.props] }}</span>
          </li>
        </ul>
        <ul>
          <li
            v-if="
              tableData.originalProjectInfo[i.props] !=
              tableData.projectInfo[i.props]
            "
          >
            <span
              v-show="
                tableData.originalProjectInfo[i.props] !=
                  tableData.projectInfo[i.props] &&
                tableData.projectInfo[i.props]
              "
              class="change paramValue_change"
              >改</span
            >
            <span v-if="i.props == 'buildCategory'">{{
              build_categoryM(tableData.projectInfo[i.props])
            }}</span>
            <span v-else-if="i.props == 'projectTypeId'">{{
              project_TypeIdM(tableData.projectInfo[i.props])
            }}</span>
            <span v-else-if="i.props == 'projectOperationPattern'">{{
              project_operation_patternM(tableData.projectInfo[i.props])
            }}</span>
            <span
              v-else-if="
                i.props == 'designUnit' ||
                i.props == 'constructUnit' ||
                i.props == 'operationUnit'
              "
              >{{ unit_listM(tableData.projectInfo[i.props]) }}</span
            >

            <span v-else> {{ tableData.projectInfo[i.props] }}</span>
          </li>
        </ul>
      </div>
    </el-col>
    <!-- <el-col>
      <div class="label">项目变更原因</div>
      <div class="props">
        {{ tableData.reason }}
      </div>
    </el-col> -->
    <el-divider content-position="left">流程日志</el-divider>
            <div>
              <el-steps direction="vertical" :active="stapesDate.length" >
                <el-step v-for="i in stapesDate" :title="i.activityName" style="height: 90px;width: 300px;">
                  <template #description>
                    <div class="direction">时间:{{ i.endTime}}</div>
                    <div class="direction">
                      分配人:{{ i.assigneeName  }}
                    </div>
                    <div class="direction">
                      任务备注:{{ i.comment  }}
                    </div>
                  </template>
                </el-step>
              </el-steps>
            </div>
    <el-dialog
      width="50%"
      v-model="visible"
      title="项目变更驳回"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      @close="onModalClose"
    >
      <el-form label-width="auto" ref="ruleForm" :model="FormList">
        <el-form-item
          label="审核备注信息:"
          prop="approveComment"
          :rules="[
            {
              required: true,
              message: '审核备注信息不能为空',
              trigger: 'blur',
            },
          ]"
        >
          <el-input
            type="textarea"
            v-model="FormList.approveComment"
            placeholder="审核备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="checkClick(3)">驳回</el-button>
          <el-button @click="closedDalgo">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </el-row>
</template>

<script setup>
import { projectChangeRecordGet, projectApproval } from "@/api/projectChanges";
import { projectCompany, projectTypeList } from "@/api/projectInformation";
import { ElMessage, ElMessageBox } from "element-plus";
import { workflowProcess } from "@/api/project/qualityRectificationDetails";
import { onMounted, toRefs, defineEmits, reactive, defineExpose } from "vue";
import { projectChangetableCloum } from "@/utils/cloums";
const { proxy } = getCurrentInstance();
const {
  build_category,
  project_status,
  project_operation_pattern,
  build_status,
  drainage_partition,
} = proxy.useDict(
  "build_category",
  "project_status",
  "project_operation_pattern",
  "build_status",
  "drainage_partition"
);
const isKeyflag = ref(0);
const {
  List: {
    id: { id },
  },
  typeList,

} = defineProps(["List",'typeList']);
const emits = defineEmits(["closed"]);
let visible = ref(false);
let isFlag = ref(false);
let tableLoading = ref(false);
const FormList = ref({});
const ruleForm = ref();
const unit_list = ref([]);
const project_TypeId = ref([]);
const stapesDate = ref([]);
let tableData = reactive({});
const getProjectCat = async (params) => {
  tableLoading.value = true;
  let { data } = await projectChangeRecordGet(params);
  tableData = data;
  let arrayList = JSON.parse(tableData.newContent);
  let arrayList1 = JSON.parse(tableData.oldContent);
  // console.log(arrayList, "arrayListarrayListarrayList");
  tableData.originalProjectInfo =arrayList;
  tableData.projectInfo = arrayList1;
  isFlag.value = true;
};
// 是否通过 驳回
const checkClick = (type) => {
  console.log(type, "type");
  if (type == 1) {
    ElMessageBox.confirm("您确定通过审核吗？", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      delete tableData.originalProjectInfo;
      delete tableData.projectInfo;
      projectMths({ id, ...tableData, approveFlag: "true" });
      ElMessage({
        type: "success",
        message: "审核成功",
      });
      setTimeout(()=>{ 
          emits("closed");
         },1500)
    });
  } else if (type == 2) {
    visible.value = true;
  } else {
    ruleForm.value.validate((valid) => {
      if (valid) {
        ElMessageBox.confirm("您确定驳回吗？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          delete tableData.originalProjectInfo;
          delete tableData.projectInfo;
          projectMths({
            id,
            ...tableData,
            approveFlag: "false",
            approveComment: FormList.value.approveComment,
          });
          ElMessage({
            type: "success",
            message: "驳回请求成功",
          });
         setTimeout(()=>{ 
          emits("closed");
         },1500)
        });
      }
    });
  }
};
defineExpose({ checkClick });

//上报接口
const projectMths = async (p) => {
  let { data } = await projectApproval(p);
  emits("closed");
};
function closedDalgo() {
  visible.value = false;
}
function build_categoryM(v) {
  const arr = build_category.value.filter((i) => {
    return v == i.value;
  });
  return arr[0]?.label;
}

function project_operation_patternM(v) {
  const arr = project_operation_pattern.value.filter((i) => {
    return v == i.value;
  });
  return arr[0]?.label;
}
function unit_listM(v) {
  const arr = unit_list.value.filter((i) => {
    return v == i.id;
  });
  return arr[0]?.unitName;
}
function project_TypeIdM(v) {
  const arr = project_TypeId.value.filter((i) => {
    return v == i.id;
  });
  return arr[0]?.projectTypeName;
}
const projectCompanyM = async () => {
  let { data } = await projectCompany();
  unit_list.value = data;
};

const projectTypeListM = async () => {
  let { data } = await projectTypeList();
  project_TypeId.value = data;
};
//获取流程日志
const workflowProcessM = async () => {
  let params = {
    businessKey: id,
    workflowKey: "ProjectChangeRecord",
    workflowUserId: "",
  };
  let { data } = await workflowProcess(params);
  stapesDate.value = data;
};
onMounted(() => {
  console.log("typeListtypeList", typeList)
  getProjectCat(id);
  projectCompanyM();
  projectTypeListM();
  workflowProcessM();

});
</script>
<style lang="scss" scoped>
.row_class {
  width: 95%;

  .el-col {
    height: 50px;
    line-height: 50px;
    display: flex;
    justify-content: flex-start;
    border: 1px solid #ddd;
    border-bottom: none;
    border-left: none;

    .label {
      background: #edf5ff;
      width: 180px;
      padding-left: 20px;
    }

    .props_cont {
      min-height: 100px;
      overflow-y: scroll;
      display: flex;

      ul {
        height: 30px;
        line-height: 30px;
      }
    }
  }

  ::v-deep .el-dialog__body {
    // padding: 0px !important;
    background-color: #eef1fb;
    height: 350px;
    overflow: hidden;
  }
}

li {
  list-style: none;
}

.origin,
.change {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #1c85ff;
  color: #1c85ff;
  text-align: center;
  line-height: 20px;
}

.change {
  border: 1px solid red;
  color: red;
}

::-webkit-scrollbar {
  display: none;
}

.paramValue_class,
.paramValue_change {
  color: #1c85ff;
  margin-left: 10px;
}

.paramValue_change {
  color: red;
}

.props {
  margin-left: 50px;
}
</style>