<template>
  <div class="workflowTradeDetail container-height">
    <Breadcrumb />
    <div class="flex-between">
      <div class="flex_1 mr20">
        <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
          <div class="cursor-pointer">
            <div class="flex-between">
              <div class="gap10">
                <el-button type="primary">{{applyStatusInfo[ruleForm.applyStatus]}}</el-button>
                <div class="bold font_size30">{{ruleForm.title}}</div>
              </div>
            </div>
            <div class="font_size24 color_price bold mt10">￥{{ruleForm.budgetMin}}-{{ruleForm.budgetMax}}</div>
            <div class="gap20 mt10">
              <div class="gap5">
                <img :src="biaoqianIcon" alt="" style="width: 16px; height: 16px;">
                <span class="font_size14">
                  {{ruleForm.categoryName1}}-{{ruleForm.categoryName2}}-{{ruleForm.categoryName3}}
                </span>
              </div>
              <div class="gap5">
                <img :src="riliIcon" alt="员工" style="width: 16px; height: 16px;">
                <span class="font_size14">{{$t('common.signUpDeadline')}}：{{ruleForm.deadline}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="padding16 bg_color_fff border_radius_16 mt20 box_shadow_card">
          <div class="gap10">
            <div class="line_vertical"></div>
            <div class="font_size20 bold">{{$t('workflowTradeAdd.background')}}</div>
          </div>
          <div class="gray font_size14 mt10">
            {{ruleForm.background}}
          </div>
          <div class="gap10 mt10">
            <div class="line_vertical"></div>
            <div class="font_size20 bold">{{$t('workflowTradeAdd.requirements')}}</div>
          </div>
          <div class="gray font_size14 mt10">
            {{ruleForm.requirements}}
          </div>
          <div class="gap10 mt10">
            <div class="line_vertical"></div>
            <div class="font_size20 bold">{{$t('workflowTradeAdd.contactInfo')}}</div>
          </div>
          <div class="contactInfo_bg mt10 padding16 flex-center-between">
            <div class="flex_1 flex-center">
              <div class="gap10">
                <img :src="dianhuaIcon" alt="员工" style="width: 24px; height: 24px;">
                <div class="font_size16">{{$t('workflowTradeAdd.phoneNumber')}}：{{ruleForm.phone}}</div>
              </div>
            </div>
            <div class="flex_1 flex-center">
              <div class="gap10">
                <img :src="weixinIcon" alt="员工" style="width: 24px; height: 24px;">
                <div class="font_size16">{{$t('workflowTradeAdd.wechat')}}：{{ruleForm.wechat}}</div>
              </div>
            </div>
            <div class="flex_1 flex-center">
              <div class="gap10">
                <img :src="youxiangIcon" alt="员工" style="width: 24px; height: 24px;">
                <div class="font_size16">{{$t('workflowTradeAdd.email')}}：{{ruleForm.email}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="workflowTradeDetail_right detail_right">
        <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
          <div class="flex-column-center">
            <el-avatar :size="80" :src="ruleForm.userAvatar || appStore.avatarDefault" />
            <div class="font_size16 bold mt10">{{ruleForm.nickName}}</div>
          </div>
          <div class="totalInfo mt20 flex-center-between contactInfo_bg">
            <div class="flex-column-center flex_1 border_right">
              <div class="font_size24 bold">{{ruleForm.questCount}}</div>
              <div class="font_size14 mt10">{{$t('workflowTradeAdd.publishDemandNum')}}</div>
            </div>
            <div class="flex-column-center flex_1">
              <div class="font_size24 bold">{{ruleForm.publishCount}}</div>
              <div class="font_size14 mt10">{{$t('common.chuangjiangongzuoliu')}}</div>
            </div>
          </div>
        </div>
        <div class="padding16 bg_color_fff border_radius_16 mt20 box_shadow_card">
          <div class="gap10">
            <div class="line_vertical"></div>
            <div class="font_size20 bold">{{$t('common.registeredNum')}}</div>
          </div>
          <div class="flex-center-between mt10">
            <div class="gap10">
              <img :src="yuangong" alt="员工" style="width: 20px; height: 20px;">
              <span class="font_size16">{{$t('common.registeredNum')}}</span>
            </div>
            <div class="font_size16 bold">{{ruleForm.questApplyCount}}人</div>
          </div>
          <div class="flex-center-between mt10">
            <div class="gap10">
              <img :src="riliIcon" alt="员工" style="width: 20px; height: 20px;">
              <span class="font_size16">{{$t('common.remainingTime')}}</span>
            </div>
            <div class="font_size16 bold color_price">
              {{formatDeadline(ruleForm.deadline).diffDays}}
              {{t('common.day') }}
              {{formatDeadline(ruleForm.deadline).diffHours}}
              {{t('common.hour') }}
            </div>
          </div>
          <el-button type="primary" size="large" style="width: 100%;" class="mt20" 
          v-if="ruleForm.applyStatus === '1'"
          @click="submitSignUp({questId: ruleForm.questId,questUserId: ruleForm.questUserId},t,getQuestDetailFn)">
            <img :src="zaixianbaomingIcon" alt="" class="mr10" style="width: 30px; height: 30px;">
            <span class="font_size18">{{$t('common.zaixianbaoming')}}</span>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import riliIcon from '@/assets/imgs/rili.png'
  import biaoqianIcon from '@/assets/imgs/biaoqian.png'
  import yuangong from '@/assets/imgs/yuangong.png'
  import zaixianbaomingIcon from '@/assets/imgs/zaixianbaoming.png'
  import dianhuaIcon from '@/assets/imgs/dianhua.png'
  import weixinIcon from '@/assets/imgs/weixin.png'
  import youxiangIcon from '@/assets/imgs/youxiang.png'
  import { submitSignUp,formatDeadline } from '@/utils/util.js'

  // 引入api
  import { getQuestDetail } from '@/api/workflowTrade.js'
  import { useI18n } from 'vue-i18n' 
  const { t } = useI18n()

  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  console.log(router,route)
  import { ref, computed, reactive, onMounted } from 'vue'
  import { useAppStore } from '@/pinia/appStore'
  const appStore = useAppStore()

  const applyStatusInfo = {
    '1': t('workflowTrade.demandStatusSignUping'),
    '2': t('workflowTrade.demandStatusEnded'),
  }

  //获取参数
  const query = route.query;
  const questId = ref(query.questId || '');
  const ruleForm = ref({
    title: '',
    categoryId1: '',
    categoryId2: '',
    categoryId3: '',
    background: '',
    requirements: '',
    budgetMin: '',
    budgetMax: '',
    deadline: '',
    phone: '',
    wechat: '',
    email: '',
  })

  onMounted(() => {
   getQuestDetailFn();
  });
  const getQuestDetailFn = async () => {
     getQuestDetail({id: questId.value}).then(res => {
      if(res.code === 200){
        console.log(res)
        ruleForm.value = res.data || {};
      }
    })
  };


</script>

<style scoped lang="scss">
  .workflowTradeDetail{
    .workflowTradeDetail_right{
      .totalInfo{
        padding: 13px;
        .border_right{
          border-right: 1px solid #D8D8D8;
        }
      }
    }
  }

</style>
