<template>
    <div>
      <div>
        <!-- <el-button 
          type="primary" 
          plain 
          icon="Plus" 
          @click="showpop(1)">新增</el-button> -->
        <el-table 
          style="width:100%;"
          :data="yysList"
          border
          stripe
          highlight-current-row
          :max-height="total>10?'330px':'380px'"
        >
            <el-table-column label="交易编码" min-width="280" align="center" prop="tradeNo" :show-overflow-tooltip="true" />

            <el-table-column label="交易类型" min-width="80" align="center" prop="tradeNo" :show-overflow-tooltip="true">
              <template #default="scope">
                <div v-if="scope.row.tradeType == 1" style="color: #00aa00;">充值</div>
                <div v-else-if="scope.row.tradeType == 2" style="color:#191919;">支付</div>
                <div v-else-if="scope.row.tradeType == 9" style="color:#c79a11;">提现</div>
              </template>
            </el-table-column>

            <el-table-column label="交易前账户总金额(元)" min-width="160" align="left" prop="preTotalAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.preTotalAmount/100}}</div>
              </template>
            </el-table-column>
            <el-table-column label="交易前充值余额(元)" min-width="150" align="left" prop="preRechargeAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.preRechargeAmount/100}}</div>
              </template>
            </el-table-column>
            <el-table-column label="交易前赠送金额(元)" min-width="150" align="left" prop="preGiftAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.preGiftAmount/100}}</div>
              </template>
            </el-table-column>

            <el-table-column label="交易总金额(元)" min-width="140" align="left" prop="tradeTotalAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.tradeTotalAmount/100}}</div>
              </template>
            </el-table-column>

            <el-table-column label="交易充值余额(元)" min-width="140" align="left" prop="tradeRechargeAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.tradeRechargeAmount/100}}</div>
              </template>
            </el-table-column>
            <el-table-column label="交易赠送金额(元)" min-width="140" align="left" prop="tradeGiftAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.tradeGiftAmount/100}}</div>
              </template>
            </el-table-column>

            <el-table-column label="交易后总金额(元)" min-width="150" align="left" prop="afterTotalAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.afterTotalAmount/100}}</div>
              </template>
            </el-table-column>
            <el-table-column label="交易后充值余额(元)" min-width="150" align="left" prop="afterRechargeAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.afterRechargeAmount/100}}</div>
              </template>
            </el-table-column>
            <el-table-column label="交易后赠送金额(元)" min-width="150" align="left" prop="afterGiftAmount" :show-overflow-tooltip="true">
              <template #default="scope">
                <div>{{scope.row.afterGiftAmount/100}}</div>
              </template>
            </el-table-column>
            
            <!-- <el-table-column label="操作" align="center" width="150" fixed="right">
              <template #default="scope">
                <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          
      </div>
      <div v-if="total > 10" style="display: flex;padding-top: 10px;justify-content: right;">
        <el-pagination
          v-model:current-page="queryParams.pageNo"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          size="small"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="getyys"
        />
      </div>
    
      <!-- 添加或修改用户配置对话框 -->
        <el-dialog 
          v-model="openpop" 
          :title="ystit" 
          width="500px" 
          append-to-body
          :close-on-click-modal="false"
        >
        <el-form 
         ref="yysRef" 
         :model="addata" 
         :rules="rules"
         label-width="180px">
          <el-row :gutter="30">
            
            <!-- <el-col :span="12">
              <el-form-item label="结束时间" prop="timeEnd">
                <el-time-picker 
                  v-model="addata.timeEnd" 
                  placeholder="请选择结束时间" 
                  value-format="YYYY-MM-DD" 
                  style="width: 100%;" 
                />
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-form-item label="交易编码" prop="tradeNo">
                <el-input 
                  v-model="addata.tradeNo" 
                  placeholder="请输入交易编码" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="交易前账户总金额(元)" prop="preTotalAmount">
                <el-input 
                  v-model="addata.preTotalAmount" 
                  placeholder="请输入交易前账户总金额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="交易前充值余额(元)" prop="preRechargeAmount">
                <el-input 
                  v-model="addata.preRechargeAmount" 
                  placeholder="请输入交易前充值余额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="交易前赠送金额(元)" prop="preGiftAmount">
                <el-input 
                  v-model="addata.preGiftAmount" 
                  placeholder="请输入交易前赠送金额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="交易总金额(元)" prop="tradeTotalAmount">
                <el-input 
                  v-model="addata.tradeTotalAmount" 
                  placeholder="请输入交易总金额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="交易充值余额(元)" prop="tradeRechargeAmount">
                <el-input 
                  v-model="addata.tradeRechargeAmount" 
                  placeholder="请输入交易充值余额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="交易赠送金额(元)" prop="tradeGiftAmount">
                <el-input 
                  v-model="addata.tradeGiftAmount" 
                  placeholder="请输入交易赠送金额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="交易后总金额(元)" prop="afterTotalAmount">
                <el-input 
                  v-model="addata.afterTotalAmount" 
                  placeholder="请输入交易后总金额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="交易后充值余额(元)" prop="afterRechargeAmount">
                <el-input 
                  v-model="addata.afterRechargeAmount" 
                  placeholder="请输入交易后充值余额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="交易后赠送金额(元)" prop="afterGiftAmount">
                <el-input 
                  v-model="addata.afterGiftAmount" 
                  placeholder="请输入交易后赠送金额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="handleAdd">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  <script setup lang="ts" name="UserPage">
        import { 
          getmxlist, 
          addhdz,
          delhdz
        } from '@/api/order/accdetails'

        import { setNum } from '@/utils/validate'

      import { ref,reactive,watch} from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'

      const props = defineProps<{
        code:string
      }>()

      let queryParams = reactive({
        pageSize:20,	              //每页条数,示例值(10)
        pageNo:1,	                  //页数,示例值
        ownerType:'',	              //户主类型：1-个人，2-企业
        ownerId:'',	                //户主ID
        code:props.code,	          //编码
        stationCode:''	            //引入站点
      })
      
      //查询
      let yysList = ref<any>([])
      // if(props.list.length > 0){
      //   yysList.value = props.list
      // }
      let total = ref(0)
      function getyys() {
        yysList.value.splice(0)
        getmxlist(queryParams).then(rps => {
          if(rps.data){
            total.value = (rps.data as any).total
            let list = (rps.data as any).records
            yysList.value = list?list:[]
          }
        })
      }

      function handleSizeChange(val:number) {
        queryParams.pageSize = val
        getyys()
      }
      
      //新增、修改
      let type = ref(1)
      let openpop = ref(false)
      let ystit = ref('添加账户明细')
      let yysRef = ref()
      let addata = reactive({
        code:'',	                    //编码      ??
        tradeType:'1',                //交易类型  ??
        tradeNo:'',	                  //交易编码  ??
        preTotalAmount:'',	          //交易前账户总金额，分：总金额=充值金额+赠送金额
        preRechargeAmount:'',	        //交易前充值余额，分
        preGiftAmount:'',	            //交易前赠送金额，分

        tradeTotalAmount:'',	        //交易总金额，分：总金额=充值金额+赠送金额
        tradeRechargeAmount:'',	      //交易充值余额，分
        tradeGiftAmount:'',	          //交易赠送金额，分

        afterTotalAmount:'',	        //交易后总金额，分：总金额=充值金额+赠送金额
        afterRechargeAmount:'',	      //交易后充值余额，分
        afterGiftAmount:''	          //交易后赠送金额，分
      })

      const rules = ref({
        tradeNo:[
            { required: true, message: "请输入交易编码", trigger: "blur" }
        ],
        preTotalAmount:[
            { required: true, message: "请输入交易前账户总金额", trigger: "blur" }
        ],
        preRechargeAmount:[
          { required: true, message: "请输入交易前充值余额", trigger: "blur" },
        ],
        preGiftAmount:[
          { required: true, message: "请输入交易前赠送金额", trigger: "blur" },
        ],
        tradeTotalAmount:[
          { required: true, message: "请输入交易总金额", trigger: "blur" },
        ],
        tradeRechargeAmount:[
          { required: true, message: "请输入交易充值余额", trigger: "blur" },
        ],
        tradeGiftAmount:[
          { required: true, message: "请输入交易赠送金额", trigger: "blur" },
        ],
        afterTotalAmount:[
          { required: true, message: "请输入交易后总金额", trigger: "blur" },
        ],
        afterRechargeAmount:[
          { required: true, message: "请输入交易后充值余额", trigger: "blur" },
        ],
        afterGiftAmount:[
          { required: true, message: "请输入交易后赠送金额", trigger: "blur" },
        ]
      })

      watch(() => addata.preTotalAmount,v => {
        addata.preTotalAmount =  setNum(addata.preTotalAmount)
      })

      watch(() => addata.preRechargeAmount,v => {
        addata.preRechargeAmount =  setNum(addata.preRechargeAmount)
      })

      watch(() => addata.preGiftAmount,v => {
        addata.preGiftAmount =  setNum(addata.preGiftAmount)
      })



      watch(() => addata.tradeTotalAmount,v => {
        addata.tradeTotalAmount =  setNum(addata.tradeTotalAmount)
      })

      watch(() => addata.tradeRechargeAmount,v => {
        addata.tradeRechargeAmount =  setNum(addata.tradeRechargeAmount)
      })

      watch(() => addata.tradeGiftAmount,v => {
        addata.tradeGiftAmount =  setNum(addata.tradeGiftAmount)
      })

      watch(() => addata.afterTotalAmount,v => {
        addata.afterTotalAmount =  setNum(addata.afterTotalAmount)
      })


      watch(() => addata.afterRechargeAmount,v => {
        addata.afterRechargeAmount =  setNum(addata.afterRechargeAmount)
      })

      watch(() => addata.afterGiftAmount,v => {
        addata.afterGiftAmount =  setNum(addata.afterGiftAmount)
      })
        

      function showpop(num:any,row?:any){
        type.value = num
        openpop.value = true
        ystit.value = num == 1?'添加账户明细':'修改账户明细'
        yysRef.value?.resetFields()
        if(row){
          //addata.code = 	                    //??
          addata.tradeNo = row.tradeNo
          addata.preTotalAmount = row.preTotalAmount
          addata.preRechargeAmount = row.preRechargeAmount
          addata.preGiftAmount = row.preGiftAmount

          addata.tradeTotalAmount = row.tradeTotalAmount
          addata.tradeRechargeAmount = row.tradeRechargeAmount
          addata.tradeGiftAmount = row.tradeGiftAmount

          addata.afterTotalAmount = row.afterTotalAmount
          addata.afterRechargeAmount = row.afterRechargeAmount
          addata.afterGiftAmount = row.afterGiftAmount      

        }else{
          //addata.code = 	                    //??
          addata.tradeNo = ''
          addata.preTotalAmount = ''
          addata.preRechargeAmount = ''
          addata.preGiftAmount = ''

          addata.tradeTotalAmount = ''
          addata.tradeRechargeAmount = ''
          addata.tradeGiftAmount = ''

          addata.afterTotalAmount = ''
          addata.afterRechargeAmount = ''
          addata.afterGiftAmount = ''         
        }
      }
      function savehand() {
        if(type.value == 1){
            return addhdz(addata)
        }
        return addhdz(addata) //??
        
      }
      //保存
      function handleAdd() {
        yysRef.value?.validate((valid:Boolean) => {
            if (valid) {  
                addata.code = props.code
                savehand().then(() => {
                ElMessage({
                    type: 'success',
                    message: type.value == 1?'添加成功':'修改成功'
                })
                setTimeout(()=> {
                    openpop.value = false
                    getyys()
                },600)
              })
            }
        })
      }

    //取消
    function cancel() {
      openpop.value = false
    }

      //删除
    function handleDelete(row:any) {
      ElMessageBox.confirm(
        `确定删除?`,
        '温馨提示',
        {
            // confirmButtonText: '',
            // cancelButtonText: 'Cancel',
            type: 'warning',
        }
      ).then(() => {
        delhdz(row.pkId,props.code).then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getyys()
          })
      })
    }

    getyys()
  </script>
  <style scoped>
  .el-divider--horizontal{
    border-color:#5b98cd;
  }
  </style>