<template>
  <div class="app-container">
    <div style="width: 55%">
      <el-form
          ref="formRef"
          :model="form"
          :label-width="labelWidth + 'px'"
          disabled
      >
        <div class="form_title">
          <p><b>基本信息</b></p>
        </div>

        <el-row>
          <el-col :span="24">
            <el-form-item label="成果名称:" prop="title">
              <el-input
                  v-model="form.title"
                  placeholder="请输入成果名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <FieldOptions
            v-model="form"
            :labelWidth="labelWidth"
            disabled
            ref="fieldFormRef"
        />

        <InputBoxAdd
            :labelWidth="labelWidth"
            disabled
            v-model="form"
            title="应用客户"
            placeholder="请输入应用客户"
            fieldKey="customers"
            ref="customerFormRef"
        />
        <!--        <city-options-->
        <!--            v-model="form"-->
        <!--            disabled-->
        <!--            :labelWidth="labelWidth"-->
        <!--            ref="cityFormRef"-->
        <!--        ></city-options>-->
        <el-row>
          <el-col :span="24">
            <el-form-item label="成果成熟度:" prop="maturity">
              <el-select v-model="form.maturity" clearable placeholder="请选择">
                <el-option
                    v-for="item in maturityOptions"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="成果领先性:" prop="leadStandard">
              <el-select
                  v-model="form.leadStandard"
                  clearable
                  placeholder="请选择"
              >
                <el-option
                    v-for="item in leadOptions"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="合作模式:">
              <el-select
                  v-model="form.cooperationMode"
                  clearable
                  placeholder="请选择"
              >
                <el-option
                    v-for="item in cooperationOptions"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <InputBoxAdd
            :labelWidth="labelWidth"
            v-model="form"
            disabled
            title="关键词"
            placeholder="请输入关键词"
            fieldKey="keywords"
            ref="keywordsForm"
        />
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属单位:" prop="unit">
              <el-input v-model="form.unit"></el-input>
            </el-form-item>
          </el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="成果简介:" prop="description">
              <wangEditor
                  readOnly
                  v-model="form.description"
                  min-height="150px"
                  width="100%"
                  ref="introduceRef"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="成果图片:" prop="image">
              <ImageUpload v-model="form.image" :limit="1"/>
            </el-form-item>
          </el-col>
        </el-row>
        <p>
          <b>图片材料上传</b>
        </p>
        <el-row>
          <el-col :span="24">
            <!-- <el-form-item label="证明材料:" prop="material">
              <FileUpload
                v-model="form.material"
                :limit="1"
                :fileType="['doc', 'xls', 'pdf', 'jpg', 'png', 'zip']"
              />
            </el-form-item> -->
            <el-form-item label="证明材料:" prop="image">
              <!-- <ImageUpload v-model="form.image" :limit="1" :disabled="true" /> -->
              <el-link
                  :disabled="!form.image"
                  type="primary"
                  @click="downloadImage"
              >下载图片材料
              </el-link
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div :style="{ marginLeft: labelWidth + 'px' }">
      <el-button @click="submitForm('2')">审核拒绝</el-button>
      <el-button type="primary" @click="submitForm('1')">通过审核</el-button>
    </div>
  </div>
</template>
<script setup>
import {cooperationOptions, demandCategoryList, leadOptions, maturityOptions} from "@/utils/parameter";
import FieldOptions from "@/views/components/FieldOptions";
import InputBoxAdd from "@/views/components/InputBoxAdd";
import {reactive, toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {batchAchievement, expertAchievementInfo,} from "@/api/dataApproval/achivement";
import {downloadFile} from "../../../utils/request";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const data = reactive({
  form: {},
});
const {form} = toRefs(data);

const labelWidth = ref(120);

const checkList = reactive(demandCategoryList);
const getAchievementInfo = async () => {
  const resp = await expertAchievementInfo({id: route.query.id});
  form.value = resp.data;
  form.value.keywords = form.value.keyword?.split(",") ?? [];
  form.value.customers = form.value.customer?.split(",") ?? [];
};

const downloadImage = () => {
  const filename =
      form.value.image.split("/")[form.value.image.split("/").length - 1];
  downloadFile(form.value.image, filename);
};

const submitForm = async (status) => {
  // await updateExpertAchievement({ ...form.value, status });
  await batchAchievement([form.value.id], status);
  let successMessage;
  switch (status) {
    case "1":
      successMessage = "已通过";
      break;
    case "2":
      successMessage = "已驳回";
  }
  userStore.getUnApprovedAchivement("achievement");
  ElMessage.success(successMessage);
  router.back();
};

getAchievementInfo();
</script>

<style lang="scss" scoped>
.form_title {
  font-weight: 700;
  margin-bottom: 30px;
}

.el-select,
.el-date-editor {
  display: block;
  width: 100%;
}
</style>
