<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
          align="center"
          min-width="100px"
          prop="createTime"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          min-width="180px"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="chak(scope.row)">查看</el-button>
            <el-button type="success" size="small" @click="chak(scope.row,2)">审核</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 @click="dialogVisible = false">取 消</el-button>
          <el-button type="success" v-if="row.num" @click="aduit(2)">审 核</el-button>
          <el-button type="danger" v-if="row.num" @click="aduitp(-1)">驳 回</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="100px" 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>
  </div>
</template>

<script>
import {
  adsMatHyxtStampTaxContractDL, adsMatHyxtStampTaxInvoiceDelc, audit, commitAuditM,
  contractImport, deleteadsMatHyxtStampTaxContractD,
  downloadTemplateD, downloadTemplateM, getDetail, getUserList,
  invoiceDqueryPagee, invoiceImportP,
  queryList, queryPageM, queryPageNo, recall
} from '@/api/utils'
import  moment from 'moment'

export default {
  components:{
  },
  data() {
    return {
      rules: {
        auditUser: [
          {required: true, message: '请输入纳税人', trigger: 'blur'},
        ],
      },
      pages:{
        pages:0,
        pageNo:1,
        pageSize:10,
      },
      taxPayer:'',
      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,
      row:{},
    };
  },
  created() {
    this.getList();
    this.getUser()
  },
  computed:{

  },
  methods: {
    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.dialogVisible=false
          } else {
            this.$message({
              type: 'error',
              message: '驳回失败，请重试!'
            });
          }
        })
      })
    },
    aduit(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.dialogVisible=false
        }
      })
    },
    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,num){
      this.row=val
      this.row.num=num
      this.dialogVisible=true
      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,
        isAuditPage:1,
      }
      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>
