<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="文件管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.keyword" clearable style="width: 200px;margin-right: 10px;" placeholder="关键字搜索" />
            <Button type="primary" @click="getList">查询</Button>
          </div>
        </slot>
      </lx-header>
    </div>
      <!-- @cell-click="cellClicks" -->
    <xy-table
      :list="list"
      :total="total"
      stripe
      @pageSizeChange="e => {select.page_size = e,getList()}"
      @pageIndexChange="e => {select.page = e,getList()}"
      :table-item="table">
        <template v-slot:btns>
          <div></div>
         <el-table-column align='center' label="操作" width="100" header-align="center">
            <template slot-scope="scope">
              <!-- <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small">新增计划</Button> -->

              <Button type="primary" style='margin-right:5px;margin-bottom:5px;' @click="editorUnit(scope.row.id,scope.row.status,scope.row.upload_link)" size="small">新增任务</Button>
              <Button type="primary" style='margin-right:5px;margin-bottom:5px;' @click="editorAchieve(scope.row.id,scope.row.status,scope.row.upload_link)" size="small">归档</Button>
              <Poptip transfer confirm title="确认要删除吗？" @on-ok="deleteList(scope.row.id)">
                 <Button type="primary" style="margin-left:5px;margin-bottom:5px;" size="small" ghost>删除</Button>
              </Poptip>
              <!-- <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small">新增任务</Button> -->
              <!-- <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="showPlan(scope.row.id)">查看</Button> -->
              <!-- <Button type="primary" style='margin-right:5px;margin-bottom:5px;' size="small" @click="editorPlan(scope.row.id,'editor')">编辑</Button> -->
            </template>
          </el-table-column>
        </template>
      </xy-table>
        <addUnit ref='addUnit' @uploadOa="changeOaStatus"></addUnit>
        <achieve ref="achieve"  @uploadOa="changeOaStatus"></achieve>
  </div>

</template>

<script>
  import {
    getFiles,
    changeFiles,
    delFiles
  } from '@/api/oafile/index.js'

  import state from '@/store/modules/user.js'
  import addUnit from '@/views/task/list/components/addUnit.vue'
  import achieve from './components/achieve.vue'
  export default {
    components:{
      addUnit,
      achieve
    },
    data(){
      return{
        select:{
          keyword:'',
          page:1,
          page_size:10,
        },
        other_file_id:"",
        other_file_status:'',
        total:0,
        table:[{
          label:"文件名称",
          prop:'name',
          align:'left',
          customFn:(row)=>{
            if(row.upload_link){
              return(<a href={row.upload_link.url} target="_blank">{row.name}</a>)
            }else{
              return(<div>{row.name}</div>)
            }

          }
          // width:200
        },{
          label:"状态",
          prop:'status',
          width:120,
          formatter:(cell,data,value,index)=>{
            console.log("value",value)
            return value?(value===1?'已完成':'未完成'):'未完成'
          }
        },{
          label:"来源",
          prop:'from',
          width:120,
        },{
          label:"创建日期",
          prop:'created_at',
          width:120,
          formatter:(cell,data,value,index)=>{
            return value?value.substring(0,11):''
          }
        }],
        list:[],
      }
    },
    created(){
      this.getList()
    },
    methods: {
      async getList(){
         const res = await getFiles({...this.select})
         this.list = res.data
         this.total = res.total
      },
      editorUnit(id,status,file){
        this.$refs.addUnit.type = 'add'
        this.$refs.addUnit.upload_link = file
        this.other_file_id  = id
        this.other_file_status = status
        this.$refs.addUnit.department_id = state.state.department_id
        this.$refs.addUnit.isShow = true
      },
      editorAchieve(id,status,file){
        this.$refs.achieve.upload_link = file
        this.other_file_id  = id
        this.other_file_status = status
        this.$refs.achieve.isShow = true
      },
      changeOaStatus(e){
        if(this.other_file_status===0){
          changeFiles({
            other_file_id:this.other_file_id,
            status:1
          }).then(res=>{
            this.other_file_id = ''
            this.other_file_status = ''
            this.getList()
          })
        }else{
          this.other_file_id = ''
          this.other_file_status = ''
        }
      },
      deleteList(id) {
        var that = this;
        if (id) {
          delFiles({id:id}).then(response => {
            this.$Message.success('操作成功');
            that.getList();
          }).catch(error => {
            console.log(error)
            reject(error)
          })
        }
      },

    },
    watch:{}
  }
</script>

<style scoped>
  /deep/ .el-icon-circle-close{
      color:#fff
  }
/*  /deep/ .el-table__body tr.el-table__row--striped td {
    background-color: #C0C4CC!important;
  } */
</style>
