<template>
  <div class="app-container">
        <el-row :gutter="10" class="mb8" style="display: flex;align-items: center;margin-left: 2px">
          <span style="font-size: 14px">纳税人名称:</span>
          <el-input size="small" v-model="taxPayer" style="width: 10%"></el-input>
          <el-button type="primary" size="small" style="margin-left: 10px" @click="handleSeach">查询</el-button>
        </el-row>
    <div class="table" >
      <el-table
        v-loading="loading"
        :data="deptList"
        height="60vh"
      >
        <el-table-column
          type="index"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          min-width="200px"
          label="纳税人名称"
          align="center"
          prop="taxPayer"
        >
        </el-table-column>
        <el-table-column
          prop="startDate"
          align="center"
          min-width="100px"
          label="所属开始日期"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="endDate"
          label="所属结束日期"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="amount"
          label="金额(元)"
        >
        </el-table-column>
        <el-table-column
          align="center"
          min-width="100px"
          prop="auditStatus"
          label="审核状态"
          :formatter="formatter"
        >
<!--          <template slot-scope="scope">-->
<!--            <span>{{()=>fiter(scope.row.auditStatus)}}</span>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          min-width="100px"
          label="计算单状态"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status===0">正常</span>
            <span v-else>作废</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          min-width="150px"
          prop="createTime"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          min-width="500px"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="chak(scope.row)">查看</el-button>
            <el-button type="primary" size="small" @click="chakpz(scope.row)">查看凭证</el-button>
            <el-button type="success"  size="small"
            v-if="(scope.row.auditStatus===1 && $store.state.user.name===scope.row.auditUser) ||(scope.row.auditStatus===1 && $store.state.user.name==='admin')"
             @click="aduit(scope.row,2)">审 核</el-button>
<!--            :disabled="(scope.row.auditStatus===2 ||-->
<!--            scope.row.auditStatus===-1 ||-->
<!--            ($store.state.user.name!==scope.row.auditUser)) &&-->
<!--            ($store.state.user.name!=='admin' ||-->
<!--            scope.row.auditStatus===-1 ||-->
<!--            scope.row.auditStatus===2 || scope.row.auditStatus===0)"-->
            <el-button type="success" :disabled="scope.row.auditStatus===1 || scope.row.auditStatus===2" size="small" @click="chak1(scope.row)">提交审核</el-button>
            <el-button type="danger"  :disabled="scope.row.auditStatus===2 || scope.row.auditStatus===-1 || scope.row.auditStatus===0" size="small" @click="sub(scope.row)">撤回</el-button>
            <el-button type="primary" :disabled="scope.row.status===1" size="small" @click="zuof(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="margin-bottom: 10px;display: flex;justify-content: space-between">-->
<!--        <div>-->
<!--          <span>所属起止日期:</span>-->
<!--          <span> <el-date-picker-->
<!--            v-model="queryParams.Mont"-->
<!--            @change="Mont"-->
<!--            disabled-->
<!--            size="small"-->
<!--            type="daterange"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期">-->
<!--        </el-date-picker></span>-->
<!--        </div>-->
<!--        <span>金额:{{jeefa.toFixed(2)+'元'}}</span>-->
<!--      </div>-->
      <el-table
        :data="tableData"
        border
        height="60vh"
        row-key="deptId"
      >
        <el-table-column
          type="index"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="taxName"
          align="center"
          min-width="180px"
          label="税目名称"
        >
        </el-table-column>
        <el-table-column
          prop="totalNum"
          align="center"
          min-width="100px"
          label="计税金额"
        >
        </el-table-column>
        <el-table-column
          prop="taxRate"
          align="center"
          min-width="100px"
          label="税率(‰)"
        >
        </el-table-column>
        <el-table-column
          prop="taxName"
          align="center"
          min-width="180px"
          label="税项"
        >
        </el-table-column>
        <el-table-column
          prop="taxNum"
          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>
    <el-dialog
      title="审核"
      :visible.sync="Visible"
      width="55%"
      height="300px"
    >
      <div class="table">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="demo-ruleForm" >
          <el-row :gutter="26">
            <el-col :span="6">
              <el-form-item label="财务主管" prop="auditUser" >
                <el-select v-model="ruleForm.auditUser" filterable placeholder="请选择" style="width: 200px">
                  <el-option
                    v-for="item in list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <div style="display:flex;justify-content: center">
          <el-button type="primary" @click="submitForm('ruleForm')" >提交审核</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="记账凭证"
      :visible.sync="visable"
      width="80%"
    >
      <el-table
        :data="tableData2"
        height="60vh"
      >
      <el-table-column align="center" min-width="70px" type="index" label="序号"></el-table-column>
      <el-table-column align="center" min-width="180px" prop="dw" label="单位"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="kjzq" label="会计账期"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="zzrq" label="制证日期"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="ywrq" label="业务日期"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="pzbh" label="凭证编号"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="jtbh" label="集团编号"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="pzsqbh" label="凭证申请编号"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="djsqbh" label="单据申请编号"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="zzy" label="总摘要"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="flzy" label="分录摘要"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="kmbm" label="科目编码"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="kmmc" label="科目名称"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="gldx" label="管理对象"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="zfbz" label="主辅标志"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="jfje" label="借方金额"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="dfje" label="贷方金额"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="jfsl" label="借方数量"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="dfsl" label="贷方数量"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="tzq" label="调整期"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="zzr" label="制证人"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="cx" label="冲销"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="jzzt" label="记账状态"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="zhclrq" label="最后处理日期"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="bwbbz" label="本位币币种"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="wbbz" label="外币币种"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="dzbz" label="对账标志"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="sfdx" label="是否抵销"></el-table-column>
      <el-table-column align="center" min-width="300px" prop="fzwd" label="辅助维度"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="fzjfje" label="辅助借方金额"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="fzdfje" label="辅助贷方金额"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="fzjfsl" label="辅助借方数量"></el-table-column>
      <el-table-column align="center" min-width="100px" prop="fzdfsl" label="辅助贷方数量"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="审核"
      :visible.sync="visl"
      width="80%"
    >
      <!--      <div style="margin-bottom: 10px;display: flex;justify-content: space-between">-->
      <!--        <div>-->
      <!--          <span>所属起止日期:</span>-->
      <!--          <span> <el-date-picker-->
      <!--            v-model="queryParams.Mont"-->
      <!--            @change="Mont"-->
      <!--            disabled-->
      <!--            size="small"-->
      <!--            type="daterange"-->
      <!--            value-format="yyyy-MM-dd"-->
      <!--            range-separator="至"-->
      <!--            start-placeholder="开始日期"-->
      <!--            end-placeholder="结束日期">-->
      <!--        </el-date-picker></span>-->
      <!--        </div>-->
      <!--        <span>金额:{{jeefa.toFixed(2)+'元'}}</span>-->
      <!--      </div>-->
      <el-table
        :data="tableData3"
        border
        height="60vh"
        row-key="deptId"
      >
        <el-table-column
          type="index"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="taxName"
          align="center"
          min-width="180px"
          label="税目名称"
        >
        </el-table-column>
        <el-table-column
          prop="totalNum"
          align="center"
          min-width="100px"
          label="计税金额"
        >
        </el-table-column>
        <el-table-column
          prop="taxRate"
          align="center"
          min-width="100px"
          label="税率(‰)"
        >
        </el-table-column>
        <el-table-column
          prop="taxName"
          align="center"
          min-width="180px"
          label="税项"
        >
        </el-table-column>
        <el-table-column
          prop="taxNum"
          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 @click="visl = false">取 消</el-button>
          <el-button type="success"  @click="aduits(2)">审 核</el-button>
          <el-button type="danger"  @click="aduitp(-1)">驳 回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  adsMatHyxtStampTaxContractDL, adsMatHyxtStampTaxInvoiceDelc, commitAuditM,
  contractImport, deleteadsMatHyxtStampTaxContractD,
  downloadTemplateD, downloadTemplateM, getDetail, getUserList, voucherList,
  invoiceDqueryPagee, invoiceImportP,
  queryList, queryPageM, queryPageNo, recall, audit, stampTaxComputeBillExport, adsMatHyxtStampTaxComputeDchange
} 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:[],
      Visible:false,
      dialogVisible:false,
      deptList:[],
      tableData:[],
      options:[],
      queryParams:{
        invoiceCode:'',
        invoiceNumber:'',
        sellerName:'',
      },
      // 遮罩层
      loading: false,
      pageNo:1,
      pageSize:10,
      total:0,
      ruleForm:{
        auditUser:'',
      },
      spanArr:[],
      pos:0,
      tableData3:[],
      row:{},
    };
  },
  created() {
    this.getList();
    this.getUser()
  },
  computed:{

  },
  methods: {
    zuof(row){
      this.$confirm('是否作废此计算单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adsMatHyxtStampTaxComputeDchange({id:row.id}).then(res=>{
          if(res.code === 200) {
            this.$message.success('当前计算单已作废')
            this.getList()
          }else {
            this.$message.error(res.msg || '当前计算单作废失败')
          }
        })
      })
    },
    download(){
      let data={
        ...this.row,
        itemList:this.tableData
      }
      stampTaxComputeBillExport(data).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();
      })
    },
    aduitp(val){
      let data={
        id:this.row.id,
        auditState:val
      }
      this.$confirm('是否驳回?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        recall(data).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '驳回成功!'
            });
            this.getList()
            this.visl=false
          } else {
            this.$message({
              type: 'error',
              message: '驳回失败，请重试!'
            });
          }
        })
      })
    },
    aduits(val){
      let data={
        id:this.row.id,
        auditState:val
      }
      audit(data).then(res=>{
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
          this.getList()
          this.visl=false
        }
      })
    },
    aduit(row,val){
      this.row=row
      this.visl=true
      this.getLmui(row)
    },
    getLmui(row){
      getDetail(row).then(res=>{
        this.tableData3=res.data || []
      })
    },
    chakpz(row){
      this.visable=true
      voucherList(row).then(res=>{
        this.tableData2=res.data || []
      })
    },
    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)
    },
    chak1(row){
      this.Visible=true
      this.ruleForm.auditUser=''
      this.row=row
    },
    getMl(val){
      getDetail(val).then(res=>{
         this.tableData=res.data || []
      })
    },
    // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    //   if (columnIndex === 1) {
    //     /*
    //     将需要合并的行数赋值给 _row，注意这里由上一个方法的输出可以知道，这里的值可以是 3或者0
    //     当为 3 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格向下合并 _row 格
    //     当为 0 时，表示将当下的第 rowIndex+1 行与第 columnIndex+1 列所指向的单元格隐藏
    //     */
    //     const _row = this.spanArr[rowIndex];
    //     const _col = _row > 0 ? 1 : 0;
    //     return {
    //       rowspan: _row,
    //       colspan: _col
    //     }
    //   }else {
    //     // return {
    //     //   rowspan: 0,
    //     //   colspan: 0
    //     // }
    //   }
    // },
    getSpanArr(data) {
      for (let i = 0; i < data.length; i++) {
        // 如果是第一个数据，就将列表spanArr添加一个1，表示暂时只有一个名字相同的、且将索引pos赋值为0
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].groupName === data[i - 1].groupName) {
            // 如果相同就将索引为 pos 的值加一
            this.spanArr[this.pos] += 1;
            // 且将数组添加 0
            this.spanArr.push(0);
          } else {
            // 如果元素不同了，就可以通过索引为 pos 的值知晓应该需要合并的行数
            // 同时，我们再次添加一个值1，表示重新开始判断重复姓名的次数
            this.spanArr.push(1);
            // 同时 索引加一
            this.pos = i;
          }
        }
      }
    },
    headerStyle({ row, column,rowIndex,columnIndex}) {
      if (rowIndex === 1) {
        //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
        return {display: 'none'}

      }
      return "background:#f5f7fa"

    },
    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,
        taxPayer:this.taxPayer
      }
      queryPageM(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>
