<template>
    <div>
      <div v-if="search" 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="换电站" prop="stationCode">
                <el-select v-model="queryParams.stationCode" 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="状态" prop="status">
                <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 200px;">
                    <el-option label="启用" :value="1" />
                    <el-option label="未启用" :value="0" />
                </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;">

          <div style="display: flex;justify-content: space-between;">
          <el-button 
          type="primary" 
          plain 
          icon="Plus" 
          @click="showpop(1)">新增</el-button>
          <el-tooltip class="item" effect="dark" :content="search? '隐藏搜索' : '显示搜索'" placement="top">
            <el-button size="mini" circle icon="Search" @click="search = !search" />
          </el-tooltip>
        </div>
        <el-table 
          style="width:100%;margin-top: 10px;"
          :data="yysList"
          border
          stripe
          :max-height="search?'680px':'600px'"
        >
            <el-table-column label="名称" min-width="250" align="center" prop="name" :show-overflow-tooltip="true">
                <template #default="scope">
                    <div @click="showdetails(scope.row)" style="display: inline-block;color:#16599d;border-bottom: 1px solid #417ebb;cursor:pointer">{{scope.row.name}}</div>
                </template>
            </el-table-column>
            <el-table-column label="换电站" min-width="250" align="center" prop="stationName" :show-overflow-tooltip="true" />
                
            <el-table-column label="最低数量" min-width="250" align="center" prop="miniLimit" :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" width="100" 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>
  
    
      <!-- 添加或修改用户配置对话框 -->
        <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="80px">
              <el-row :gutter="30">
                <el-col :span="24">
                  <el-form-item label="策略名称" prop="name">
                    <el-input 
                      v-model="addata.name" 
                      placeholder="请输入策略名称"  
                    />
                  </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="miniLimit">
                    <el-input 
                      v-model="addata.miniLimit" 
                      placeholder="请输入最低数量" 
                      maxlength="3" 
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="状态" prop="status">
                        <el-select 
                         v-model="addata.status" 
                         placeholder="请选择状态"
                        >
                            <el-option label="启用" :value="1" />
                            <el-option label="未启用" :value="0" />
                        </el-select>
                    </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>


  
      <el-drawer 
        v-model="drawer" 
        :with-header="false"
        size="900px"
      >
      <el-row style="margin-bottom: 20px;">
        <el-col :span="24" style="position: relative;margin-bottom: 20px;padding-bottom: 10px;text-align: center;font-size: 20px;color: #417ebb;border-bottom:1px solid #16599d;">
          {{detalobj.name}}
          <el-icon color="#ccc" @click="drawer = false" style="position: absolute;right: 20px;cursor: pointer;">
                <CloseBold />
            </el-icon>
        </el-col>
        <el-col :span="24">
          <el-row style="margin-bottom: 20px;">
            <el-col :span="10">
              <el-row>
                <el-col :span="6">换电站：</el-col>
                <el-col :span="18" style="color: #417ebb;">{{detalobj.stationName}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row>
                <el-col :span="12" style="text-align: right;">最低数量：</el-col>
                <el-col :span="6" style="color: #417ebb;">{{detalobj.miniLimit}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row>
                <el-col :span="10">状态：</el-col>
                <el-col :span="10" style="color: #417ebb;">{{detalobj.status == 1?'启用':'未启用'}}</el-col>
              </el-row>
            </el-col>
            <el-col :span="2">
                <el-button 
                  type="primary" 
                  plain 
                  icon="Edit" 
                  @click="showpop(2,detalobj)">修改</el-button>
            </el-col>
            
          </el-row>
        </el-col>
        <el-col style="border-top: 2px dashed #9ec9e1;">
            <!-- <div style="padding: 20px 0 10px;text-align: center;color:#9ec9e1;">策略详情</div> -->
            <el-row>
              <el-col>
                <costdetails 
                  v-if="drawer" 
                  style="padding: 20px;"
                  :stationCode="stationCode"
                  :stationName="stationName"
                  :strategyId="strategyId" 
                  :list="mxlist"
                  @updata="getyys"
                />
              </el-col>
            </el-row>
        </el-col>
      </el-row>
      </el-drawer>




    </div>
  </template>
  <script setup lang="ts" name="UserPage">
        import { 
          gethdzlist
        } from '@/api/swapstation/hdz'

        import { 
          getjqrlist, 
          addhdz, 
          update,
          delhdz
        } from '@/api/swapstation/cdcl'
      import { ref,reactive } from 'vue'
      import { ElMessage, ElMessageBox } from 'element-plus'
      
      import Costdetails from './costdetails.vue'

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

      let search = ref(true)

      let queryParams = reactive({
        // pageSize:20,	      //每页条数
        // pageNo:1,	          //页数
        stationCode:'',      //换电站编码  
        status:1
      })
      
      //查询
      let total = ref(0)
      let yysList = ref<any>([])
      function handBtnqu(){
        //queryParams.pageNo = 1
        getyys()
      }
      
      //初始查询换电站
      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:[]
              queryParams.stationCode = list[0].code
              getyys()
          }
      })

      function getyys() {
        yysList.value.splice(0)
        getjqrlist(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 strategyId = ref('')
      let stationCode = ref('')
      let stationName = ref('')


      let addata = reactive({
        pkId:'',
        name:'',            //名称  
        stationCode:'',	    //换电站编码
        stationName:'',	    //换电站名称
        miniLimit:'',	      //最低数量
        status:1	          //状态：0-未启用，1-启用
      })

      const rules = ref({
        name:[
            { required: true, message: "请输入策略名称", trigger: "blur" }
        ],
        stationCode:[
            { required: true, message: "请选择换电站", trigger: "blur" }
        ],
        miniLimit:[
        { required: true, message: "最低数量", trigger: "blur" }
        ]
      })

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


      let mxlist = ref<any[]>([])

      let detalobj = ref<any>({})
      function showdetails(v:any){
        detalobj.value = v
        drawer.value = true

        strategyId.value = v.pkId
        stationName.value = v.stationName
        stationCode.value = v.stationCode
        mxlist.value = v.detailList
      }

      function showpop(num:any,row?:any){
        type.value = num
        openpop.value = true

        // if(type.value == 1){
        //   openpop.value = true
        // }else if(type.value == 2){
        //   drawer.value = true
        // }

        ystit.value = num == 1?'添加充电策略':'修改充电策略'
        yysRef.value?.resetFields()
        if(row){
          addata.pkId = row.pkId
          
          addata.name = row.name

          addata.stationCode = row.stationCode	             
      
          addata.stationName = row.stationName
           
          addata.miniLimit = row.miniLimit
          addata.status = 1    

          

        //   standardId.value = row.pkId
        //   bzName.value = row.name
        //   stationName.value = row.stationName
        //   stationCode.value = row.stationCode
        //   mxlist.value = row.detailList
        }else{
          addata.pkId = ''
          addata.name = ''
          addata.stationCode = ''	             
          addata.stationName = ''

          addata.miniLimit = ''
          addata.status = 1    
        
        }
      }
      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?'添加成功':'修改成功'
                })
                // if(type.value == 2){
                //   //bzName.value = addata.name
                //   stationName.value = addata.stationName
                //   stationCode.value = addata.stationCode
                // }
                setTimeout(()=> {
                    // if(type.value == 1){
                    //   openpop.value = false
                    // }
                    openpop.value = false
                    drawer.value = false
                    getyys()
                },600)
            })
            }
        })
      }

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

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

    //费用标准明细
    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
    // }
  </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>