<template>
  <div class="xmgktManage">
    <div class="titleDiv">
      <div>{{detailForm.xm_name}}</div>
      <div class="d-flex">
        <div class="item">
          <span class="label">项目类别</span>
          <span class="value">{{detailForm.xm_type_option_n}}</span>
        </div>
        <div class="item">
          <span class="label">经办科室</span>
          <span class="value">{{detailForm.department_name}}</span>
        </div>
        <div class="item">
          <span class="label">项目开始时间</span>
          <span class="value">{{detailForm.xm_start_time}}</span>
        </div>
      </div>
    </div>
    <div class="xmgktManageContent">
      <div class="stepDiv" v-for="(item, index) in stepData" :key="index">
        <div class="parent-head nowrap" :class="item.children[0].xmlc_wc==1?'finished':''">
          <div class="step-head">
            <div class="parent-head-line"></div>
          </div>
          <div class="parent-name">{{item.name}}</div>
        </div>
        <div class="parent">
          <div class="child d-flex" :class="value.xmlc_wc==1?'finished':''" v-for="(value, i) in item.children" :key="i">
            <div class="step-head">
              <div class="step-line" v-if="index!=stepData.length-1 || i!=item.children.length-1"></div>
              <div class="step-check d-flex flex-v-mid flex-l-mid">
                <i class="el-icon-check"></i>
              </div>
            </div>
            <div class="mainCon flex-1 flex-row">
              <div style="width: 150px;">{{value.order}}.{{value.lc_sx}}</div>
              <div>事项权值 {{value.lc_sxqz}}</div>
              <div>
                <el-button v-if="value.lc_fj && value.lc_fj!=''" type="text" @click="handlePreview(value)">查看附件</el-button>
                <span v-else>未上传附件</span>
                <div class="attach">*{{value.lc_fj_bz}}</div>
              </div>
              <div v-if="value.lc_bt_name=='' || value.lc_bt_name==undefined" style="width: 150px;"></div>
              <div v-else class="d-flex" style="width: 150px;">
                <div>{{value.lc_bt_name}}: </div>
                <div class="hand">{{value.xmlc_bt_value == "" ? "待填" : value.xmlc_bt_value + "万元"}}</div>
              </div>
              <div style="width: 150px;text-align: right;">
                <span v-if="value.xmlc_wc==1" style="color: #A2A2A2;font-size: 12px;margin-right: 5px;">{{value.lc_wc_name}}点击完成</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog width="80%" :visible.sync="dialogVisible" title="查看" append-to-body :close-on-click-modal="false">
      <preview-attach :commonUrl="commonUrl" :filename="filename" style="width: 100%; height: 300px;"></preview-attach>
    </el-dialog>
  </div>
</template>

<script>
import { xmgl_xmzlkDetail } from "./api";
import PreviewAttach from "@/components/PreviewAttach/index.vue";
export default {
  data() {
    return {
      parentId: "",
      detailForm: {},
      jdData: [
        { v: "1", n: "项目立项" },
        { v: "2", n: "项目招标" },
        { v: "3", n: "项目施工" },
        { v: "4", n: "项目付款" }
      ],
      currentStep: 0,
      stepData: [],
      dialogVisible: false,
      commonUrl: "",
      filename: "",
    }
  },
  props: ["currentId"],
  watch: {
    currentId: {
      immediate: true,
      handler(val) {
        if (val != "") {
          this.parentId = val;
          this.initDetailInfo();
        }
      }
    }
  },
  components: { PreviewAttach },
  methods: {
    async initDetailInfo() {
      let res = await xmgl_xmzlkDetail({ xm_id: this.parentId });
      this.detailForm = res.one_info;
      this.detailForm.xm_start_time = this.detailForm.xm_start_time.substring(0, 10);

      this.stepData = [];
      this.currentStep = 0;
      this.detailForm.xmlc.map((item, i) => {
        item.order = i + 1;
        item.lcIndex = i;
        if (item.xmlc_wc == 1) {
          this.currentStep = i + 1;
        }
        let index = this.stepData.findIndex(val => val.lc_jd == item.lc_jd);
        if (index == -1) {
          let obj = {
            lc_jd: item.lc_jd,
            name: "",
            children: [item]
          }
          this.jdData.map(val => {
            if (obj.lc_jd == val.v) {
              obj.name = val.n;
            }
          })
          this.stepData.push(obj);
        } else {
          this.stepData[index].children.push(item);
        }
      })
    },
    handlePreview(row) {
      let arr = row.lc_fj.split("|");
      if (arr[0] && arr[1]) {
        this.commonUrl = arr[0];
        this.filename = arr[1];
      } else {
        this.commonUrl = row.lc_fj;
        this.filename = "附件";
      }
      this.dialogVisible = true;
    }
  }
}
</script>

<style lang="scss" scoped>
$color: #4351ff;
$color1: #d2e7fd;
.xmgktManage {
  .titleDiv {
    border-bottom: 1px solid rgba($color: #707070, $alpha: 0.19);
    padding: 20px;
    margin: -10px -10px 0;
    font-size: 14px;
    line-height: 28px;
    .item {
      margin-right: 30px;
      .value {
        color: #7e7e7e;
        margin-left: 5px;
      }
    }
  }
  .xmgktManageContent {
    padding: 20px;
    font-size: 14px;
    .stepDiv {
      .step-head {
        width: 30px;
        height: 100%;
        position: relative;
      }
      .parent-head {
        position: relative;
        display: inline-block;
        .parent-head-line {
          width: 1px;
          height: 50px;
          margin: auto;
          background: #e2e2e2;
        }
        .parent-name {
          position: absolute;
          top: 0;
          left: -15px;
          background: #fff;
          padding: 5px 0;
          left: 60%;
          transform: translateX(-50%);
        }
        &.finished {
          .parent-head-line {
            background: $color1;
          }
        }
      }
      .parent {
        .child {
          height: 50px;
          .step-line {
            width: 1px;
            height: 100%;
            margin: auto;
            background: #e2e2e2;
          }
          .step-check {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            color: #fff;
            background: #c7c7c7;
            box-shadow: 0 0 0 3px #e2e2e2;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
          }
          .mainCon {
            border-bottom: 1px solid #e6e6e6;
            margin-left: 10px;
            margin-top: -15px;
            height: 100%;
            .attach {
              font-size: 12px;
              color: #ff0000;
              width: 200px;
            }
            .el-button {
              width: 60px;
              height: 28px;
              padding: 0;
              &.el-button--info {
                background: #707070;
                border-color: #707070;
              }
            }
          }
          &.finished {
            .step-line {
              background: $color1;
            }
            .step-check {
              background: #0976f8;
              box-shadow: 0 0 0 3px $color1;
            }
          }
        }
      }
      ::v-deep .el-upload-list {
        display: none;
      }
    }
  }
}
</style>