<template>
  <el-form label-width="200px" :model="ruleForm" ref="ruleForm">
    <el-row>
      <el-col :span="12">
        <el-form-item label="项目申请条件标题:">
          <el-input placeholder="请输入项目申请条件标题" v-model="xmIdForm.xmfabt" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="年度:">
          <el-input placeholder="请输入项目年度" v-model="xmIdForm.xmnd" disabled></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item label="项目资金申请:">
        <el-row>
          <el-form-item label="送审预算:" label-width="80px">
            <el-input
              placeholder="请输入送审预算"
              :disabled="xmsqIdForm.xmlxzt > 10 || fatherObj.type == 1"
              v-model="ruleForm.xmssys"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              maxlength="10"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="审定预算:" label-width="80px">
            <el-input
              placeholder="请输入审定预算"
              :disabled="xmsqIdForm.xmlxzt > 10 || fatherObj.type == 1"
              v-model="ruleForm.xmsdys"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              maxlength="10"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="中标价格:" label-width="80px">
            <el-input
              placeholder="请输入中标价格"
              :disabled="xmsqIdForm.xmlxzt > 10 || fatherObj.type == 1"
              v-model="ruleForm.xmzbjg"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              maxlength="10"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="申请价格:" label-width="80px">
            <el-input
              placeholder="请输入申请价格"
              :disabled="xmsqIdForm.xmlxzt > 10 || fatherObj.type == 1"
              v-model="ruleForm.xmsqjg"
              oninput="value=value.replace(/[^0-9.]/g,'')"
              maxlength="10"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form-item>
    </el-row>

    <el-row>
      <el-form-item label="项目资金申请附件:">
        <div class="fileTable">
          <table>
            <thead>
              <tr>
                <th width="10%">序号</th>
                <th width="25%">附件名称</th>
                <th width="25%">上传时间</th>
                <th width="40%">附件</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in xmzjsqList" :key="index" v-if="xmzjsqList.length != 0">
                <td>{{ index + 1 }}</td>
                <td>
                  <el-form-item>
                    <el-input
                      placeholder="请输入附件名称"
                      v-model="item.xmclmc"
                      :disabled="fatherObj.type == 1 || xmsqIdForm.xmlxzt > 10"
                    ></el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item>
                    <el-input placeholder="请输入上传时间" v-model="item.xmclsbsj" disabled></el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-upload
                    class="upload-demo"
                    :action="actionUrl"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    
                    multiple
                    :limit="1"
                    :on-exceed="handleExceed"
                    :on-success="handleSuccess"
                    :show-file-list="false"
                    v-if="fatherObj.type > 1 && xmsqIdForm.xmlxzt < 11"
                    :disabled="fatherObj.type == 1 || xmsqIdForm.xmlxzt > 10"
                  >
                    <div @click="getIndex(index)">
                      <el-button type="primary" size="small" :disabled="fatherObj.type == 1">点击上传</el-button>
                    </div>
                  </el-upload>
                  <div
                    class="fileList"
                    v-for="(item2, index2) in item.xmclFileList"
                    :key="index2"
                    v-show="item2.status == 1"
                  >
                    <i
                      class="close"
                      @click="deleteFile(index, index2)"
                      v-if="fatherObj.type !== 1 && xmsqIdForm.xmlxzt < 11"
                    ></i>
                    <span class="name" @click="downLoadFile(item2.fileId)">
                      {{ item2.fileName }}
                    </span>
                  </div>
                </td>
              </tr>
              <tr v-if="xmzjsqList.length == 0">
                <td colspan="4" style="padding: 0; color: #909399; line-height: 60px;">
                  暂无数据
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="check-icon-box" v-if="fatherObj.type !== 1" v-show="xmsqIdForm.xmlxzt < 11">
          <span class="el-icon-remove check-icon" @click="removeList"></span>
          <span class="el-icon-circle-plus check-icon" @click="addList"></span>
        </div>
      </el-form-item>
    </el-row>
    <div style="padding-top: 20px; border-top: 1px #409eff solid;">
      <el-row>
        <el-form-item label="是否二次送审:">
          <el-radio-group v-model="radio" :disabled="xmsqIdForm.xmlxzt > 10 || fatherObj.type == 1">
            <el-radio :label="1"> 是</el-radio>
            <el-radio :label="0"> 否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row v-if="!!radio">
        <el-form-item label="项目资金申请:">
          <el-row>
            <el-form-item label="送审预算:" label-width="80px">
              <el-input
                placeholder="请输入送审预算"
                :disabled="this.xmsqIdForm.xmlxzt > 10 || fatherObj.type == 1"
                v-model="ruleForm2.xmssys"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                maxlength="10"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="审定预算:" label-width="80px">
              <el-input
                placeholder="请输入审定预算"
                :disabled="this.xmsqIdForm.xmlxzt > 10 || fatherObj.type == 1"
                v-model="ruleForm2.xmsdys"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                maxlength="10"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="中标价格:" label-width="80px">
              <el-input
                placeholder="请输入中标价格"
                :disabled="xmsqIdForm.xmlxzt > 10 || fatherObj.type == 1"
                v-model="ruleForm2.xmzbjg"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                maxlength="10"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="申请价格:" label-width="80px">
              <el-input
                placeholder="请输入申请价格"
                :disabled="xmsqIdForm.xmlxzt > 10 || fatherObj.type == 1"
                v-model="ruleForm2.xmsqjg"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                maxlength="10"
              ></el-input>
            </el-form-item>
          </el-row>
        </el-form-item>
      </el-row>

      <el-row v-if="!!radio">
        <el-form-item label="项目资金申请附件:">
          <div class="fileTable">
            <table>
              <thead>
                <tr>
                  <th width="10%">序号</th>
                  <th width="25%">附件名称</th>
                  <th width="25%">上传时间</th>
                  <th width="40%">附件</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in xmzjsqList2" :key="index" v-if="xmzjsqList2.length != 0">
                  <td>{{ index + 1 }}</td>
                  <td>
                    <el-form-item>
                      <el-input placeholder="请输入附件名称" v-model="item.xmclmc" disabled></el-input>
                    </el-form-item>
                  </td>
                  <td>
                    <el-form-item>
                      <el-input placeholder="请输入上传时间" v-model="item.xmclsbsj" disabled></el-input>
                    </el-form-item>
                  </td>
                  <td>
                    <el-upload
                      class="upload-demo"
                      :action="actionUrl"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      
                      multiple
                      :limit="1"
                      :on-exceed="handleExceed"
                      :on-success="res => handleSuccess(res, 2)"
                      :show-file-list="false"
                      v-if="false"
                    >
                      <div @click="getIndex(index)">
                        <el-button type="primary" size="small" :disabled="fatherObj.type == 1">点击上传</el-button>
                      </div>
                    </el-upload>
                    <div
                      class="fileList"
                      v-for="(item2, index2) in item.xmclFileList"
                      :key="index2"
                      v-show="item2.status == 1"
                    >
                      <!-- <i
												class="close"
												@click="deleteFile(index, index2)"
												v-if="fatherObj.type !== 1"
											></i> -->
                      <span class="name" @click="downLoadFile(item2.fileId)">
                        {{ item2.fileName }}
                      </span>
                    </div>
                  </td>
                </tr>
                <tr v-if="xmzjsqList2.length == 0">
                  <td colspan="4" style="padding: 0; color: #909399; line-height: 60px;">
                    暂无数据
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="check-icon-box" v-if="fatherObj.type !== 1 && xmsqIdForm.xmlxzt < 11">
            <span class="el-icon-remove check-icon" @click="removeList(2)"></span>
            <span class="el-icon-circle-plus check-icon" @click="addList(2)"></span>
          </div>
        </el-form-item>
      </el-row>
    </div>
    <!-- <div
			style="padding-top: 20px; border-top: 1px #409eff solid;"
			v-if="xmsqIdForm.xmlxzt > 11"
		>
			<el-row>
				<el-form-item label="评审专家(组长):">
					<el-input
						placeholder="请输入组长"
						v-model="ruleForm.pszjzz"
						:disabled="xmsqIdForm.xmlxzt >= 10 || fatherObj.type == 1"
					></el-input>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="评审专家(成员):">
					<el-input
						placeholder="请输入成员"
						v-model="ruleForm.pszjzy"
						:disabled="xmsqIdForm.xmlxzt >= 10 || fatherObj.type == 1"
					></el-input>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="评审结果是否确定支持:">
					<el-radio-group
						:disabled="xmsqIdForm.xmlxzt >= 10 || fatherObj.type == 1"
						v-model="ruleForm.psjgzt"
					>
						<el-radio :label="1">是</el-radio>
						<el-radio :label="0">否</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="审批意见:">
					<el-input
						type="textarea"
						:rows="3"
						placeholder="请输入审批意见"
						v-model="ruleForm.psyj"
						:disabled="xmsqIdForm.xmlxzt >= 10 || fatherObj.type == 1"
					></el-input>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="项目资金计划:" v-if="ruleForm.zjsqFileList">
					<div v-for="(item, index) in ruleForm.zjjhFileList" :key="index">
						<span style="cursor: pointer;" @click="downLoad(item.fileId)">{{
							item.fileName
						}}</span>
					</div>
				</el-form-item>
			</el-row>
		</div> -->
    <el-row class="center">
      <el-button
        type="primary"
        class="iconfont iconchucun iconbaocun"
        @click="saveInfo(0)"
        v-if="fatherObj.type != 1 && xmsqIdForm.xmlxzt == 10 && xmsqIdForm.xmzbzt == 7"
        >保存</el-button
      >
      <el-button
        type="primary"
        class="iconfont icontijiao"
        @click="saveInfo(1)"
        v-if="fatherObj.type != 1 && xmsqIdForm.xmlxzt == 10 && xmsqIdForm.xmzbzt == 7"
        >提交</el-button
      >
      <el-button type="primary" class="iconfont iconfanhui" @click="dialogVisible">返回</el-button>
    </el-row>
  </el-form>
</template>
<script>
import { getNowDate } from "@/utils/utils";
import { FileApi } from "@/api";
import { projectFundApplication, getProjectFundApplication } from "@/api/projectManagement/index";
export default {
  name: "zijinshenqing",
  props: {
    // 父组件方法
    showDialog8: {
      type: Function,
      default: null
    },
    getList8: {
      type: Function,
      default: null
    },
    // 父组件参数
    fatherObj: {
      type: Object,
      default: {}
    },
    fatherEchoForm: {
      type: Object,
      default: {}
    },
    xmsqIdForm: {
      type: Object,
      default: {}
    },
    xmIdForm: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      radio: 0, // 是否二次送审
      // 下拉框
      xmndValue: "",
      // 提交form
      ruleForm: {},
      ruleForm2: {},
      // 回显form
      echoForm: {},
      // 文件上传路径
      actionUrl: FileApi + "/file/upload",
      // 资金申请附件
      xmzjsqList: [],
      xmzjsqList2: [],
      // 资金申请附件长度
      xmzjsqLength: 0,
      xmzjsqLength2: 0
    };
  },
  methods: {
    beforeUpload(file) {
      console.log(file.name, file.type);
      var isLimitFile = [".zip", ".rar", ".jpg", ".png", ".gif", ".jpeg", ".bmp", ".7z"].some(ext => {
        file.name.endsWith(ext);
      });
      if (
        isLimitFile ||
        file.type.includes("image") ||
        file.type.includes("x-zip-compressed") ||
        file.type.includes("x-rar-compressed")
      ) {
        this.$message.error("不能上传图片或者压缩文件");
        return false;
      }
    },
    // 文件删除的方法
    handleRemove(file, fileList) {
      console.log("文件删除file:", file);
      console.log("文件删除fileList:", fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`,'提示');
    },
    // 获取上传返回信息
    handleSuccess(res, is2) {
      let obj = {
        fileId: res.data.id,
        fileName: res.data.name,
        name: res.data.name,
        status: 1
      };
      if (is2 == 2) {
        this.xmzjsqList2.forEach((item, index) => {
          if (this.buttonIndex == index) {
            item.xmsqId = this.fatherObj.xmsqId;
            item.xmclFileList.push(obj);
          }
        });
        return;
      }
      this.xmzjsqList.forEach((item, index) => {
        if (this.buttonIndex == index) {
          item.xmsqId = this.fatherObj.xmsqId;
          item.xmclFileList.push(obj);
        }
      });
      console.log("上传.res:", res);
      console.log("上传.obj:", obj);
      console.log("上传.this.xmzjsqList:", this.xmzjsqList);
    },
    // 文件下载
    downLoad(id) {
      window.open(`${FileApi}/file/download?id=${id}`);
    },
    downLoadFile(id) {
      window.open(`${FileApi}/file/download?id=${id}`);
    },
    // 删除文件
    deleteFile(index, index2) {
      this.xmzjsqList[index].xmclFileList[index2].status = 0;
    },
    // 返回按钮
    dialogVisible() {
      this.$emit("showDialog8", "false");
      this.$emit("getList8");
    },
    // getInfo
    getInfo() {
      getProjectFundApplication({ xmsqId: this.xmsqIdForm.xmsqId }).then(res => {
        if (res.infoCode === 200) {
          var data = res.data;
          if (!data[0]) return;
          this.ruleForm = data[0];
          this.xmzjsqList = [...data[0].xmzjsqList];
          console.log("this.xmzjsqList", this.xmzjsqList);
          this.xmzjsqList = [...data[0].xmzjsqList];
          this.xmzjsqLength = data[0].xmzjsqList.length;
          console.log(this.xmzjsqLength);
          if (!data[1]) return;
          this.radio = 1;
          this.ruleForm2 = data[1];
          this.xmzjsqList2 = [...data[1].xmzjsqList];
          this.xmzjsqList2 = [...data[1].xmzjsqList];
          console.log("资金申请的this.ruleForm:", this.ruleForm, this.ruleForm2);
        } else {
          this.$message({
            type: "error",
            message: res.data
          });
        }
      });
    },
    // type = 0为保存，1为提交
    saveInfo(type) {
      // let data = {
      // 	dataStatus: type,
      // 	isCheck: 0,
      // 	token: sessionStorage.getItem('TOKENL'),
      // 	zjsqFileList: this.xmzjsqList
      // }
      this.ruleForm = {
        ...this.ruleForm,
        sfecss: 0,
        status: 1,
        xmsqId: this.fatherObj.xmsqId
      };
      if (this.xmzjsqList.length) {
        this.ruleForm.xmzjsqList = this.xmzjsqList;
      }
      let params = [this.ruleForm];
      if (this.radio) {
        this.ruleForm2 = {
          ...this.ruleForm2,
          sfecss: 1,
          status: 1,
          xmsqId: this.fatherObj.xmsqId
        };
        if (this.xmzjsqList2.length) {
          this.ruleForm2.xmzjsqList = this.xmzjsqList2;
        }
        params[1] = this.ruleForm2;
      }
      console.log("资金申请data:", JSON.stringify(this.ruleForm));
      console.log("ruleForm2", JSON.stringify(this.ruleForm2));
      projectFundApplication(type, params).then(res => {
        if (res.infoCode === 200) {
          let msg = "";
          type == 0 ? (msg = "保存成功!") : (msg = "提交成功!");
          this.$message({
            type: "success",
            message: msg
          });
        } else {
          // this.$message({
          // 	type: 'error',
          // 	message: res.data,
          // });
        }
        this.dialogVisible();
      });
    },
    addList(is2) {
      let obj = {
        sjId: "",
        xmsqId: "",
        xmcllx: 10,
        xmclmc: "",
        xmclsbsj: getNowDate(),
        xmclFileList: []
      };
      if (is2 == 2) {
        this.xmzjsqList2.push(obj);
        return;
      }
      this.xmzjsqList.push(obj);
    },
    removeList(is2) {
      if (is2 == 2) {
        this.xmzjsqList2.pop();
        return;
      }
      this.xmzjsqList.pop();
    },
    // 获取上传按钮在表格中的索引
    getIndex(index) {
      this.buttonIndex = index;
      console.log("getIndex方法index:", index);
    }
  },
  mounted() {
    this.getInfo();
  }
};
</script>

<style lang="scss" scoped>
.el-form-item .el-form-item {
  margin-bottom: 0.2em;
}
.title {
  margin-bottom: 20px;
  h2 {
    font-size: 1.8em;
  }
}
.center {
  text-align: center;
}
label.el-tooltip {
  float: left;
  padding: 0 12px 0 0;
  width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
  color: #525357;
  font-size: 14px;
  line-height: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.fileTable {
  float: left;
  width: 100%;
  table,
  th,
  td {
    border: 1px #eaeaea solid;
    border-collapse: collapse;
  }
  th,
  td {
    text-align: center;
    color: #333;
    font-size: 14px;
    height: 35px;
  }
  th,
  tr:hover td {
    background-color: #f6f7f9;
  }
  table {
    width: 100%;
  }
  th {
    font-weight: bold;
  }
  td {
    padding: 20px 10px;
    transition: background-color 0.25s ease;
  }
}
.check-icon-box {
  float: left;
  width: 8%;
  text-align: center;
  .check-icon {
    display: block;
    margin: 0 auto 10px;
    vertical-align: top;
    color: #006bd5;
    font-size: 32px;
    cursor: pointer;
  }
}
.fileList {
  position: relative;
  height: 25px;
  line-height: 25px;
  &:hover .name {
    color: #409eff;
  }
  .name {
    cursor: pointer;
    color: #606266;
    transition: color 0.3s;
  }
  .close {
    position: absolute;
    top: 50%;
    right: 7px;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    cursor: pointer;
    z-index: 1;
    &:after,
    &:before {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -5px;
      content: "";
      width: 1px;
      height: 10px;
      background-color: #606266;
    }
    &:after {
      transform: rotate(45deg);
    }
    &:before {
      transform: rotate(-45deg);
    }
  }
}
</style>
