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

        <el-row>
          <el-col :span="24">
            <el-form-item label="企业名称:" prop="enterpriseName">
              <el-input
                  v-model="form.enterpriseName"
                  placeholder="请输入企业名称"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="联系人:" prop="username">
              <el-input
                  v-model="form.username"
                  placeholder="请输入联系人"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="联系方式:" prop="phone">
              <el-input
                  v-model="form.phone"
                  placeholder="请输入联系方式"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="邮箱:" prop="email">
              <el-input
                v-model="form.phone"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row> -->
        <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>
        <!--        <city-options-->
        <!--          disabled-->
        <!--          v-model="form"-->
        <!--          :labelWidth="labelWidth"-->
        <!--          ref="cityFormRef"-->
        <!--        ></city-options>-->
        <el-form-item
            label="国家"
            prop="country"
        >
          <el-select
              v-model="form.country"
              placeholder="请选择国家"
          >
            <el-option
                v-for="option in countryOptions"
                :label="option.value"
                :value="option.key"
            />
          </el-select>
        </el-form-item>
        <FieldOptions
            v-model="form"
            :labelWidth="labelWidth"
            ref="fieldForm"
            :disabled="true"
        />

        <InputBoxAdd
            :labelWidth="labelWidth"
            v-model="form"
            title="应用客户"
            placeholder="请输入应用客户"
            fieldKey="customers"
            ref="customerForm"
            :disabled="true"
        />

        <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.cooperationModeArr"
                  clearable
                  multiple
                  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"
            title="关键词"
            placeholder="请输入关键词"
            fieldKey="keywords"
            ref="keywordsForm"
            :disabled="true"
        />

        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="成果简介:" prop="description">
              <el-input
                v-model="form.description"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 8 }"
              />
            </el-form-item>
          </el-col> -->
        <!-- </el-row> -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="成果简介:">
              <WangEditor
                  v-model="form.introduce"
                  minHeight="150"
                  :readOnly="true"
              />
            </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" :disabled="true" /> -->
              <el-link
                  :disabled="!form.image"
                  type="primary"
                  @click="downloadProductImage"
              >下载产品图片
              </el-link
              >
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
        <el-form-item label="产品视频:">
          <VideoUpload
            v-model="form.video"
            :limit="1"
            :fileType="['mp4']"
            :disabled="isAdd"
          />
        </el-form-item>
      </el-col> -->
        </el-row>
        <!-- <p>
          <b>图片材料上传</b>
        </p> -->
        <el-row>
          <el-col :span="24">
            <el-form-item label="成熟度证明材料:">
              <!-- <FileUpload
                v-model="form.file"
                :limit="1"
                :fileType="['doc', 'xls', 'ppt', 'txt', 'pdf', 'jpg']"
              /> -->
              <el-link
                  :disabled="!form.material"
                  type="primary"
                  @click="downloadProductMaterial"
              >下载成熟度证明材料
              </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 {reactive, toRefs} from "vue";
import CityOptions from "@/views/components/CityOptions";
import FieldOptions from "@/views/components/FieldOptions";
import InputBoxAdd from "@/views/components/InputBoxAdd";
import {
  batchEnterpriseProduct,
  getProductApprovalInfo,
  updateEnterpriseApprovalProduct,
} from "@/api/dataApproval/enterpriseProduct";
import {
  maturityOptions,
  leadOptions,
  cooperationOptions, countryOptions,
} from "@/utils/parameter";
import {useRoute, useRouter} from "vue-router";
import saveAs from "file-saver";
import {ElMessage} from "element-plus";
import {customDownload, downloadFile} from "@/utils/request";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();
// import WangEditor from "@/components/WangEditor/index.vue";
// const isAdd = ref(false);
const route = useRoute();
const router = useRouter();
const labelWidth = ref(120);
const showTitle = ref(false);
// const props = defineProps({
//   labelWidth: {
//     type: Number,
//     default: 120,
//   },
//   showTitle: {
//     type: Boolean,
//     default: false,
//   },
// });
// const {} = toRefs(props);

const data = reactive({
  form: {},
});
const {form} = toRefs(data);

const getDetail = async (id) => {
  const {data} = await getProductApprovalInfo(id);
  form.value = data;
  form.value.cooperationModeArr = data.cooperationMode
      ? data.cooperationMode.split(",")
      : [];
  // form.value.keywords = data.keyword ? data.keyword.split(",") : [];
};
if (route.query.id) {
  getDetail(route.query.id);
}
const downloadProductImage = () => {
  const filename =
      form.value.image.split("/")[form.value.image.split("/").length - 1];
  // saveAs(form.value.image, filename);
  downloadFile(form.value.image, filename);
};
const downloadProductMaterial = () => {
  const filename =
      form.value.material.split("/")[form.value.material.split("/").length - 1];
  // const baseUrl = import.meta.env.VITE_APP_BASE_API;
  // customDownload(`/file${form.value.material}`, {}, filename);
  downloadFile(form.value.material, filename);
};

const submitForm = async (status) => {
  await batchEnterpriseProduct(route.query.id, status);
  let successMessage;
  switch (status) {
    case "1":
      successMessage = "已通过";
      break;
    case "2":
      successMessage = "已驳回";
  }
  userStore.getUnApprovedProduct();
  ElMessage.success(successMessage);
  router.back();
};
</script>
<!-- <script>
  import CityOptions from "@/views/components/CityOptions";
  import FieldOptions from "@/views/components/FieldOptions";
  import InputBoxAdd from "@/views/components/InputBoxAdd";
  export default {
    components: {
      CityOptions,
      FieldOptions,
      InputBoxAdd,
    },
    props: {
      value: Object,
      isAdd: {
        type: Boolean,
        default: true,
      },
      showTitle: {
        type: Boolean,
        default: false,
      },
      labelWidth: {
        type: Number,
        default: 120,
      },
    },
    data() {
      return {
        rules: {
          title: [{ required: true, message: "请输入", trigger: "blur" }],
          maturity: [{ required: true, message: "请选择", trigger: "change" }],
          lead_standard: [
            { required: true, message: "请选择", trigger: "change" },
          ],
          description: [{ required: true, message: "请输入", trigger: "blur" }],
          image: [
            { required: true, message: "请上传", trigger: ["change", "blur"] },
          ],
        },
      };
    },
    methods: {
      submitForm() {
        let flag = false;
        this.$refs["formRef"].validate((valid) => {
          const fieldForm = this.$refs.fieldForm.submitForm();
          const customerForm = this.$refs.customerForm.submitForm();
          console.log();
          const directionsForm =
            this.form.mode == 2 ? this.$refs.directionsForm.submitForm() : true;
          const keywordsForm = this.$refs.keywordsForm.submitForm();
          if (
            valid &&
            fieldForm &&
            customerForm &&
            directionsForm &&
            keywordsForm
          ) {
            flag = !flag;
          }
        });
        return flag;
      },
    },
  };
  </script> -->
<style lang="scss" scoped>
.form_title {
  font-weight: 700;
  margin-bottom: 30px;
}

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