<!-- @format -->

<template>
  <div class="app-container">
    <el-table v-loading="materialLoading" :data="materialTable" border>
      <el-table-column label="序号" align="center" width="55" type="index" />
      <el-table-column label="材料名称" align="center" prop="materialsName" />

      <el-table-column label="是否必传" align="center" prop="isMust">
        <template #default="scope">
          <el-tag :type="scope.row.isMust == 0 ? 'primary' : 'danger'">
            <dict-tag :options="is_must" :value="scope.row.isMust" />
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="要求"
        align="center"
        prop="remark"
      ></el-table-column>
      <el-table-column label="材料列表" align="center" width="400">
        <template #default="scope">
          <ViewFileUpload
            :isDisabled="isDisabled"
            v-model="scope.row.fileNames"
          ></ViewFileUpload>
        </template>
      </el-table-column>

      <el-table-column v-if="!isDisabled" label="操作" align="center">
        <template #default="scope">
          <ViewFileUpload :isView="false" v-model="scope.row.fileNames">
            <el-button type="text" :icon="Position"> 上传 </el-button>
          </ViewFileUpload>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="materialDia"
      :title="materialTitle"
      width="700"
      :before-close="
        () => {
          materialDia = false;
        }
      "
    >
      <el-form>
        <el-form-item :label="`材料上传`">
          <FileUpload
            :isDisabled="isDisabled"
            v-model="activeMaterial.fileNames"
          ></FileUpload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div v-if="!isDisabled" class="dialog-footer">
          <el-button type="primary" @click="materialDia = false">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <div style="display: flex; justify-content: center" v-if="!isDisabled">
    <el-button
      style="width: 100px; height: 40px; font-size: 16px"
      type="primary"
      @click="emits('handlePrevStep')"
      >上一步</el-button
    >
    <el-button
      style="width: 100px; height: 40px; font-size: 16px"
      type="primary"
      @click="onSubmit"
      >下一步</el-button
    >
  </div>
</template>
<script setup>
import { listConifg } from "@/api/materialTable/index";
import { useRoute } from "vue-router";
import { getCurrentInstance, onUnmounted, toValue } from "vue";
import { Position } from "@element-plus/icons-vue";
import { saveMaterials, getHistoryList } from "@/api/materialTable/index";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const { card_type, materials_shape, is_must } = proxy.useDict(
  "card_type",
  "materials_shape",
  "is_must"
);
const route = useRoute();
const materialLoading = ref(false);
const materialTable = ref([]);
const materialDia = ref(false);
const materialTitle = ref("");
const activeMaterial = ref("");

const emits = defineEmits("handlePrevStep", "handleNextStep");

const props = defineProps(["materialCalssId", "isDisabled", "isReviewed"]);

//上传材料
const handleUpdateMaterial = (row) => {
  materialDia.value = true;
  materialTitle.value = row.materialsName;
  activeMaterial.value = row;
};

//获取列表
const getList = () => {
  materialLoading.value = true;
  listConifg({
    cardType: route.query.type,
  })
    .then((res) => {
      materialTable.value = res.rows;
    })
    .finally((res) => {
      materialLoading.value = false;
    });
};

//获取历史材料列表
const getHistory = () => {
  materialLoading.value = true;
  getHistoryList({
    applicationFormId: route.query.materialCalssId || props.materialCalssId,
    isReviewed: props.isReviewed,
  })
    .then((res) => {
      materialTable.value = res.data;
    })
    .finally((res) => {
      materialLoading.value = false;
    });
};

//保存材料
const onSubmit = () => {
  const noMust = toValue(materialTable)
    .filter((item) => {
      return item.isMust == "1" && !item.fileNames;
    })
    .map((item) => item.materialsName);
  if (noMust.length) {
    ElMessage({
      type: "error",
      message: `${noMust.join(",")}是必要材料`,
    });
    return;
  }

  const materialData = toValue(materialTable).map((item) => {
    return {
      applicationFormId: props.materialCalssId,
      materialsConifgId: item.id,
      fileName: item.fileNames,
    };
  });

  saveMaterials(materialData, props.materialCalssId).then((res) => {
    ElMessage({
      type: "success",
      message: "保存成功",
    });
    emits("handleNextStep");
  });
};

if (route.query.materialCalssId != undefined || props.isDisabled) {
  getHistory();
} else {
  getList();
}

// getList();
</script>
<style lang="scss" scoped>
.app-container {
  width: 85%;
  display: flex;
  justify-content: center;
  margin: 40px auto;
}
::v-deep .el-table__header {
  width: 1200px !important;
}
</style>
