<style scoped lang="scss">

</style>
<template>
  <div class="system-dialog-container">
    <el-dialog
        :title="state.dialog.title"
        v-model="state.dialog.isShowDialog"
        width="720px"
        draggable
        destroy-on-close
        :close-on-click-modal="false"
        align-center>

      <el-tabs v-model="state.tab" class="demo-tabs" style="width: 100%;" @tab-change="handleTabChange">
        <el-tab-pane label="基本信息" name="basic">
          <el-form
              inline
              :model="state.ruleForm"
              :rules="state.rules"
              label-position="top"
              ref="formRef"
              size="default"
              label-width="100px"
              class="mt5">
            <el-form-item label="站点ID：" prop="stationId" class="wd350">
              <el-input
                  v-model="state.ruleForm.stationId"
                  placeholder="站点ID"
                  clearable
                  class="wd100">
              </el-input>
            </el-form-item>
            <el-form-item label="工位数量：" prop="parkingNum">
              <el-input
                  v-model="state.ruleForm.parkingNum"
                  placeholder="工位数量"
                  clearable
                  class="wd100">
              </el-input>
            </el-form-item>
            <el-form-item label="站点名称：" prop="stationName">
              <el-input
                  v-model="state.ruleForm.stationName"
                  placeholder="站点名称"
                  clearable
                  class="wd200">
              </el-input>
            </el-form-item>
            <el-form-item label="站点照片：" prop="pictures">
              <ext-upload v-model="state.ruleForm.pictures" multiple max="6"></ext-upload>
              <!--          <el-input
                            v-model="state.ruleForm.pictures"
                            placeholder="站点照片"
                            clearable
                            class="wd350">
                        </el-input>-->
            </el-form-item>

            <el-form-item class="w100"></el-form-item>
            <el-form-item label="站点状态：" prop="stationStatus">
              <ext-d-select type="WashStation.status" class="wd200" v-model="state.ruleForm.stationStatus"></ext-d-select>
            </el-form-item>

            <el-form-item label="站点类型：" prop="stationType">
              <ext-d-select type="WashStation.type" class="wd200" v-model="state.ruleForm.stationType"></ext-d-select>

            </el-form-item>

            <el-form-item label="地址：" prop="address" class="w100">
              <el-input
                  v-model="state.ruleForm.address"
                  placeholder="地址"
                  clearable

                  class="w100">
              </el-input>
            </el-form-item>

            <el-form-item label="经度坐标：" prop="location">
              <el-input
                  v-model="state.location.stationLng"
                  placeholder="经度坐标"
                  clearable
                  type="number"
                  class="wd200">
              </el-input>
            </el-form-item>
            <el-form-item label="纬度坐标：" prop="location">
              <el-input
                  v-model="state.location.stationLat"
                  placeholder="纬度坐标"
                  clearable
                  type="number"
                  class="wd200">
              </el-input>
            </el-form-item>
            <el-form-item label="服务电话：" prop="serviceTel">
              <el-input
                  v-model="state.ruleForm.serviceTel"
                  placeholder="服务电话"
                  clearable
                  class="wd350">
              </el-input>
            </el-form-item>
            <el-form-item label="站点电话：" prop="stationTel">
              <el-input
                  v-model="state.ruleForm.stationTel"
                  placeholder="站点电话"
                  clearable
                  class="wd350">
              </el-input>
            </el-form-item>


            <el-form-item label="营业时间描述：" prop="businessHours" class="w100">
              <el-input
                  v-model="state.ruleForm.businessHours"
                  placeholder="营业时间描述"
                  clearable
                  type="textarea"
                  class="w100">
              </el-input>
            </el-form-item>

            <el-form-item label="停车费描述：" prop="parkingFee" class="w100">
              <el-input
                  v-model="state.ruleForm.parkingFee"
                  type="textarea"
                  placeholder="停车费描述：eg:洗车费用满10元减免1小时停车费"
                  clearable
                  class="w100">
              </el-input>
            </el-form-item>

            <el-form-item label="停车费减免二维码文本：" prop="parkingQrCode" class="w100">
              <el-input
                  v-model="state.ruleForm.parkingQrCode"
                  type="textarea"
                  placeholder="停车费减免二维码文本"
                  clearable
                  class="w100">
              </el-input>
            </el-form-item>


            <el-form-item label="备注：" prop="remark" class="w100">
              <el-input
                  v-model="state.ruleForm.remark"
                  placeholder="备注"
                  clearable
                  type="textarea"
                  class="w100">
              </el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="费率信息" name="fee">
          <el-form
              inline
              :model="state.feeForm"
              :rules="state.feeRules"
              label-position="top"
              ref="feeFormRef"
              size="default"
              label-width="100px"
              class="mt5">
            <el-form-item label="站点" prop="feeRate" class="wd250">
              <ext-select
                  v-model="state.feeForm.stationId"
                  placeholder="站点"
                  url="washStation/list"
                  url-method="post"
                  label-key="stationName"
                  value-key="stationId"
                  data-key="list"
                  clearable
                  disabled
                  class="wd200 ml10"/>
            </el-form-item>
            <el-form-item label="绑定平台费率" prop="feeRate" class="wd250">
              <ext-select
                  v-model="state.feeForm.feeRateId"
                  placeholder="平台费率配置"
                  clearable
                  :dataList="state.platformFeeRateList"
                  @on-change="handlePlatformFeeRateChange"
                  class="wd200 ml10"/>
            </el-form-item>

            <el-form-item label="平台费率（0.1代表10%）" prop="feeRate" class="wd250">
              <el-input-number
                  v-model="state.feeForm.feeRate"
                  placeholder="平台费率（0.1代表10%）"
                  clearable
                  step="0.1"
                  class="w100">
              </el-input-number>
            </el-form-item>
            <el-form-item label="充值冻结金额比例（0.3代表30%）" prop="frozenRatio" class="wd250">
              <el-input-number
                  v-model="state.feeForm.frozenRatio"
                  placeholder="充值冻结金额比例（0.3代表30%）"
                  clearable
                  step="0.1"
                  class="w100">
              </el-input-number>
            </el-form-item>

            <el-form-item label="提现手续费率（0.006代表6‰）" prop="withdrawalFeeRate" class="wd250">
              <el-input-number
                  v-model="state.feeForm.withdrawalFeeRate"
                  placeholder="提现手续费率（0.006代表6‰）"
                  clearable
                  step="0.001"
                  class="w100">
              </el-input-number>
            </el-form-item>
          </el-form>

        </el-tab-pane>
      </el-tabs>


      <!--        <el-form-item label="站点引导" prop="siteGuide">
                <el-input
                    v-model="state.ruleForm.siteGuide"
                    placeholder="站点引导"
                    clearable
                    class="wd350">
                </el-input>
              </el-form-item>-->


      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button :loading="state.btnLoading" type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="WashStationDialog">
import {defineAsyncComponent, reactive, onMounted, ref} from 'vue';
import {Msg} from "/@/utils/message";
import {$body, $get} from "/@/utils/request";
import u from '/@/utils/u'
import ExtUpload from "/@/components/form/ExtUpload.vue";
import ExtDSelect from "/@/components/form/ExtDSelect.vue";
import ExtSelect from "/@/components/form/ExtSelect.vue";

// 引入组件

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const formRef = ref();
//定义初始变量，重置使用
const initState = () => ({
  ruleForm: {
    id: null,
    location: {}
  },
  feeForm: {
    stationId: null as any
  },
  btnLoading: false,
  dialog: {
    isShowDialog: false,
    type: '',
    title: '',
    submitTxt: '',
  },
  rules: {},
  feeRules: {

  },
  location: {},
  tab: 'basic',
  platformFeeRateList: [],
  stationFeeRate: [],
  action:''
})

// 定义变量内容
const state = reactive(initState());


// 打开弹窗
const open = (action: string = 'add', row: any) => {
  state.action = action;
  state.dialog.title = u.dialog.actions[action].title + "『站点信息』"
  state.dialog.submitTxt = u.dialog.actions[action].btn + "『站点信息』"
  state.dialog.isShowDialog = true;
  if (action !== 'add') {
    loadData(row.id);
    state.feeForm.stationId = row.stationId
    loadStationFeeRate();
  } else {
    state.ruleForm = Object.assign(state.ruleForm, row);

  }

  loadPlatformFeeRateList()
};
// 关闭弹窗
const onClose = () => {
  state.dialog.isShowDialog = false;
  Object.assign(state, initState())
};
// 取消
const onCancel = () => {
  onClose();
};
// 提交
const onSubmit = () => {
  if(state.tab==='basic'){
    formRef.value.validate((v: boolean) => {
      if (v) {
        state.btnLoading = true;
        state.ruleForm.location = JSON.stringify(state.location)
        const url = !!state.ruleForm.id ? "washStation/modify" : "washStation/add"
        $body(url, state.ruleForm).then(() => {
          state.btnLoading = false;
          Msg.message('操作成功');
          //console.log('submit!')
          onClose();
          emit('refresh');
        }).catch(e=>{
          console.error(e);
          state.btnLoading = false;
        })
      } else {
        state.btnLoading = false;
        Msg.message('请先完整填写表单', 'error');
      }
    })
  }else{
    state.btnLoading = true;
    $body(`station-fee-rate/bind`,state.feeForm).then(res=>{
      Msg.message('站点费率绑定成功');
      state.btnLoading = false;
      onClose();
      emit('refresh');
    }).catch(e=>{
      Msg.message('操作失败','error');
      state.btnLoading = false;
    })
  }

};

const handleFormChange = (formData: any) => {
  //console.log(formData)
}

// 初始化数据
const loadData = (id: number) => {
  $get(`washStation/detail/${id}`).then((res: any) => {
    state.ruleForm = res;
    state.location = JSON.parse(res.location)
  })
}

const loadStationFeeRate = () => {
  $get(`station-fee-rate/${state.feeForm.stationId}`).then(res => {
    state.feeForm = res;
  })
}

const loadPlatformFeeRateList = () => {

  $body(`platform-fee-rate/list`, {pageSize: 1024}).then(res => {
    state.platformFeeRateList = res.list;
  })
}

const handlePlatformFeeRateChange = (platformFeeRateId: any) => {
  console.log(platformFeeRateId)
  let rate = state.platformFeeRateList.find(k => k.id == platformFeeRateId);
  if (rate) {
    let {feeRate, withdrawalFeeRate, frozenRatio} = rate;
    state.feeForm = Object.assign({}, state.feeForm, {feeRate, withdrawalFeeRate, frozenRatio})
  } else {
    state.feeForm.withdrawalFeeRate = 0;
    state.feeForm.feeRate = 0;
    state.feeForm.frozenRatio = 0;
  }
}

const handleTabChange = (tab:string) => {
  if(tab==='basic'){
    state.dialog.submitTxt = u.dialog.actions[state.action].btn + "『站点信息』"
  }else if(tab==='fee'){
    state.dialog.submitTxt = u.dialog.actions[state.action].btn + "『站点费率』"
  }
}

// 暴露变量
defineExpose({
  open
});


</script>
