<template>
  <div class="bigBox" ref="bigBox">
    <MOSTY.FromPage :title="props.title" @closeDialog="handleClose">
      <template #content>
        <!-- <MOSTY.Assort :title="'督办任务信息'" /> -->
        <el-tabs v-model="activeName" style="color: black">
          <el-tab-pane label="任务信息" name="first">
            <TaskInfo :data="detailData" />
          </el-tab-pane>
          <el-tab-pane label="反馈信息" name="second" v-if="detailData?.feedBackType !== '4'">
            <FeedbackInfo v-if="detailData.type" :data="detailData" />
          </el-tab-pane>
          <el-tab-pane v-if="detailData?.feedBackType !== '4'" label="审批记录" name="third">
            <ApproveInfo v-if="detailData.type" :data="detailData" />
          </el-tab-pane>
        </el-tabs>
      </template>
      <template #footer>
        <el-button @click="handleClose">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </template>
    </MOSTY.FromPage>
  </div>
</template>

<script setup>
import { watch, ref, getCurrentInstance, onMounted, nextTick, reactive, computed } from "vue"
import * as MOSTY from "@/components/MyComponents/index"
import { ElMessage } from "element-plus"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import TaskInfo from "./TaskInfo.vue"
import FeedbackInfo from "./FeedbackInfo.vue"
import ApproveInfo from "./ApproveInfo.vue"

const emit = defineEmits(["close"])
const props = defineProps({
  // 下发 / 接收
  type: {
    default: "",
    type: String
  },
  title: {
    default: "",
    type: String
  },
  id: {
    default: "",
    type: String
  }
})

const bigBox = ref()
const activeName = ref("first")
const detailData = ref({})

const getDetail = async () => {
  try {
    detailData.value = await getApi({ id: props.id }, "/mosty-jcgl/taskController/selectOne")
    console.log(detailData.value,'detailData.value');
    
  } catch (e) {
  } finally {
  }
}

// 关闭弹框
const handleClose = () => {
  emit("close")
}

onMounted(() => {
  // nextTick(() => {
  //   width.value = bigBox.value.offsetWidth - 215
  // })
  getDetail()
})
</script>

<style lang="scss" scoped>
.table-lable {
  margin: 10px;
  color: var(--el-color-primary);
}

::v-deep ::-webkit-scrollbar {
  display: none !important;
}

::v-deep .el-pagination {
  justify-content: center !important;
}

::v-deep .el-image {
  margin: 0;
  padding: 1px;
}

.erweim {
  text-align: center;
  margin-right: 10px;

  > img {
    width: 148px;
    height: 148px;
    display: block;
    border: 1px solid var(--el-color-primary);
  }
}

.contents {
  width: 100%;
  margin: 10px auto;
}

::v-deep .el-form {
  // width: 1525px;
  margin: auto;
  padding: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: start;
  // padding: 10px 56px !important;
}

::v-deep .el-form-item__content {
  margin-left: 10px !important;
}

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

.bigBox {
  display: block !important;
  padding-right: 14px;
  box-sizing: border-box;
}

::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;
  }
}

.headBox {
  display: flex;
  justify-content: end;
  width: 100%;
  margin-bottom: 10px;
}

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

::v-deep .edui-default .edui-editor {
  width: 100% !important;
}

::v-deep .edui-default .edui-editor-iframeholder {
  width: 100% !important;
}
</style>
