<template>
    <div style="padding: 20px;">
      <el-form 
        v-if="iskh"
        ref="yysRef" 
        :model="addata" 
        :rules="rules" 
        label-width="120px">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="户主类型" prop="ownerType">
                  <el-select 
                    disabled
                    v-model="addata.ownerType" 
                    placeholder="请选择类型"
                  >
                      <el-option 
                        label="个人" 
                        value="1"
                      />
                      <el-option 
                        label="企业" 
                        value="2"
                      />
                  </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
                <el-form-item label="引入站点" prop="stationCode">
                    <el-select 
                      v-model="addata.stationCode" 
                      placeholder="请选择换电站"
                    >
                        <el-option 
                          v-for="n in yunList" 
                          :label="n.name" 
                          :value="n.code"
                          @click="getlabel(n.name)" 
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item label="账户总金额(元)" prop="totalAmount">
                <el-input 
                  disabled
                  v-model="addata.totalAmount" 
                  placeholder="请输入总金额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="充值金额(元)" prop="rechargeAmount">
                <el-input 
                  v-model="addata.rechargeAmount" 
                  placeholder="请输入充值金额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="赠送金额(元)" prop="giftAmount">
                <el-input 
                  v-model="addata.giftAmount" 
                  placeholder="请输入赠送金额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="积分余额(元)" prop="point">
                <el-input 
                  v-model="addata.point" 
                  placeholder="请输入积分余额" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="押金(元)" prop="deposit">
                <el-input 
                  v-model="addata.deposit" 
                  placeholder="请输入押金" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="SN码" prop="snCode">
                <el-input 
                  v-model="addata.snCode" 
                  placeholder="请输入SN码" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="租金(元)" prop="rent">
                <el-input 
                  v-model="addata.rent" 
                  placeholder="请输入租金" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: center;">
              <el-button type="success" @click="handleAdd">保 存</el-button>
              <el-button @click="resetupdate">重 置</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-row v-else :gutter="30">
            <el-col :span="5">暂未开通账户</el-col>
            <el-col :span="5"><el-button type="primary" @click="showpop(1)">开 通</el-button></el-col>
        </el-row>
      
      <!-- 添加或修改用户配置对话框 -->
        <el-dialog 
          v-model="openpop" 
          :title="ystit" 
          width="500px" 
          append-to-body
          :close-on-click-modal="false"
        >
        <div style="padding: 20px;">
          <el-form 
            ref="yysRef" 
            :model="addata" 
            :rules="rules" 
            label-width="110px">
              <el-row :gutter="30">
                <el-col :span="24">
                  <el-form-item label="户主类型" prop="ownerType">
                      <el-select 
                        disabled
                        v-model="addata.ownerType" 
                        placeholder="请选择类型"
                      >
                          <el-option 
                            label="个人" 
                            value="1"
                          />
                          <el-option 
                            label="企业" 
                            value="2"
                          />
                      </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="引入站点" prop="stationCode">
                        <el-select 
                         v-model="addata.stationCode" 
                         placeholder="请选择换电站"
                        >
                            <el-option 
                             v-for="n in yunList" 
                             :label="n.name" 
                             :value="n.code"
                             @click="getlabel(n.name)" 
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                
                <el-col :span="24">
                  <el-form-item label="账户总金额(元)" prop="totalAmount">
                    <el-input 
                      disabled
                      v-model="addata.totalAmount" 
                      placeholder="请输入总金额" 
                      maxlength="50" 
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="充值金额(元)" prop="rechargeAmount">
                    <el-input 
                      v-model="addata.rechargeAmount" 
                      placeholder="请输入充值金额" 
                      maxlength="50" 
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="赠送金额(元)" prop="giftAmount">
                    <el-input 
                      v-model="addata.giftAmount" 
                      placeholder="请输入赠送金额" 
                      maxlength="50" 
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="积分余额(元)" prop="point">
                    <el-input 
                      v-model="addata.point" 
                      placeholder="请输入积分余额" 
                      maxlength="50" 
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="押金(元)" prop="deposit">
                    <el-input 
                      v-model="addata.deposit" 
                      placeholder="请输入押金" 
                      maxlength="50" 
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="SN码" prop="snCode">
                    <el-input 
                      v-model="addata.snCode" 
                      placeholder="请输入SN码" 
                      maxlength="50" 
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="租金(元)" prop="rent">
                    <el-input 
                      v-model="addata.rent" 
                      placeholder="请输入租金" 
                      maxlength="50" 
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
  
        </div>
        
        <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 { ref,reactive,watch } from 'vue'
      import { ElMessage } from 'element-plus'
   
      import { 
          gethdzlist
      } from '@/api/swapstation/hdz'

      import { 
        getjqrlist, 
        addhdz, 
        update
      } from '@/api/order/account'
      
      import { setNum } from '@/utils/validate'

      function timestamp() {
        return new Date().getTime()
      }

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

      let search = ref(true)

      let queryParams = reactive({
        pageSize:20,	            //每页条数
        pageNo:1,	                //页数
        ownerType:'',	            //户主类型：1-个人，2-企业
        ownerId:props.ownerId,	  //户主ID
        code:'',	                //编码
        stationCode:''	          //引入站点
      })
      
      //查询
      let yysList = ref<any>({})
      
      //初始查询换电站
      let yunList = ref<any>([])
      gethdzlist({
        pageSize:20,	      //每页条数
        pageNo:1,	          //页数
        proxyId:'',	        //归属运营商ID
        name:'',	          //站点名称
        code:'',	          //站点编码
        status:'',	        //状态：1-正常营业，2-正常停运，3-故障停运，4-指令停运，9-其它
        type:'',	          //站点类型ID
      }).then(rps => {
          if(rps.data){
              let list = (rps.data as any).records
              yunList.value = list?list:[]
          }
      })

      
      
      //新增、修改
      let type = ref(1)
      let openpop = ref(false)
      let ystit = ref('开通账户')
      let yysRef = ref()
      let standardId = ref('')
      let bzName = ref('')
      let code = ref('')
      let stationName = ref('')
      let addata = reactive<any>({
        pkId:'',
        ownerType:'2',	           //户主类型：1-个人，2-企业
        ownerId:props.ownerId,	  //户主ID
        stationCode:'',	          //引入站点
        stationName:'',           //换电站名称  ??
        totalAmount:'',	          //账户总金额，分：总金额=充值金额+赠送金额
        rechargeAmount:'',	      //充值余额，分
        giftAmount:'',	          //赠送金额，分
        point:'',	                //积分余额
        deposit:'',	              //押金
        snCode:'',	              //SN码
        rent:''	                  //租金
      })

      let iskh = ref(false)

      const rules = ref({
        ownerType:[
            { required: true, message: "请选择户主类型", trigger: "blur" }
        ],
        ownerId:[
        { required: true, message: "请选择户主", trigger: "blur" }
        ],
        stationCode:[
          { required: true, message: "请选择站点", trigger: "blur" }
        ]
      })

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

      watch(() => addata.rechargeAmount,v => {
        addata.rechargeAmount =  setNum(addata.rechargeAmount)
        addata.totalAmount = addata.rechargeAmount*1 + addata.giftAmount*1
      })

      watch(() => addata.giftAmount,v => {
        addata.giftAmount =  setNum(addata.giftAmount)
        addata.totalAmount = addata.rechargeAmount*1 + addata.giftAmount*1
      })

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

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

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

      //获取换电站名称
      function getlabel(n:string){
        addata.stationName = n
      }

      function getyys() {
        getjqrlist(queryParams).then(rps => {
            if(rps.data && (rps.data as any).records.length > 0){
              const v = (rps.data as any).records[0]
              addata.stationCode = v.stationCode
              addata.pkId = v.pkId
              addata.stationCode = v.stationCode	                       
              addata.stationName = v.stationName                            
              addata.totalAmount = v.totalAmount?v.totalAmount/100:0	          
              addata.rechargeAmount = v.rechargeAmount?v.rechargeAmount/100:0	  
              addata.giftAmount = v.giftAmount?v.giftAmount/100:0

              addata.point = v.point?v.point:0	                         
              addata.deposit = v.deposit?v.deposit:0	                     
              addata.snCode = v.snCode?v.snCode:''	                                      
              addata.rent = v.rent?v.rent:0	      
              
              
              iskh.value = true
              type.value = 2
            }
        })
      }

      let mxlist = ref<any[]>([])
      function showpop(num:any,row?:any){
        type.value = num
        
        if(type.value == 1){
          openpop.value = true
        }else if(type.value == 2){
          drawer.value = true
        }
        yysRef.value?.resetFields()

        addata.pkId = ''
        addata.stationCode = ''
        addata.stationName = ''
        addata.totalAmount = ''
        addata.rechargeAmount = ''
        addata.giftAmount = ''
        addata.point = ''
        addata.deposit = ''
        addata.snCode = ''
        addata.rent = ''        
      }
      function savehand() {
        let newobj = Object.assign({},addata,{
          totalAmount:addata.totalAmount*100,
          rechargeAmount:addata.rechargeAmount*100,
          giftAmount:addata.giftAmount*100
        })
        if(type.value == 1){
            return addhdz(newobj)
        }
        return update(newobj)
        
      }
      //保存
      function handleAdd() {
        yysRef.value?.validate((valid:Boolean) => {
            if (valid) {

              // addata.totalAmount = addata.totalAmount*100

              // addata.rechargeAmount = addata.rechargeAmount*100
              // addata.giftAmount  = addata.giftAmount*100

              // addata.point = addata.point*100
              // addata.deposit = addata.deposit*100
              // addata.rent = addata.rent*100
        

                savehand().then(() => {
                ElMessage({
                    type: 'success',
                    message: type.value == 1?'添加成功':'修改成功'
                })
                if(type.value == 2){
                  stationName.value = addata.stationName
                }
                setTimeout(()=> {
                    if(type.value == 1){
                      openpop.value = false
                    }
                    getyys()
                },600)
            })
            }
        })
      }

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

    //费用标准明细
    let drawer = ref(false)
    //let standardId = ref('')
    function handleClose() {
      drawer.value = false
    }

    function resetupdate() {
      yysRef.value?.resetFields()
    }
    // function bzmingx(id:string) {
    //   drawer.value = true
    //   standardId.value = id
    // }

    getyys()
  </script>
  <style scoped>
  .el-divider--horizontal{
    border-color:#5b98cd;
  }
  .mktit{
    width: 100%; 
    height: 40px;
    line-height: 40px;
    border-radius: 10px 10px 0 0;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background: #98c3ef;
  }
  .jqbg{
    background: #73b9c9;
  }
  </style>