<template>
  <el-container>
    <el-header>
      <div class="left-panel-group">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          v-auth="'patentrecord.create'"
        ></el-button>
        </div>
        <div class="right-panel">
            <el-select
                v-model="query.patent"
                placeholder="选择专利名称"
                clearable
                filterable
                :loading="loading"
                @visible-change="handlePatentChange"
            >
                <el-option
                    v-for="item in patentList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
            </el-select>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleQuery"
            ></el-button>
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" row-key="id">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column
          label="卷号"
          prop="volume_number"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="申请号（交局后补登）"
          prop="application_number"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="名称"
          prop="patent_name"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="专利类型"
          prop="pc_type"
          min-width="100"
          :formatter="formatPcType">
        </el-table-column>
        <el-table-column
          label="单位"
          prop="organization"
          min-width="100">
        </el-table-column>
        <el-table-column
          label="发明人"
          prop="inventors"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="代理人"
          prop="agent"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="归属平台"
          prop="affiliated_platforms"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="归属项目"
          prop="affiliated_projects"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="归属日期"
          prop="application_date"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="授权日"
          prop="authorization_date"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="有效年限（年）"
          prop="validity_years"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="年费缴纳"
          prop="annuity_paid"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="报奖情况"
          prop="award_info"
          min-width="100"
        ></el-table-column>
        <el-table-column
          label="奖金发放（元）"
          prop="bonus_amount"
          min-width="100"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="250">
          <template #default="scope">
            <el-button
              link
              size="small"
              type="primary"
              @click="filerecordEidt(scope.row)"
              v-auth="'patentrecord.update'"
              >编辑
            </el-button>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="filerecordDel(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  size="small"
                  type="danger"
                  v-auth="'patentrecord.delete'"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <el-drawer :title="titleMap[type] " v-model="limitedVisible" size="50%">
    <el-form
      :model="addForm"
      :rules="rules"
      ref="addForm"
      label-width="100px"
      label-position="left"
    > 
      <el-form-item label="卷号" prop="volume_number">
        <el-input v-model="addForm.volume_number" clearable></el-input>
      </el-form-item>
      <el-form-item label="申请号" prop="application_number">
        <el-input v-model="addForm.application_number" clearable></el-input>
      </el-form-item>
      <el-form-item label="专利名称" prop="patent">
        <el-select 
          v-model="addForm.patent" 
          placeholder="请选择" 
          clearable 
          :loading="loading"
          @visible-change="handlePatentChange">
          <el-option
            v-for="item in patentList"
            :key="item.name"
            :value="item.id"
            :label="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专利类型" prop="pc_type">
        <el-select v-model="addForm.pc_type" placeholder="请选择" clearable>
          <el-option label="发明专利" value="invention"></el-option>
          <el-option label="实用新型" value="utility"></el-option>
          <el-option label="外观设计" value="design"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单位" prop="organization">
        <el-input v-model="addForm.organization" clearable></el-input>
      </el-form-item>
      <el-form-item label="发明人" prop="inventors">
        <el-input v-model="addForm.inventors" clearable></el-input>
      </el-form-item>
      <el-form-item label="代理人" prop="agent" label-width="120px">
        <el-input v-model="addForm.agent" clearable></el-input>
      </el-form-item>
        <el-form-item label="归属平台" prop="affiliated_platforms">
        <el-input v-model="addForm.affiliated_platforms" clearable></el-input>
      </el-form-item>
      <el-form-item label="归属项目" prop="affiliated_projects" >
        <el-input v-model="addForm.affiliated_projects" clearable></el-input>
      </el-form-item>
      <el-form-item label="申请日" prop="application_date" >
        <el-date-picker
          v-model="addForm.application_date"
          type="date"
          align="right"
          value-format="YYYY-MM-DD"
          unlink-panels
          palceholder="选择日期"
          ></el-date-picker>
      </el-form-item>
      <el-form-item label="授权日" prop="authorization_date" >
        <el-date-picker
          v-model="addForm.authorization_date"
          type="date"
          align="right"
          value-format="YYYY-MM-DD"
          unlink-panels
          palceholder="选择日期"
          ></el-date-picker>
      </el-form-item>
      <el-form-item label="有效年限" prop="validity_years" >
        <el-input v-model="addForm.validity_years" type="number" min="0" clearable></el-input>
      </el-form-item>
      <el-form-item label="年费缴纳" prop="annuity_paid" >
        <el-input-number
          v-model="addForm.annuity_paid"
          :precision="2"
          :step="0.01"
          :min="0"
          style="width: 200px"
          controls-position="right"></el-input-number>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="addForm.status" placeholder="请选择" clearable>
          <el-option
            v-for="(label, value) in statusOptions"
            :key="value"
            :label="label"
            :value="value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="报奖情况" prop="award_info" >
        <el-input 
          v-model="addForm.award_info" 
          clearable type="textarea" 
          palaceholder="请输入内容"
          rows="3">
        ></el-input>
      </el-form-item>
      <el-form-item label="奖金发放" prop="bonus_amount" >
        <el-input-number
          v-model="addForm.bonus_amount"
          :precision="2"
          :step="0.01"
          :min="0"
          style="width: 200px"
          controls-position="right"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
        <el-button
            v-auth="'patentrecord.create'"
            v-if="type !== 'show'"
            type="primary"
            :loading="isSaving"
            @click="submitHandle()"
        > 保 存</el-button
      >
    </template>
  </el-drawer>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      workflowName:"",
      workFlowId:'',
      loading: false,
      apiObj: this.$API.srm.patentrecord.list,
      patentList: [],
      statusOptions: {
            "not_disclosed":"未公开" ,
            "under_examination":"实审中",
            "first_office_action":"一通",
            "second_office_action":"二通",
            "rejected":"驳回",
            "reexamination":"复审",
            "authorized":"授权"
      },
      query: {},
      editId: null,
      isSaving: false,
      limitedVisible: false,
      limitedWatch: false,
      type: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
        show: "查看",
      },
      //表单数据
      addForm: {
        volume_number: null,
        application_number: null,
        patent: null,
        pc_type: null,
        organization: null,
        inventors: "",
        agent: "",
        affiliated_platforms: "",
        affiliated_projects: "",
        application_date: "",
        authorization_date: "",
        validity_years: "",
        annuity_paid: "",
        status: "",
        award_info: "",
        bonus_amount: "",
      },
    };
  },
  methods: {
    formatPcType(row, column, cellValue) {
      const map = {
        'invention': '发明专利',
        'utility': '实用新型',
        'design': '外观设计'
      };
      return map[cellValue] || cellValue;
    },
    handleAdd() {
      this.type = "add";
      this.addForm = this.getDefaultForm();
      this.limitedVisible = true;
    },
    handlePatentChange(visible){
      if(visible){
        this.get_patentList();
      }
    },
    async get_patentList() {
        const res = await this.$API.srm.patentrecord.get_name.req();
        this.patentList = res;
    },
    handleAdd_outer() {
      this.addForm = this.getDefaultForm();
      this.type = "add";
      this.limitedVisible = true;
      this.lending_type = "outer";
      this.addForm.is_lending = true;
    },
    handleCancel() {
        this.limitedVisible = false;       // 关闭弹窗
        this.lending_type = "";    // 重置 lending_type
        this.getDefaultForm()// 清空表单
      },
    submitHandle() {
      let that = this;
        that.isSaving = true;
        that.submit();
    },
    getDefaultForm(){
      return {
        volume_number: null,
        application_number: null,
        patent: null,
        pc_type: null,
        organization: null,
        inventors: "",
        agent: "",
        affiliated_platforms: "",
        affiliated_projects: "",
        application_date: "",
        authorization_date: "",
        validity_years: "",
        annuity_paid: "",
        status: "",
        award_info: "",
        bonus_amount: "",
      }
    },
    async submit() {
      let that = this;
      let res = null;
      try {
        if (that.type === "add") {
          res = await that.$API.srm.patentrecord.create.req(that.addForm);
        } else {
          res = await that.$API.srm.patentrecord.update.req(
            that.editId,
            that.addForm
          );
        }
        that.isSaving = false;
        that.limitedVisible = false;
        that.$refs.table.refresh();
      } catch (e) {
        that.isSaving = false;
      }
    },
    // 审批流结束之后才可以编辑
    filerecordEidt(row) {
      this.type = "edit";
      this.editId = row.id;
      this.limitedVisible = true;
      this.addForm = Object.assign({}, row);
    },
    async filerecordDel(row) {
      var id = row.id;
      var res = await this.$API.srm.patentrecord.delete.req(id);
      if (res.err_msg) {
        this.$message.error(res.err_msg);
      } else {
        this.$refs.table.refresh();
        this.$message.success("删除成功");
      }
    },
  //搜索
    handleQuery() {
      this.$refs.table.queryData(this.query);
    },
  },
};
</script>
<style scoped>
.treeMain {
  height: 280px;
  overflow: auto;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  background-color: #fefefe;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  background-color: #f5f5f5;
}
.node rect {
  stroke: #606266;
  fill: #fff;
}

.edgePath path {
  stroke: #606266;
  fill: #333;
  stroke-width: 1.5px;
}

g.conditions > rect {
  fill: #00ffd0;
  stroke: #000;
}

.el-icon-close {
  cursor: pointer;
}

.left-panel-group {
  display: flex;
  align-items: center;
  gap: 6px;        /* 按钮之间的间隙，可以调小点 */
  margin-left: 0;  /* 靠左 */
}
</style>

