<!-- 合同 -->
<template>
  <div class="context">
    <!-- <div style="text-align: right;margin-bottom: 20px;">
      <el-button type="primary" @click="newcontract = !newcontract">
        新增合同
      </el-button> 
    </div> -->
    <div>
      <el-table
        :data="tableData"
        border
        size='small'
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        style="width: 100%;">
        <el-table-column
        type="index"
        label="序号"
        width="50">
        </el-table-column>
        <el-table-column
        prop="hetong"
        label="合同名称"
        width="200">
        </el-table-column>
        <el-table-column
        prop="kehu"
        label="客户名称"
        width="">
        </el-table-column>
        <el-table-column
        prop="jiner"
        label="合同金额"
        width="80">
        </el-table-column>
        <el-table-column
        prop="signing_time"
        label="签约时间"
        width="100">
        </el-table-column>
        <el-table-column
        prop="caozuo"
        label="签约人"
        width="80">
        </el-table-column>
        <!-- <el-table-column
        prop="examine"
        label="审核人"
        width="80">
        </el-table-column> -->
        <el-table-column
        prop="address"
        label="操作"
        width="">
        <template slot-scope="scope">
          <el-button type="primary" @click="cahkan_click(scope.row)">详 情</el-button>
          <!-- <span v-if="scope.row.examine ==''" style="display: inline-block;margin-left:10px ;">
            <el-button type="primary">修改</el-button>
            <el-button type="danger">删除</el-button>
          </span>
          <span v-else style="display: inline-block;margin-left:10px ;">
            <el-button type="primary">word下载</el-button>
            <el-button type="primary">pdf下载</el-button>
          </span> -->
        </template>
        </el-table-column>
    </el-table>
    </div>

     <!-- 弹窗 -->
     <div>
      <!-- 新增 -->
      <!-- <el-dialog
        title="新增合同"
        :visible.sync="newcontract"
        :modal-append-to-body="false"
        width="60%"
        >
        <div style="height: 50vh;overflow: overlay;">
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>合同编码：</span>
              <el-input v-model="input" placeholder="请输入内容" style="width: 150px;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>合同名称：</span>
              <el-input v-model="input" placeholder="请输入内容" style="width: 150px;"></el-input>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>客户名称：</span>
              <el-input v-model="input" placeholder="请输入内容" style="width: 150px;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>合同金额：</span>
              <el-input v-model="input" placeholder="请输入内容" style="width: 150px;"></el-input>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>签约时间：</span>
              <el-input v-model="input" placeholder="请输入内容" style="width: 150px;"></el-input>
            </div>
            <div style="flex: 1;">
                <span>签约人员：</span>
                <el-input v-model="input" placeholder="请输入内容" style="width: 150px;"></el-input>
              </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>word文件：</span>
                <el-input v-model="input" placeholder="请输入内容" style="width: 150px;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>pdf文件：</span>
              <el-input v-model="input" placeholder="请输入内容" style="width: 150px;"></el-input>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span style="position: relative;bottom: 20px;left: 0;">
                  备注：
              </span>
              <el-input type="textarea" :row="2" v-model="textarea" placeholder="请输入内容" style="width: 80%;"></el-input>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="newcontract = false">取 消</el-button>
          <el-button type="primary" @click="newcontract = false">确 定</el-button>
        </span>
      </el-dialog> -->
      <!-- 查看 -->
      <el-dialog title="编辑合同" :visible.sync="contract"
        :modal-append-to-body="false" width="60%"
       >
       <div style="height: 50vh;overflow: overlay;">
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>合同编码：</span>
              <el-input v-model="contraview.code" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>合同名称：</span>
              <el-input v-model="contraview.name" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>客户名称：</span>
              <el-input v-model="contraview.customer_name" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;">
              <span>合同金额：</span>
              <el-input v-model="contraview.sumamt" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span>合同开始时间：</span>
              <el-date-picker
                v-model="contraview.start_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
            <div style="flex: 1;">
              <span>合同结束时间：</span>
              <el-date-picker
                v-model="contraview.end_time"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </div>
          </div>
          <div class="xinxi">
            <div style="flex: 1;">
              <span>签约人员：</span>
              <el-input v-model="contraview.signing_per" placeholder="请输入内容" style="width: 60%;"></el-input>
            </div>
            <div style="flex: 1;"></div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
                <span>word文件：</span>
                 <span>{{ contraview.docx_name }}</span>&nbsp;&nbsp; 
                <el-button type="text" @click="preview_word2 = true">预览</el-button>
                <el-button type="text" @click="word_Download">下载</el-button>
                <el-dialog
                  title="word文件预览"
                  :visible.sync="preview_word2"
                  width="50%"
                  :append-to-body="true"
                >
                  <div>
                    
                    <vue-office-docx 
                      :src="contraview.word_file_url"
                      style="height: 400px;width: 100%;"
                      @rendered="rendered"/>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="preview_word2 = false">取 消</el-button>
                    <el-button type="primary" @click="preview_word2 = false">确 定</el-button>
                  </span>
                </el-dialog>
            </div>
            <div style="flex: 1;">
              <span>pdf文件：</span>
              <span>{{ contraview.pdf_name }}</span>&nbsp;&nbsp;
              <el-button type="text" @click="preview_pdf2 = true">预览</el-button>
              <el-button type="text" @click="pdf_Download">下载</el-button>
              <el-dialog
                title="pdf文件预览"
                :visible.sync="preview_pdf2"
                width="50%"
                :append-to-body="true"
              >
                <div>
                  <vue-office-pdf 
                    :src="contraview.pdf_file_url"
                    style="height: 400px;width: 100%;"
                  />
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="preview_pdf2 = false">取 消</el-button>
                  <el-button type="primary" @click="preview_pdf2 = false">确 定</el-button>
                </span>
              </el-dialog>
            </div>
          </div>
          <div class="xinxi"  style="">
            <div style="flex: 1;">
              <span style="position: relative;bottom: 20px;left: 0;">
                  备注：
              </span>
              <el-input type="textarea" :row="2" v-model="contraview.remark" placeholder="请输入内容" style="width: 80%;"></el-input>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="contract = false">取 消</el-button>
          <el-button type="primary" @click="examine_click">审核</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import{getcontractlist,getcontractcheck,getcontractget}from '../../../api/index'
import exportFile from '../../../utils/exportFile'
import VueOfficeDocx from '@vue-office/docx'
import VueOfficePdf from '@vue-office/pdf'
import { uParseTime } from "@/utils/tools";
  export default{
    props:{
      Message:Object
    },
    components:{
      VueOfficeDocx,
      VueOfficePdf
    },
    data(){
      return{
        input:'',
        textarea:'',
        tableData: [],
        shenhe:1,
        newcontract:false,
        contract:false,

        contraview:{
          code:'',
          name:'',
          sumamt:'',
          customer_name:'',
          start_time:this.getTime(new Date()),
          end_time:this.getTime(new Date()),
          signing_per:'',
          word_file_url:'',
          pdf_file_url:'',
          remark:'',
          docx_name:'',
          pdf_name:'',
        },
        qiniuDomain: 'https://images.shengws.com/',
        preview_word:false,
        preview_pdf:false,
        preview_word2:false,
        preview_pdf2:false,
        num:0,
      }
    },
    methods:{
      cahkan_click(row){
        this.contract = true
        this.examine_id = row.id
        getcontractget(row.id).then(res =>{
          const response = res.data.charge_contract
          if(response.word_file_url!=''){
            var word = response.word_file_url.split(',')
            var word1 =word[0]
            var word2 =word[1]
          }
          if(response.pdf_file_url !=''){
            var pdf = response.pdf_file_url.split(',')
            var pdf1 = pdf[0]
            var pdf2 = pdf[1]
          }
          this.contraview={
            code:response.code,
            name:response.name,
            sumamt:response.sumamt,
            customer_name:response.custom_name,
            start_time:response.start_time,
            end_time:response.end_time,
            signing_per:response.signing_person,
            // word_file_url:response.word_file_url,
            word_file_url:word2,
            pdf_file_url:pdf2,
            // pdf_file_url:response.pdf_file_url,
            docx_name:word1,
            pdf_name:pdf1,
            remark:response.remark,
          }
          console.log('222221111',res);
        })
      },
      // 审核
      examine_click(){
        getcontractcheck(this.examine_id).then(res =>{
          console.log('1111111',res);
          this.contract = false
          this.getlist()
        })
      },
      // 数据源
      getlist(){
        getcontractlist().then(res =>{
          const list = res.data.list
          const table = []
          list.forEach((item,index) => {
            if(item.is_check==0){
              const arr={
                id:item.id,
                index:index+1,
                hetong:item.name,
                kehu:item.custom_name,
                jiner:item.sumamt,
                signing_time:item.start_time,
                caozuo:item.signing_person,
                examine:''
              }
              table.unshift(arr)
            }
          });
          this.tableData = table
          console.log('nnnnnn合同',res);
        })
      },
       // 下载word文档
      word_Download(){
        const num= this.num
        console.log('uuuuuuu',this.contraview.word_file_url);
        if(num == 0){
          console.log('uuuuuuu',this.num);
          exportFile.getImgURLs(this.contraview.word_file_url,'签约合同')
        }else{
          exportFile.getImgURLs(this.contraview.word_file_url,'签约合同('+num+')')
        }
        this.num++
        // var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
      },
       // 下载pdf文档
       pdf_Download(){
        const num= this.num
        console.log('uuuuuuu',this.docx);
        if(num == 0){
          console.log('uuuuuuu',this.num);
          exportFile.getImgURLs(this.contraview.pdf_file_url,'签约合同')
        }else{
          exportFile.getImgURLs(this.contraview.pdf_file_url,'签约合同('+num+')')
        }
        this.num++
        // var file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
      },
       // 转换时间
       getTime(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
          return ""
        }else {
          return uParseTime(val, '{y}-{m}-{d}')
        }
      },
      rendered(){}
    },
    created(){
      this.getlist()
    }
  }
</script>
<style lang="scss" scoped>
  .context{
    padding: 20px 0;
    .xinxi{
      display: flex;
      margin-bottom: 15px;
    }
  }

</style>