<template>
  <div>
    <dialogBox title="常用意见" :fullscreen="false" width="60%" isMain v-model="value" @closeDialog="closeDialog"
      :isButton="false">
      <el-button type="primary" native-type="submit" @click="openDialog()">新增常用</el-button>
      <lb-table heightNumSetting :pagination="false" :column="columns" :data="tableData.data">
      </lb-table>
      <div style="height:15px"></div>
    </dialogBox>
    <el-dialog title="新增意见" custom-class="dialogBox" :visible.sync="addDialog" width="50%" :append-to-body="true"
      :modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="commonOpinion">
          <div class="invalid-reson">常用意见：</div>
          <el-input v-model="form.commonOpinion" placeholder="请输入常用意见" type="textarea" :rows="4"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="dialog-footer">
            <el-button @click="closeaddDiglog">取 消</el-button>
            <el-button type="primary" @click="addOpinion">确 定</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { getUserCommonOpinion, addUserCommonOpinion, delUserCommonOpinion } from "@/api/fqsq.js"
export default {
  components: {},
  props: {
    value: { type: Boolean, default: false },
  },
  data () {
    return {
      columns: [
        {
          label: '序号',
          type: 'index',
          width: '50',
        },
        {
          prop: "opinion",
          label: "意见描述",
        },
        {
          label: '操作',
          width: '100',
          render: (h, scope) => {
            return (
              <div>
                <el-button type="text" onClick={() => { this.useCommonOpinion(scope.row) }}>使用</el-button>
                <el-button type="text" onClick={() => { this.deleteOpinion(scope.row) }}>删除</el-button>
              </div>
            )
          }
        }
      ],
      tableData: {
        total: 0,
        data: [],
      },
      form: {
        commonOpinion: '',
      },
      rules: {
        commonOpinion: [
          { required: true, message: '请输入常用意见', trigger: 'blur' },
        ],
      },
      addDialog: false,
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      getUserCommonOpinion().then(res => {
        let { records } = res.result
        this.tableData.data = records ? records : []
      })
    },
    //新增常用意见
    addOpinion () {
      this.$refs.form.validate(valid => {
        if (valid) {
          addUserCommonOpinion({ commonOpinion: this.form.commonOpinion }).then(res => {
            if (res.code == 200) {
              this.closeaddDiglog();
              this.queryList()
            } else {
              this.$message.error(res.message)
            }
          })
        } else {
          return false;
        }
      });
    },
    //打开新增弹窗
    openDialog () {
      this.addDialog = true
    },
    //关闭新增弹窗
    closeaddDiglog () {
      this.addDialog = false;
      this.$refs['form'].resetFields();
    },
    //使用常用意见
    useCommonOpinion (item) {
      this.$parent.useOpinion(item.opinion);
      this.$emit("input", false);
    },
    //删除常用意见
    deleteOpinion (item) {
      this.$confirm("确定要删除吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delUserCommonOpinion({ bsmOpinion: item.bsmOpinion }).then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功")
            this.getList()
          } else {
            this.$message.error(res.message)
          }
        })
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //关闭列表弹窗
    closeDialog () {
      this.$emit("input", false);
      this.form.commonOpinion = "";
    }
  }
}
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
@import "~@/styles/dialogBox.scss";

.invalid-reson {
  margin-bottom: 10px;
}

.dialog-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>