<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:40:02
-->
<template>
  <div>
    <el-button type="primary" native-type="submit" @click="openDialog">新增常用</el-button>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" v-show="addDialog">
      <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 class="text-center">
        <el-button @click="closeaddDiglog">取 消</el-button>
        <el-button type="primary" @click="addOpinion">确 定</el-button>
      </el-form-item>
    </el-form>
    <lb-table :heightNumSetting="true"
      @row-dblclick="handleRowClick"
      :pagination="false" :column="columns" :minHeight="300" :data="tableData.data">
    </lb-table>
    <div style="height:15px"></div>
    <div class="text-center">
      <el-button @click="$popupCacel">取消</el-button>
    </div>
  </div>
</template>
<script>
  import store from '@/store/index.js'
  import { getUserCommonOpinion, addUserCommonOpinion, delUserCommonOpinion } from "@/api/fqsq.js"
  export default {
    components: {},
    props: {
      formData: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        addDialog: false,
        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' }
          ]
        }
      }
    },
    mounted () {
      this.getList()
    },
    methods: {
      getList () {
        getUserCommonOpinion().then(res => {
          this.tableData.data = res.result
        })
      },
      //新增常用意见
      addOpinion () {
        this.$refs.form.validate(valid => {
          if (valid) {
            addUserCommonOpinion({ commonOpinion: this.form.commonOpinion }).then(res => {
              if (res.code == 200) {
                this.$message.success("新增成功")
                this.closeaddDiglog();
                this.getList()
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            return false;
          }
        });
      },
      //打开新增弹窗
      openDialog () {
        this.addDialog = true
      },
      //关闭新增弹窗
      closeaddDiglog () {
        this.addDialog = false
        this.$refs['form'].resetFields();
      },
      handleRowClick (item) {
        this.useCommonOpinion(item)
      },
      //使用常用意见
      useCommonOpinion (item) {
        store.dispatch('workflow/setOptions', item.opinion);
        this.$popupCacel()
      },
      //删除常用意见
      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.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>