<template>
  <div class="Content">
    <div class="form-item__group">
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>防控措施</h2>
          </div>
          <div class="form-item__right">
            <AiSelect
                v-model="form.type"
                dict="epidemicRecentPersonType"
                class="select"
            ></AiSelect>
          </div>
        </div>
      </div>
    </div>
    <div class="form-item__group">
      <div class="form-item form-item__textarea">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i></i>
            <h2>备注说明</h2>
          </div>
          <div class="form-item__right">
            <textarea
                auto-height
                style="height: 180px"
                v-model="form.description"
                :maxlength="500"
                placeholder="请输入备注说明"
                placeholder-style="font-size: 16px"
            ></textarea>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">确认</div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  data() {
    return {
      form: {
        type: "",
        description: "",
        id: ''
      },
      flag: false
    };
  },


  computed: {
    ...mapState(["user"]),
  },

  onLoad(option) {
    this.form.id = option.id
    document.title = '添加防控措施'
  },

  methods: {
    submit() {
      if (!this.form.type) {
        return this.$u.toast("请选择防控措施");
      }

      if (this.flag) return;
      this.flag = true;

      this.$loading();
      this.$http.post(`/app/appepidemicbackhomerecord/addOrUpdate`, {...this.form}).then((res) => {
        this.$hideLoading();
        if (res.code == 0) {
          uni.$emit("updateBackList");
        }
      })
    },
  },
};
</script>

<style lang="scss">
.Content {
  padding-bottom: 140px;

  .form-item__group {
    margin-bottom: 24px;
    background: #fff;
  }

  .form-item {
    padding-left: 32px;

    .form-item__wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 128px;
      padding-right: 28px;
      border-bottom: 1px solid #dddddd;

      input {
        flex: 1;
        height: 100%;
        text-align: right;
        color: #333;
        padding-right: 10px;
      }

      .form-item__right {
        display: flex;
        align-items: center;
        font-size: 32px;

        .select {
          ._i {
            padding-left: 100px;
          }
        }

        span {
          max-width: 400px;
          margin-right: 8px;
          color: #333333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        i {
          margin-right: 8px;
          color: #999999;
        }
      }
    }

    &:last-child {
      .form-item__wrapper {
        border-bottom: none;
      }
    }

    .form-item__title {
      display: flex;
      align-items: center;

      i {
        font-size: 32px;
        color: #ff4466;
      }

      span {
        font-size: 28px;
        color: #999999;
      }

      h2 {
        padding: 0 4px;
        font-weight: 400;
        font-size: 32px;
        color: #333333;
      }
    }

    &.form-item__textarea {
      .form-item__wrapper {
        display: block;
        height: auto;
        padding-bottom: 32px;
      }

      textarea {
        width: 100%;
        height: 90px;
      }

      .form-item__title {
        padding: 32px 0;
      }

      .form-item__right {
        padding-left: 18px;
      }
    }
  }
  .footer{
    width: 100%;
    height: 112px;
    line-height: 112px;
    box-shadow: inset 0px 1px 0px 0px #EEEEEE;
    font-size: 32px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #1365DD;
    color: #FFF;
  }
}
</style>
