<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2024-01-04 15:40:34
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2024-01-09 10:11:51
 * @FilePath: /huaxin-web/src/views/checktask/task/components/ItemJc.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
-->
<template>
  <div class="item bb flex-d-b">
    <img class="r" :src="itemData.status == 1 ? right : loading" alt="" />
    <div class="rb flex" :class="{ ready: itemData.status == 1 }">
      <div>
        <div class="t">{{ itemData.inspcetTotal || "-" }}</div>
        <div class="b">任务完成率</div>
      </div>
    </div>
    <div class="top flex">
      <img :src="imgList[itemData.type - 1]" alt="" />
      <div class="text">{{ itemData.title || "-" }}</div>
    </div>
    <div class="middle bb">
      <div class="list flex">
        <div class="a">任务内容:</div>
        <div class="b">
          {{ itemData.describe || "-" }}
        </div>
      </div>
      <div class="list flex">
        <div class="a">起止日期:</div>
        <div class="b">
          {{ itemData.startTime || "-" }} ~ {{ itemData.endTime || "-" }}
        </div>
      </div>
      <div class="list flex">
        <div class="a">任务发起人:</div>
        <div class="b">
          {{ itemData.nickname || "-" }}
        </div>
      </div>
      <div class="list flex">
        <div class="a">任务发起时间:</div>
        <div class="b">
          {{ itemData.createTime || "-" }}
        </div>
      </div>
      <div v-if="itemData.type == 1" class="list flex">
        <div class="a">任务类型:</div>
        <div class="b">
          {{ residentTypeOptions[itemData.taskType] }}
        </div>
      </div>
      <div v-if="itemData.type == 2" class="list flex">
        <div class="a">任务类型:</div>
        <div class="b">
          {{ businessTypeOptions[itemData.businessType] }}
        </div>
      </div>
      <div v-if="itemData.type == 3" class="list flex">
        <div class="a">任务类型:</div>
        <div class="b">
          {{ typeOptions[itemData.checkType] }}
        </div>
      </div>
      <div v-if="itemData.type == 1" class="list flex">
        <div class="a">所属区域:</div>
        <div class="b">
          {{ getBeyongArea() }}
        </div>
      </div>
      <div v-if="itemData.type == 1" class="list flex">
        <div class="a">负责人:</div>
        <div class="b">
          {{ getResponsiblePerson() }}
        </div>
      </div>
      <div class="list flex">
        <div class="a">备注:</div>
        <div class="b">
          {{ itemData.remarks || "-" }}
        </div>
      </div>
    </div>
    <div class="btn">
      <div class="btn-wrapper">
        <el-button
          type="primary"
          plain
          size="mini"
          @click="$emit('handleDetail', itemData)"
          >任务进度</el-button
        >
        <el-button
          type="primary"
          plain
          size="mini"
          @click="$emit('handleUpdate', itemData)"
          >修改</el-button
        >
        <el-button
          type="primary"
          plain
          size="mini"
          @click="$emit('handleVisitorMiss', itemData)"
        >到访不遇</el-button>
        <el-button
          type="danger"
          plain
          size="mini"
          @click="$emit('handleEnd', itemData)"
          >任务结束</el-button
        >
        <el-button
          type="danger"
          plain
          size="mini"
          @click="$emit('handleDelete', itemData)"
          v-if="itemData.status != 1"
          >删除</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import loading from "@/assets/ajImg/loading.png";
import right from "@/assets/ajImg/right.png";
import jm from "@/assets/ajImg/jm.png";
import cy from "@/assets/ajImg/cy.png";
import gy from "@/assets/ajImg/gy.png";
export default {
  name: "",
  props: {
    itemData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      loading,
      right,
      imgList: [jm, cy, gy],
      residentTypeOptions: {
        "1":"小区用户",
        "2":"气代煤用户",
        "3":"孤寡老人用户"
      },
      businessTypeOptions: {
        "1":"华鑫季度一次",
        "2":"华鑫半年一次",
        "3":"鸿海季度一次",
        "4":"鸿海半年一次"
      },

      typeOptions: {
        1:"华鑫季度一次",
        2:"鸿海季度一次",
      },
    };
  },
  methods: {
    getBeyongArea(){
      if(this.itemData.relationInfoList){
        const result = Object.values(
          this.itemData.relationInfoList.filter(item => item.type == "1").reduce((acc, item) => {
            const key = `${item.city}-${item.county}-${item.street}`;
            acc[key] = acc[key] || { ...item, communitys: [] };
            acc[key].communitys.push(item.community);
            return acc;
          }, {})
        )
        .map(item => `${item.city}-${item.county}-${item.street}-${item.communitys.join('|')}`)[0];
        return result;
      }else{
        return "-";
      }

    },
    getResponsiblePerson(){
      if(this.itemData.relationInfoList){
        return this.itemData.relationInfoList.filter(item => item.type == "2").map(item => item.groupName).join("|");
      }else{
        return "-";
      }

    }

  },
};
</script>
<style lang="scss" scoped>
.item {
  position: relative;
  width: 700px;
  height: 350px;
  border: 1px solid #eeeeee;
  padding: 41px 10px 26px 21px;
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  .top {
    margin-bottom: 25px;
    img {
      position: relative;
      margin-right: 10px;
      top: 5px;
    }
    .text {
      color: #1b63df;
      font-size: 20px;
    }
  }
  .r {
    width: 94px;
    height: 94px;
    // background: blue;
    position: absolute;
    right: -17px;
    top: -20px;
  }
  .rb {
    width: 100px;
    height: 100px;
    // background: blue;
    position: absolute;
    right: 53px;
    top: 30%;
    // margin-top:-50px;
    background: #e8f2ff;
    border-radius: 50%;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: #226aed;
    .t {
      font-weight: 600;
    }
    .b {
      font-size: 14px;
    }
    &.ready {
      background: #eefff2;
      color: #08932d;
    }
  }
  .middle {
    position: relative;
    flex: 1;
    // background: red;
    // width: 500px;
    width: 100%;
    height: 0px;
    overflow: auto;
    padding-right: 172px;
    margin-bottom: 10px;
    .list {
      margin-bottom: 10px;
      align-items: center;
      .a {
        width: 100px;
        text-align: right;
        margin-right: 16px;
        font-size: 14px;
        font-weight: 800;
      }
      .b {
        flex: 1;
        font-size: 14px;
        color: #3d3d3d;
      }
    }
  }
  .btn-wrapper {
    float: right;
    margin-right: 53px;
  }
}
</style>
