<template>
  <div class="demand">
    <el-tabs v-model="form.activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="$t(tab.label)" :name="tab.name">
        <ul class="demand-list">
          <li v-for="(item, index) in list" :key="index">
            <div class="flex-center-between">
              <div class="title">{{ item.title }}</div>
              <div class="price">￥{{ item.budgetMin }}-{{ item.budgetMax }}</div>
            </div>
            <div class="flex-align-center content">
              <div class="flex-align-center">
                <el-button type="primary" size="small" plain>{{ item.categoryName2 }}</el-button>
                <el-button type="primary" size="small" plain>{{ item.categoryName3 }}</el-button>
              </div>
              <ul class="flex-align-center list">
                <div class="li">
                  <img src="/src/assets/imgs/yuangong.png" alt="">
                  <div class="">{{ item.publishCount || 0}}{{ $t('common.renbaoming') }}</div>
                </div>
                <div class="li">
                  <img src="/src/assets/imgs/rili.png" alt="">
                  <div class="">{{ $t('common.signUpDeadline') }}：{{ item.publishTime }}</div>
                </div>
              </ul>
            </div>
            <div class="description">{{ item.requirements }}</div>
            <div class="info">
              <div class="info-left">
                <el-avatar :size="30" :src="appStore.avatarDefault" />
                <div class="name">{{ item.nickName }}</div>
                <div class="date">{{ item.publishTime }} {{ $t('common.publish') }}</div>
              </div>
              <div class="info-right flex-align-center">
                <template v-if="form.activeName === 0">
                  <div class="btn" @click="changeItem(item,index,0)">
                    <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
                    <div>{{ $t('personalCenter.viewSignUpRecord') }}</div>
                  </div>
                  <div class="btn">
                    <img src="/src/assets/imgs/my/bianji@2x.png" alt="">
                    <div>{{ $t('common.edit') }}</div>
                  </div>
                  <div class="btn">
                    <img src="/src/assets/imgs/my/guanbi@2x.png" alt="">
                    <div class="red">{{ $t('personalCenter.endActivity') }}</div>
                  </div>
                  <div class="btn">
                    <img src="/src/assets/imgs/my/shanchu@2x.png" alt="">
                    <div class="red">{{ $t('common.delete') }}</div>
                  </div>
                </template>

                <div class="btn" v-else>
                  <img src="/src/assets/imgs/my/quxiao@2x.png" alt="">
                  <div class="red">{{ $t('personalCenter.cancelSignUp') }}</div>
                </div>

              </div>
            </div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
   <template v-if="list.length">
     <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum" @page-change="handlePageChange" />
   </template>
   <el-empty v-else :description="$t('common.empty')" />

    <el-dialog v-model="dialogVisible" :title="$t('personalCenter.viewSignUpRecord')" width="1138">
      <div class="detail">
        <div class="detail-top">
          <div class="flex-center-between">
            <div class="flex-align-center">
              <div class="tag">报名中</div>
              <div class="name"></div>
            </div>
            <div class="price">￥-</div>
          </div>
          <div class="flex-align-center content">
            <div class="flex-align-center">
              <el-button type="primary" size="small" plain>一级分类名称</el-button>
              <el-button type="primary" size="small" plain>二级分类名称</el-button>
            </div>
            <ul class="flex-align-center list">
              <div class="li">
                <img src="/src/assets/imgs/yuangong.png" alt="">
                <div class="">15{{ $t('common.renbaoming') }}</div>
              </div>
              <div class="li">
                <img src="/src/assets/imgs/rili.png" alt="">
                <div class="">{{ $t('common.signUpDeadline') }}：2024-11-19 17:00</div>
              </div>
            </ul>
          </div>
          <div class="desc">
            此n8n工作流是一款强大的AI驱动的潜在客户富集与通知系统，专为市场营销和销售团队设计。它通过智能表单收集线索，利用OpenAI深度分析并丰富客户数据，自动识别关键信息。系统能根据预设条件，通过多种渠道即时发送个性化通知，显著提升线索质量、转化率及团队协作效率，是优化客户关系管理的关键工具。
          </div>
          <div class="time">2024-11-18 {{ $t('common.publish') }}</div>
        </div>
        <div class="detail-txt">{{ $t('personalCenter.baomiliang') }}（5 {{ $t('personalCenter.ren') }}）</div>
        <ul class="detail-list">
          <li v-for="(item, index) in 5" :key="index">
            <div class="flex-align-center detail-list-left">
              <el-avatar :size="20" :src="''" />
              <div class="">花花</div>
              <div class="">13176012742</div>
            </div>
            <div class="detail-list-number">{{ $t('personalCenter.gongzuoliuliang') }}：15</div>
            <div class="flex-align-center detail-list-right">
              <div class="lex-align-center btn green">
                <img src="/src/assets/imgs/my/dui@2x.png" alt="">
                <div class="">{{ $t('common.agree') }}</div>
              </div>
              <div class="lex-align-center btn red">
                <img src="/src/assets/imgs/my/quxiao@2x.png" alt="">
                <div class="">{{ $t('common.reject') }}</div>
              </div>
              <div class="lex-align-center btn blue">
                <img src="/src/assets/imgs/my/jilu@2x.png" alt="">
                <div class="">{{ $t('common.viewHomepage') }}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <template #footer>
        <div class="dialog-footer flex-center">
          <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
          <el-button type="primary" class="gradient" @click="dialogVisible = false">
            {{ $t('common.confirm') }}
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>
<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { useAppStore } from '@/pinia/appStore'
import type { TabsPaneContext } from 'element-plus'
import Pagination from '@/components/Pagination.vue'

import { getWorkflowApplyByUserId,userQuestList,appliList } from '@/api/my.js'

const appStore = useAppStore();
const tabs = ref([
  { label: 'personalCenter.publishDemandRecord', name: 0 },
  { label: 'personalCenter.myDemandRecord', name: 1 }
])

const dialogVisible = ref(false)

const list = ref([])
const form = ref({
  pageNum:1,
  pageSize:10,
  total: 0,
  activeName:0
})

const changeItem = async (item,index,type) =>{
  if (type == 0) {
    
    let res = await appliList({questId:item.questId})
    console.log(res)
    dialogVisible.value = true;
  }
}

const handleClick = (tab: TabsPaneContext) => {
  list.value = []
  form.value.pageNum = 1;
  form.value.activeName = tab.props.name;
  getList()
}

// 获取列表
const getList = async () =>{
  let res = await (form.value.activeName === 0 ? userQuestList(form.value) : getWorkflowApplyByUserId(form.value))
  console.log(res.rows)
  list.value = res.rows || [];
  form.value.total = res.total;
}

const handlePageChange = (page) =>{
  list.value = []
  form.value.pageNum = page;
  getList()
}

onMounted(()=>{
  getList()
})


</script>
<style scoped lang="scss">
.demand {
  padding-bottom: 20px;

  div {
    line-height: 1;
  }

  .demand-list {
    li {
      padding: 16px;
      margin-bottom: 16px;
      background: #F5F7FA;
      border-radius: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .title {
        font-size: 18px;
        font-weight: bold;
        color: #333333;
      }



      .description {
        font-size: 16px;
        color: #666666;
        line-height: 24px;
        margin: 8px 0;
      }

      .info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .info-left {
          display: flex;
          align-items: center;

          .name {
            font-size: 16px;
            margin: 0 8px;
          }

          .date {
            font-size: 14px;
            color: #666666;
          }
        }

        .info-right {
          .btn {
            height: 32px;
            display: flex;
            align-items: center;
            padding: 0px 16px;
            background: #FFFFFF;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 8px;

            img {
              width: 14px;
              height: 14px;
              margin-right: 4px;
            }

            div {
              font-size: 14px;
              color: #2D71FF;
            }

            .red {
              color: #E43434;
            }
          }
        }

      }

      .price {
        font-size: 24px;
        color: #FD5F3C;
      }
    }
  }
}

.content {
  margin-top: 8px;

  .list {
    .li {
      display: flex;
      align-items: center;

      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }

      margin-left: 8px;

      div {
        font-size: 12px;
      }
    }
  }
}

.detail {
  padding: 16px;
  border-top: 1px solid #EBEEF5;

  .detail-top {
    padding: 16px;
    background: #F5F7FA;
    border-radius: 16px;
    border: 1px solid #FFFFFF;

    .tag {
      padding: 0 12px;
      line-height: 30px;
      font-size: 14px;
      color: #FFFFFF;
      background: #2D71FF;
      border-radius: 4px;
    }

    .name {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
      margin-left: 8px;
    }

    .price {
      color: #FD5F3C;
      font-size: 24px;
    }

    .desc {
      margin: 8px 0;
      line-height: 24px;
      font-size: 16px;
      color: #666666;
    }

    .time {
      font-size: 14px;
      color: #666666;
    }
  }

  .detail-txt {
    line-height: 58px;
    font-size: 18px;
    font-weight: bold;
  }

  .detail-list {
    li {
      display: flex;
      padding: 0 16px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      height: 64px;
      background: #F5F7FA;
      border-radius: 8px;

      &:last-child {
        margin-bottom: 0;
      }

      .detail-list-left {
        div {
          color: #666666;
          font-size: 14px;

          &:nth-child(2) {
            margin: 0 8px;
            font-size: 16px;
            color: #333333;
          }
        }
      }

      .detail-list-number {
        font-size: 14px;
        color: #333333;
      }

      .detail-list-right {
        .btn {
          display: flex;
          margin-left: 8px;
          align-items: center;
          cursor: pointer;
          padding: 0px 16px;
          height: 32px;
          border-radius: 4px;
          font-size: 14px;

          &:hover {
            opacity: 0.7;
          }

          img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }
        }

        .green {
          background: #E9F7EF;

          div {
            color: #1FB362;
          }
        }

        .red {

          background: #FCEBEB;

          div {
            color: #E43434;
          }
        }

        .blue {

          background: #EAF0FF;

          div {
            color: #2D71FF;
          }
        }
      }
    }
  }
}
</style>