<template>
  <div>
    <div style="display:flex">
      <el-table border size="mini" :data="proof_url">
        <el-table-column label="现场资料文件名" prop="name" />
        <el-table-column label="类型">
          <template slot-scope="scope">
            {{ getFIieTypeName(matchFileSuffixType(scope.row.name)) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
            <template #header>
              <span>操作</span>
              <el-button v-if="!readonly" style="margin-left:5px" type="text" size="mini" @click="visible = true">添加</el-button>
            </template>
            

          <template slot-scope="scope">
            <el-button
              v-if="!readonly"
              type="text" 
              size="mini"
              @click="deleteItem(scope.$index)">
            删除</el-button>

            <el-button 
              v-if="matchFileSuffixType(scope.row.name) === 'video' || matchFileSuffixType(scope.row.name) === 'image'" 
              type="text" 
              size="mini"
               @click="previewItem(scope.row.url)"
            >预览</el-button>

            <el-button v-else type="text" size="mini" @click="previewItem(scope.row.url)">下载</el-button>
          </template>
          
        </el-table-column>
      </el-table>
    </div>

    <upload-modal :visible.sync="visible" @change="handleUploadChange" />

    <div style="display:flex;justify-content:flex-end;margin:10px 0px" v-if="!readonly">
      <el-button size="mini" type="primary" @click="onSubmit" :loading="loading">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { fileSuffixTypeUtil } from "@/utils/fileType"
import asyncRequest from "@/apis/service/customerService/demandOrder";
import UploadModal from "./uploadModal.vue"

const { matchFileSuffixType, getFIieTypeName } = fileSuffixTypeUtil
export default {
  props: ['sitem', 'readonly'],
  components: { UploadModal },
  data(){
    return {
      loading:false,
      proof_url:[],
      visible:false
    }
  },
  watch:{
    readonly:{
      handler(){
        const { ReqProof_supplier } = (this.sitem || {})
        if(!this.readonly || !ReqProof_supplier) return

        this.proof_url = ReqProof_supplier.map(({proof_url}) => {
          const chunks = proof_url.split("/")

          return {
            name: chunks[chunks.length - 1],
            url: proof_url
          }
        })
      },
      immediate:true
    }
  },
  methods:{
    matchFileSuffixType,
    getFIieTypeName,
    deleteItem(index){
      this.proof_url.splice(index,1)
    },
    previewItem(url){
      console.log(url)
      window.open(url)
    },
    handleUploadChange(item){
      this.proof_url.push(item)
    },
    async onSubmit(){
      if(this.proof_url.length === 0){
        this.$message.warning('请上传现场资料')
        return
      }

      this.loading = true
      
      const params = {
        id: this.sitem.id, 
        proof_url: this.proof_url.map(({url}) => url),
        status: 7 
      }

      const { code } = await asyncRequest.proofCheck(params)
      this.loading = false
      if(code !== 1) return
      this.$emit('refresh')
    }
  }
}
</script>
