<template>
  <!-- 弹出框表单 -->
  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>
    <el-form ref="form" :model="form" :rules="rules">
      <el-card style="margin-bottom: 20px" v-for="item in listData">
        <div slot="header">
          <span style="color: #3E7BFA" >{{ util_formatterDate(item.feedbackTime) }}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span >{{ item.feedbackName }}</span>

        </div>
        <el-collapse v-model="activeNames"  accordion>
          <el-collapse-item name="1">
            <div slot="title">反馈内容</div>
            <div class="content">{{ item.feedback }}</div>
          </el-collapse-item>
        </el-collapse>
      </el-card>

      <el-row style="margin-top: 40px">
        <Field :span="24" prop="feedback" v-model="form.feedback" type="textarea" placeholder="请输入反馈内容"/>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow";

export default {
  mixins: [form],
  components: {
    dialogShow,
  },
  data() {
    return {
      activeNames : ['1'],
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "主动关怀服务追踪",
      // 是否显示弹出层
      open: false,
      toString: [],
      listData: [],
      urls: {
        saveUrl: "/care/constraint/track/save",
      },
      // 表单校验
      rules: {
        feedbackName: [
          {required: true, message: "请输入反馈人姓名", trigger: "blur"},
          {max: 50, message: "最多只能录入50个字符", trigger: "blur",},
        ],
        feedback: [
          {required: true, message: "请输入反馈内容", trigger: "blur"},
          {max: 1024, message: "最多只能录入1024个字符", trigger: "blur",},
        ],
        feedbackTime: [
          {required: true, message: "请选择跟踪时间"},
        ],
        createMethod: [
          {required: true, message: "请输入创建方式", trigger: "blur"},
          {max: 50, message: "最多只能录入50个字符", trigger: "blur",},
        ],
      }
    };
  },
  created() {
    this.deviceId = this.$route.query && this.$route.query.deviceId;
    this.pageInfo.list = "/care/constraint/track/list";
    this.pageInfo.del = "/care/constraint/track/delete";
    this.pageInfo.add = "/care/constraint/track/add";
    this.pageInfo.edit = "/care/constraint/track/edit";
    this.pageInfo.view = "/care/constraint/track/view";
  },

  methods: {
    /** 编辑 */
    edit(row) {
      this.reset()
      this.query = {id: row.id};
      this.urls.currUrl = "care/constraint/track/edit";
      this.getData();
      this.pageInfo.type = "edit"
      this.title = "修改主动关怀服务追踪";
    },
    /** 新增 */
    add(row) {
      this.reset()
      this.urls.currUrl = "care/constraint/track/add";
      this.getData();
      this.pageInfo.type = "add"
      this.title = "新增主动关怀服务追踪";
    },
    /** 查看*/
    view(row) {

      this.$post("/care/constraint/track/list", {"careId": row.id})
          .then((res) => {
            if (res && res.code && res.code == 1) {
              if (res.data.data.length > 0) {

                console.log(res.data.data)
                this.open = true;
                this.listData = res.data.data
              }
            }
          })
          .catch((error) => {
            this.$message.error(error.message);
          });


      this.reset()
      this.query = {careId: row.id};
      this.form.careId=row.id;
      this.urls.currUrl = "care/constraint/track/view";
      // this.getData();
      this.pageInfo.type = "view"
      this.title = "主动关怀服务追踪详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        careId: null,
        feedbackId: null,
        feedbackName: "",
        feedback: "",
        feedbackTime: null,
        createMethod: "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>

<style scoped>
.time {
  float: right;
}

.content {
  margin-top: 10px;
}
</style>
