<template>
    <dialogBox title="常用意见" width="60%" isMain v-model="value" @closeDialog="closeDialog" :isButton="false">
    <div>
        <el-button type="primary" native-type="submit" @click="openDialog()">新增常用</el-button>
        <lb-table :page-size="pageData.size" border :current-page.sync="pageData.current" :total="tableData.total"
            @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="columns"
            :data="tableData.data">
        </lb-table>
        <el-dialog title="新增意见" :visible.sync="addDialog" width="50%" :modal="false" top="30vh">
            <div class="invalid-reson">常用意见：</div>
            <el-input v-model="commonOpinion" placeholder="请输入常用意见" type="textarea" :rows="4"></el-input>
            <div class="dialog-footer">
                <el-button @click="closeaddDiglog()">取 消</el-button>
                <el-button type="primary" @click="addOpinion()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    </dialogBox>
</template>
<script>
import table from "@/utils/mixin/table";
import { getUserCommonOpinion,addUserCommonOpinion } from "@/api/fqsq.js"
export default {
  components: {},
  mixins: [table],
  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>
              </div>
            )
          }
        }
      ],
      tableData: {
        total: 0,
        data: [],
      },
      addDialog: false,
      commonOpinion: ''
    }
  },
  mounted() {
      this.queryList()
  },
  methods: {
    queryList(){
        getUserCommonOpinion(this.pageData).then(res => {
          let { total, records } = res.result
          this.tableData.total = total;
          this.tableData.data = records ? records : []
        })
    },
    //新增常用意见
    addOpinion(){
        addUserCommonOpinion({commonOpinion: this.commonOpinion}).then(res => {
            if(res.code == 200){
                this.closeaddDiglog();
                this.queryList()
            }else{
                this.$message.error(res.message)
            }
        })
    },
    //打开新增弹窗
    openDialog() {
        this.addDialog = true
    },
    //关闭新增弹窗
    closeaddDiglog() {
      this.addDialog = false;
      this.commonOpinion = "";
    },
    //使用常用意见
    useCommonOpinion(item){
      this.$parent.useOpinion(item.opinion);
      this.$emit("input", false);
    },
    //关闭列表弹窗
    closeDialog () {
      this.$emit("input", false);
      this.commonOpinion = "";
    }
  }
}
</script>
<style scoped lang='scss'>
  .invalid-reson {
    margin-bottom: 10px;
  }
  .dialog-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
</style>