<template>
  <div style="padding: 0 30px">
    <baseTitle title="设置代理"></baseTitle>
    <el-form ref="userForm" :model="agentInfoForm" label-width="85px">
      <el-row gutter="30">
        <el-col :span="24">
          <el-form-item label="被代理人" prop="nickName">
            <span>{{ agentInfoForm.nickName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="代理人" prop="" required>
            <el-button style="margin-right: 10px" color="#DED0B2" @click="handleShowAgentDialog">
              {{ agentUserList?.length !== 0 ? '更改' : '请选择' }}
            </el-button>
            <div v-for="item in agentUserList" :key="item.id" style="margin-right: 5px">
              {{ item.name }}
            </div>
            <user-picker :multiple="false" ref="agentSettingUserPickerRef" title="请选择代理人"
                         v-model:value="agentUserList" @ok="agentUserPickerOk"
                         @cancelOrClear="agentUserPickerOk"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="代理状态" prop="agentState">
            <Tag dictType="agent_state" :value="agentInfoForm.agentState"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="开始时间" prop="agentStartTime">
            <el-config-provider>
              <el-date-picker
                  v-model="agentInfoForm.agentStartTime"
                  type="datetime"
                  placeholder="请选择开始时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-config-provider>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="结束时间" prop="agentEndTime" :title="!agentInfoForm.agentStartTime?'请先选择开始时间!':''">
            <el-config-provider>
              <el-date-picker
                  v-model="agentInfoForm.agentEndTime"
                  type="datetime"
                  placeholder="请选择结束时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  :disabled="!agentInfoForm.agentStartTime"
                  :disabled-date="disabledAgentEndTime"
              />
            </el-config-provider>
          </el-form-item>
        </el-col>
        <el-form-item>
          <el-button color="#DED0B2" @click="handleSubmitAgent" style="margin-left: 16px">提交</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import {ElNotification} from "element-plus";
import UserPicker from "@/views/workflow/process/common/UserPicker.vue";

import {editAgentInfo, getAgentInfo} from "@/api/user/user";

const agentUserList = ref([])
const agentInfoForm = ref({});
const agentSettingUserPickerRef = ref()
const router = useRouter()
const route = useRoute()
localStorage.removeItem('originallySelectedList')
const userId = ref(route.query.userId)

const getUserAgentInfo = async () => {
  await getAgentInfo(userId.value).then(res => {
    if (res.code === 1000) {
      agentInfoForm.value = res.data
      if(res.data.agentUserId) {
        agentUserList.value = [
          {
            id: res.data.agentUserId,
            name: res.data.agentNickName,
            companyName: res.data.agentCompanyName,
          }
        ]
      }
    } else {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
  })
}
const disabledAgentEndTime = (time) => {
  return time.getTime() <= new Date(agentInfoForm.value.agentStartTime) - 1 * 24 * 3600 * 1000
}

const handleShowAgentDialog = () => {
  agentSettingUserPickerRef.value.showUserPicker()
}

const agentUserPickerOk = (userList) => {
  agentUserList.value = userList
}

const handleSubmitAgent = () => {
  let agentUserId = ''
  if (agentUserList.value && agentUserList.value.length > 0) {
    agentUserId = agentUserList.value[0]?.id
  } else {
    ElNotification({
      title: '提示',
      message: '请选择代理人!',
      type: 'error'
    })
    return;
  }
  let agentParams = {
    userId: userId.value,
    agentUserId: agentUserId,
    agentStartTime: agentInfoForm.value.agentStartTime,
    agentEndTime: agentInfoForm.value.agentEndTime
  }
  console.info("🚀 ~method:agentParams -----", agentParams)
  editAgentInfo(agentParams).then(res => {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: res.code === 1000 ? 'success' : 'error'
    })
    if (res.code === 1000) {
      router.push({name: 'User'})
    }
  })
}

onMounted(() => {
  getUserAgentInfo()
})
</script>

<style scoped>

</style>
