<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form :inline="true" size="medium" class="demo-form-inline">
        <el-form-item>
          <el-button size="medium" type="primary" plain @click="getBackBtn"
            >
            <!-- 返回 -->
            {{$t('message.projectManage.back')}}
            </el-button
          >
          <el-button
            size="medium"
            type="primary"
            plain
            @click="showPlanBtn"
            v-if="itemForm.personCharge == userId && itemForm.state!=2"
            >
            <!-- 进度反馈 -->
            {{$t('message.projectManage.progressFeedback')}}
            </el-button
          >
          <el-button
            size="medium"
            type="primary"
            plain
            @click="planPerformBtn"
            v-if="itemForm.personCharge == userId && itemForm.state!=2"
            >
            <!-- 完成任务 -->
            {{$t('message.projectManage.completeTask')}}
            </el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table_wrap">
      <div class="task_wrap whiteBlock">
        <div class="pageTitle">
          <!-- 任务内容 -->
          {{$t('message.projectManage.taskContent')}}
          <el-button size="small" type="info" plain v-if="itemForm.state==0">
            <!-- 未开始 -->
            {{$t('message.projectManage.notStart')}}
          </el-button>
          <el-button size="small" type="primary" plain v-if="itemForm.state==1">
            <!-- 进行中 -->
            {{$t('message.projectManage.underway')}}
          </el-button>
          <el-button size="small" type="success" plain v-if="itemForm.state==2">
            <!-- 已完成 -->
            {{$t('message.projectManage.completed')}}
          </el-button>
        </div>
        <el-form ref="form" label-width="150px" style="width: 80%">
          <!-- 分部分项工程名称 -->
          <el-form-item :label="$t('message.projectManage.NameOfSubProject')+':'">{{
            itemForm.branchProjectName
          }}</el-form-item>
          <!-- 施工位置 -->
          <el-form-item :label="$t('message.projectManage.constructionLocation')+':'">{{
            itemForm.buildPosition
          }}</el-form-item>
          <!-- 开始日期 -->
          <el-form-item :label="$t('message.projectManage.startData')+':'">{{
            itemForm.startTime
          }}</el-form-item>
          <!-- 截止完成日期 -->
          <el-form-item :label="$t('message.projectManage.completionDate')+':'">{{
            itemForm.endTime
          }}</el-form-item>
          <!-- 重要程度 -->
          <!-- "一般" -->
          <!-- "重要" -->
          <!-- "很重要" -->
          <el-form-item :label="$t('message.projectManage.degreeOfImportance')+':'">{{
            itemForm.importance == "1"
              ? $t('message.projectManage.ordinary')
              : itemForm.importance == "2"
              ? $t('message.projectManage.importent')
              : $t('message.projectManage.veryImportent')
          }}</el-form-item>
          <!-- 负责人 -->
          <el-form-item :label="$t('message.projectManage.principal')+':'">{{
            itemForm.personChargeName
          }}</el-form-item>
          <!-- 上传的附件 -->
          <el-form-item :label="$t('message.projectManage.uploadedAttachments')+':'">
            <img
              v-for="(item, index) in fileList"
              :key="index"
              :src="fileUrl + item.url"
              @click="handlePreview({url:item.url})"
              style="height: 50px; width: auto; margin-right: 10px; cursor: pointer;"
            />
          </el-form-item>
          <!-- <el-form-item label="创建人:">{{
            itemForm.createrUser
          }}</el-form-item> -->
          <!-- 创建日期 -->
          <el-form-item :label="$t('message.projectManage.createDate')+':'">{{
            itemForm.createTime
          }}</el-form-item>
          <!-- 任务描述 -->
          <el-form-item :label="$t('message.projectManage.taskDescription')+':'">{{
            itemForm.taskDescription
          }}</el-form-item>
        </el-form>
      </div>
      <div class="plan_wrap whiteBlock">
        <div class="pageTitle">
          <!-- 进度记录 -->
          {{$t('message.projectManage.progressRecord')}}
        </div>
        <vue-scroll class="scroll" style="height: 94%; padding: 10px 0" v-if="planList.length>0">
          <div
            class="flex plan_content"
            v-for="(item, index) in planList"
            :key="index"
          >
            <img src="@/assets/images/profile_photo.png" class="dialog_img" />
            <div class="whiteBlock plan_info">
              <div class="flex3 back_info">
                <!-- 反馈人 -->
                <div> {{$t('message.projectManage.feedbackPeople')+':'}} {{ item.feedbackPersonName }}</div>
                <div>{{ item.feedbackTime }}</div>
              </div>
              <div class="flex2">
                <el-slider
                  v-model="item.progressRatio"
                  style="width: 85%"
                  :disabled="true"
                  :show-tooltip="false"
                ></el-slider>
                <span class="ratio">{{ item.progressRatio }}%</span>
              </div>
              <!-- 反馈内容 -->
              <div class="back_info margin">{{$t('message.projectManage.feedbackContent')}}</div>
              <el-input
                type="textarea"
                :readonly="true"
                v-model="item.feedbackContent"
              >
              </el-input>
              <div>
                <div class="back_info margin">
                {{$t('message.projectManage.accessory')}}
                  <!-- 附件 -->
                </div>
                <img
                  v-if="!item.imgUrl"
                  src="@/assets/images/profile_photo.png"
                  class="accessory_img"
                />
                <img
                  v-else
                  v-for="(itemImg, index) in JSON.parse(item.imgUrl)"
                  :key="index"
                  :src="fileUrl + itemImg.url"
                  @click="handlePreview({url:itemImg.url})"
                  class="accessory_img"
                />
              </div>
            </div>
          </div>
        </vue-scroll>
        <div v-else class="noData">
            <img src="@/assets/images/noData.png"/>
            <div>
              <!-- 暂无数据 -->
               {{$t('message.projectManage.noData')}}
            </div>   
        </div>
      </div>
    </div>
    <!-- 进度反馈弹窗 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="workerInfo.type == 1 ?$t('message.projectManage.progressFeedback') : $t('message.projectManage.completeTask')"
      :visible.sync="dialogVisible"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          ref="workerInfoForm"
          label-width="100px"
          size="medium"
          class="dialogFormBox"
          :rules="addEditRules"
          :model="workerInfo"
        >
        <!-- 进度 -->
          <el-form-item
            :label="$t('message.projectManage.progress')"
            prop="progressRatio"
            v-if="workerInfo.type == 1"
          >
            <div class="flex2">
              <el-slider
                v-model="workerInfo.progressRatio"
                style="width: 78%"
                :show-tooltip="false"
              ></el-slider>
              <span class="ratio">{{ workerInfo.progressRatio }}%</span>
            </div>
          </el-form-item>
          <el-form-item
            :label="workerInfo.type == 1 ? $t('message.projectManage.feedbackContent') :$t('message.projectManage.taskSummary') "
            prop="feedbackContent"
          >
            <el-input type="textarea" v-model="workerInfo.feedbackContent">
            </el-input>
          </el-form-item>
          <!-- '附件' -->
          <el-form-item :label="$t('message.projectManage.accessory')" prop="fileUrl">
            <el-upload
              class="upload-demo"
              :action="uploadUrl"
              :on-preview="handlePreview"
              :on-success="handleSuccess"
              :limit="5"
              multiple
              :file-list="palnFileList"
              name="files"
              :on-remove="handleRemove"
            >
              <el-button size="small" type="primary" plain>
                <!-- 点击上传 -->
                {{$t('message.projectManage.clickUpdate')}}
              </el-button>
            </el-upload>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="dialogVisible = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.personnelPosition.cancel") }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="savePlanBtn"
              size="medium"
              >{{ $t("message.personnelPosition.determine") }}
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- //查看大图 -->
    <el-dialog :modal-append-to-body="false" :visible.sync="showBigImg">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { getDetailInfoApi, addPlanInfoApi } from "@/assets/js/api/scheduleInfo";
export default {
  props: ["id"],
  mounted() {},
  data() {
    return {
      seedId: "",
      projectSn: "",
      uploadUrl: "",
      fileUrl: "",
      itemForm: {},
      planList: [],
      fileList: [],
      dialogVisible: false,
      addEditRules: {
        progressRatio: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "change",
          },
        ],
        feedbackContent: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur",
          },
        ],
      },
      workerInfo: {
        //进度反馈信息
        progressRatio: 0,
        feedbackContent: "",
        imgUrl: "",
        subitemId: "",
        type: 1,
        feedbackPerson: "",
      },
      showBigImg: false,
      dialogImageUrl: "", //大图
      palnFileList: [], // 新增反馈进度的附件
      userId: "",
    };
  },
  created() {
    this.userId = this.$store.state.userInfo.userId;
    this.seedId = this.$props.id;
    this.projectSn = this.$store.state.projectSn;
    this.uploadUrl = this.$store.state.UPLOADURL;
    this.fileUrl = this.$store.state.FILEURL;
    this.getDetailInfo();
  },
  methods: {
    //返回列表页
    getBackBtn() {
      this.$emit("closeDetail", false);
    },

    //进度反馈按钮
    showPlanBtn() {
      this.dialogVisible = true;
      this.workerInfo.progressRatio = 0;
      this.workerInfo.feedbackContent = "";
      this.palnFileList = [];
      this.workerInfo.type = 1;
      setTimeout(() => {
        this.$refs.workerInfoForm.clearValidate();
      }, 200);
    },

    //进度完成按钮
    planPerformBtn() {
      this.dialogVisible = true;
       this.workerInfo.feedbackContent = "";
      this.palnFileList = [];
      this.workerInfo.type = 2;
       setTimeout(() => {
        this.$refs.workerInfoForm.clearValidate();
      }, 200);
    },

    //获取详情数据
    getDetailInfo() {
      let data = {
        projectSn: this.projectSn,
        itemId: this.seedId,
      };
      getDetailInfoApi(data).then((res) => {
        if (res.code == 200) {
          this.itemForm = res.result.itemDetail;
          this.planList = res.result.feedbackList;
          //获取项目的基本信息的附件
          this.fileList = res.result.itemDetail.fileUrl
            ? [JSON.parse(res.result.itemDetail.fileUrl)]
            : [];
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //点击查看图片时
    handlePreview(file) {
      console.log(file)
      this.dialogImageUrl = this.fileUrl+file.url;
      this.showBigImg = true;
    },
    //上传成功
    handleSuccess(file) {
      let data = { name: file.data[0].filename, url: file.data[0].imageUrl };
      this.palnFileList.push(data);
    },
    //删除成功
    handleRemove(file, fileList) {
      let url = file.url;
      for (let i = 0; i < this.palnFileList.length; i++) {
        if (this.palnFileList[i].url == url) {
          //删除数据
          this.palnFileList.splice(i, 1);
        }
      }
    },

    //保存进度
    savePlanBtn() {
         this.$refs.workerInfoForm.validate((valid) => {
               if (valid) {
                 let data = this.workerInfo;
                 data.feedbackPerson = this.userId;
                 data.subitemId = this.seedId;
                 data.imgUrl =
                 this.palnFileList.length > 0 ? JSON.stringify(this.palnFileList) : "";
                 addPlanInfoApi(data).then((res) => {
                   if (res.code == 200) {
                     this.$message.success(res.message);
                     this.dialogVisible = false;
                     this.getDetailInfo();
                   } else {
                     this.$message.error(res.message);
                   }
                 });
               }else{
                 return false;
               }
         })
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.flex2 {
  display: flex;
  align-items: center;
}
.flex3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.scroll {
  background: #f3f5fd;
  box-sizing: border-box;
}
.table_wrap {
  display: flex;
  width: 100%;
  .task_wrap {
    width: 60%;
    margin-right: 12px;
    padding: 15px;
    box-sizing: border-box;
  }
  .plan_wrap {
    width: 40%;
    padding: 15px;
    box-sizing: border-box;
    .plan_content {
      width: 100%;
      padding: 12px 20px;
      box-sizing: border-box;
    }
  }

  .dialog_img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-top: 15px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.11);
  }
  .plan_info {
    width: 100%;
    margin-left: 30px;
    padding: 20px 25px;
    position: relative;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.11);
  }
  .plan_info:after {
    content: "";
    position: absolute;
    left: -10px;
    top: 20px;
    border-style: solid;
    border-width: 10px;
    border-color: #fff #fff transparent transparent;
    transform: rotate(-135deg);
    box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.04);
  }

  .margin {
    margin: 10px 0;
  }

  .accessory_img {
    width: auto;
    height: 55px;
    margin: 10px 10px 0;
    cursor: pointer;
  }

  /deep/.el-slider__runway.disabled .el-slider__bar {
    background-color: #5181f6 !important;
  }
  /deep/.el-slider__runway.disabled .el-slider__button {
    border-color: #5181f6 !important;
  }
}
.back_info {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}
.ratio {
  margin-left: 24px;
  font-size: 22px;
  font-weight: 600;
  color: #5181f6;
}

.noData{
  text-align: center;
  height: 90%;
  padding-top: 50%;
  box-sizing: border-box;
  color: #BACDFC;
}
</style>