<!--
 * @desc B端服务
 * @author linyuanjie
 * @date 2023/9/22
-->

<template>
  <div class="enterprise-task-page">
    <basic-container>
      <template v-if="!taskType">
        <el-tabs v-model="activeName">
          <el-tab-pane label="B端服务" name="enterpriseTask"> </el-tab-pane>
          <el-tab-pane label="任务记录" name="taskRecord"></el-tab-pane>
        </el-tabs>
        <div v-if="activeName === 'enterpriseTask'" class="task-list">
          <div
            v-for="item in taskList"
            :key="item.name"
            class="task-item"
            :style="{ border: `1px solid ${item.borderColor}` }">
            <div class="item-info">
              <p class="item-title f18 clr_333">{{ item.name }}</p>
              <p class="item-desc f12 clr_666">{{ item.desc }}</p>
              <div
                class="item-task-btn f12"
                :style="{ color: item.borderColor, border: `1px solid ${item.color}` }"
                @mouseover="(e) => { setBtnStyle(e, item, 'over') }"
                @mouseout="(e) => { setBtnStyle(e, item, 'out') }"
                @click="doTaskBtn(item.taskType)">
                做任务
              </div>
            </div>
            <img class="item-img" :src="item.imgPath" alt="">
          </div>
        </div>
        <TaskRecord v-if="activeName === 'taskRecord'" />
      </template>
      <template v-else>
        <component :is="taskType" @back="taskType = null" />
      </template>
    </basic-container>
  </div>
</template>

<script>
import TaskRecord from "@/views/admin/enterpriseTask/components/taskRecord";
import doTaskWeixing from "@/views/admin/enterpriseTask/components/doTaskWeixing";
import doTaskXunjiang from "@/views/admin/enterpriseTask/components/doTaskXunjiang";
import doTaskCommon from "@/views/admin/enterpriseTask/components/doTaskCommon";
import doTaskHospital from "@/views/admin/enterpriseTask/components/doTaskHospital";
import doTaskTender from "@/views/admin/enterpriseTask/components/doTaskTender";
import doTaskBusinessMeeting from "@/views/admin/enterpriseTask/components/doTaskBusinessMeeting";
import doTaskSpecialContracts from "@/views/admin/enterpriseTask/components/doTaskSpecialContracts";
import doTaskChannelMaintenance from "@/views/admin/enterpriseTask/components/doTaskChannelMaintenance";

import enterPriseWeixing from '../../../../public/img/enterpriseTask/enterprise-wei3xing1.png'
import enterPriseXunjiang from '../../../../public/img/enterpriseTask/enterprise-xun2jiang3.png'
import enterPriseCommon from '../../../../public/img/enterpriseTask/enterprise-common.png'
import yiyuanzhuanru from '../../../../public/img/enterpriseTask/enterprise-yiyuanzhuanru.png'
import tenderImg from '../../../../public/img/enterpriseTask/tenderImg.png'
import businessPromotonMeeting from '../../../../public/img/enterpriseTask/businessPromotonMeeting.png'
import specialContracts from '../../../../public/img/enterpriseTask/specialContracts.png'
import channelMaintenance from '../../../../public/img/enterpriseTask/channelMaintenance.png'

export default {
  name: "index",
  components: { TaskRecord, doTaskWeixing, doTaskXunjiang, doTaskCommon, doTaskHospital, doTaskTender, doTaskBusinessMeeting, doTaskSpecialContracts, doTaskChannelMaintenance },
  data () {
    return {
      activeName: 'enterpriseTask',
      taskList: [
        {
          name: '医学会各级年会及卫星会',
          desc: '区域性或全国性的学术会议',
          color: '#3187FF',
          borderColor: 'rgba(90, 156, 248, 0.6)',
          bgColor: 'rgba(251, 253, 255, 1)',
          imgPath: enterPriseWeixing,
          taskType: 'doTaskWeixing',
          taskTypeId: 62
        },
        {
          name: '专家学术研讨会',
          desc: '权威专家讲座',
          color: '#F0AB47',
          borderColor: 'rgba(240, 171, 71, 0.6)',
          bgColor: 'rgba(255, 253, 249, 1)',
          imgPath: enterPriseXunjiang,
          taskType: 'doTaskXunjiang',
          taskTypeId: 63
        },
        {
          name: '医院准入',
          desc: '对汇入工作进行跟踪服务并进行汇报',
          color: '#3187FF',
          borderColor: 'rgba(90, 156, 248, 0.6)',
          bgColor: 'rgba(251, 253, 255, 1)',
          imgPath: yiyuanzhuanru,
          taskType: 'doTaskHospital',
          taskTypeId: 66
        },
        {
          name: '招投标服务',
          desc: '参与省、市及特定区域的招投标',
          color: '#F0AB47',
          borderColor: 'rgba(240, 171, 71, 0.6)',
          bgColor: 'rgba(255, 253, 249, 1)',
          imgPath: tenderImg,
          taskType: 'doTaskTender',
          taskTypeId: 67
        },
        {
          name: '商业推广会',
          desc: '指定区域进行的产品销售会议',
          color: '#3187FF',
          borderColor: 'rgba(90, 156, 248, 0.6)',
          bgColor: 'rgba(251, 253, 255, 1)',
          imgPath: businessPromotonMeeting,
          taskType: 'doTaskBusinessMeeting',
          taskTypeId: 68
        },
        {
          name: '商业渠道维护',
          desc: '对区域合作商业进行维护',
          color: '#F0AB47',
          borderColor: 'rgba(240, 171, 71, 0.6)',
          bgColor: 'rgba(255, 253, 249, 1)',
          imgPath: channelMaintenance,
          taskType: 'doTaskChannelMaintenance',
          taskTypeId: 69
        },

        {
          name: '第三方学术项目',
          desc: '第三方项目立项合同和发票',
          color: '#F0AB47',
          borderColor: 'rgba(240, 171, 71, 0.6)',
          bgColor: 'rgba(255, 253, 249, 1)',
          imgPath: specialContracts,
          taskType: 'doTaskSpecialContracts',
          taskTypeId: 70
        },
        {
          name: '通用任务',
          desc: '可上传线下证据链',
          color: '#64BCCA',
          borderColor: 'rgba(98, 190, 205, 0.6)',
          bgColor: 'rgba(246, 254, 255, 1)',
          imgPath: enterPriseCommon,
          taskType: 'doTaskCommon',
          taskTypeId: 61
        }
      ],
      taskType: null
    }
  },
  methods: {
    setBtnStyle (e, item, type) {
      if (type === 'over') {
        e.target.style.backgroundColor = item.color
        e.target.style.color = '#fff'
      }
      if (type === 'out') {
        e.target.style.backgroundColor = '#fff'
        e.target.style.color = item.color
      }
    },
    doTaskBtn (taskType) {
      console.log(taskType);
      this.taskType = taskType
    }
  }
}
</script>

<style lang="scss" scoped>
.enterprise-task-page {
  .task-list {
    margin-top: 8px;
    overflow: hidden;
    .task-item {
      position: relative;
      padding-top: 24px;
      padding-left: 18px;
      margin-right: 20px;
      margin-bottom: 20px;
      float: left;
      width: 320px;
      height: 150px;
      border-radius: 8px;
      .item-info {
        position: absolute;
        z-index: 100;
        .item-title {
          font-weight: 600;
        }
        .item.desc {
          font-weight: 400;

        }
        .item-desc {
          width: 160px;
          height: 36px;
        }
        .item-task-btn {
          position: absolute;
          margin-top: 15px;
          width: 60px;
          height: 24px;
          line-height: 22px;
          border-radius: 12px;
          text-align: center;
          font-weight: 700;
          cursor: pointer;
        }
      }
      .item-img {
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 0;
        width: 160px;
      }
    }
  }
}
</style>
