<template>
    <div>
        <el-form style="width:100%" :model="reportMessage" label-width="140px">
            <template>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="案件名称：" prop="caseName">
                            <el-input v-model="reportMessage.caseName" placeholder="请输入案件名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="客户案号：" prop="customCaseNumber">
                            <el-input v-model="reportMessage.customCaseNumber" placeholder="请输入客户案号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="内部案号：" prop="innerCaseNumber">
                            <el-input v-model="reportMessage.innerCaseNumber" placeholder="请输入内部案号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="申请单位：" prop="applicants">
                            <el-input v-model="reportMessage.applicants" placeholder="请输入申请单位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="发明人：" prop="inventor">
                            <el-input v-model="reportMessage.inventor" placeholder="请输入发明人"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="IPR：" prop="ipr">
                            <el-input v-model="reportMessage.ipr" placeholder="请输入IPR"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="技术接口人：" prop="technicalContact">
                            <el-input v-model="reportMessage.technicalContact" placeholder="请输入技术接口人"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                    <template>
                        <div>
                            <el-form-item label="委托方：" prop="entrustName" v-if="userinfo.tenantType == 1">
                                <el-autocomplete style="width:100%" v-model="reportMessage.entrustName" ref="client" value-key="name" :fetch-suggestions="querySearch" v-SelectLazyLoading="loadClient"
                                    @input="input" placeholder="请输入内容" :trigger-on-focus="false" @select="handleChange">
                                </el-autocomplete>
                            </el-form-item>
                            <el-form-item label="委托部门：" prop="entrustId" v-else>
                                <mySelectTree style="width:100%" v-model="reportMessage.entrustId" :options="departmentList">
                                </mySelectTree>
                            </el-form-item>
                        </div>
                    </template>
                </el-col>
                    <el-col :span="12">
                        <el-form-item label="承担部门：" prop="departmentId">
                            <mySelectTree style="width:100%" v-model="reportMessage.departmentId" :options="departmentList">
                            </mySelectTree>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="检索单位：" prop="searchUnit">
                            <el-input v-model="reportMessage.searchUnit" placeholder="请输入检索单位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="负责人：" prop="headId">
                            <el-select style="width:100%" v-model="reportMessage.headId" filterable remote clearable placeholder="请选择"
                                :loading="personnelList.loading" v-SelectLazyLoading="loadHead" :remote-method="remoteMethod">
                                <el-option v-for="item in personnelList.data" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="检索员联系方式：" prop="searchUnitContact">
                            <el-input v-model="reportMessage.searchUnitContact" placeholder="请输入检索员联系方式"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="检索审核人：" prop="searchReviewer">
                            <el-input v-model="reportMessage.searchReviewer" placeholder="请输入检索审核人"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </template>
        </el-form>
    </div>
</template>
  
<script>
  export default {
    components: {},
    props: {
      reportMessage:{
          type:Object,
          default:()=>{
              return {}
          }
      }
    },
    data() {
      return {
        clientList:{
            queryParams:{
                current:1,
                size:10,
                total:0,
                name:''
            },
            data:[]
        },
        personnelList:{
            queryParams:{
                current:1,
                size:10,
                total:0,
                name:''
            },
            loading:false,
            data:[]
        },
        departmentList:[]
      };
    },
    watch: {},
    computed: {
        userinfo(){
            return this.$s.getObj('userinfo')
        },
    },
    created() {},
    mounted() {
        this.getReportMessage()
        this.getDepartment()
    },
    methods: {
        getReportMessage(){
            if(this.reportMessage.headId){
                this.remoteMethod(this.reportMessage.headName)
            }else{
                this.remoteMethod('')
            }
        },

        //获取部门
        getDepartment() {
            this.$api.getPermissionDepartmentList().then((response) => {
                this.departmentList = response.data;
            });
        },
        //获取客户
         //远程搜索委托方（建议调取接口获取）
        async querySearch(queryString, cb) {
            this.clientList.queryParams.current = 1
            this.clientList.queryParams.name = queryString
            this.clientList.data = []
            this.clientList.cb = cb
            await this.getClientList()
        },
        loadClient(){
            if(this.clientList.queryParams.current * this.clientList.queryParams.size>=this.clientList.queryParams.total){
                return false
            }
            this.clientList.queryParams.current += 1
            this.getClientList()
        },
        //获取委托方
        async getClientList(){
            await this.$api.getAdminClientList(this.clientList.queryParams).then(res => {
                if (res.code == 200) {
                    this.clientList.data.push(...res.data.records)
                    this.clientList.queryParams.total = res.data.total
                    this.clientList.cb(this.clientList.data);
                }
            })
        },
        //输入框输入事件（委托方）
        input() {
            this.$set(this.reportMessage, 'entrustId', -1)
        },
        //切换选择委托方
        handleChange(row) {
            this.$set(this.reportMessage, 'entrustId', row.id)
            this.$set(this.reportMessage, 'entrustName', row.name)
        },


        //获取人员列表(懒加载)
        loadHead(){
            if(this.personnelList.queryParams.current * this.personnelList.queryParams.size>=this.personnelList.queryParams.total){
                return false
            }
            this.personnelList.queryParams.current += 1
            this.getPersonnelList()
        },
        async getPersonnelList() {
            this.personnelList.loading = true;
            await this.$api.getPermissionPersonnel(this.personnelList.queryParams).then((response) => {
                if(response.code == 200){
                    this.personnelList.loading = false;
                    this.personnelList.data.push(...response.data)
                }
            })
        },
        //人员远程搜索
        remoteMethod(query) {
            this.personnelList.data=[]
            this.personnelList.queryParams.current = 1
            this.personnelList.queryParams.name = query
            this.getPersonnelList()
        },
    },
  };
  </script>
  <style lang="scss" scoped>
  .box1{
      padding: 0px 10px;
      color: var(--color1);
      font-size: medium;
  }
  </style>