<template>
  <div>
    <!-- 无效流程 -->
    <div style="display: flex;justify-content: end;margin-bottom: 10px;" v-if=" $reportPermission(reportId,[0,1])">
      <el-button type="primary" size="small" @click="addOption">添加陈述意见</el-button>
      <el-dropdown @command="handleCommand">
        <el-button type="primary" size="small">
          添加无效请求书<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item command="1">添加无效请求书</el-dropdown-item>
          <el-dropdown-item command="2">添加陈述意见书</el-dropdown-item>
          <el-dropdown-item command="0">添加口审记录</el-dropdown-item>
          <el-dropdown-item command="3">添加无效决定书</el-dropdown-item>
          <el-dropdown-item command="4">添加行政诉讼书</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div >
      <el-timeline>
        <el-timeline-item v-for="item in timelineList" :timestamp="item.date" placement="top">
          <el-card>
            <div>
              <span>{{ timeType[item.processType] }}：</span><span>{{ item.occuredTime.slice(0,10) }}</span>
              <div style="float: right;" v-if=" $reportPermission(reportId,[0,1])">
                  <span style="margin-right: 10px;"  @click="edit(item)"><el-link>编辑</el-link></span>
                  <span  @click="dele(item)"><el-link>删除</el-link></span>
              </div>
            </div>
            <div v-if="item.processType==0">
              <p><span>地点：</span><span>{{ item.oralExam.address }}</span></p>
              <p><span>参与人：</span><span>{{ item.oralExam.participants }}</span></p>
            </div>
            <div v-if="item.processType!=0" style="margin-top: 35px;">
              <div v-if="item.reportFile" class="upload-file">
                <div  style="margin:0;display:flex;justify-content:space-around;">
                  <p style="margin:0;width:calc(100% - 40px);overflow: hidden;white-space: nowrap;text-overflow:ellipsis;cursor: pointer;">{{item.reportFile.name?item.reportFile.name+'.'+item.reportFile.suffix:item.reportFile.fileName}}</p> 
                  <Menu :data="item.reportFile" @delFile="delFile(item)" :isDelete="true" ></Menu>
                </div>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <responseDialog ref="responseDialog" :reportId="reportId" @isFinish="handleFinish" :deleFile="deleFile"></responseDialog>
  </div>
</template>

<script>
import Menu from '@/views/workspace/components/menu/index.vue'
import responseDialog from './responseDialog.vue'

export default {
  props:['reportId','signPatentNo'],
  components: {
    Menu,
    responseDialog,
  },
  data() {
    return {
      timelineList:[],
      isOpen: false,
      isOpenNum: null,
      form: {},
      queryParams: {},
      timeType: {
        '1': '提出无效时间',
        '2': '陈述答复时间',
        '0': '口审时间',
        '3': '无效决定时间',
        '4': '发起诉讼时间',
      },
      deleFile: false,
      // tableHeight:0,
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.getList()
    // this.getHeight()
  },
  methods: {
    //添加陈述意见
    addOption(){
      var queryParams = {
        reportId:this.reportId,
        signPatentNo:this.signPatentNo,
        size: 1,
        current: 1,
      }
      this.$api.queryProof(queryParams).then((res) => {
        if (res.code==200) {
          // this.tableData=res.data[0].id
          var router = this.$router.resolve({
            path: '/checkFileDetails/' +res.data[0].id,
          })
          let params = this.$s.getSession('params')
          params.type=7
          params.reportType=7
          params.aid=res.data[0].id
          params.signPatentNo=this.signPatentNo
          params.reportId=this.reportId
          this.$s.setSession('params', params)
          window.open(router.href, '_blank');
            }
      }).catch((error) => {
        
      })
      
    },
    // getHeight() {
    //   let a = document.body.clientHeight
    //   this.tableHeight=a
    // },
    getList() {
      this.queryParams.reportId = this.reportId
      // 1正序
      this.queryParams.orderBy = 1
      this.$api.queryInvalidProcess(this.queryParams).then((res) => {
        if (res.code==200) {
          this.timelineList = res.data
        }
      }).catch((error) => {
        
      })
    },
    handleFinish() {
      this.getList()
    },
    // 删除文件
    delFile(item) {
      // var index = this.form.files.findIndex(item => {
      //   return item.id == id
      // })
      // if (index != -1) {
      item.reportFile = {}
      this.form = item
      this.deleFile=!this.deleFile
      //   this.submit()
      // }
    },
    // 编辑
    edit(item) {
      var form = JSON.parse(JSON.stringify(item))
      this.$refs.responseDialog.open(form)
    },
    // 删除
    dele(item) {
      let a = {
        id:item.id
      }
      this.$confirm('确认删除本条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.deleteInvalidProcess(a).then((res) => {
            if (res.code==200) {
              this.$message.success('删除成功')
              this.getList()
            }
          })
        }).catch(err => {
      })
      
    },
    // 添加
    handleCommand(ev) {
      var form = {}
      form.processType = ev
      this.$refs.responseDialog.open(form)
    },
  },
}
</script>

<style lang="scss" scoped>
.edit{
  float: right;
  margin-right: 10px;
}
</style>