<template>
  <div class="from-clues-header">
    <div>收件信息</div>
    <el-form :model="form"  label-width="120px">
      <div class="slxx_con">
        <div class="slxx_title title-block">
          受理信息
          <div class="triangle"></div>
        </div>
        <el-row :gutter="10" v-if="form.slsq">
          <el-col :span="8">
            <el-form-item label="补录编号：">
              <el-input disabled v-model="form.Repair.ywh"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="补录人员：">
              <el-input disabled v-model="form.Repair.slry"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="补录时间：">
              <el-input disabled v-model="form.Repair.slsj"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="权利类型：">
              <el-input disabled v-model="form.Repair.qllxmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="登记类型：">
              <el-input disabled v-model="form.Repair.djlxmc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div class="btn">
      <el-button type="primary" @click="slxxsubmitForm">保存</el-button>
      <el-button @click="closeDialog">取消</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
 import { init } from "@/api/djbbl.js"
export default {
  props: {
    currentSelectProps: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      //传递参数
      propsParam: this.$attrs,
      activeName: "slxx",
      form: {},
      datalist: [],
      qsztList: [
        {
          value: "1",
          label: "现势",
        },
        {
          value: "2",
          label: "历史",
        },
      ],
      label: "",
      isshow: true,
    };
  },
  computed: {
    ...mapGetters(["dictData"]),
  },
  created() {
    this.loadData();
    // this.clmlInitList(1)
  },
  mounted() {
    // if (this.formData.data) {
    //   this.$nextTick(() => {
    //     this.form = Object.assign({}, this.formData.data);
    //     // this.datalist = Object.assign([], this.formData.datalist)
    //     this.form.qszt =
    //       this.form.qszt == "0"
    //         ? "临时"
    //         : this.form.qszt == "1"
    //         ? "现势"
    //         : "历史";
    //   });
    // }
    // this.datalist = this.formData.datalist
    // this.datalist = JSON.parse(JSON.stringify(this.formData.datalist));
    // this.datalist.shift();
    // this.datalist.shift();
    // console.log("this.datalist", this.datalist);
  },

  methods: {
    loadData() {
      init(this.propsParam.bsmRepair).then((res) => {
        if (res.code == 200) {
          this.form=res.result;
          console.log("/rest/djbRepair/init",res);
          // this.tableData = res.result;
          // if (this.tableData.length < datas.columns().emptycolNum) {
          //   this.emptycolNum =
          //     datas.columns().emptycolNum - this.tableData.length;
          // } else {
          //   this.emptycolNum = 0;
          // }
        }
      });

    },
    //  受理信息保存
    slxxsubmitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // addUserCommonOpinion({ commonOpinion: this.form.commonOpinion }).then(res => {
          //   if (res.code == 200) {
          //     this.$message.success("新增成功")
          //     this.closeaddDiglog();
          //     this.getList()
          //   } else {
          //     this.$message.error(res.message)
          //   }
          // })
        } else {
          return false;
        }
      });
      this.isshow = false;
    },
    closeDialog() {},
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/public.scss";

.from-clues-header {
  @include flex;
  flex-direction: column;
  overflow-y: hidden;
  height: 620px;
  padding: 0 2px;

  .btn {
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
  }
}

// 审批意见样式

.spyj {
  .box {
    overflow-x: auto;
    width: 100%;
    height: 95%;
    background: #fff;
    text-align: center;
    padding: 4px;
    overflow-y: scroll;
    padding-top: 20px;
    padding: 20px 40px;
    /deep/.el-input__inner {
      width: 200px;
      border: none;
    }
  }
  .spyj_title {
    line-height: 68px;
    border: 1px solid $borderColor;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    background-color: #eceef2;
    display: block;
    border-bottom: none;
  }

  /deep/.el-form-item {
    margin-bottom: 0;
  }

  .bottom10 {
    margin-bottom: 15px;
  }

  .spyj_form {
    display: flex;
    border: 1px solid $borderColor;

    .item_left {
      width: 150px;
      background-color: #f8f8fa;
      color: #606266;
      display: flex;
      font-size: 14px;
      text-indent: 80px;
      align-items: center;
      border-right: 1px solid $borderColor;
    }

    .item_right {
      flex: 1;
      width: 100%;

      /deep/.el-form-item__label {
        background-color: #f8f8fa;
      }
      /deep/.el-form-item__content {
        display: block;
        text-align: left;
        text-indent: 10px;
      }
      .opinion_item {
        /deep/.el-form-item__error {
          margin-top: -16px !important;
          left: 3px;
        }

        border-bottom: 1px solid $borderColor;
      }

      .opinion {
        position: relative;
        font-size: 14px;

        /deep/.el-textarea__inner {
          border: none;
        }
      }

      .opinion_btn {
        position: absolute;
        right: 15px;
        bottom: 10px;
      }
    }
  }

  .submit_button {
    text-align: center;
    margin: 15px 0;
  }
}

// 材料信息样式
.active {
  background: $light-blue !important;
  color: #fff;
}

.required {
  font-size: 12px;
  color: $pink;
  float: left;
}

.cl_number {
  float: right;
}

.clxx {
  width: 100%;
  display: flex;
  padding-left: 5px;
  height: calc(100vh - 125px);

  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .item {
      width: 28px;
      height: 49%;
      @include flex-center;
      background-color: #e4e7ed;
      border-bottom-right-radius: 10px;
      padding: 5px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        @extend .active;
      }
    }
  }

  .right {
    width: 100%;
    height: 100%;

    .clmlmx-box {
      margin: 0 auto;

      .title {
        text-align: center;
        height: 60px;
        line-height: 60px;
        border: 1px solid #dfe6ec;
        font-size: 20px;
        background: #81d3f81a;
        margin-bottom: -1px;
      }
    }

    .clyl-box {
      width: 100%;
      height: 100%;
      display: flex;

      .menu-tree {
        width: 20%;
        min-width: 160px;
        height: 100%;
        margin-right: 10px;
        border-right: 1px dotted #d9d9d9;
        padding: 0 15px;

        .item {
          line-height: 30px;
          padding-top: 5px;
          border-bottom: 1px solid #e8e8e8;
          font-size: 16px;
          text-align: center;
          color: $light-blue;

          .itemIcon {
            float: right;
            line-height: 60px;
            cursor: pointer;
          }

          .child {
            line-height: 32px;
            border-bottom: 1px solid #e8e8e8;
            padding-left: 10px;
            color: #6b6b6b;
            cursor: pointer;
            box-sizing: border-box;
            border-radius: 6px;
            line-height: 20px;
            transition: all 0.3s;
            padding: 8px 0;
          }

          .child:hover {
            color: $light-blue;
            transform: scale(1.1);
          }

          .checked {
            border: 1px solid $light-blue;
            color: $light-blue;
          }
        }
      }

      .clyl-img {
        width: 75%;
        height: 100%;
        background: #f3f4f7;
        margin: 0 auto;
        position: relative;
      }
    }
  }
}
</style>