<template>
  <el-dialog v-model="isShowDialog" title="变更单详情" draggable width="60vw" :close-on-click-modal="false" :destroy-on-close="true">
    <el-card :body-style="{ padding: '20px' }" style="border: none; box-shadow: none">
      <div class="dialog-footer">
        <div class="btn-item" @click="onLoad">
          <img src="./icon/down.png" />
          <span>导出</span>
        </div>
      </div>
      <el-form ref="formRef" :model="formData" label-width="100px" id="formContent" style="width: 75%; margin-left: 10%">
        <div class="table-content" id="table-content">
          <el-row class="mb20" style="display: flex; justify-content: center">
            <h2>设计变更申请单（总承包）</h2>
          </el-row>
          <el-row class="mb10" style="display: flex; justify-content: space-between">
            <div class="head-text">
              <span>NO：</span>
              <span>{{ formData.formNo }}</span>
            </div>
            <!-- <div class="head-text">
              <span>填报时间：</span>
              <span>{{ formData.createdAt }}</span>
            </div> -->
          </el-row>
          <table style="width: 100%" border="1" cellspacing="1">
            <thead>
              <tr>
                <th width="150">工程名称</th>
                <td class="th-bg">{{ formData.projectName }}</td>
                <th width="150">提出单位</th>
                <td class="th-bg">{{ formData.submitUnit }}</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th width="150">专业</th>
                <td class="th-bg">{{ formData.specialty }}</td>
                <th width="150">提出日期</th>
                <td class="th-bg">{{ parseTime(formData.submitDate, '{y}-{m}-{d}') }}</td>
              </tr>
            </tbody>
            <thead>
              <tr>
                <th width="150">卷册名称</th>
                <td class="th-bg">{{ formData.volumeName }}</td>
                <th width="150">附图</th>
                <td class="th-bg">
                  <el-image
                    v-for="(item, i) of formData.attachmentPicList"
                    :key="i"
                    style="width: 100px; height: 100px"
                    :src="item.url"
                    fit="cover"
                    :preview-src-list="[item.url]"
                  />
                </td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th width="150">卷册号</th>
                <td colspan="3">{{ formData.volumeNo }}</td>
              </tr>
            </tbody>
            <thead>
              <tr>
                <th width="150">变更原因</th>
                <td colspan="3">{{ formData.changeReason }}</td>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th width="150">变更内容</th>
                <td colspan="3">{{ formData.changeContent }}</td>
              </tr>
            </tbody>
            <tbody>
              <tr>
                <th width="150">变更费用估算（附计算表）</th>
                <td colspan="3">
                  <div>
                    <span
                      v-for="(item, i) of formData.costEstimationFileList"
                      :key="i"
                      style="color: rgb(41 145 255);cursor: pointer"
                      @click="onOpen(item.url)"
                    >{{item.originalName}}</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-form>
    </el-card>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { listDesignChange, getDesignChange, delDesignChange, addDesignChange, updateDesignChange } from '@/api/design/designChange';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { downLoadOss } from '@/api/system/oss';
// 响应式状态
const isShowDialog = ref(false);
const initFormData: DesignChangeForm = {
  id: undefined,
  formNo: undefined,
  projectName: undefined,
  submitUnit: undefined,
  specialty: undefined,
  submitDate: undefined,
  volumeName: undefined,
  volumeNo: undefined,
  attachmentPic: undefined,
  changeReason: [],
  changeContent: undefined,
  costEstimation: undefined,
  costEstimationFile: undefined,
  fileId: undefined,
  status: undefined,
  remark: undefined
};
const data = reactive<PageData<DesignChangeForm, DesignChangeQuery>>({
  formData: { ...initFormData }
});
const design_change_reason_type = ref([]);
const { formData } = toRefs(data);
// 打开弹窗
const openDialog = (row?: any, types) => {
  resetForm();
  design_change_reason_type.value = types;
  if (row?.id) {
    getInfos(row.id, types);
  }
  isShowDialog.value = true;
};
// 获取详情数据
const getInfos = async (id: string, types) => {
  const res = await getDesignChange(id);
  Object.assign(formData.value, res.data);
  // 数据处理
  if (formData.value.changeReason) {
    let arr = formData.value.changeReason.split(',');
    var changeReason = types.filter((item) => arr.includes(item.value.toString())).map((item) => item.label);
    formData.value.changeReason = changeReason.join('，');
  }
};
// 重置表单
const resetForm = () => {
  Object.keys(formData.value).forEach((key) => {
    formData[key] = undefined;
  });
};
// 下载文件
const onOpen = (path: string) => {
    window.open(path, '_blank');
};
// 导出
const onLoad = async () => {
  await downLoadOss({ id: formData.value.id }, '/design/designChange/export/word', '设计变更单.zip');
};

// 关闭弹窗
const closeDialog = () => {
  isShowDialog.value = false;
};

// 暴露方法给父组件
defineExpose({
  openDialog,
  closeDialog
});
</script>

<style scoped lang="scss">
.pic-block {
  margin-right: 8px;
}
.file-block {
  width: 100%;
  border: 1px solid var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  margin-bottom: 5px;
  padding: 3px 6px;
}
.ml-2 {
  margin-right: 5px;
}
::v-deep .el-icon svg {
  height: 100% !important;
  width: 100% !important;
}
::v-deep .el-step__icon-inner {
  font-size: 14px !important;
  font-weight: 700 !important;
}
.dialog-footer {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 14%;
  right: 10%;
  background: #fff;
  box-shadow: 0px 0px 10px #ddd;
  text-align: center;
  padding: 20px 10px;
  .btn-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    > span {
      padding-top: 5px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
}
table {
  border-collapse: collapse; //合并为一个单一的边框
  border-color: rgba(199, 199, 199, 1); //边框颜色按实际自定义即可
}
thead {
  tr {
    th {
      background-color: rgba(247, 247, 247, 1); //设置表格标题背景色
      height: 35px; //设置单元格最小高度
      text-align: center;
      letter-spacing: 5px;
      padding: 15px;
    }
    td {
      text-align: left;
      height: 35px; //设置单元格最小高度
      padding: 15px;
    }
    .th-bg {
      background-color: rgba(247, 247, 247, 1);
    }
  }
}
tbody {
  tr {
    td {
      text-align: left;
      height: 40px; //设置单元格最小高度
      padding: 15px;
    }
    th {
      height: 35px; //设置单元格最小高度
      text-align: center;
      letter-spacing: 5px;
      padding: 15px;
    }
  }
}
.table-content {
  box-shadow: 0px 0px 10px #ddd;
  padding: 20px;
  position: relative;
}
</style>
