<template>
  <el-container>
    <el-header>
      <div class="left-panel-group">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd"
          v-auth="'patentinfo.create'"
        >新增</el-button>
      </div>
      <div class="right-panel">
        <el-input
            v-model="query.name"
            placeholder="专利名称"
            clearable
            @keyup.enter="handleQuery"
          ></el-input>
          <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="belong_dept_name"
          min-width="60"
        ></el-table-column>
        <el-table-column
          label="拟申请专利名称"
          prop="name"
          min-width="60"
        ></el-table-column>
        <el-table-column
          label="发明人（设计人）"
          prop="author"
          min-width="120"
        ></el-table-column>
        <el-table-column
          label="拟申请专利类型"
          prop="type"
          min-width="120">
          <template #default="scope">
            {{patentType[scope.row.type]}}
          </template>
        </el-table-column>
        <el-table-column label="是否提前公开" prop="is_public" mim-width="60">
          <template #default="scope">
            <span :style="{color: scope.row.is_public ? '#67C23A' : '#F56C6C'}">
            {{ scope.row.is_public ? '是' : '否'}}
              </span>
          </template>
        </el-table-column>
        <el-table-column
          label="拟申请地域"
          prop="area"
          min-width="60"
        ><template #default="scope">
            {{areaOptions[scope.row.area]}}
        </template>
        </el-table-column>
        <el-table-column
          label="其他区域"
          prop="other_area"
          min-width="60"
        ></el-table-column>
        <el-table-column label="技术状态" prop="tech_status" min-width="200">
            <template #default="{row}">
                <div v-if="row.tech_status && row.tech_status.length">
                    <div v-for="(item, index) in row.tech_status" :key="index">
                        <strong>{{item.name}}</strong>：
                        <span>{{ item.status }}</span>
                        <br />
                        <el-link v-if="item.file"
                        type="primary"
                        :href="item.file"
                        target="_blank"
                        style="font-size: 12px;"
                        >文件下载</el-link> 
                </div>
            </div>
             <span v-else>—</span>
        </template>
        </el-table-column>
        <el-table-column label="技术文件" prop="tech_file" min-width="120">
            <template #default="{row}">
                <div v-if="row.tech_file && row.tech_file.length">
                    <div v-for="(item, index) in row.tech_file" :key="index">
                        <strong>{{item.name}}</strong>：
                        <span>{{ item.pages }}页</span>
                </div>
            </div>
             <span v-else>—</span>
        </template>
        </el-table-column>
        <el-table-column label="所在节点" min-width="60">
          <template #default="scope">
            {{scope.row.ticket_.state_.name}}
          </template>
        </el-table-column>
        <el-table-column label="进行状态" min-width="60">
          <template #default="scope">
            {{statusOptions[scope.row.ticket_.state_.type]}}
					</template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="120">
          <template #default="scope">
            <el-button
              link
              size="small"
              type="primary"
              @click="patentEdit(scope.row)"
              v-auth="'patentinfo.update'"
              >详情
            </el-button>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="patentDel(scope.row)"
            >
              <template #reference>
                <el-button
                  link
                  size="small"
                  type="danger"
                  v-auth="'patentinfo.delete'"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <el-drawer
      :title="drawerTitle[mode]"
      v-model="limitedVisible"
      :destroy-on-close="true"
      direction="rtl"
      size="70%"
      >
  <div style="display: flex; height: calc(100% - 60px);"> 
    <div style="flex: 1; padding-right: 20px; overflow-y: auto;">
      <PatentForm
        :mode="mode"
        v-model="addForm"
        :transitions="transitions"
        @success="()=>{handleQuery(); limitedVisible = false}"
        @closed="limitedVisible = false"
      />
    </div>
  </div>
</el-drawer>
</template>
<script>

import PatentForm from "./patent_form.vue";
export default {
  components: { PatentForm},
  name: "index",
  data() {
    return {
      workflowName:"",
      workFlowId:'',
      apiObj: this.$API.srm.patentinfo.list,
      selection: [],
      checkList: [],
      fileList: [],
      transitions:[],
      timeRange: [],
      lending_type: "",
      query: {},
      editId: null,
      isSaving: false,
      limitedVisible: false,
      mode: "add",
      patentType: {
        "invention": "发明专利",
        "utility": "实用新型",
        "design": "外观设计",
      },
      areaOptions: {
        'Domestic':'国内申请',
        'Foreign':'国外申请',
        'PCT':'PCT申请',
      },
      drawerTitle: {
        add: "新增专利申密",
        edit: "审批流",
        view: "查看专利申密",
      },
      statusOptions:{
        0: "审批中",
        1: "初始中",
        2: "已完成",
      },
      currentRow: null,
      //表单数据
      addForm: {
        author: "",
        name: "",
        type: "",
        is_public: false,
        area: null,
        other_area: null,
        tech_status: [],
        tech_file: [],
        ticket_:null
      },
    };
  },
  mounted(){
    let that = this;
    that.getInit();
  },
  methods: {
    //添加工作流
    //渲染工单提交按钮
		getInit() {
			let that = this;
			if(this.addForm.ticket_!==null){
				this.$API.wf.ticket_.ticketTransitions.req(this.addForm.ticket_).then((res) => {
				    that.transitions = res;
				})
			}else{
				that.$API.wf.workflow.initkey.req("patent").then((res) => {
					that.initForm = res;
					that.transitions = res.transitions;
				});
			}
		},
    handleAdd() {
      this.mode = "add";
      this.addForm = this.getDefaultForm();
      this.lending_type = "";
      this.limitedVisible = true;
    },
    handleCancel() {
        this.limitedVisible = false;       // 关闭弹窗
        this.lending_type = "";    // 重置 lending_type
        this.getDefaultForm()// 清空表单
      },
    
    getDefaultForm(){
      return {
        name: "",
        author: "",
        type: "",
        is_public: false,
        area: null,
        other_area: null,
        tech_status: [{ name: "是否进行过科技成果鉴定", status: "",  fileList: [] },
        { name: "是否发表过文章", status: "", fileList: [] },
        { name: "是否参与过展会展出", status: "", fileList: [] },
        { name: "是否应用于生产/销售", status: "", fileList: [] },
        { name: "是否参与过技术交流", status: "", fileList: [] }],
        tech_file: [ { name: "技术背景材料", status: "", pages: "" },
        { name: "技术交底材料", pages: "" },
        { name: "查新检索报告", pages: "" },
        { name: "图或者照片", pages: "" }],
        ticket_:null
      }
    },
    // 审批流结束之后才可以编辑
    patentEdit(row) {
      this.mode = "view";
      this.editId = row.id;
      this.limitedVisible = true;
      this.addForm = Object.assign({}, row);
    },
    async patentDel(row) {
      var id = row.id;
      var res = await this.$API.srm.patentinfo.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>

