<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane
        v-for="(item, index) in tabList"
        :key="index + 'tabs'"
        :label="item.normName"
        :name="item.normName"
      >
        <el-row :gutter="10">
          <template v-for="listItem in taskList.formobj.feeLists">
            <el-form
              v-if="listItem.normId == item.normId"
              :model="listItem"
              :ref="'form' + listItem.normfeeId"
              :key="listItem.normfeeId"
            >
              <el-col :span="12">
                <el-form-item
                  prop="collCalue"
                  :label="
                    listItem.normfeeName + '（' + listItem.funitName + '）'
                  "
                >
                  <el-input
                    :disabled="!edit"
                    v-model="listItem.collCalue"
                    :placeholder="'请输入' + listItem.normfeeName"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </template>
        </el-row>
      </el-tab-pane>
      <div style="font-size: 18px; font-weight: 600; margin-bottom: 20px;">审批记录：</div>
      <el-timeline>
          <el-timeline-item
            v-for="(item, index) in taskList.formobj.taskVoList"
            :timestamp="item.createTime"
            placement="top"
            :key="index + 'taskHisAction'"
          >
            <el-card>
              <p>
                {{ item.execName  +"------" +statusArr[item.status]+"------" +item.createTime }} <span v-if="item.comments != null">{{+"------备注："+ comments }}</span>
              </p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    taskList: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {},
  data() {
    return {
      tabList: [],
      check: false,
      title: "",
      openDetail: false,
      form: {},
      edit: false,
      statusArr:{
        '0': '待审核',
        '1': '同意',
        '2': '驳回',
        '3': '退回',
    },
  }
  },
  computed: {},
  methods: {

    handleClose() {
      this.check = false;
    },

    submitForm(type) {
      let p = [];
      p = this.form.feeLists.map((item, index) => {
        return new Promise((resolve, reject) => {
          this.$refs["form" + item.normfeeId][0].validate((valid) => {
            // this.$refs["form" + index].validate((valid) => {
            if (valid) {
              resolve(); //完成态
            } else {
              reject(); //已失败
            }
          });
        });
      });
      Promise.all(p)
        .then(() => {
          if (type == "add") {
            addGATHER(this.form).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("录入成功");
                this.getList();
                this.open = false;
                compute(this.form).then((response) => {});
              }
            });
          } else if (type == "edit") {
            updateGATHER(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.getList();
              this.openDetail = false;
              compute(this.form).then((response) => {});
            });
          }
        })
        .catch((err) => {
          this.$message.error("请检查是否有必填项未输入!");
        });
    },
    handleCheck(val, value) {
      let data = {
        gatherId: this.dataId,
        auditType: 2,
      };
      let audit = {
        gatherId: this.dataId,
        auditType: 3,
        remark: value,
      };
      if (val == 1) {
        bsqAudit(data).then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("通过审核成功");
            this.getList();
            this.openDetail = false;
          }
        });
      } else {
        bsqAudit(audit).then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("驳回成功");
            this.getList();
            this.openDetail = false;
          }
        });
      }
    },
    // 驳回处理
    handleReject() {
      this.$prompt("请输入驳回理由：", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputType: "textarea",
      })
        .then(({ value }) => {
          // console.log(666,value);
          this.handleCheck(2, value);
          // this.$message({
          //   type: 'success',
          //   message: '你的邮箱是: ' + value
          // });
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '取消输入'
          // });
        });
    },
    // 取消按钮
    cancel() {
      this.check = false;
      this.open = false;
      this.openDetail = false;
      this.openUpload = false;
      this.reset();
    },
  },
  created() {

    this.tabList = JSON.parse(JSON.stringify(this.taskList.formobj.feeLists));
    //去重获取tab
    //遍历如果遇到相同的id则删掉
    for (var i = 0; i < this.tabList.length - 1; i++) {
      //设置激活的tab
      if (i == 0) {
        this.activeName = this.tabList[0].normName;
      }
      for (var j = i + 1; j < this.tabList.length; j++) {
        if (this.tabList[i].normId == this.tabList[j].normId) {
          this.tabList.splice(j, 1);
          //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
          j--;
        }
      }
    }
    console.log(this.tabList);
  },
};
</script>
<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
