<template>
  <el-dialog v-model="state.isShowDialog" draggable title="工单延期" ref="dialogRef" width="80%" append-to-body destroy-on-close>
    <!-- 工单发 -->
    <el-collapse v-model="state.collapseArr" class="collapse-box" v-loading="state.loading">
      <!-- 工单信息 -->
      <el-collapse-item name="1">
        <template #title>
          <p class="pl20">
            <b class="font14">工单信息</b>
          </p>
        </template>
        <div class="collapse-container pb1">
          <!--  待回访进行操作 -->
          <el-form label-width="100px" ref="ruleFormRef">
            <el-row :gutter="35">
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                <el-form-item label="来电/来信人"> {{ state.ruleForm.channelText }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                <el-form-item label="联系电话">
                  {{ state.ruleForm.fromPhone }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
                <el-form-item label="服务坐席"> {{ state.ruleForm.employeeName }}[{{ state.ruleForm.employeeStaffNo }}] </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="热点分类"> {{ state.ruleForm.hotspotSpliceName }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="工单标题"> {{ state.ruleForm.title }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="诉求详情"> {{ state.ruleForm.content }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="接办部门"> {{ state.ruleForm.content }} </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="办理结果"> {{ state.ruleForm.content }} </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
      <!-- 工单延期 -->
      <el-collapse-item name="2">
        <template #title>
          <p class="pl20">
            <b class="font14">延期信息</b>
          </p>
        </template>
        <div class="collapse-container pb1">
          <el-form label-width="100px" ref="ruleFormRef" :model="state.ruleForm"  label-position="left">
            <el-row :gutter="35">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="操作人">
                  {{ state.ruleForm.title }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="撤销说明">
                  <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 10 }" maxlength="2000" placeholder="请填写撤销说明" v-model="state.ruleForm.handleResult"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="附件" prop="additions">
                  <Upload :fileList="state.fileList" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>

    <template #footer>
			<span class="dialog-footer">
        <el-button @click="onCancel" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.loading" v-auth="'business:order:delay'">提交</el-button>
			</span>
    </template>
  </el-dialog>
  <!-- 处理流程 -->
  <order-process ref="orderProcessRef" @orderProcessSuccess="orderProcessSuccess" @orderProcessFailed="orderProcessFailed" />
</template>
<script setup lang="ts" name="orderDelay">
import {defineAsyncComponent, reactive, ref} from 'vue';
import {ElMessageBox} from 'element-plus'
import {commonEnum} from "/@/utils/tools";

// 引入组件
const Upload = defineAsyncComponent(() => import('/@/components/Upload/index.vue'));
const OrderProcess = defineAsyncComponent(() => import('/@/views/business/order/components/Order-process.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['OnDelaySuccess', 'OnDelayFailed']);
// 定义变量内容
const state = reactive<any>({
  collapseArr:['1','2'], // 折叠面板
  isShowDialog: false, // 是否显示弹窗
  loading: false, // 是否显示加载
  ruleForm: {// 表单数据
    title:"标题内容",
    content:"内容内容内容内容内容内容内容内容内容内容内容内容内容",
    result:'办理结果内容',
    handleResult:'办理结果内容',
    radio1:'1',
    departmentList:[
      {
        departmentName:'部门名称1',
        radio:'1',
      },
      {
        departmentName:'部门名称2',
        radio:'1',
      },
      {
        departmentName:'部门名称3',
        radio:'1',
      },
    ]
  },
  fileList:[],
});
const ruleFormRef = ref<RefType>();
const orderProcessRef = ref<RefType>();
// 打开弹窗
const openDialog = (val:any) => {
  console.log(val,'撤销参数')
  state.loading = false;
  state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.isShowDialog = false;
  state.ruleForm = {};
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = () => {
  ElMessageBox.confirm('您确定要申请延期吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(() => {
        orderProcessRef.value.openDialog({ id: state.ruleForm.workflowId, title: '延期', processType: 'delay', commonEnum: commonEnum.Delay });
      })
      .catch(() => {
        // 取消
      });
};
// 流程提交成功
const orderProcessSuccess = () => {
  closeDialog();
  emit('OnDelaySuccess');
};
// 流程提交失败
const orderProcessFailed = () => {
  closeDialog();
  emit('OnDelayFailed');
};
defineExpose({
  openDialog,
  closeDialog,
});
</script>

<style lang="scss" scoped>
.collapse-box {
  :deep(.el-collapse-item__header) {
    background-color: var(--hotline-bg-main-color);
    height: 40px;
    border-radius: var(--el-border-radius-base);
  }
  :deep(.el-collapse-item__content) {
    padding-bottom: 10px !important;
    .el-form-item {
      margin-bottom: 5px;
      .el-form-item__content {
        line-height: 24px;
      }
    }
  }
  .collapse-container {
    padding: 10px;
    .plug-container {
      border: var(--el-border);
      border-radius: var(--el-border-radius-base);
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
      .plug-container-title {
        padding: 10px 15px;
        font-weight: bold;
        border-bottom: var(--el-border);
        font-size: var(--el-font-size-medium);
      }
    }
  }
}
</style>
<style lang="scss">
.demo-tabs-form {
  .title {
    font-size: var(--el-font-size-medium);
    padding: 10px 15px 20px 15px;
  }
  .el-form-item {
    margin-bottom: 0 !important;
  }
}
</style>
