<template>
  <section class="hrMeasure">
    <ai-card title="帮扶措施">
      <template #right>
        <el-button type="text" icon="el-icon-plus" @click="dialog=true">添加</el-button>
      </template>
      <template #content>
        <div class="logItem" v-for="row in tableData" :key="row.id">
          <el-row type="flex" align="middle" justify="space-between">
            <b v-text="row.createUserName"/>
            <span v-text="row.createTime"/>
          </el-row>
          <div class="content" v-text="row.detail"/>
          <ai-uploader v-model="row.files" disabled/>
          <div class="btns">
            <el-button type="text" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
          </div>
        </div>
        <ai-empty v-if="tableData.length==0"/>
      </template>
    </ai-card>
    <ai-dialog :visible.sync="dialog" :title="addTitle" @closed="form={}" @onConfirm="submit" width="600px">
      <el-form :model="form" :rules="rules" ref="DialogForm" size="small" label-width="80px">
        <el-form-item label="帮扶措施" prop="detail">
          <el-input type="textarea" v-model="form.detail" placeholder="请输入" maxlength="500" show-word-limit rows="5"/>
        </el-form-item>
        <el-form-item label="图片" prop="files">
          <ai-uploader v-model="form.files" :instance="instance" acceptType=".jpg,.jpeg,.png">
            <template #tips>
              最多9张,仅支持10M以内的jpg、jpeg、png格式照片
            </template>
          </ai-uploader>
        </el-form-item>
      </el-form>
    </ai-dialog>
  </section>
</template>

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

export default {
  name: "hrMeasure",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    ...mapState(['user']),
    addTitle() {
      return this.form.id ? "编辑措施" : "新建措施"
    }
  },
  data() {
    return {
      dialog: false,
      form: {},
      rules: {
        detail: {required: true, message: "请输入帮扶措施"}
      },
      tableData: []
    }
  },
  methods: {
    getTableData() {
      let {id: pid} = this.$route.query
      this.instance.post("/app/apppreventionreturntopovertylog/list", null, {
        params: {size: 9999, pid, type: 1}
      }).then(res => {
        if (res?.data) {
          this.tableData = res.data?.records || []
        }
      })
    },
    submit() {
      this.$refs.DialogForm.validate(v => {
        if (v) {
          let {id: pid} = this.$route.query
          this.instance.post(`/app/apppreventionreturntopovertylog/addOrUpdate`, {
            ...this.form,
            pid,
            type: 1
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('提交成功!');
              this.dialog = false
              this.getTableData()
            }
          })
        }
      })
    },
    handleEdit(row) {
      this.dialog = true
      this.form = JSON.parse(JSON.stringify(row))
    },
    handleDelete(ids) {
      this.$confirm("是否要删除帮扶措施").then(() => {
        this.instance.post("/app/apppreventionreturntopovertylog/delete", null, {
          params: {ids: ids?.toString()}
        }).then(res => {
          if (res?.code == 0) {
            this.$message.success("删除成功!")
            this.getTableData()
          }
        })
      }).catch(() => 0)
    },
  },
  created() {
    this.getTableData()
  }
}
</script>

<style lang="scss" scoped>
.hrMeasure {
  .logItem {
    position: relative;
    padding: 8px 16px;
    border-radius: 4px;

    &:hover {
      background: #eee;

      .btns {
        display: block;
      }
    }

    .content {
      margin: 8px 0;
    }

    .btns {
      display: none;
      position: absolute;
      right: 8px;
      bottom: 8px;
    }
  }
}
</style>
