<template>
  <div class="app-container">
    <div style="width: 55%">
      <el-form
        ref="formRef"
        :model="modelValue"
        :label-width="labelWidth + 'px'"
        disabled
      >
        <p><b>基本信息</b></p>
        <el-row>
          <el-col :span="24">
            <el-form-item label="成果需求名称:" prop="title">
              <el-input v-model="modelValue.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <!-- <el-checkbox label="0" @change="handleCheck">其他</el-checkbox> -->
            <el-form-item label="需求类别:">
              <el-checkbox-group v-model="modelValue.kinds">
                <el-checkbox
                  v-for="item in checkList"
                  :key="item.id"
                  :label="item.name"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
              <!-- <el-row :gutter="20">
              <el-col :span="20">
                <el-input
                  v-model="checkInput"
                  placeholder="请输入需求类别"
                ></el-input>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="addCheck">添加</el-button>
              </el-col>
            </el-row> -->
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="需求描述:" prop="introduce">
              <!-- <Editor v-model="modelValue.add" :minHeight="150" /> -->
              <WangEditor
                v-model="modelValue.introduce"
                width="100%"
                min-height="150px"
                readOnly
              ></WangEditor>
            </el-form-item>
          </el-col>
        </el-row>

<!--        <CityOptions-->
<!--          v-model="modelValue"-->
<!--          :labelWidth="labelWidth"-->
<!--          ref="cityFormRef"-->
<!--        />-->
        <el-form-item
            label="国家"
            prop="country"
        >
          <el-select
              v-model="modelValue.country"
              placeholder="请选择国家"
          >
            <el-option
                v-for="option in countryOptions"
                :label="option.value"
                :value="option.key"
            />
          </el-select>
        </el-form-item>
        <FieldOptions
          v-model="modelValue"
          :labelWidth="labelWidth"
          disabled
          ref="fieldFormRef"
        />

        <el-row>
          <el-col :span="12">
            <el-form-item
              label="成果需求预算:"
              :prop="modelValue.budgetMode == 1 ? 'budget' : ''"
            >
              <el-input
                v-model="modelValue.budget"
                oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                placeholder="请输入技术需求预算"
              >
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="50px">
              <el-checkbox
                false-label="1"
                true-label="2"
                v-model="modelValue.budgetMode"
                >面议</el-checkbox
              >
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="截止时间:" prop="deadline">
              <el-date-picker
                style="width: 100%"
                v-model="modelValue.deadline"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择截止时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="需求联系人:" prop="name">
              <el-input
                v-model="modelValue.name"
                placeholder="请输入需求联系人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人手机号:" prop="mobile">
              <el-input
                v-model="modelValue.mobile"
                placeholder="请输入联系人手机号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <InputBoxAdd
              :labelWidth="labelWidth"
              v-model="modelValue"
              title="想合作的单位及模式"
              placeholder=""
              disabled
              fieldKey="wants"
              ref="directionsFormRef"
            />
          </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 { updateExpertAchievement } from "@/api/dataApproval/achivement";
import WangEditor from "@/components/WangEditor";
import {countryOptions, demandCategoryList} from "@/utils/parameter";
import FieldOptions from "@/views/components/FieldOptions";
import InputBoxAdd from "@/views/components/InputBoxAdd";
import { ElMessage } from "element-plus";
import { ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const labelWidth = ref(120);
const router = useRouter();
const route = useRoute();

const submitForm = async (status) => {
  await updateExpertAchievement({ ...form.value, status });
  let successMessage;
  switch (status) {
    case "1":
      successMessage = "已通过";
      break;
    case "2":
      successMessage = "已驳回";
  }

  ElMessage.success(successMessage);
  router.back();
};

// const getDemandInfo = async () => {};
</script>
