<script setup>
import { ElMessage } from "element-plus"
import { computed, nextTick, reactive, watch,ref } from "vue"

const props = defineProps({
  dataForm: {
    type: Object,
    required: true
  },
  noRenewalReasonList: {
    type: Array,
    required: true
  }
})
const emits=defineEmits(['refreshReasonList','saveLabel'])

const pageState = reactive({
  remarkForm: {
    AscribeContent: ''
  },
  labelForm: {
    reason: '',
    detailReason: ''
  },
  createReasonShow: false
})

const isShow = defineModel('isShow', { type: Boolean, default: false })
const confirmNoRenewalFormRef = ref(null)


watch(() => isShow, (value) => {
  if (value) {
    pageState.labelForm.reason = props.dataForm.reason
    pageState.labelForm.detailReason = props.dataForm.detailReason
    nextTick(() => {
      confirmNoRenewalFormRef.value && confirmNoRenewalFormRef.value.clearValidate()
    })
  }
})

const Role = computed(() => {
  return localStorage.getItem('Role') || '';
})
const canConfirmNotRenewed = computed(() => {
  return ['admin', 'rai_admin'].includes(Role.value)
})


function createReason() {
  pageState.createReasonShow = true
}
const confirmReasonRef=ref(null)
function resetReasonForm(){
  pageState.remarkForm.AscribeContent = ""
  confirmReasonRef.value?.clearValidate()
}
function querySearch(queryString, cb){
  if (!queryString) {
    cb(props.noRenewalReasonList.map(item => {
      return { value: item.AscribeContent }
    }))
  } else {
    cb(props.noRenewalReasonList.map(item => {
      if (item.AscribeContent.indexOf(queryString) != -1) {
        return { value: item.AscribeContent }
      }
    }).filter(Boolean))
  }
}
function saveReason(){
 confirmReasonRef.value?.validate(valid => {
    if (valid) {
      pageState.remarkForm.AscribeContent = pageState.remarkForm.AscribeContent.replace(/\s*/g, "")
      dataMainInterface.addAscrib({ AscribeContent: pageState.remarkForm.AscribeContent })
        .then(res => {
          if (res.Ret == 200) {
            ElMessage.success("新建成功")
            pageState.createReasonShow = false
            emits("refreshReasonList")
          }
        })
    }
  })
}
function save(){
  if ((Role.value != 'rai_admin' && props.dataForm.reason) || (!canConfirmNotRenewed.value)) {
    ElMessage.error("仅管理员可修改")
    return
  }
  confirmNoRenewalFormRef.value?.validate(valid => {
    if (valid) {
      emits("saveLabel", { CompanyAscribeId: pageState.labelForm.reason, Content: pageState.labelForm.detailReason })
    }
  })
}


</script>

<template>
  <el-dialog
    v-model="isShow"
    @close="isShow = false"
    :modal-append-to-body="false"
    width="652px"
    title="确认不续约"
  >
    <div class="dialog-box">
      <el-form :model="pageState.labelForm" ref="confirmNoRenewalFormRef">
        <el-form-item
          prop="reason"
          :rules="{
            required: true,
            message: '不续约归因不能为空',
            trigger: 'change',
          }"
        >
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <el-select
              v-model="pageState.labelForm.reason"
              placeholder="不续约归因"
              style="width: 424px"
            >
              <el-option
                :label="item.AscribeContent"
                :value="item.CompanyAscribeId"
                v-for="item in props.noRenewalReasonList"
                :key="item.reasonId"
              ></el-option>
            </el-select>
            <span class="create-reason" @click="createReason">新建</span>
          </div>
        </el-form-item>
        <el-form-item
          prop="detailReason"
          :rules="{
            required: true,
            message: '详细原因不能为空',
            trigger: 'blur',
          }"
        >
          <el-input
            v-model="pageState.labelForm.detailReason"
            placeholder="请描述详细原因"
            type="textarea"
            style="width: 505px"
            :rows="9"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button @click="isShow = false" class="dialog-footer-button"
          >取消</el-button
        >
        <el-button
          @click="save"
          type="primary"
          class="dialog-footer-button"
          style="margin-left: 30px"
          >确定</el-button
        >
      </div>
    </div>
  </el-dialog>
  <el-dialog
    v-model="pageState.createReasonShow"
    @close="resetReasonForm"
    :modal-append-to-body="false"
    width="652px"
    title="新建归因"
  >
    <div class="dialog-box">
      <el-form :model="pageState.remarkForm" ref="confirmReasonRef">
        <el-form-item
          prop="AscribeContent"
          :rules="{ required: true, message: '归因不能为空', trigger: 'blur' }"
        >
          <el-autocomplete
            class="autocomplete-input"
            v-model.trim="pageState.remarkForm.AscribeContent"
            :fetch-suggestions="querySearch"
            placeholder="请输入归因名称"
          ></el-autocomplete>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button
          @click="pageState.createReasonShow = false"
          class="dialog-footer-button"
          >取消</el-button
        >
        <el-button
          @click="saveReason"
          type="primary"
          class="dialog-footer-button"
          style="margin-left: 30px"
          >确定</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dialog-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  .create-reason {
    cursor: pointer;
    color: #409eff;
    font-size: 14px;
    margin-right: 20px;
  }
  .dialog-footer {
    margin: 30px 0;
    .dialog-footer-button {
      height: 40px;
      width: 120px;
    }
  }
}
</style>
<style lang="scss">
.autocomplete-input {
  .el-input {
    width: 505px;
  }
}
</style>