<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>
                <template v-else>
                  <el-button v-if="currentStep!=value.lcIndex" disabled type="text">点击上传</el-button>
                  <el-upload v-else :key="value.order" class="" action="" :auto-upload="false" :on-change="(file, fileList) => handleFileChange(file, fileList, value)" :file-list="value.fileList">
                    <el-button type="text">点击上传</el-button>
                  </el-upload>
                </template>
                <div class="attach">*{{value.lc_fj_bz}}</div>
              </div>
              <div v-if="value.lc_bt_name=='' || value.lc_bt_name==undefined" style="width: 180px;"></div>
              <div v-else class="d-flex" style="width: 180px;">
                <div>{{value.lc_bt_name}}: </div>
                <div class="hand" @click="fillIn(value)">{{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>
                <el-button size="small" v-if="value.xmlc_wc==1" type="info" @click="handleFinish(value, 2)">已完成</el-button>
                <el-button size="small" v-if="value.xmlc_wc==2" :disabled="currentStep==value.lcIndex?false:true" type="primary" @click="handleFinish(value, 1)">完成</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :width="dialogType==1?'80%':'600px'" :visible.sync="dialogVisible" :title="dialogTitle" :close-on-click-modal="false" @close="handleClose">
      <preview-attach v-if="dialogType==1" :commonUrl="commonUrl" :filename="filename" style="width: 100%; height: 300px;"></preview-attach>
      <div v-if="dialogType!=1" class="d-flex flex-v-mid">
        <div><span style="color: red;" v-if="currentData.lc_bt==1">*</span>{{currentData.lc_bt_name}}：</div>
        <el-input class="flex-1" type="number" v-model="currentData.xmlc_bt_value" oninput="if(value.length>10)value=value.slice(0,10)"></el-input>
      </div>

      <div slot="footer" v-if="dialogType!=1">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { xmgl_xmzlkDetail, xmgl_xmzlkLcEdit } from "./api";
import { useUserStore } from "@/stores/user";
import PreviewAttach from "@/components/PreviewAttach/index.vue";
import { request } from "@/utils/request";
export default {
  data() {
    return {
      userInfo: useUserStore(),
      parentId: "",
      detailForm: {},
      jdData: [
        { v: "1", n: "项目立项" },
        { v: "2", n: "项目招标" },
        { v: "3", n: "项目施工" },
        { v: "4", n: "项目付款" }
      ],
      currentStep: 0,
      stepData: [
        {
          name: "项目立项",
          children: [
            {
              lc_sx: "三重一大",
              lc_sxqz: 2,
              lc_fj_bz: "三重一大PDF文件",
              finished: true,
            },
            {
              lc_sx: "项目审批",
              lc_sxqz: 2,
              lc_fj_bz: "资金确认书PDF文件",
            },
            {
              lc_sx: "资金确认书",
              lc_sxqz: 5,
              lc_fj_bz: "资金确认书PDF文件",
              xmys: 1
            },
            {
              lc_sx: "项目预告",
              lc_sxqz: 3,
              lc_fj_bz: "政采云的项目意向公告",
            },
            {
              lc_sx: "项目工作方案",
              lc_sxqz: 2,
              lc_fj_bz: "工作方案附件",
            },
            {
              lc_sx: "项目初始状态记录",
              lc_sxqz: 2,
              lc_fj_bz: "初始状态的图片",
            },
            {
              lc_sx: "网络中介超市",
              lc_sxqz: 2,
              lc_fj_bz: "招标公告",
            },
            {
              lc_sx: "中介公示",
              lc_sxqz: 2,
              lc_fj_bz: "中标公告",
            }
          ]
        },
        {
          name: "项目招标",
          children: [
            {
              lc_sx: "采购需求会议",
              lc_sxqz: 3,
              lc_fj_bz: "会议纪要或会议照片",
            },
            {
              lc_sx: "招标文本初稿",
              lc_sxqz: 3,
              lc_fj_bz: "初稿上传",
            },
            {
              lc_sx: "专家论证",
              lc_sxqz: 3,
              lc_fj_bz: "专家签字意见",
            },
            {
              lc_sx: "标书挂网",
              lc_sxqz: 3,
              lc_fj_bz: "上传公告PDF",
            },
            {
              lc_sx: "中标公告",
              lc_sxqz: 3,
              lc_fj_bz: "上传公告PDF",
              zbje: 2,
            },
            {
              lc_sx: "合同",
              lc_sxqz: 3,
              lc_fj_bz: "上传公告PDF",
            },
            {
              lc_sx: "项目预付款",
              lc_sxqz: 2,
              lc_fj_bz: "预付款发票",
            }
          ]
        },
        {
          name: "项目施工",
          children: [
            {
              lc_sx: "技术交底会议",
              lc_sxqz: 2,
              lc_fj_bz: "会议纪要或会议照片",
            },
            {
              lc_sx: "施工组织方案",
              lc_sxqz: 2,
              lc_fj_bz: "上传方案",
            },
            {
              lc_sx: "项目过程监管",
              lc_sxqz: 4,
              lc_fj_bz: "上传项目过程中图片",
            },
            {
              lc_sx: "设备核对",
              lc_sxqz: 15,
              lc_fj_bz: "上传设备数量、参数、品牌等信息",
            },
            {
              lc_sx: "初步验收",
              lc_sxqz: 2,
              lc_fj_bz: "上传检测报告",
            },
            {
              lc_sx: "专家验收",
              lc_sxqz: 15,
              lc_fj_bz: "验收报告",
            }
          ]
        },
        {
          name: "项目付款",
          children: [
            {
              lc_sx: "发票",
              lc_sxqz: 10,
              lc_fj_bz: "上传付款发票",
              sjzf: 1
            },
            {
              lc_sx: "竣工照片",
              lc_sxqz: 5,
              lc_fj_bz: "上传竣工照片",
            },
            {
              lc_sx: "合同备案",
              lc_sxqz: 5,
              lc_fj_bz: "200万以上项目需要合同备案",
            }
          ]
        }
      ],
      currentData: {},
      dialogVisible: false,
      dialogTitle: "",
      dialogType: "",
      commonUrl: "",
      filename: "",
    }
  },
  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);
        }
      })
    },
    async handleFileChange(file, fileList, data) {
      data.fileList = [file];

      const formData = new FormData();
      formData.append("api", "json");
      formData.append("token", this.userInfo.token);
      formData.append("filedata", file.raw);
      formData.append("urltype", "1");
      let res = await request({
        url: "upload/main/file",
        data: formData,
        timeout: 1000 * 60,
      }).then(({ data }) => {
        const { url } = data;
        this.$message.success("上传成功！");
        return url;
      });
      // data.lc_fj = res;
      data.lc_fj = `${res}|${file.name}`;
    },
    fillIn(data) {
      if (this.currentStep != data.lcIndex) {
        return
      }
      this.currentData = data;
      this.dialogVisible = true;
      if (data.lc_bt == 1) {
        this.dialogTitle = "必填项";
        this.dialogType = 2;
      } else {
        this.dialogTitle = "填写";
        this.dialogType = 3;
      }
    },
    formSubmit() {
      if (this.currentData.lc_bt == 1 && this.currentData.xmlc_bt_value == "") {
        this.$message.error("请输入必填项！")
        return false;
      }
      this.handleClose();
    },
    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;
      this.dialogType = 1;
      this.dialogTitle = "查看";
    },
    handleClose() {
      this.dialogVisible = false;
      this.currentData = {};
      this.dialogType = "";
      this.dialogTitle = "";
    },
    handleFinish(data, type) {
      if (type == 2) {
        return
      }
      if (data.lc_bt == 1) {
        if (data.xmlc_bt_value == "") {
          this.$message.error("请输入" + data.lc_bt_name + "！");
        } else {
          this.commit(data, type);
        }
      } else {
        if (data.lc_bt_name == "") {
          this.commit(data, type);
        } else {
          if (data.xmlc_bt_value != "") {
            this.commit(data, type);
            return;
          }
          this.$confirm(data.lc_bt_name + "未填写，是否确定完成", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.commit(data, type);
            })
            .catch(() => { });
        }
      }
    },
    async commit(data, type) {
      let obj = {
        xm_id: this.parentId,
        xmlc_id: data.xmlc_id,
        xmlc_wc: type,
        lc_bt_name: data.lc_bt_name,
        xmlc_bt_value: data.xmlc_bt_value,
        lc_fj: data.lc_fj,
        lc_wc_name: this.userInfo.real_name,
      }
      let res = await xmgl_xmzlkLcEdit(obj);
      if (res) {
        this.$message.success("事项完成！");
        this.initDetailInfo();
      }
    }
  },
  created() {
    this.parentId = this.$route.params.id;
    this.initDetailInfo();
  }
}
</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>