<template>
  <div class="documentation">
    <div class="list_event">
      <a @click="addEvent">新增</a>
      <a @click="editEvent">编辑</a>
      <a @click="deleteClick">删除</a>
      <a @click="lookEvent">查看</a>
      <a @click="cancellationClick">作废</a>
      <a @click="importClick">导入</a>
      <a>导出 <i class="el-icon-arrow-down"></i>
        <ul class="list-unstyled">
          <li @click="exportEntrust">委托报关单</li>
          <li>海关增值税发票</li>
          <li>晶琳发票</li>
          <li>合同（贸易）</li>
          <li>INVOICE</li>
          <li>PACKINGLIST</li>
        </ul>
      </a>
      <a @click="copyEvent">复制</a>
      <a>打印 <i class="el-icon-arrow-down"></i></a>
      <a @click="materialImportClick">供应商资料导入</a>
      <a @click="guanwurenzhen">关务部认证</a>
    </div>
    <div class="headline">
      <span>单证管理</span>
      <div class="search_time">
        <el-date-picker
          v-model="dataTime"
          type="daterange"
          unlink-panels
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          format="yyyy 年 MM 月 dd 日"
          :picker-options="pickerOptions">
        </el-date-picker>
        <el-input placeholder="输入委托公司搜索" v-model="searchKey" type="search" >
          <template slot="append" @click="searchClick"><span @click="searchClick">搜索</span></template>
        </el-input>
      </div>
    </div>
    <wtable :data="data"
            :thead="thead"
            @clickEvent="clickEvent"
            classChickbox="blur_checkbox"
            @dblClickEvent="lookEventDbl"
            @multiple="multipleEvent"
            isEdit="true"/>
    <page :current="pageParams.page"
          :total="sheetList.totalElements"
          :pageSize="pageParams.count"
          @childEvent="pageEvent"/>
    <el-dialog
      title="提示"
      :visible.sync="isDialog"
      :modal="!isDialog"
      @close="closebom()"
      width="404px">
      <div class="dialog_info">
        <template v-if="dialogInfo === '导入'">
          <div class="step">
            <p>
              <span class="serial">1</span>下载<span class="link_color">委托报关单模板</span>：<a @click="downBom"></a>
            </p>
          </div>
          <div class="step">
            <p>
              <span class="serial">2</span>导入如下单据：
            </p>
            <div class="files">
              <upload accept=".xls"
                      title="委托报关单"
                      required="true"
                      placeholder="请上传委托报关单"
                      ref="sheetUpload"
                      @closeEvent="(e) => closeFile(e, 'sheet')"
                      @uploadEvent="(e) => {return upload(e, 'sheet')}"/>
              <upload title="供应商合同"
                      placeholder="请上传供应商合同"
                      ref="contactUpload"
                      @closeEvent="(e) => closeFile(e, 'contact')"
                      @uploadEvent="(e) => upload(e, 'contact')"/>
              <upload title="供应商发票"
                      placeholder="请上传供应商发票"
                      ref="billUpload"
                      @closeEvent="(e) => closeFile(e, 'bill')"
                      @uploadEvent="(e) => upload(e, 'bill')"/>
              <upload title="供应商箱单"
                      placeholder="请上传供应商箱单"
                      ref="packagelistUpload"
                      @closeEvent="(e) => closeFile(e, 'packagelist')"
                      @uploadEvent="(e) => upload(e, 'packagelist')"/>
            </div>
          </div>
        </template>
        <template v-if="dialogInfo === '供应商导入'">
          <div class="step">
            <p>
              <span class="serial">1</span>导入如下单据：
            </p>
            <div class="files">
              <upload title="供应商合同"
                      placeholder="请上传供应商合同"
                      ref="contactUpload"
                      @closeEvent="(e) => closeFile(e, 'contact')"
                      @uploadEvent="(e) => upload(e, 'contact')"/>
              <upload title="供应商发票"
                      placeholder="请上传供应商发票"
                      ref="billUpload"
                      @closeEvent="(e) => closeFile(e, 'bill')"
                      @uploadEvent="(e) => upload(e, 'bill')"/>
              <upload title="供应商箱单"
                      placeholder="请上传供应商箱单"
                      ref="packagelistUpload"
                      @closeEvent="(e) => closeFile(e, 'packagelist')"
                      @uploadEvent="(e) => upload(e, 'packagelist')"/>
            </div>
          </div>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="blur" @click="saveEvent()">保 存</el-button>
        <el-button @click="closebom()">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="isDialogTitle"
      :modal="!isDialogTitle"
      @close="closeTitle()"
      width="300px">
      <div class="dialog_info">
        您确认要{{dialogInfo}}此委托单吗？
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="blur" @click="enterInfo()">确 定</el-button>
        <el-button @click="closeTitle()">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {formatDate} from "@/utils/date"
  import {WtableClass} from '@/utils/CtableClass'
  import {Page, Upload} from '@/components/common'
  import {Wtable} from "@/components/base/table"
  import { DocumentsMode } from '@/utils/mixin'
  export default {
    name: 'DocumentationView',
    fetch({store}) {
      return Promise.all([
        store.dispatch('loadSeverSheetInfo', {count: 10, page: 1})
      ])
    },
    components: {
      Page,
      Upload,
      Wtable
    },
    mixins: [DocumentsMode],
    methods: {
      guanwurenzhen() {
        let id = []
        if (this.selectedArr.length === 0) {
          this.$message.error('请勾选需要进行验证的行数')
          return false;
        }
        for (let i = 0; i < this.selectedArr.length; i++) {
          id.push(this.selectedArr[i].id)
        }
        id = id.join('-')
        this.$http.get(`/CommissionSheet/customerhouseValid/ids?ids=${id}`).then(res => {
          if (res.data.success === false) {
            this.$message.error(res.data.message)
          } else {
            this.$router.push(`/severPage/trustee?id=${id}`)
          }
        }, err => {
          this.$message.error(err.response.data)
        })
      }
    }
  }
</script>
