<template>
  <div class="task-box">
    <!-- 分享的图片展示 -->

    <el-image v-if="showImg" style="width: 100px; height: 100px" :src="taskInfo.shareImgUrl" :preview-src-list="[taskInfo.shareImgUrl]"> </el-image>
    <template v-if="configList && configList.length > 0">
      <div style="max-height: 270px; overflow: auto">
        <div v-for="item in configList" :key="item.id" class="field-box">
          <template v-if="item.taskFiledType == 'domain' || item.taskFiledType == 'select' || item.taskFiledType == 'tree'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value" v-show="!(item.taskTypeId == '19' && item.taskFiledKey == 'temp3')">
              {{ getDesc(item) }}
            </div>
          </template>
          <!-- 城市选择 -->
          <template v-if="item.taskFiledType === 'area'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ wmTaskContent[item.taskFiledKey] || '--' }}
            </div>
          </template>
          <!-- 文字输入 -->
          <template v-if="item.taskFiledType == 'text' || item.taskFiledType == 'inputautoselect' || item.taskFiledType == 'map' || item.taskFiledType == 'mapwithimg'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ wmTaskContent[item.taskFiledKey] || '--' }}
            </div>
          </template>
          <!-- 时间 -->
          <template v-if="item.taskFiledType == 'datetime'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ wmTaskContent[item.taskFiledKey] || '--' }}
            </div>
          </template>
          <!-- 日期范围 -->
          <template v-if="item.taskFiledType == 'datatimerange'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ wmTaskContent[item.taskFiledKey] }}
            </div>
          </template>
          <!-- 图片上传 -->
          <div v-if="item.taskFiledType == 'img'" class="divline" style="width: 100%; height: 15px; background-color: #e9e9e9; margin-bottom: 5px"></div>
          <template v-if="item.taskFiledType == 'img'">
            <div class="upload-field">
              <div class="field-text" :class="{ required: item.isMustfill == '1' }">{{ item.taskFiledValue }}：</div>
              <!-- 上传组件 -->
              <div class="img-box" v-if="item.imgList">
                <div v-for="(iItem, index) in item.imgList" :key="index" class="img-box-content">
                  <span class="type">{{ iItem.type }}</span>
                  <el-image class="img-item" lazy :src="iItem.url" :preview-src-list="getPreviewList(item.previewList, index)" />
                </div>
              </div>
            </div>
          </template>
          <!-- 金额 -->
          <template v-if="item.taskFiledType == 'money'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ wmTaskContent[item.taskFiledKey] || '--' }}
            </div>
          </template>
          <!-- 数字 -->
          <template v-if="item.taskFiledType == 'number'">
            <div class="title-value">{{ item.taskFiledValue }}：</div>
            <div class="desc-value">
              {{ wmTaskContent[item.taskFiledKey] || '--' }}
            </div>
          </template>
          <!-- 长文本 -->
          <template v-if="item.taskFiledType == 'longtext'">
            <div class="longtext-box">
              <div class="field-text" :class="{ required: item.isMustfill == '1' }">{{ item.taskFiledValue }}：</div>
              <textarea class="textarea-box" :disabled="true" :value="wmTaskContent[item.taskFiledKey] || '--'" :maxlength="item.taskFiledMaxsize" />
            </div>
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import taskApi from '@/api/taskDetail/task';
import commonApi from '@/api/taskDetail/common';
import provinces from '@/util/lib/province';
import citys from '@/util/lib/city';
import areas from '@/util/lib/area';
import request from '@/router/axios';

export default {
  name: 'index',
  data() {
    return {
      baseUrl: process.env.VUE_APP_URL,
      showImg: false, // 是否显示只展示图片，分享用到
      taskInfo: {},
      wmTaskContent: {},
      taskTypeId: 0, // 任务类型id
      configList: [], // 配置列表
      dictList: [], //字典
      imgTypeList: ['jpeg', 'jpg', 'png', 'git', 'bmp'] // 能查看的文件类型
    };
  },

  methods: {
    // 获取详情
    getDesc(item) {
      // 拜访类任务
      const arr = ['51', '52', '53'];
      if (arr.includes(item.taskTypeId) && item.taskFiledKey === 'temp24') {
        return this.wmTaskContent['temp24label'];
      }
      // 获取需要转换的字符串（例如 '1,2,3'）
      const contentValue = this.wmTaskContent[item.taskFiledKey];
      if (!contentValue) return '--';
      // 获取字典表对应数组
      const itemList = this.dictList[item.dictGroupName] || [];
      // 按逗号拆分成数组
      const valueArray = contentValue.split(',');
      // 将每个拆分值找到对应的 label
      const result = valueArray.map((val) => {
        const foundItem = itemList.find((dictItem) => dictItem.value === val);
        return foundItem ? foundItem.label : null;
      });
      // 如果有任意一个值无法找到对应的 label，则直接返回 '--'
      if (result.some((label) => label === null)) {
        return '--';
      }
      // 否则，使用逗号拼接并返回
      return result.join(',');
    },

    // 得出图片
    // 得出图片
    getImgList(urlStr, item) {
      // 如果字段类型不是图片或没有 urlStr，则直接返回空数组
      if (item.taskFiledType !== 'img' || !urlStr) return [[], []];

      // 将字符串按逗号拆分为数组
      const urlArr = urlStr.split(',');
      // 如果拆分后为空，也返回空数组
      if (!urlArr.length) return [[], []];

      // 使用 reduce 一次性构建 imgList 和 previewList
      const [imgList, previewList] = urlArr.reduce(
        (acc, curUrl) => {
          let [imgListAcc, previewListAcc] = acc;
          let type = '无';
          let newUrl = curUrl;

          if (curUrl.includes(';1')) {
            type = '拍照';
            newUrl = curUrl.replace(';1', '');
          } else if (curUrl.includes(';2')) {
            type = '相册';
            newUrl = curUrl.replace(';2', '');
          }

          const fullUrl = process.env.VUE_APP_URL + newUrl;
          imgListAcc.push({ type, url: fullUrl });
          previewListAcc.push(fullUrl);

          return [imgListAcc, previewListAcc];
        },
        [[], []]
      );

      return [imgList, previewList];
    },

    // 获取任务详情
    async getTaskInfoById(id) {
      try {
        const res = await taskApi.getTaskInfoById(id);
        const { data } = res.data;
        this.wmTaskContent = data.wmTaskContent;
        this.taskInfo = data.taskInfo;
        this.taskTypeId = data.taskType;
        this.getTaskContentConfigByTaskTypeId(data.taskType);
      } catch (e) {
        console.log(e);
      }
    },
    // 获取配置
    async getTaskContentConfigByTaskTypeId(value) {
      try {
        let res = await commonApi.getTaskContentConfigByTaskTypeId(value);
        let { config, dict } = res.data.data;
        this.configList = config;
        this.dictList = dict;
        this.configList.forEach((item) => {
          item.taskFiledType = item.taskFiledType.trim();
          if (item.taskFiledType == 'img') {
            let imgArr = this.getImgList(this.wmTaskContent[item.taskFiledKey], item);
            item.imgList = imgArr[0];
            item.previewList = imgArr[1];

            console.log('item', item);
          }
        });
      } catch (e) {
        console.log(e);
      }
      // this.getMapAddress();
      // uni.hideLoading();
    },
    getPreviewList(imgList, index) {
      // 解决el-image大图预览定位图片不准确的问题
      return imgList.slice(index).concat(imgList.slice(0, index));
    },
    getInfo(id) {
      this.getTaskInfoById(id);
    },
    mounted() {
      this.getTaskInfoById(this.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.field-box {
  //display: flex;
  padding: 0 20px 10px;
  overflow: hidden;
  .title-value {
    //width: 50%;
    float: left;
  }
  .desc-value {
    float: left;
  }
  .upload-field {
    .img-box {
      padding-top: 10px;
      display: flex;
      flex-wrap: wrap;
    }
    .file-box {
      .file-item {
        padding: 2px 8px;
        cursor: pointer;
        &:hover {
          background-color: #f5f7fa;
          color: #2d8cf0;
        }
      }
    }
  }
  .img-box-content {
    padding-top: 15px;
    position: relative;

    .type {
      font-size: 12px;
      position: absolute;
      top: -3px;
    }
  }
  .img-item {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }
  .longtext-box {
    width: 50%;
    .textarea-box {
      margin-top: 10px !important;
      width: 100%;
    }
  }
}

.sign-in-box {
  padding: 10px 20px;
}

.detail-info {
  ul {
    list-style: none;
    li {
      span {
        min-width: 80px;
      }
      display: flex;
      margin-bottom: 5px;
    }
  }
}
</style>
