<template>
  <el-dialog :title="titleValue" width="800px" :model-value="modelValue" append-to-body @close="closed">
    <el-input v-model="sqnrData.sqnr" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" placeholder="请输入背景信息"
    class="background-info-input" :disabled="disabled"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed">取消</el-button>
        <el-button type="primary" @click="onComfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref ,onMounted, reactive, watch,getCurrentInstance} from "vue";
import { generateRandom10Digits } from '@/utils/tools'
const { proxy } = getCurrentInstance()
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  titleValue: {
    type: String,
    default: "诉求信息"
  },
  data: {
    type: Object,
    default: () => { }
  }
});
const emits=defineEmits(["update:modelValue","comfirm"]);
const sqnrData = reactive({
  sqnr: "",
  id: ""
})
const closed = () => {
    sqnrData.sqnr = ''
  sqnrData.id = ''
  emits("update:modelValue", false);

};
const onComfirm = () => {
  if (!sqnrData.sqnr) {
    proxy.$message.error('请输入诉求')
    return
  }
  emits("comfirm", { sqnr: sqnrData.sqnr, id: sqnrData.id?sqnrData.id: generateRandom10Digits() });
  emits("update:modelValue", false);
}
watch(() => props.data, (val) => {
  if (val) {
    sqnrData.sqnr =val.sqnr
    sqnrData.id = val.id
  }
})
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
  border-radius: 50% !important;
}

.tabBoxRadio .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>
