<template>
  <el-dialog :title=props.title :width="widthdialog" v-model="props.modelValue" :before-close="handleClose">
    <!-- 培训计划新增或修改 -->
    <div class="config" v-if="ruleForm">
      <el-form ref="ruleFormRef" :model="ruleForm" label-width="150px" :disabled="true" :inline="true"
        style="display: block;">
        <el-row :gutter="80">
          <el-col :span="24">
            <el-form-item :label="ruleForm.signtype == '2' ? '(线下签)责任书名称:' : '网签责任书名称:'" prop="zrsmc">
              <el-input v-model="ruleForm.zrsmc" clearable style="width: 750px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="责任书类型:" prop="zrslx">
              <el-select v-model="ruleForm.zrslx" clearable style="width:250px">
                <el-option v-for="item in zslxlist" :key="item" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发起单位:" prop="fqxgsmc">
              <el-input v-model="ruleForm.fqxgsmc" clearable style="width: 250px" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="ruleForm.zrslx == '02' ? '被签订部门:' : '被签订单位:'" prop="rybmid">
              <el-input v-model="ruleForm.rybmmc" clearable style="width: 250px" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发起部门:" prop="fqbmmc">
              <el-input v-model="ruleForm.fqbmmc" clearable style="width: 250px" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签订人:" prop="ryxm">
              <el-input v-model="ruleForm.ryxm" clearable style="width:184px" disabled></el-input>
              <el-button>选择</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批领导:" prop="ldxm">
              <el-input v-model="ruleForm.ldxm" clearable style="width:184px" disabled></el-input>
              <el-button>选择</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="ruleForm.signtype == '1'">
            <el-form-item label="签订内容:" prop="qdnr">
              <el-input v-model="ruleForm.qdnr" type="textarea" clearable style="width:750px" :span="4"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="ruleForm.signtype == '1' && ruleForm.ldspzt">
            <el-form-item label="领导审批意见:" prop="ldspyj">
              <el-input v-model="ruleForm.ldspyj" type="textarea" clearable :span="3" style="width:750px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传附件:">
              <MOSTY.Upload :widthNumber="763" :limit="20" :nopicer="true" :isImg="false" :ShowfileList="true"
                :placeholder="'请上传pdf,ofd, doc, docx,wps'" :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps']"
                v-model="ruleForm.files" :showinput="true" :delrow="delrow">
              </MOSTY.Upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="box_right" v-if="ruleForm.signtype == '1'">
        <div class="line"></div>
        <ul>
          <li class="timeimg">
            <div class="boc_tim">
              <img :src="getImgUrl('indexImages/icon06.gif')" />
            </div>
          </li>
          <li v-for="item in timelist" :key="item">
            <div class="time_le">
              <span>{{ item.time }}</span>
            </div>
            <img v-if="item.show" class="iconre" :src="getImgUrl('indexImages/icon07.gif')" alt="" />
            <div v-if="item.show">
              <span class="typ" v-if="item.state == 'N' && !item.stop && !item.flag">(待办)</span>
              <span class="typ" v-if="item.stop">({{ item.stop }})</span>
              <span :class="item.state == 'N' ? 'colorcc' : ''" v-if="item.info">{{ item.info
                }}</span>
              <span :class="item.state == 'N' ? 'colorcc' : ''" v-if="item.into">{{ item.into
                }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { ref, defineProps, defineEmits, watch } from "vue";
import { getItem } from "@/utils/storage";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
//新增保存按钮截流
const ruleFormRef = ref();
// 删除文件列表
const delrow = ref({});
const widthdialog = ref("1000px");
const zslxlist = ref([
  { value: "01", label: "单位对单位" },
  { value: "02", label: "单位对部门" },
  { value: "03", label: "部门对个人" },
  { value: "04", label: "主管领导对分管领导" }
]);
const emits = defineEmits(["update:modelValue", "changeAddVi"]);
//表单数据
const ruleForm = ref({});
const timelist = ref([]);
const props = defineProps({
  rowdata: {
    type: Object,
    default: {}
  },
  modelValue: {
    type: Boolean,
    default: true
  },
  title: String,
  xqId: {
    type: String,
    default: ""
  }
});
watch(
  () => props.modelValue,
  () => {
    zrsxqdata(props.xqId);
  }, { deep: true }
);
//获取责任书详情
function zrsxqdata(id) {
  getApi({ id }, '/mosty-jcgl/zrs/getZrsInfo').then((res) => {
    if (res) {
      if (res.signtype == '2') {
        widthdialog.value = '1000px'
      } else {
        widthdialog.value = '1600px'
      }
      getzeslc(props.xqId);
      ruleForm.value = res;
      ruleForm.value.fqxgsmc = getItem("deptId").ssdwmc
      ruleForm.value.fqsgsid = getItem("deptId").ssdwid
    }
  })
}
//获取责任书进度
function getzeslc(id) {
  getApi({ id }, "/mosty-jcgl/zrs/getZrsStep").then((res) => {
    timelist.value = res;
    var ind = res.findIndex((i) => i.state == "N");
    timelist.value.forEach((item, index) => {
      if (ind == -1) {
        item.show = true;
      } else if (index > ind) {
        item.show = false;
      } else {
        item.show = true;
      }
    });
  });
}

// 关闭
const handleClose = () => {
  ruleFormRef.value.resetFields()
  emits("update:modelValue", false);
};
</script>
<style lang="scss" scoped>
.config {
  display: flex;

  .el-form {
    padding: 10px 40px;
    margin-top: 10px;
    display: block;
    flex: 1;
    width: 1000px;
  }

  .txbj {
    display: flex;
    justify-content: space-between;
  }

  .el-form-item {
    text-align: center;
  }
}

//时间轴
.box_right {
  width: 37%;
  position: relative;
  border-left: 1px dashed #5ecb4c;
}

.box_right .line {
  position: absolute;
  top: 0;
  left: 201px;
  width: 1px;
  background-color: #5ecb4c;
  height: 90%;
  z-index: 10;
}

.typ {
  color: #b60413;
  margin-right: 10px;
}

.colorcc {
  color: #979191 !important;
}

.timeimg {
  width: 100%;
  text-align: center;
}

.boc_tim {
  width: 60px;
  margin-left: 90px !important;
  height: 60px;
  background-color: #fff;
  z-index: 999;
}

.box_right ul li {
  color: #000;
  display: flex;
  padding: 0 20px;
  margin: 20px 0;
  z-index: 99;
  padding-left: 80px;
}

.box_right ul li div {
  margin: 0 20px;
}

.iconre {
  width: 20px;
  height: 20px;
  z-index: 99;
  margin-right: 5px;
}

.time_le span {
  display: block;
  text-align: right;
  width: 73px;
}
</style>
