<template>
  <main class="m-20">
    <div class="wrap text-black">
      <!--顶部搜索-->
      <el-row class="bg_white searchBox">
        <el-col :span="24">
          <el-form ref="form" :model="filter" label-width="100px" class="m-t-20">
            <el-row>
              <el-col :span="6">
                <el-form-item label="版权名称" prop="">
                  <el-input v-model="filter.name" style="width: 60%;" placeholder="请输入版权名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="版权类型" prop="">
                  <el-select v-model="filter.copyright_type_id" placeholder="请选择版权类型" @change="change_copyright">
                    <el-option v-for="(item, index) in copyRight" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="紧急程度" prop="">
                  <el-select v-model="filter.urgency_degree" placeholder="请选择紧急程度" @change="change_urgency">
                    <el-option v-for="(item, index) in urgency" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4" :offset="2">
                <el-button type="primary" @click="searchClick">搜索</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
      <!--table-->
      <el-row class="bg_white m-t-20">
        <el-col :span=24>
          <el-row class="m-t-20">
            <el-col :span="6" class="m-l-40">
              <el-button type="primary" @click="addClick">新增版权</el-button>
              <el-button type="primary" @click="downloadTemplate('')">下载装备材料模板</el-button>
            </el-col>
          </el-row>
          <el-table class="m-20" :data="tableData" style="width: auto;" border :header-cell-style="header_style">
            <el-table-column fixed prop="id" label="编码" width="80" align="center" />
            <el-table-column fixed prop="name" label="版权名称" width="180">
              <template #default="scope">
                <span @click="editClick(scope.row)" class="text_blue Cursor">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="copyright_type_id" label="版权类型" width="180" />
            <el-table-column prop="urgency_degree" label="紧急程度" />
            <template v-if="this.isCopyright">
              <el-table-column prop="" label="申请表" width="100" align="center">
                <template #default="scope">
                  <span class="text_blue Cursor" @click="downloadTemplate(scope.row.apply_file)">下载</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="源程序代码" width="100" align="center">
                <template #default="scope">
                  <span class="text_blue Cursor" @click="downloadTemplate(scope.row.code)">下载</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="说明书" width="100" align="center">
                <template #default="scope">
                  <span class="text_blue Cursor" @click="downloadTemplate(scope.row.instructions)">下载</span>
                </template>
              </el-table-column>
            </template>
            <template v-else>
              <el-table-column prop="" label="作品说明表" width="100" align="center">
                <template #default="scope">
                  <span class="text_blue Cursor" @click="downloadTemplate(scope.row.art_dscription_form)">下载</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="法人作品说明" width="100" align="center">
                <template #default="scope">
                  <span class="text_blue Cursor" @click="downloadTemplate(scope.row.art_corporation_statement)">下载</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="作品等级申请表" width="100" align="center">
                <template #default="scope">
                  <span class="text_blue Cursor" @click="downloadTemplate(scope.row.art_level_form)">下载</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="作品样本" width="100" align="center">
                <template #default="scope">
                  <span class="text_blue Cursor" @click="downloadTemplate(scope.row.demo)">下载</span>
                </template>
              </el-table-column>
              <el-table-column prop="" label="作品登记委托书" width="100" align="center">
                <template #default="scope">
                  <span class="text_blue Cursor" @click="downloadTemplate(scope.row.art_sign_file)">下载</span>
                </template>
              </el-table-column>
            </template>
            <el-table-column prop="apply_result" label="申请结果" width="180" />
            <el-table-column prop="price" label="单价（￥）" align="center" />
            <el-table-column prop="num" label="数量" align="center" />
            <el-table-column prop="total_price" label="总计（￥）" align="center" />
            <el-table-column prop="" label="操作" width="180" align="center">
              <template #default="scope">
                <span @click="editClick(scope.row)" class="text_blue Cursor m-r-10">查看详情</span>
                <span @click="deleteClick(scope.row, scope.$index)" class="text_blue Cursor">删除</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class=" p-20">
            <el-pagination
              class="pagination"
              v-model="currentPage"
              :page-size="filter.size"
              layout="total, prev, pager, next"
              :total="total"
              @size-change="changePageSize"
              @current-change="changePage"
            >
            </el-pagination>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import { ElMessageBox } from 'element-plus'
import axios from 'axios'
export default {
  name: 'copyRight',
  data() {
    return {
      header_style: {
				'background-color': '#F5F7FA',
				'color': '#606266',
				'fontSize': '14px',
				'fontWeight': '600',
				'textAlign':'center',
			},
      form: {},
      copyRight: [],
      urgency: [],
      tableData: [],
      currentPage: 1,
      total: 0,
      filter: {
        page: 1,
        size: 10,
        name: '',
        urgency_degree: '',
        copyright_type_id: 1
      },
      url: '',
      name: '',
      isCopyright: true
    }
  },
  created() {
    this.getData()
    this.getUrl()
  },
  activated() {
    this.getList()
  },
  methods: {
    // 版权类型
    change_copyright(val) {
      this.filter.copyright_type_id = val
      if (this.filter.copyright_type_id == 1) {
        this.isCopyright = true
      } else {
        this.isCopyright = false
      }
      this.filter.page = 1
      this.filter.size = 10
      this.getList()
    },
    // 紧急程度
    change_urgency(val) {
      this.filter.urgency_degree = val
    },
    //搜索
    searchClick() {
      if (this.filter.copyright_type_id == 1) {
        this.isCopyright = true
      } else {
        this.isCopyright = false
      }
      this.filter.page = 1
      this.filter.size = 10
      this.getList()
    },
    // 重置
    reset() {
      this.filter = {
        page: 1,
        size: 10,
        name: '',
        urgency_degree: '',
        copyright_type_id: 1
      }
      this.isCopyright = true
      this.getList()
    },
    // 获取下载链接
    getUrl() {
      this.$http.get('copyright/copyrightTemplate').then(res => {
        if(res.status == 200) {
          this.url = res.data.data.url
          this.name = res.data.data.name
        }
      })
    },
    // 获取基础数据
    getData() {
      this.$http.get('copyright/constList').then(res => {
        if (res.status == 200) {
          this.copyRight = res.data.data.copyright_type_id
          this.urgency = res.data.data.urgency_degree
        }
      })
    },
    //版权list
    getList() {
      this.$http.get('copyright/index', this.filter).then(res => {
        if (res.status == 200 ) {
          this.tableData = res.data.data.data
          this.total = res.data.data.count
        }
      })
    },
    // 改变每页请求条数
    changePageSize(size) {
        this.filter.size = size;
        this.getList();
    },
    // 翻页
    changePage(page) {
        this.filter.page = page;
        this.getList();
    },
    // 新增商标
    addClick() {
      this.$router.push({
        path: '/PIP/copyright_add'
      })
    },
    // 编辑
    editClick(row) {
      console.log(row)
      let type_id = ''
      if (row.copyright_type_id == '软著登记') {
        type_id = 1
      } else {
        type_id = 2
      }
      this.$router.push({
        path: '/PIP/copyright_edit',
        query: {
          id: row.id,
          type_id: type_id
        }
      })
    },
    // 删除
    deleteClick(row, index) {
      ElMessageBox.confirm('确认删除该专利？', '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.$http.delete('copyright/delete/id?id=' + row.id ).then(res => {
              if (res.status == 200) {
                this.getList()
              } else {
                this.$message({
                  type: 'error',
                  message: res.message
                })
              }
            })
          }
          done()
        }
      })
    },
    // 下载模板
    downloadTemplate(data) {
      this.$message({
        type: 'success',
        message: '正在下载，请稍后...'
      })
      let url = ''
      if (data == '') {
        url = this.url
      } else {
        url = data
      }
      axios.get(url, {
        responseType: 'blob',
        headers: {
          /*'X-Token': getToken(),*/
          'Content-Type': 'application/json;charset=utf-8'
        }
      }).then(res => {
        if (!res) {
          this.$message.error('下载模板文件失败')
          return false
        }
        const stream = res.data // 后端用stream返回Excel文件
        const blob = new Blob([stream])
        // 前端获取业务码，成功执行正常业务
        const downloadElement = document.createElement('a')
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        downloadElement.href = href
        const timeStamp = new Date().toString()
        const url_arr = res.config.url.split('/')
        const nameStr = decodeURI(url_arr[url_arr.length - 1])
        console.log(nameStr)
        downloadElement.download = nameStr // 下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
      })
    }
  }
}
</script>

<style scoped>
.wrap{ width: auto;}
</style>