<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-12-28 09:33:40
-->
<template>
  <div class='sfxx'>
    <div class="sfxx-left">
      <div class="slxx_title title-block">
        基本信息
        <div class="triangle"></div>
      </div>
      <ul>
        <li>
          <p>业务号</p>
          <p>{{detail.ywh}}</p>
        </li>
        <li>
          <p>申请登记类型</p>
          <p>{{detail.sqdjlx}}</p>
        </li>
        <li>
          <p>联系人</p>
          <p>{{detail.lxr}}</p>
        </li>
        <li>
          <p>联系人电话</p>
          <p>{{detail.lxdh}}</p>
        </li>
        <li>
          <p>缴费人</p>
          <p><el-input v-model="detail.jfr"></el-input></p>
        </li>
        <li>
          <p>缴费单号</p>
          <p><el-input v-model="detail.jfdh"></el-input></p>
        </li>
        <li>
          <p>应收金额</p>
          <p style="color:red">{{detail.ysje}}元</p>
        </li>
        <li>
          <p>实收金额</p>
          <p><el-input v-model="detail.ssje"></el-input></p>
        </li>
        <li>
          <p>备注</p>
          <p><el-input v-model="detail.bz"></el-input></p>
        </li>
      </ul>
    </div>
    <div class="sfxx-right">
      <div class="slxx_title title-block">
        收费明细
        <!-- <div class="triangle"></div> -->
        <el-button type="primary" @click="hanldeAdd" style="float:right;margin-top:-5px">增加</el-button>
      </div>
      <el-table :data="tableData.data" border :height="355">
        <el-table-column v-for="item in tableData.columns" :key="item.index" :prop="item.prop" :label="item.label" align="center">
        </el-table-column>
        <el-table-column label="操作" width="50">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="slxx_title title-block">
        票据
        <div style="height:250px">
          <img src="../../../image/pj.jpg" alt="" style="height:100%">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from "vuex";
  import { getSfmxList, deleteSfmx } from "@/api/sfxx.js";
  export default {
    components: {},
    data () {
      return {
        detail: {
          ywh: '',
          sqdjlx: '',
          lxr: '',
          lxdh: '',
          jfr: '',
          jfdh: '',
          ysje: '',
          ssje: '',
          bz: ''
        },
        tableData: {
          columns: [
            {
              prop: "sfdw",
              label: "收费单位",
            },
            {
              label: '是否额外收费',
              align: 'center',
              render: (h, scope) => {
                return (
                  <div>
                    {scope.row.sfewsf == '1' ? <span>是</span> : <span>否</span>}
                  </div>
                )
              }
            },
            {
              prop: "sfry",
              label: "收费人员",
            },
            {
              prop: "sjffr",
              label: "实际付费人",
            },
            {
              prop: "ssje",
              label: "实收金额",
            },
            {
              prop: "ysje",
              label: "应收金额",
            }
          ],
          data: []
        }
      }
    },
    computed: {
      ...mapGetters(["workFresh"]),
    },
    watch: {
      workFresh: {
        handler (newVal, oldVal) {
          if (newVal) this.getList();
        },
      },
    },
    mounted () {
      this.getList()
    },
    methods: {
      getList () {
        getSfmxList(this.$route.query.bsmBusiness).then(res => {
          this.tableData.data = res.result
        })
      },
      hanldeAdd () {
        this.$popupDialog('新增', 'workflow/components/dialog/xzsf', { bsmBusiness: this.$route.query.bsmBusiness }, '50%', true)
      },
      handleDelete (row) {
        let that = this
        this.$confirm('此操作将永久删除该 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSfmx(row.bsmSf).then(res => {
            if (res.code == 200) {
              that.$message({
                message: '删除成功！',
                type: 'success'
              })
              that.getList()
            } else {
              that.$message({
                type: 'info',
                message: res.message
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

      }
    }
  }
</script>
<style scoped lang='scss'>
  @import "~@/styles/public.scss";
  .sfxx {
    display: flex;
    padding: 10px;
    height: 100%;
    box-sizing: border-box;
    &-left {
      width: 50%;
      margin-right: 10px;
      ul {
        border-radius: 3px;
      }
      li:last-child {
        border-bottom: 1px solid #e8e5e5;
      }
      li {
        display: flex;
        border: 1px solid #e8e5e5;
        border-bottom: none;

        p:nth-child(1) {
          width: 35%;
          text-align: center;
          background-color: #fafafa;
          border-right: 1px solid #e8e5e5;
          padding: 10px 0;
        }
        p:nth-child(2) {
          width: 65%;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          margin: 0 10px;
        }
      }
    }
    &-right {
      width: 50%;
      margin-left: 10px;
    }
  }
</style>