<template>
  <div>
    <div class="bigBox">
      <MOSTY.FromPage :title="props.title" @closeDialog="CloseEvent">
        <template #content>
          <div class="botbox">
            <el-form :model="dialogForm" ref="ruleFormRef2" width="1000px" label-width="140px" :disabled="true"
              style="display: block; width:80%;padding: 10px 20px;margin: 0 auto;">
              <el-form-item label="项目名称：" style="width: 79%;" class="mt15">
                <el-input v-model="dialogForm.name" disabled />
              </el-form-item>
              <el-form-item label="年度工作任务：" style="width: 79%;" class="mt15">
                <el-input v-model="dialogForm.workContent" disabled />
              </el-form-item>
              <el-form-item label="完成时限：" style="width: 30%;" class="mt15">
                <el-date-picker v-model="dialogForm.finishTime" type="data" format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD" style="width: 100%;" disabled>
                </el-date-picker>
              </el-form-item>
            </el-form>
          </div>

          <div style="width: 80%;margin: 5px auto;">
            <MOSTY.Assort :title="'责任单位/部门'" />
            <section class="eltabs4">
              <MOSTY.Table :table-columns="tabColumns" :tableloading="tableloading" :tableData="dialogForm.orgList
                " :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="true">
                <template #realFinishTime="{ row }">
                  <span>{{ row.realFinishTime ? row.realFinishTime : '--' }}</span>
                </template>
                <template #files="{ row }">
                  <span class="operedown" v-if="row.files" @click="doPreviewqd(row)"> <el-icon>
                      <Search />
                    </el-icon>预览</span>
                  <span class="operedown" v-if="row.files" @click="onloagqdb(row)"> <el-icon>
                      <Download />
                    </el-icon>下载</span>
                  <span v-else>-</span>
                </template>
              </MOSTY.Table>
            </section>
            <div>
            </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="flyldialog" :show-close="false" top="10px" bottom="10px" width="1120px">
      <div style="height: 84vh; text-align: center">
        <Kkfile :files="fileid" @changedialog="changedialog" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, defineProps, watch, reactive } from "vue";
import Kkfile from "@/components/MyComponents/kkfile/index.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { createAndClickLink } from "@/utils/tools.js";
const emits = defineEmits(["close"]);
const ruleFormRef2 = ref(null)
const flyldialog = ref(false)
const fileid = ref('')
const props = defineProps({
  title: String,
  rowObj: Object,
  zbobj: Object,
});
// 数据
const dialogForm = ref({});
const tabColumns = reactive([
  {
    title: "责任单位部门",
    prop: "orgname"
  },
  {
    title: "完成时间",
    prop: "realFinishTime",
    slot: true
  },
  {
    title: "结果附件",
    prop: "files",
    slot: true
  },
])

// 初始化
onMounted(() => {
  if (props.rowObj) {
    dialogForm.value = props.rowObj
  }
});

//获取详情
function doPreviewqd(row) {
  fileid.value = row.files;
  flyldialog.value = true
}
function onloagqdb(row) {
  handledlon(row.files)
}
function changedialog() {
  flyldialog.value = false
}
//点击下载
function handledlon(id) {
  if (id) {
    getApi({}, `/mosty-base/minio/file/download/${id}`).then((res) => {
      if (res) {
        createAndClickLink(res.url, res.originalName)
      }
    });
  }
}
// 关闭
const CloseEvent = () => {
  emits("close");
};


</script>

<style lang="scss" scoped>
.bigBox {
  .botbox {
    border-bottom: 2px solid #c9c7c7;
  }
}

.eltabs4 {
  height: calc(100vh - 503px);
}
</style>