<template>
  <div class="repair-detail-box">
    <div
      :class="[
        'repair-content',
        detailStatus === 'processed' ? 'fixed-page-content' : 'page-content',
      ]"
    >
      <div class="white-box page-1">
        <div class="cell-item">
          <p class="label">当前企业</p>
          <p class="tit">{{ detail.companyName }}</p>
        </div>
        <!-- <div class="cell-item">
          <p class="label">您是想</p>
          <div class="tit">{{ detail.type === "1" ? "报事" : "咨询" }}</div>
        </div> -->
        <div class="cell-item">
          <p class="label">快捷选择</p>
          <div class="tit">{{ detail.serviceType }}</div>
        </div>
        <div class="block-cell-item">
          <p class="label">政企服务描述</p>
          <div class="tit">
            <div class="textarea">
              {{ detail.description }}
            </div>
          </div>
        </div>
      </div>
      <div class="white-box page-2">
        <!-- <div class="cell-item">
          <p class="label">位置</p>
          <div class="tit">{{ detail.position === "1" ? "室内" : "公区" }}</div>
        </div> -->
        <div class="block-cell-item">
          <p class="label">补充说明</p>
          <div class="tit">
            <ul class="annex-list-box">
              <van-uploader
                v-model="fileList"
                multiple
                :deletable="false"
                :show-upload="false"
              />
              <!--              <li-->
              <!--                class="annex-item"-->
              <!--                v-for="(item, index) in explainAnnexList"-->
              <!--                :key="index"-->
              <!--              >-->
              <!--&lt;!&ndash;                <img :src="item.url" alt="" v-if="item.type === 'image'" />&ndash;&gt;-->
              <!--                <video-->
              <!--                  :src="item.url"-->
              <!--                  v-if="item.type === 'video'"-->
              <!--                  width="100%"-->
              <!--                  height="100%"-->
              <!--                ></video>-->
              <!--              </li>-->
            </ul>
          </div>
        </div>
        <div class="cell-item">
          <p class="label">联系方式</p>
          <p class="tit">
            {{ detail.contact }}
          </p>
        </div>
        <div class="cell-item flex-item">
          <p class="label">上报人</p>
          <p class="tit tel-box">
            <span>{{ detail.userPhone }}</span>
            <TelNum :num="detail.phone" :showTel="false" />
          </p>
        </div>
        <div class="cell-item">
          <p class="label">报事时间</p>
          <p class="tit">{{ detail.createdAt }}</p>
        </div>
      </div>
      <div class="white-box page-3">
        <div class="custom-item-tit">
          <p class="tit">处理情况</p>
        </div>
        <div class="block-cell-item">
          <p class="label">处理进展</p>
          <div class="tit">
            <van-steps :active="stepActive" :active-color="'#6600FF'">
              <van-step v-for="(item, index) in processSteps" :key="index">{{
                item.label
              }}</van-step>
            </van-steps>
          </div>
        </div>
        <div class="block-cell-item">
          <p class="label">
            处理后拍照<span class="tips">（支持图片上传限20M内，最多6张）</span>
          </p>
          <div class="tit">
            <ul class="annex-list-box">
              <van-uploader
                v-model="fileList2"
                multiple
                :deletable="false"
                :show-upload="false"
              />
              <!--              <li-->
              <!--                class="annex-item"-->
              <!--                v-for="(item, index) in processedAnnexList"-->
              <!--                :key="index"-->
              <!--              >-->
              <!--                <img :src="item.url" alt="" v-if="item.type === 'image'" />-->
              <!--                <video-->
              <!--                  :src="item.url"-->
              <!--                  v-if="item.type === 'video'"-->
              <!--                  width="100%"-->
              <!--                  height="100%"-->
              <!--                ></video>-->
              <!--              </li>-->
            </ul>
          </div>
        </div>
        <div class="block-cell-item">
          <p class="label">处理说明</p>
          <div class="tit">
            <div
              class="textarea"
              style="
                background: #f8f8f8;
                padding: 2.667vw;
                border-radius: 1.333vw;
              "
            >
              {{ detail.handleExplain ? detail.handleExplain : "未填写" }}
            </div>
          </div>
        </div>
        <div class="cell-item flex-item">
          <p class="label">结案人</p>
          <p class="tit tel-box">
            <span>{{ detail.dispatchUserName }}</span>
            <TelNum :num="detail.hanleUserPhone" :showTel="false" />
          </p>
        </div>
        <div class="cell-item">
          <p class="label">结案时间</p>
          <p class="tit">{{ detail.handleTime }}</p>
        </div>
      </div>
      <!-- <div
        class="white-box page-4"
        v-if="detailStatus === 'processed' || detailStatus === 'evaluated'"
      >
        <div class="custom-item-tit">
          <p class="tit">服务评价</p>
        </div>
        <div class="custom-white-box-content">
          <div class="evaluate-box">
            <p class="evaluate-left">您对本次服务的评价</p>
            <div class="evaluate-right">
              <van-rate
                v-model="evaluateVal"
                color="#ffd21e"
                :readonly="detailStatus !== 'processed'"
              />
            </div>
          </div>
        </div>
      </div> -->
    </div>
    <!-- <div
      class="repair-bottom bottom-button"
      v-if="detailStatus === 'processed'"
    >
      <button class="btn" @click="onConfirm">评价提交</button>
    </div> -->
  </div>
</template>
<script>
import TelNum from "@/components/tel-number";
// import { getById } from '../../service/api_repair'
import Base from "@/pages/base/base";
import { editRepair, getById } from "@/service/api_repair";
import { Toast } from "vant";
export default {
  components: {
    TelNum,
  },
  data() {
    return {
      dc_key: ["QUICK_SELECTION", "REPAIR_STATUS"],
      detailId: "", // 详情id
      detailStatus: "", // 详情状态：0、待受理 1、已受理 2、已处理  3、已评价
      explainAnnexList: [
        // {
        //     type: 'image',
        //     url: require('../../assets/image/reportRepair/shuibiao.jpeg')
        // }
      ], // 说明附件 type image、图片 video、视频
      processedAnnexList: [
        // {
        //     type: 'image',
        //     url: require('../../assets/image/reportRepair/shuibiao.jpeg')
        // }
      ], // 附件 type image、图片 video、视频
      stepActive: 0, // 当前处理到哪一步
      processSteps: [
        {
          id: 1,
          status: 1,
          label: "上报",
        },
        {
          id: 2,
          status: 1,
          label: "已受理",
        },
        {
          id: 3,
          status: 1,
          label: "已处理",
        },
        // {
        //   id: 4,
        //   status: 0,
        //   label: "评价",
        // },
      ], // 处理流程
      evaluateVal: 0, // 评分
      id: "",
      detail: {},
      fileUrlList: [],
      fileList: [],
      fileList2: [],
      params: {
        id: "",
        evaluateNum: "",
        score: "",
      },
    };
  },
  mixins: [Base],
  mounted() {
    this.id = this.$route.query.id;
    this.initDict(this.dc_key).then((res) => {
      this.getDetailById();
    });
  },
  methods: {
    onConfirm(value) {
      this.params.evaluateNum = this.params.evaluateNum + 1;
      this.params.score = this.params.score + this.evaluateVal;
      this.params.status = "evaluated";
      editRepair(this.params).then((res) => {
        Toast.success("评价成功");
        this.$router.push({
          path: "repairRecord",
          query: { type: this.detail.type },
        });
      });
    },
    getDetailById() {
      const _this = this;
      getById({ id: _this.id }).then((res) => {
        console.log(res.data);
        if (res.data) {
          const det = _this.getItemJson(res.data);
          console.log("det", det);
          this.detail = det;
          this.explainAnnexList = det.fileUrlList;
          this.processedAnnexList = det.handleUrlList;
          this.detailStatus = det.status;
          this.params = {
            id: det.id,
            evaluateNum: det.evaluateNum,
            score: det.score,
          };
          this.evaluateVal =
            (det.score == null ? 0 : det.score) /
            (det.evaluateNum == null ? 1 : det.evaluateNum);
        }
        // const item = _this.getItemJson(res)
      });
    },
    getItemJson: function (item) {
      item.serviceType = this.dc_map.QUICK_SELECTION[item.serviceType];
      if (item.userId) {
        const user = item.userId.split("-");
        item.userPhone = user[1] + "-" + user[2];
        item.phone = user[2];
      }
      if (item.handleUserId) {
        const test = item.handleUserId.split("-");
        item.handleUserId = test[1] + "-" + test[2];
        item.hanleUserPhone = test[2];
      }
      switch (item.status) {
        case "unAcceptance":
          this.stepActive = 0;
          break;
        case "acceptance":
          this.stepActive = 1;
          break;
        case "evaluated":
          this.stepActive = 3;
          break;
        case "processed":
          this.stepActive = 2;
          break;
      }
      const fileUrls = item.fileUrl ? item.fileUrl.split(",") : [];
      const fileUrl = [];
      if (fileUrls !== null && fileUrls.length > 0) {
        fileUrls.forEach((item) => {
          if (item) {
            const ul = {
              type: "image",
              url:
                this.$constant.BASE_URI + "/wx/fileController/download/" + item,
              isImage: true,
            };
            fileUrl.push(ul);
            this.fileList.push(ul);
          }
        });
      }
      item.fileUrlList = fileUrl;

      const handleUrls = item.handleUrl ? item.handleUrl.split(",") : [];
      const handleUrl = [];
      if (handleUrls !== null && handleUrls.length > 0) {
        handleUrls.forEach((item) => {
          if (item) {
            const ul = {
              type: "image",
              url:
                this.$constant.BASE_URI + "/wx/fileController/download/" + item,
              isImage: true,
            };
            this.fileList2.push(ul);
            handleUrl.push(ul);
          }
        });
      }
      item.handleUrlList = handleUrl;
      return item;
    },
    /**
     *
     */
    quickSelect(item) {
      if (this.quickSleced.val && this.quickSleced.val === item.val) {
        this.quickSleced = {};
      } else {
        this.quickSleced = item;
      }
    },
    /**
     * 上传文件
     */
    afterRead(file) {
      console.log(file);
    },
  },
};
</script>
<style lang="scss" scoped>
.repair-detail-box {
  width: 100%;
  height: 100%;
  .page-1 {
    .textarea {
      padding: 20px;
      border-radius: 10px;
      background: $page-color-base;
      box-sizing: border-box;
    }
  }
  .page-4 {
    .evaluate-box {
      padding: 20px 30px;
      background: $page-color-base;
      border: 1px solid #ebedf0;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }
  }
  .annex-list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &::after {
      display: block;
      content: "";
      width: 30%;
      height: 0px;
    }
    .annex-item {
      width: 30%;
      height: 180px;
      //border: 1px solid $text4;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      > img {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: block;
      }
      video {
        width: 100%;
        height: 100%;
      }
    }
  }
  .tel-box {
    display: flex;
    align-items: center;
    /deep/ .custom-tel-component {
      margin-left: 20px;
    }
  }
}
</style>
