<template>
      <div class="from-clues-header">
        <div>受理信息</div>
        <el-form ref="form" :model="form" label-width="160px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="权属状态" label-width="140px">
                <el-select v-model="form.qszt">
                  <el-option
                    v-for="item in qsztList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-for="item in datalist" :key="item.bdcdyh">
              <el-form-item
                :prop="item.prop"
                :label="item.label"
                label-width="140px"
              >
                <el-input v-model="form[item.prop]"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </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";
export default {

  props: {
    formData: {
      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 () {
             console.log("this.propsParam",this.propsParam);
      // 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: {
    //  受理信息保存
    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>