<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-10-23 14:08:31
-->
<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>
      </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">使用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  export default {
    components: {},
    data () {
      return {
        detail: {
          ywh: '',
          sqdjlx: '',
          lxr: '',
          lxdh: '',
          jfr: '',
          jfdh: '',
          ysje: '',
          ssje: '',
          bz: ''
        },
        tableData: {
          columns: [
            {
              prop: "sfxmmc",
              label: "收费项目名称",
            },
            {
              prop: "sl",
              label: "数县",
            },
            {
              prop: "je",
              label: "金额(元)",
            },
            {
              label: '操作',
              align: 'center',
              render: (h, scope) => {
                return (
                  <div>
                    <el-button type="text" icon="el-icon-edit-outline" onClick={() => { }}></el-button>
                  </div>
                )
              }
            }
          ],
          data: []
        }
      }
    }
  }
</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>