<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      class="demo-ruleForm"
      ref="queryForm"
      :rules="rules"
      size="small"
      :inline="true"
    >
      <el-form-item label="单位">
        <el-select
          v-model="selectVal"
          placeholder="请选择..."
          @clear="delValue"
          clearable
          ref="select"
          style="width: 300px"
        >
          <el-option hidden key="id" :value="selectVal" :label="selectName"></el-option>
          <el-tree
            :data="options"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :expand-on-click-node="false"
            :check-on-click-node="true"
            ref="tree"
            node-key="id"
            :default-expand-all="true"
            :filter-node-method="filterNode"
          >
            <span slot-scope="{ data }">
            <span>{{ data.deptName }}</span>
          <el-tag
            size="mini"
            style="margin: 0 10px"
            v-show="filterorgType(data.tag)"
          >{{ filterorgType(data.tag) }}</el-tag
          >
        </span>
          </el-tree>
        </el-select>
      </el-form-item>
      <el-form-item label="凭证编号">
        <el-input v-model="pzbh"></el-input>
      </el-form-item>
      <el-form-item>
         <el-button type="primary" @click="handSech">查询</el-button>
      </el-form-item>
      </el-form>

    <div class="table">
      <el-button   style="margin-bottom:10px" type="success" size="small" @click="downloadExport">导出</el-button>
      <el-table
        border
        v-loading="loading"
        :data="deptList"
        height="55vh"
        row-key="deptId"
      >
        <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-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%"
    >

    </el-dialog>
  </div>
</template>

<script>
import {
  adsMatHyxtStampTaxComputeVoucherD,
  adsMatHyxtStampTaxContractDL,
  adsMatHyxtStampTaxInvoiceDelc,
  contractImport, dataExportTaxInvoiceD,
  deleteadsMatHyxtStampTaxContractD,
  downloadTemplateD,
  downloadTemplateM,
  invoiceDqueryPagee,
  invoiceImportP,
  queryList,
  queryPageadsMatHyxtStampTaxComputeVoucherD,
  queryPageNo,
  stampTaxBase,
  stampTaxComputeBill,
  stampTaxComputeSave,
  voucherList
} from '@/api/utils'
import  moment from 'moment'
import {listDept} from "@/api/system/dept";

export default {
  components:{
  },
  data() {
    return {
      pzbh:'',
      tableData:[],
      dialogVisible:false,
      deptList:[],
      options:[],
      queryParams:{

      },
      selectVal:'',
      selectName:'',
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 标签数组
      tagList: [

      ],
      rules:{
        Mont: [
          { type: 'array', required: true, message: '请选择起止日期', trigger: 'change' }
        ],},
      // 遮罩层
      loading: false,
      pageNo:1,
      pageSize:10,
      total:0,
      ruleForm:{},
      num:0,
    };
  },
  created() {
    this.getList()
    this.getListM()
  },
  computed:{

  },
  watch: {
    // 搜索过滤，监听input搜索框绑定的treeFilter
    treeFilter(val) {
      this.$refs.tree.filter(val);
      // 当搜索框键入值改变时，将该值作为入参执行树形控件的过滤事件filterNode
    },
  },
  methods: {
    downloadExport(){
      let data={
        pzbh:this.pzbh,
        dwOrg:this.selectVal,
      }
      adsMatHyxtStampTaxComputeVoucherD(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();
      })
    },
    handSech(){
      this.pageNo=1
      this.getList()
    },
    getListM() {
      listDept().then((response) => {
        this.options = this.handleTree(response.data, "deptId");
      });
    },
    delValue() {
      this.selectVal = ''
      this.selectName = '';
    },
    // 结构树点击事件
    handleNodeClick(data) {
      console.log(data,'----')
      this.selectVal = data.deptId; // select绑定值为点击的选项的value
      this.selectName = data.deptName; // input中显示值为label
      this.treeFilter = ""; // 点击后搜索框清空
      this.$refs.select.blur(); // 点击后关闭下拉框，因为点击树形控件后select不会自动折叠
    },
    // 模糊查询（搜索过滤），实质为筛选出树形控件中符合输入条件的选项，过滤掉其他选项
    filterNode(value, data) {
      if (!value) return true;
      let filterRes = data.label.indexOf(value) !== -1;
      return filterRes;
    },
    // 选项卡标签（可忽略，增值迭代需求）
    filterorgType(val) {
      let arr = this.tagList.filter((item) => {
        return item.value == val;
      });
      return arr.length ? arr[0].label : "";
    },
    handleSech(){
      this.pageNo=1
      this.getList()
    },
    moment,
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      let data={
        pzbh:this.pzbh,
        dwOrg:this.selectVal,
        pageNo:this.pageNo,
        pageSize:this.pageSize
      }
      queryPageadsMatHyxtStampTaxComputeVoucherD(data).then((response) => {
        if(response && response.data){
          this.loading = false;
          this.deptList = response.data.records;
          this.total=response.data.total
        }else {
          this.deptList =[]
          this.loading = false;
          this.total=0
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize=val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNo=val
      this.getList()
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
