<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8" style="display: flex;align-items: center;margin-left: 2px">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
      >
        <el-form-item label="发票类型" >
          <el-input
            v-model="queryParams.invoiceType"
            placeholder=""
            clearable
          />
        </el-form-item>
        <el-form-item label="发票状态" >
          <el-input
            v-model="queryParams.invoiceStatus"
            placeholder=""
            clearable
          />
        </el-form-item>
        <el-form-item label="发票代码" >
          <el-input
            v-model="queryParams.invoiceCode"
            placeholder=""
            clearable
          />
        </el-form-item>
        <el-form-item label="发票号码" >
          <el-input
            v-model="queryParams.invoiceNumber"
            placeholder=""
            clearable
          />
        </el-form-item>
        <el-form-item label="销方名称" >
          <el-input
            v-model="queryParams.sellerName"
            placeholder=""
            clearable
          />
        </el-form-item>
        <el-form-item label="凭证编号" >
          <el-input
            v-model="queryParams.voucherNo"
            placeholder=""
            clearable
          />
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleSeach"
          >搜索</el-button>
        </el-form-item>
      </el-form>
<!--      <el-button type="primary" size="small" style="margin-left: 10px" @click="handleSeach">查询</el-button>-->
    </el-row>
    <div class="table" >
     <div style="display:flex;">
       <el-button type="text" @click="download">下载导入模板</el-button>
       <el-upload
         style="margin-left:10px"
         class="upload-demo"
         action="#"
         multiple
         :show-file-list="false"
         :on-change="onChange"
         :auto-upload="false"
       >
         <el-button size="small" type="primary">导入数据</el-button>
       </el-upload>
       <el-button   style="margin-left:10px;height: 32px" :disabled="multipleSelection.length===0" type="danger" size="mini" @click="delectp">批量删除</el-button>
     </div>
      <el-table
        border
        class="tt"
        v-loading="loading"
        :data="deptList"
        height="60vh"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          min-width="100px"
          label="发票类型"
          align="center"
          prop="invoiceType"
        >
        </el-table-column>
        <el-table-column
          prop="invoiceStatus"
          align="center"
          min-width="100px"
          label="发票状态"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="invoiceCode"
          label="发票代码"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="invoiceNumber"
          label="发票号码"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="makeDate"
          label="开票日期"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="totalAmt"
          label="合计金额"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="invoiceTaxAmt"
          label="发票税额"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="entryTaxAmt"
          label="入账税额"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="amtTaxTotal"
          label="价税合计"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="sellerName"
          label="销方名称"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="handleDept"
          label="经办部门"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="businessStatus"
          label="业务状态"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="orderNo"
          label="单据编号"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="voucherNo"
          label="凭证编号"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="makeVoucherDate"
          label="制证日期"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="makeVoucherUser"
          label="制证人"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="useInvoiceOrgName"
          label="用票单位"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="invoiceOwnerOrgName"
          label="发票归属单位"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          min-width="200px"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="chak(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px;display: flex;justify-content: flex-end"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.pageNo"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pages.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total">
      </el-pagination>
    </div>
    <el-dialog
      title="明细"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <div style="display:flex;">
        <el-button type="text" @click="downloadModal">下载导入模板</el-button>
        <el-upload
          style="margin-left:10px"
          class="upload-demo"
          action="#"
          multiple
          :show-file-list="false"
          :on-change="onChangeModal"
          :auto-upload="false"
        >
          <el-button size="small" type="primary">导入数据</el-button>
        </el-upload>
        <el-button   style="margin-left:10px;height: 32px" :disabled="multipleSelectionModal.length===0" type="danger" size="mini" @click="delectpModal">批量删除</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        height="50vh"
        @selection-change="handleSelectionChangeModal"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="zy"
          align="center"
          min-width="180px"
          label="摘要"
        >
        </el-table-column>
        <el-table-column
          prop="km"
          align="center"
          min-width="100px"
          label="科目"
        >
        </el-table-column>
        <el-table-column
          prop="dx"
          align="center"
          min-width="100px"
          label="对象"
        >
        </el-table-column>
        <el-table-column
          prop="ywrq"
          align="center"
          min-width="180px"
          label="业务日期"
        >
        </el-table-column>
        <el-table-column
          prop="jfje"
          align="center"
          min-width="100px"
          label="借方金额"
        >
        </el-table-column>
        <el-table-column
          prop="dfje"
          align="center"
          min-width="100px"
          label="贷方金额"
        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center">
<!--         <el-button type="primary" @click="download">导 出</el-button>-->
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  adsMatHyxtStampTaxInvoiceDelc,
  commitAuditM,
  getDetail,
  getUserList,
  voucherList,
  recall,
  audit,
  adsMatHyxtStampTaxZhptInvoiceD,
  downloadTemplateInvoiceD,
  contractImport,
  adsMatHyxtStampTaxZhptInvoiceDimportData,
  adsMatHyxtStampTaxContractDbatchDelete,
  adsMatHyxtStampTaxZhptInvoiceDbatchDelete,
  adsMatHyxtStampTaxZhptInvoiceDlis,
  adsMatHyxtStampTaxZhptInvoiceDdownloadTemplate,
  adsMatHyxtStampTaxbatchDelete,
  adsMatHyxtStampTaxZhptInvoiceDDimportData
} from '@/api/utils'
import  moment from 'moment'

export default {
  components:{
  },
  data() {
    return {
      tableData2:[],
      visl:false,
      rules: {
        auditUser: [
          {required: true, message: '请输入财务主管', trigger: 'blur'},
        ],
      },
      pages:{
        pages:0,
        pageNo:1,
        pageSize:10,
      },
      taxPayer:'',
      visable:false,
      list:[],
      multipleSelectionModal:[],
      Visible:false,
      dialogVisible:false,
      deptList:[],
      tableData:[],
      options:[],
      queryParams:{
        invoiceCode:'',
        invoiceNumber:'',
        sellerName:'',
        voucherNo:'',
        invoiceType:'',
        invoiceStatus:'',
      },
      // 遮罩层
      loading: false,
      pageNo:1,
      pageSize:10,
      total:0,
      ruleForm:{
        auditUser:'',
      },
      spanArr:[],
      pos:0,
      tableData3:[],
      row:{},
      multipleSelection:[],
    };
  },
  created() {
    this.getList();
    this.getUser()
  },
  computed:{

  },
  methods: {
    delectpModal(){
      this.$confirm('是否批量删除? 请谨慎此操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids=[]
        this.multipleSelectionModal.forEach(item=>{
          ids.push(item.id)
        })
        let data={
          ids:ids
        }
        adsMatHyxtStampTaxbatchDelete(data).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getMl()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败，请重试!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    delectp(){
      this.$confirm('是否批量删除? 请谨慎此操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids=[]
        this.multipleSelection.forEach(item=>{
          ids.push(item.id)
        })
        let data={
          ids:ids
        }
        adsMatHyxtStampTaxZhptInvoiceDbatchDelete(data).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败，请重试!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSelectionChangeModal(val) {
      this.multipleSelectionModal = val;
    },

    onChange(file){
      let formData = new FormData();
      formData.append("file", file.raw);
      adsMatHyxtStampTaxZhptInvoiceDimportData(formData).then(res=>{
        if(res.code===200){
          this.$message.success('上传成功')
          this.getList()
        }else {
          this.$message.error(res.msg || '上传失败')
        }
      })
    },
    onChangeModal(file){
      let formData = new FormData();
      formData.append("file", file.raw);
      formData.append("invoiceId", this.row.id);
      adsMatHyxtStampTaxZhptInvoiceDDimportData(formData).then(res=>{
        if(res.code===200){
          this.$message.success('上传成功')
          this.getMl()
        }else {
          this.$message.error(res.msg || '上传失败')
        }
      })
    },
    download(){
      downloadTemplateInvoiceD().then(res=>{
        const blob = new Blob([res]);
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '财务平台发票.xls';
        link.click();
      })
    },
    downloadModal(){
      adsMatHyxtStampTaxZhptInvoiceDdownloadTemplate().then(res=>{
        const blob = new Blob([res]);
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = '财务平台发票明细.xls';
        link.click();
      })
    },
    sub(row){
      this.$confirm('是否撤回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        recall(row).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '撤回成功!'
            });
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: '撤回失败，请重试!'
            });
          }
        })
      })
    },
    handleSeach(){
      this.pages.pageNo=1;
      this.getList()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data={
            auditUser:this.ruleForm.auditUser,
            id:this.row.id
          }
          commitAuditM(data).then(res=>{
            if(res.code == 200){
              this.$message.success('提交成功')
              this.getList()
              this.Visible=false
            }else {
              this.$message.success(res.msg || '提交失败')
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async getUser(){
      let res= await getUserList()
      let data=[]
      res.data.forEach(item=>{
        data.push({
          label:item.userName+'_'+item.nickName,
          value:item.userName
        })
      })
      this.list=data
    },
    formatter(row){
      let data
      if(row.auditStatus==-1){
        data= '驳回'
      }
      if(row.auditStatus==0){
        data=  '未提交'
      }
      if(row.auditStatus==1){
        data=  '审核中'
      }
      if(row.auditStatus==2){
        data= '审核通过'
      }
      return data
    },
    chak(val){
      this.dialogVisible=true
      this.row=val
      this.getMl(val)
    },
    getMl(val){
      let data={
        invoiceId:this.row.id
      }
      adsMatHyxtStampTaxZhptInvoiceDlis(data).then(res=>{
        this.tableData=res.data || []
      })
    },
    delect(row){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adsMatHyxtStampTaxInvoiceDelc(row).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败，请重试!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
    moment,
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      let data={
        pageNo:this.pageNo,
        pageSize:this.pageSize,
        ...this.queryParams,
      }
      adsMatHyxtStampTaxZhptInvoiceD(data).then((response) => {
        if(response && response.data){
          this.loading = false;
          this.deptList = response.data.records;
          this.pages.total=response.data.total || 0
        }else {
          this.deptList =[]
          this.pages.total= 0
          this.loading = false;
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNo=val
      this.getList()
    },
  },
};
</script>
<style lang="scss" scoped>
//.table{
//  height: 100% !important;
//}
::v-deep .el-table{
  //height: 65vh !important;
  //overflow-y: scroll;
}
</style>
