<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      class="demo-ruleForm"
      ref="queryForm"
      :rules="rules"
      size="small"
      :inline="true"
    >
<!--      <el-form-item label="所属时期起止"  prop="Mont">-->
<!--        <el-date-picker-->
<!--          v-model="queryParams.Mont"-->
<!--          @change="Mont"-->
<!--          type="daterange"-->
<!--          value-format="yyyy-MM-dd"-->
<!--          range-separator="至"-->
<!--          start-placeholder="开始日期"-->
<!--          end-placeholder="结束日期">-->
<!--        </el-date-picker>-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="handleSech" :disabled="!queryParams.Mont">①生成《印花税税基表》</el-button>-->
<!--        <el-button type="primary" @click="hand" :disabled="!queryParams.Mont">②生成《印花税计算表》</el-button>-->
<!--      </el-form-item>-->

      <el-form-item label="所属时期起止"  prop="Mont">
        <el-date-picker
          disabled
          v-model="queryParams.Mont"
          @change="Mont"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="hand" >生成《印花税计算表》</el-button>
      </el-form-item>
    </el-form>
<!--    <div style="display: flex;margin-bottom: 10px">-->
<!--      <el-button type="primary" @click="hand" :disabled="!queryParams.Mont">②生成《印花税计算表》</el-button>-->
<!--      &lt;!&ndash;      <el-upload&ndash;&gt;-->
<!--      &lt;!&ndash;        style="margin-left:10px"&ndash;&gt;-->
<!--      &lt;!&ndash;        class="upload-demo"&ndash;&gt;-->
<!--      &lt;!&ndash;        action="#"&ndash;&gt;-->
<!--      &lt;!&ndash;        multiple&ndash;&gt;-->
<!--      &lt;!&ndash;        :show-file-list="false"&ndash;&gt;-->
<!--      &lt;!&ndash;        :on-change="onChange"&ndash;&gt;-->
<!--      &lt;!&ndash;        :auto-upload="false"&ndash;&gt;-->
<!--      &lt;!&ndash;      >&ndash;&gt;-->
<!--      &lt;!&ndash;        <el-button size="small" type="primary">导入数据</el-button>&ndash;&gt;-->
<!--      &lt;!&ndash;      </el-upload>&ndash;&gt;-->
<!--    </div>-->
    <!--    <el-row :gutter="10" class="mb8">-->
    <!--    </el-row>-->
    <div class="table">
      <el-table
        v-loading="loading"
        border
        :data="deptList"
        height="55vh"
        row-key="deptId"
      >
        <el-table-column
          type="index"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="taxName"
          align="center"
          min-width="200px"
          label="税目"
        >
        </el-table-column>
        <el-table-column
          prop="contractNum"
          align="center"
          min-width="100px"
          label="合同取数"
        >
        </el-table-column>
        <el-table-column
          prop="invoiceNum"
          align="center"
          min-width="100px"
          label="发票取数"
        >
        </el-table-column>
        <el-table-column
          prop="totalNum"
          align="center"
          min-width="100px"
          label="计税金额合计"
        >
        </el-table-column>
      </el-table>
      <!--      <el-pagination-->
      <!--        style="display: flex;justify-content: flex-end ;margin: 15px 0px 0px 0px"-->
      <!--        @size-change="handleSizeChange"-->
      <!--        @current-change="handleCurrentChange"-->
      <!--        :current-page="pageNo"-->
      <!--        :page-sizes="[10, 20, 30, 40]"-->
      <!--        :page-size="pageSize"-->
      <!--        layout="total, sizes, prev, pager, next, jumper"-->
      <!--        :total="total" />-->
    </div>
    <el-dialog
      title="印花税计算表"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <div style="margin-bottom: 10px">
        <span>纳税人名称:</span>
        <el-input v-if="queryParams.taxPayer" v-model="queryParams.taxPayer" disabled  placeholder="请输入纳税人名称" style="width: 363px"></el-input>
        <el-input v-else v-model="queryParams.taxPayer"  placeholder="请输入纳税人名称" style="width: 363px"></el-input>
      </div>
      <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>-->
        <span>金额:{{totalTaxNum}} 元</span>
      </div>
      <el-table
        :data="tableData"
        border
        height="50vh"
        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 type="primary" @click="stampTaxComputeSave()">保 存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  adsMatHyxtStampTaxContractDL, adsMatHyxtStampTaxInvoiceDelc,
  contractImport, deleteadsMatHyxtStampTaxContractD,
  downloadTemplateD, downloadTemplateM,
  invoiceDqueryPagee, invoiceImportP,
  queryList, queryPageNo, stampTaxBase, stampTaxComputeBill, stampTaxComputeBillExport, stampTaxComputeSave
} from '@/api/utils'
import  moment from 'moment'

export default {
  components:{
  },
  data() {
    return {
      tableData:[],
      dialogVisible:false,
      deptList:[],
      options:[],
      queryParams:{
        startDate:'',
        endDate:'',
        Mont:null,
        taxPayer:'',
      },
      rules:{
        Mont: [
          { type: 'array', required: true, message: '请选择起止日期', trigger: 'change' }
        ],},
      // 遮罩层
      loading: false,
      pageNo:1,
      pageSize:10,
      total:0,
      ruleForm:{},
      num:0,
      totalTaxNum: 0,
    };
  },
  created() {
    this.getTableList();
  },
  computed:{
    jeefa(){
      if(this.tableData.length>0){
        let num=0
        this.tableData.forEach((item,index)=>{
          num=Number(item.taxNum)+num
        })
        this.num=num
        return num
      }else {
        this.num=0
        return 0
      }
    },
  },
  methods: {
    download(){
      let data={
        taxPayer:this.queryParams.taxPayer,
        startDate:this.queryParams.Mont[0],
        endDate:this.queryParams.Mont[1],
        amount:this.totalTaxNum,
        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();
      })
    },
    Mont(val){
      console.log(val,'-')
      if (!val) {
        // 当清空日期时，不更新pickedDate，保持原值
        return;
      }
      this.queryParams.Mont=val
    },
    hand(){
      // if(this.queryParams.Mont.length===0){
      //   return this.$message.info('请选择起止日期')
      // }
      this.queryParams.taxPayer=this.$store.state.user.orgName || ''
      this.dialogVisible=true
      this.getStampTaxComputeBill()
    },
    getStampTaxComputeBill(){
      if(this.queryParams.Mont.length>0){
        this.queryParams.startDate=this.queryParams.Mont[0]
        this.queryParams.endDate=this.queryParams.Mont[1]
      }else {
        this.queryParams.startDate=''
        this.queryParams.endDate=''
      }
      stampTaxComputeBill(this.queryParams).then(res=>{
        this.tableData = res.data.list || [];
        this.totalTaxNum = res.data.totalTaxNum
      })
    },
    handleSech(){
      // this.pageNo=1
      // this.$refs['queryForm'].validate((valid) => {
      //   if (valid) {
      //     this.getList()
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
      this.getTableList();
    },
    moment,
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      if(this.queryParams.Mont.length>0){
        this.queryParams.startDate=this.queryParams.Mont[0]
        this.queryParams.endDate=this.queryParams.Mont[1]
      }else {
        this.queryParams.startDate=''
        this.queryParams.endDate=''
      }
      let data={
        ...this.queryParams
      }
      stampTaxBase(data).then((response) => {
        if(response && response.data){
          this.loading = false;
          this.deptList = response.data;
        }else {
          this.deptList =[]
          this.loading = false;
          this.total=0
        }
      });
    },
    getTableList() {
      stampTaxBase({}).then((response) => {
        if(response && response.data){
          this.loading = false;
          this.deptList = response.data.list;
          this.queryParams.Mont=response.data.Mont
          if(response.data.Mont.length>0){
            this.queryParams.startDate=response.data.Mont[0]
            this.queryParams.endDate=response.data.Mont[1]
          }
        }else {
          this.deptList =[]
          this.loading = false;
          this.total=0
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNo=val
      this.getList()
    },
    /** 印花税计算单表保存 */
    stampTaxComputeSave() {
      if(!this.queryParams.taxPayer){
        return this.$message.warning('请填写纳税人名称')
      }
      console.log('印花税计算单表保存。。。。')
      let data={
        taxPayer:this.queryParams.taxPayer,
        startDate:this.queryParams.startDate,
        endDate:this.queryParams.endDate,
        amount:this.totalTaxNum,
        itemList:this.tableData,
      }
      stampTaxComputeSave(data).then(res=>{
        if(res.code===200){
          this.$message.success('提交成功')
          this.getList()
          this.dialogVisible=false
        }else {
          this.$message.error(res.msg || '提交失败')
        }

      })
    }
  },
};
</script>
<style lang="scss" scoped>
</style>
