<template>
  <div class="app-container">
    <van-nav-bar
      title="投诉回复"
      fixed
      placeholder
      left-arrow
      right-text="发布"
      @click-left="onClickLeft"
      @click-right="submitForm"
    />
    <div class="tabsBox">
      <van-row>
        <van-col :span="4">类型：</van-col>
        <van-col :span="20">{{form.communicateTypeShow}}</van-col>
      </van-row>
      <van-row>
        <van-col :span="4">标题：</van-col>
        <van-col :span="20">{{form.title}}</van-col>
      </van-row>
      <van-row>
        <van-col :span="4">内容：</van-col>
        <van-col :span="20">{{form.content}}</van-col>
      </van-row>
      <van-row>
        <van-col :span="24">
          <van-field
            v-model="form.reply"
            rows="5"
            autosize
            type="textarea"
            placeholder="请输入留言"
            show-word-limit
            style="border-top: 1px solid #eeeeee;border-bottom: 1px solid #eeeeee;padding-top: 10PX"
          />
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
import { getCommunicate , updateCommunicate , getUserProfile } from "@/api/lawEnforcement/index";
export default {
  name: "index",
  data() {
    return {
      active:0,
      message:'',
      // 表单参数
      form: {},
      // 咨询分类字典
      communicateTypeOptions: [],
    };
  },
  created() {
    this.getDicts("communicate_type").then(response => {
      this.communicateTypeOptions = response.data;
    });
    this.getDicts("sys_yes_no").then(response => {
      this.isRealnameOptions = response.data;
    });
    this.getDicts("sys_yes_no").then(response => {
      this.isOpenOptions = response.data;
    });
    this.getDetail()
  },
  methods: {
    getDetail(){
      getCommunicate(this.$route.query.id).then(response => {
        response.data.communicateTypeShow = this.selectDictLabel(this.communicateTypeOptions,response.data.communicateType)
        this.form = response.data;
        this.open = true;
        this.title = "修改留言回复";
      });
    },
    /** 提交按钮 */
    submitForm() {
      if (this.form.reply != '') {
        this.diglogStatus = false;
        if (this.form.id != null) {
          getUserProfile().then(response => {
            this.form.replyName = response.data.nickName
            updateCommunicate(this.form).then(response => {
              this.$notify({ type: 'success' , message: response.msg });
              setTimeout(function(){
                history.go(-1);
              },1000)
            });
          });
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
@font-face {
  font-family: SourceHanSansCNBold;
  src: url("../../../assets/fonts/SourceHanSansCN-Bold.otf");
}
.app-container{
  padding: 2%;
}
/deep/ .van-tabs__line{
  background-color: #1D6FE9;
}
/deep/ .van-tab--active{
  color: #1D6FE9;
}
/deep/.van-cell__title{
  flex: 0.63;
  line-height: 1;
}
/deep/.van-cell__value{
  flex: 0.37;
  line-height: 1;
}
/deep/.van-cell__label{
  line-height: 1;
}
/deep/.van-cell{
  padding: 0;
}
/deep/.van-row{
  margin-top: 15PX;
  &:first-child{
    margin-top: 0;
  }
  .van-col{
    font-size: 0.4rem;
  }
}
.tabsBox{
  padding: 5% 4%;
  background-color: #FFF;
  border-radius: 8PX;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
  margin-bottom: 15PX;
}
  .van-tab__pane-wrapper{
    padding: 5% 2%;
  }
  .answerBtn{
    padding: 5PX 15PX;
    height:auto;
  }
</style>
