<template>
    <div>
      <div class="app-container" style="margin-bottom: 12px;padding-bottom: 5px;border-radius: 10px;">
        <el-form
          ref="querform" 
          :model="queryParams" 
          :inline="true" 
        >
            <el-form-item label="换电站">
                <el-select v-model="hdzcode" placeholder="请选择换电站" style="width: 200px;">
                    <el-option v-for="n in yunList" :label="n.name" :value="n.code" />
                </el-select>
            </el-form-item>
            <el-form-item label="费用标准">
                <el-select v-model="queryParams.standardId" placeholder="请选择费用标准" style="width: 200px;">
                    <el-option v-for="n in fybzlist" :label="n.pkId" :value="n.code" />
                </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handBtnqu">搜索</el-button>
              <!-- <el-button icon="Refresh" @click="resetQuery">重置</el-button> -->
            </el-form-item>
          </el-form>
      </div>
      <div class="app-container" style="margin-bottom: 12px;border-radius: 10px;">
        <el-button 
          type="primary" 
          plain 
          icon="Plus" 
          @click="showpop(1)">新增</el-button>
        <el-table 
          style="width:100%;margin-top: 10px;"
          :data="yysList"
          border
          stripe
          max-height="600px"
        >
           
            <el-table-column label="开始时间" align="center" prop="timeBegin" :show-overflow-tooltip="true" />
            <el-table-column label="结束时间" align="center" prop="timeEnd" :show-overflow-tooltip="true" />
            <el-table-column label="每公里收费" align="center" prop="eachKmFee" :show-overflow-tooltip="true" />
            <el-table-column label="每SOC收费" align="center" prop="eachSocFee" :show-overflow-tooltip="true" />
            <el-table-column label="每度电收费" align="center" prop="eachKwhFee" :show-overflow-tooltip="true" />
            <el-table-column label="谷段服务费" align="center" prop="timeServiceFee" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="150" fixed="right">
              <template #default="scope">
                <el-button link type="primary" icon="Edit" @click="showpop(2,scope.row)">修改</el-button>
                <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div v-if="total > 10" style="display: flex;justify-content: right;padding-top:20px;">
            <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> -->
          
      </div>
  
    
      <!-- 添加或修改用户配置对话框 -->
        <el-dialog 
          v-model="openpop" 
          :title="ystit" 
          width="750px" 
          append-to-body
          :close-on-click-modal="false"
        >
        <el-form 
         ref="yysRef" 
         :model="addata" 
         :rules="rules"
         label-position="top" 
         label-width="200px">
          <el-row :gutter="30">
            <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" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开始时间" prop="timeBegin">
                <el-date-picker
                    v-model="addata.timeBegin"
                    value-format="YYYY-MM-DD"
                    style="width: 100%;" 
                    type="date"
                    placeholder="请选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="timeEnd">
                <el-date-picker
                    v-model="addata.timeEnd"
                    value-format="YYYY-MM-DD"
                    style="width: 100%;" 
                    type="date"
                    placeholder="请选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="每公里收费" prop="eachKmFee">
                <el-input 
                  v-model="addata.eachKmFee" 
                  placeholder="请输入每公里收费" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="每SOC收费" prop="eachSocFee">
                <el-input 
                  v-model="addata.eachSocFee" 
                  placeholder="请输入每SOC收费" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="每度电收费" prop="eachKwhFee">
                <el-input 
                  v-model="addata.eachKwhFee" 
                  placeholder="请输入每度电收费" 
                  maxlength="50" 
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="谷段服务费" prop="timeServiceFee">
                <el-input 
                  v-model="addata.timeServiceFee" 
                  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 { 
          gethdzlist
        } from '@/api/swapstation/hdz'
        import { 
          getjqrlist
        } from '@/api/swapstation/swapstation'
        import { 
          getmxlist, 
          addhdz, 
          update,
          delhdz
        } from '@/api/swapstation/costdetails'
      import { ref,reactive} from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'

      let queryParams = reactive({
        // pageSize:20,	    //每页条数
        // pageNo:1,	      //页数
        standardId:''       //收费规则id 
      })
      
      //查询
      let yysList = ref<any>([])
      function handBtnqu(){
        //queryParams.pageNo = 1
        getyys()
      }
      
      //初始查询换电站
      let hdzcode = ref('')
      let yunList = ref<any>([])
      //费用标准
      let fybzlist = 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:[]
              hdzcode.value = list[0].code
              
            return getjqrlist({
                stationCode:list[0].code
              })
          }
          return Promise.reject()
      }).then(rps => {
        if(rps.data && (rps.data as any).length > 0){
          queryParams.standardId = (rps.data as any)[0].pkId
          fybzlist.value = rps.data
          getyys()
        }
      })
      

      function getyys() {
        yysList.value.splice(0)
        getmxlist(queryParams).then(rps => {
            if(rps.data){
              yysList.value = rps.data
            }
        })
      }

      // function handleSizeChange(val:number) {
      //   queryParams.pageSize = val
      //   getyys()
      // }
      
      //重置
      let querform = ref()
      function resetQuery() {
        querform.value?.resetFields()
      }

      
      //新增、修改
      let type = ref(1)
      let openpop = ref(false)
      let ystit = ref('添加费用标准明细')
      let yysRef = ref()
      let addata = reactive({
        stationCode:'',	            //换电站编码
        standardId:'',	            //收费规则ID
        timeBegin:'',	              //开始时间
        timeEnd:'',	                //结束时间
        pkId:'',
        eachKmFee:'',	              //每公里收费
        eachSocFee:'',	            //每SOC收费
        eachKwhFee:'',	            //每度电收费
        timeServiceFee:''	          //谷段服务费
      })

      const rules = ref({
        stationCode:[
            { required: true, message: "请选择换电站", trigger: "blur" }
        ],
        standardId:[
            { required: true, message: "请选择收费规则", trigger: "blur" }
        ],
        timeBegin:[
          { required: true, message: "请选择开始时间", trigger: "blur" },
        ],
        timeEnd:[
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ]
      })

      function showpop(num:any,row?:any){
        type.value = num
        openpop.value = true
        ystit.value = num == 1?'添加费用标准明细':'修改费用标准明细'
        yysRef.value?.resetFields()
        if(row){
          addata.pkId = row.pkId

          addata.stationCode = row.stationCode	             
          addata.standardId = row.standardId	                    
          addata.timeBegin = row.timeBegin	                      
          addata.timeEnd = row.timeEnd	                          
          addata.eachKmFee = row.eachKmFee	                      
          addata.eachSocFee = row.eachSocFee	                    
          addata.eachKwhFee = row.eachKwhFee	                    
          addata.timeServiceFee = row.timeServiceFee	        

        }else{
          addata.pkId = ''
          addata.stationCode = ''	             
          addata.standardId = ''
          addata.timeBegin = ''
          addata.timeEnd = ''
          addata.eachKmFee = ''
          addata.eachSocFee = ''
          addata.eachKwhFee = ''
          addata.timeServiceFee = ''        
        }
      }
      function savehand() {
        if(type.value == 1){
            return addhdz(addata)
        }
        return update(addata)
        
      }
      //保存
      function handleAdd() {
        yysRef.value?.validate((valid:Boolean) => {
            if (valid) {
                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(
        `确定删除：${row.code}`,
        '温馨提示',
        {
            // confirmButtonText: '',
            // cancelButtonText: 'Cancel',
            type: 'warning',
        }
      ).then(() => {
        delhdz(row.pkId).then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功'
            })
            getyys()
          })
      })
    }

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