<script setup>
import { apiCustomerUser } from '@/api/customer'
import { dayjs, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const show = defineModel('show', { type: Boolean, default: false })

const props = defineProps({
  userId: {
    type: Number,
    default: 0
  }
})
const emits=defineEmits(['success'])

const router=useRouter()

const userInfo = ref(null)
const time = ref('')
async function getData() {
  const res = await apiCustomerUser.userInfo({
    UserId: props.userId
  })
  if (res.Ret !== 200) return
  userInfo.value = res.Data
  time.value = [dayjs(res.Data.Detail.ValidStartTime).format('YYYY-MM-DD'), dayjs(res.Data.Detail.ValidEndTime).format('YYYY-MM-DD')]
}

function handleSave(){
  const isEnd=dayjs()
  const params={
    UserId:props.userId,
    IsEnabled:true,
    ValidStartTime:time.value[0],
    ValidEndTime:time.value[1]
  }
  if(dayjs().isAfter(params.ValidEndTime,'day')){
    ElMessage.error('有效期已到期，请重新设置')
    return
  }
  apiCustomerUser.setUserStatus(params).then(res=>{
    if(res.Ret===200){
      ElMessage.success('启用成功')
      emits('success')
      show.value=false
    }
  })
}


watch(
  () => show.value,
  (n) => {
    if (n) {
      getData()
    }
  }
)

function goEdit(){
  router.push({
    path:'/customer/userEdit',
    query:{
      id:props.userId,
      startTime:time.value[0],
      endTime:time.value[1]
    }
  })
}

</script>

<template>
  <el-dialog v-model="show" width="700" title="操作提示" draggable>
    <div class="user-info-wrap" v-if="userInfo">
      <div class="item-box">
        <span class="label">姓名</span>
        <span>{{ userInfo.Detail.RealName }}</span>
      </div>
      <div class="item-box">
        <span class="label">有效期</span>
        <div>
          <el-date-picker
            style="width: 235px"
            v-model="time"
            type="daterange"
            range-separator="~"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            size="large"
            :clearable="false"
            :editable="false"
            value-format="YYYY-MM-DD"
          />
        </div>
      </div>
      <div class="item-box">
        <span class="label">权限</span>
        <div @click="goEdit">
          <svg-icon
            name="edit"
            size="18px"
            style="position: relative; top: 3px"
          ></svg-icon>
          <span class="edit-text">去编辑</span>
        </div>
      </div>
      <div
        class="item-box"
        v-for="(value, key) in userInfo.Permission"
        :key="key"
      >
        <span class="label">{{ key }}</span>
        <div style="flex: 1; gap: 5px;flex-wrap:wrap" class="flex">
          <el-tag type="primary" v-for="v in value" :key="v">{{ v }}</el-tag>
        </div>
      </div>
    </div>
    <div style="text-align: center">
      <el-button type="primary" plain size="large" @click="show = false"
        >取消</el-button
      >
      <el-button type="primary" size="large" @click="handleSave"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.user-info-wrap {
  .item-box {
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-bottom: 20px;
    .label {
      flex-shrink: 0;
      width: 100px;
      text-align: right;
      margin-right: 20px;
    }
    .edit-text {
      color: var(--el-primary-color);
      cursor: pointer;
    }
  }
}
</style>