<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">
            <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>
            <!-- <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,delUserCommonOpinion } 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>
                <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.queryList()
  },
  methods: {
    queryList(){
        getUserCommonOpinion(this.pageData).then(res => {
          let { total, records } = res.result
          this.tableData.total = total;
          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 {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    //打开新增弹窗
    openDialog() {
        this.addDialog = true
    },
    //关闭新增弹窗
    closeaddDiglog() {
      this.addDialog = false;
      this.form.commonOpinion = "";
    },
    //使用常用意见
    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.queryList()
            }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'>
  .invalid-reson {
    margin-bottom: 10px;
  }
  .dialog-footer {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
  }
</style>