<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryRef"
      :inline="true"
      :model="queryParams"
      @submit.prevent
    >
      <el-form-item
        :label="t('admin.form.name', { type: t('admin.common.patent') })"
        prop="patentName"
      >
        <el-input
          v-model="queryParams.patentName"
          clearable
          :placeholder="
            t('admin.form.placeholder', { type: t('admin.common.patent') })
          "
          size="small"
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          icon="Search"
          size="small"
          type="primary"
          @click="handleQuery"
        >
          {{ t("admin.common.search") }}
        </el-button>
        <el-button icon="Refresh" size="small" @click="resetQuery">
          {{ t("admin.common.reset") }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--            icon="Plus"-->
      <!--            plain-->
      <!--            size="small"-->
      <!--            type="primary"-->
      <!--            @click="handleAdd"-->
      <!--        > {{ t('admin.common.add')  }}-->
      <!--        </el-button-->
      <!--        >-->
      <!--      </el-col>-->
      <!--      &lt;!&ndash; 无接口  暂时注释 &ndash;&gt;-->
      <!--      <el-col v-if="false" :span="1.5">-->
      <!--        <router-link to="./claimPatent">-->
      <!--          <el-button icon="Plus" plain size="small" type="primary"-->
      <!--          >认领-->
      <!--          </el-button-->
      <!--          >-->
      <!--        </router-link>-->
      <!--      </el-col>-->
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList">
      <el-table-column :label="t('admin.common.dataNumber')" prop="id" />
      <el-table-column
        :show-overflow-tooltip="true"
        :label="t('admin.form.name', { type: t('admin.common.patent') })"
        prop="title"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        :label="t('webSearch.applicationNumber')"
        prop="applyCode"
      />
      <el-table-column :label="t('admin.form.inventor')" prop="inventor" />
      <el-table-column :label="t('webSearch.applicant')" prop="applyName" />
      <el-table-column
        align="center"
        :label="t('admin.form.applicationDate')"
        prop="applyAt"
      >
        <template #default="{ row }">
          <span>{{ dayjs(row.applyAt).format("YYYY-MM-DD") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        class-name="small-padding fixed-width"
        :label="t('admin.common.operation')"
      >
        <template #default="{ row }">
          <!--          <el-button-->
          <!--              icon="Edit"-->
          <!--              size="small"-->
          <!--              type="text"-->
          <!--              @click="handleUpdate(row)"-->
          <!--          >{{ t('admin.common.edit') }}-->
          <!--          </el-button-->
          <!--          >-->
          <el-button
            icon="Delete"
            size="small"
            type="text"
            @click="handleDelete(row.id)"
          >
            {{ t("admin.common.delete") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />

    <!--    &lt;!&ndash; 添加或修改数据配置对话框 &ndash;&gt;-->
    <!--    <el-dialog v-model="open" :title="title" append-to-body width="800px">-->
    <!--      <el-form ref="patentRef" :model="form" :rules="rules" label-width="100px">-->
    <!--        <el-form-item label="申请人:" prop="applyName">-->
    <!--          <el-input-->
    <!--              v-model="form.applyName"-->
    <!--              placeholder="请输入申请（专利权）人（多个请以 , 分割）"-->
    <!--          />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="申请人地址:" prop="applyAddress">-->
    <!--          <el-input-->
    <!--              v-model="form.applyAddress"-->
    <!--              placeholder="请输入申请人地址"-->
    <!--          />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item :label="t('admin.form.inventor')" prop="inventor">-->
    <!--          <el-input-->
    <!--              v-model="form.inventor"-->
    <!--              placeholder="请输入发明人（多个请以 , 分割）"-->
    <!--          />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="专利名称:" prop="title">-->
    <!--          <el-input v-model="form.title" :placeholder="t('admin.form.placeholder',  {type: t('admin.common.patent')})"/>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item :label="t('webSearch.applicationNumber')" prop="applyCode">-->
    <!--          <el-input v-model="form.applyCode" placeholder="请输入申请号"/>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="公开号:" prop="openCode">-->
    <!--          <el-input v-model="form.openCode" placeholder="请输入公开号"/>-->
    <!--        </el-form-item>-->
    <!--        <el-row>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item :label="t('admin.form.applicationDate')" prop="applyAt">-->
    <!--              <el-date-picker-->
    <!--                  v-model="form.applyAt"-->
    <!--                  placeholder="请选择申请日期"-->
    <!--                  style="width: 100%"-->
    <!--                  type="date"-->
    <!--                  value-format="YYYY-MM-DD"-->
    <!--              ></el-date-picker>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item label="公开日:" prop="openAt">-->
    <!--              <el-date-picker-->
    <!--                  v-model="form.openAt"-->
    <!--                  placeholder="请选择公开日"-->
    <!--                  style="width: 100%"-->
    <!--                  type="date"-->
    <!--                  value-format="YYYY-MM-DD"-->
    <!--              ></el-date-picker>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--        <el-row>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item label="专利类型:" prop="kind">-->
    <!--              <el-select-->
    <!--                  v-model="form.kind"-->
    <!--                  clearable-->
    <!--                  :placeholder="t('admin.form.pleaseSelect')"-->
    <!--                  style="width: 100%"-->
    <!--              >-->
    <!--                <el-option-->
    <!--                    v-for="item in patentOptions"-->
    <!--                    :key="item.key"-->
    <!--                    :label="item.value"-->
    <!--                    :value="item.key"-->
    <!--                >-->
    <!--                </el-option>-->
    <!--              </el-select>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--          <el-col :span="12">-->
    <!--            <el-form-item label="IPC分类号:" prop="ipcCode">-->
    <!--              <el-input v-model="form.ipcCode" placeholder="请输入IPC分类号"/>-->
    <!--            </el-form-item>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--        <el-form-item label="专利状态:" prop="status">-->
    <!--          <el-radio-group v-model="form.status">-->
    <!--            <el-radio label="1">授权</el-radio>-->
    <!--            <el-radio label="2">实审</el-radio>-->
    <!--            <el-radio label="3">公开</el-radio>-->
    <!--          </el-radio-group>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item :label="t('admin.form.summary')" prop="description">-->
    <!--          <el-input-->
    <!--              v-model="form.description"-->
    <!--              :autosize="{ minRows: 4, maxRows: 8 }"-->
    <!--              placeholder="请输入摘要"-->
    <!--              type="textarea"-->
    <!--          />-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="主权项:" prop="principalClaim">-->
    <!--          <el-input-->
    <!--              v-model="form.principalClaim"-->
    <!--              :autosize="{ minRows: 4, maxRows: 8 }"-->
    <!--              placeholder="请输入主权项"-->
    <!--              type="textarea"-->
    <!--          />-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <template #footer>-->
    <!--        <div class="dialog-footer">-->
    <!--          <el-button type="primary" @click="submitForm">{{t("admin.common.confirm")}}</el-button>-->
    <!--          <el-button @click="cancel">{{t('admin.common.cancel')}}</el-button>-->
    <!--        </div>-->
    <!--      </template>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script setup>
import {
  deleteLabPatentByIds,
  labPatentList,
} from "@/api/admin/laboratory/patent";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";
import modal from "@/plugins/modal";
import { useRouter } from "vue-router";
import { getCurrentInstance, reactive, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";

const router = useRouter();

const { proxy } = getCurrentInstance();

const dataList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const title = ref("");
const { t } = useI18n();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    patentName: undefined,
  },
  // form: {},
  // rules: {
  //   applyName: [{required: true, message: "申请人不能为空", trigger: "blur"}],
  //   applyAddress: [
  //     {required: true, message: "申请人地址不能为空", trigger: "blur"},
  //   ],
  //   openCode: [{required: true, message: "公开号不能为空", trigger: "blur"}],
  //   openAt: [{required: true, message: "公开日不能为空", trigger: "blur"}],
  //   inventor: [{required: true, message: "发明人不能为空", trigger: "blur"}],
  //   title: [{required: true, message: "专利名称不能为空", trigger: "blur"}],
  //   applyCode: [{required: true, message: "申请号不能为空", trigger: "blur"}],
  //   applyAt: [{required: true, message: "申请日期不能为空", trigger: "blur"}],
  //   kind: [{required: true, message: "请选择专利类型", trigger: "change"}],
  //   ipcCode: [
  //     {required: true, message: "IPC分类号不能为空", trigger: "blur"},
  //   ],
  //   status: [
  //     {
  //       required: true,
  //       message: "请选择专利状态",
  //       trigger: "change",
  //     },
  //   ],
  //   description: [{required: true, message: "摘要不能为空", trigger: "blur"}],
  //   principalClaim: [
  //     {required: true, message: "主权项不能为空", trigger: "blur"},
  //   ],
  // },
});

const { queryParams } = toRefs(data);

const queryRef = ref();
// const patentRef = ref();
// const expertId = ref(undefined);

/** 查询数据列表 */
const getList = async () => {
  loading.value = true;
  labPatentList(queryParams.value)
    .then((resp) => {
      dataList.value = resp.rows;
      total.value = resp.total;
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
function resetQuery() {
  queryRef.value.resetFields();
  handleQuery();
}

/** 删除按钮操作 */
function handleDelete(id) {
  modal
    .confirm(
      t("admin.common.confirmAction", {
        number: id,
        action: t("admin.common.delete"),
        type: t("admin.common.patent"),
      })
    )
    .then(function () {
      return deleteLabPatentByIds(id);
    })
    .then(() => {
      getList();
      ElMessage.success(t("admin.common.deleteSuccess"));
    })
    .catch((err) => {
      console.log(err);
    });
}

/** 重置新增的表单以及其他数据  */
// function reset() {
//   form.value = {
//     id: undefined,
//     applyName: undefined,
//     applyAddress: undefined,
//     inventor: undefined,
//     title: undefined,
//     applyCode: undefined,
//     openCode: undefined,
//     openAt: undefined,
//     applyAt: undefined,
//     kind: undefined,
//     ipcCode: undefined,
//     description: undefined,
//     principalClaim: undefined,
//   };
//   proxy.resetForm("patentRef");
// }

// /** 添加数据 */
// const handleAdd = () => {
//   reset();
//   open.value = true;
//   title.value= t('admin.form.addData');
// };
// /** 修改数据 */
// const handleUpdate = (row) => {
//   reset();
//   const data = cloneDeep(row);
//   // patentDetail({ id }).then((res) => {
//   form.value = data;
//   open.value = true;
//   title.value= t('admin.form.editData');
//   // });
// };
//
// /** 提交按钮 */
// const submitForm = async () => {
//   await patentRef.value.validate();
//   if (form.value.id != undefined) {
//     await updateLabPatent(form.value);
//     ElMessage.success(t('admin.common.editSuccess'));
//     open.value = false;
//     getList();
//   } else {
//     await insertLabPatent(form.value);
//     ElMessage.success(t('admin.common.addSuccess'));
//     open.value = false;
//     getList();
//   }
// };
//
// /** 取消按钮 */
// function cancel() {
//   open.value = false;
//   reset();
// }

getList();
</script>
