<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-button link type="primary" class="ml5" title="呼叫" @click="onCall"><SvgIcon name="ele-Phone" size="16px" /></el-button>
                  <!-- <el-popover :width="480" trigger="hover">
                    <template #reference>
                      <el-button link type="primary" class="ml5" title="播放录音"><SvgIcon name="ele-Headset" size="16px" /></el-button>
                    </template>
                    <AudioPlayer ref="AudioPlayerRef" :url="state.ruleForm.url" />
                  </el-popover> -->
                </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="12" :md="8" :lg="8" :xl="8">
                <el-form-item label="回访人">
                  {{ state.ruleForm.title }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                <el-form-item label="回访状态">
                  <span class="mr5">待回访</span>
                  <el-switch
                      v-model="state.ruleForm.switch"
                      class="ml-2"
                      inline-prompt
                      active-text="已接通"
                      inactive-text="未接通"
                  />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                <el-form-item label="回访方式">
                  {{ state.ruleForm.title }}
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
                <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 style="border-bottom: 1px solid var(--el-border-color);" class="mt10">
                  <template #label>
                    <p class="border-title mt10 mb10" > 坐席 </p>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-form-item label="坐席评价">
                  <el-radio-group v-model="state.ruleForm.radio">
                    <el-radio :label="item.value" v-for="(item) in seatRateArray" :key="item.value">{{item.label}}</el-radio>
                  </el-radio-group>
                </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 style="border-bottom: 1px solid var(--el-border-color);" class="mt10">
                  <template #label>
                    <p class="border-title mt10 mb10" > 接办部门 </p>
                  </template>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-for="(item, index) in state.ruleForm.departmentList" :key="index">
                <el-row :gutter="10">
                  <el-col :span="4">
                    {{ item.departmentName }}
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="办理结果">
                      <el-select v-model="item.radio">
                        <el-option
                            v-for="item in departmentRateArray"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="办件态度">
                      <el-select v-model="item.radio1">
                        <el-option
                            v-for="item in departmentAtiAttitude"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </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-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:release'">提交</el-button>
			</span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts" name="orderFollowUpPhone">
import { reactive, ref } from 'vue';
import {ElMessageBox, ElNotification} from 'element-plus';
import {telToOuter} from "/@/api/login/user";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);
// 定义变量内容
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',
      },
    ]
  },
});
const ruleFormRef = ref<RefType>();
const seatRateArray = ref<EmptyArrayType>([
  {
    label: '非常满意',
    value: '1',
  },
  {
    label: '满意',
    value: '2',
  },
  {
    label: '一般',
    value: '3',
  },
  {
    label: '不满意',
    value: '4',
  },
  {
    label: '非常不满意',
    value: '5',
  },
  {
    label: '未评价',
    value: '6',
  }
]);// 坐席评价列表
const departmentRateArray = ref<EmptyArrayType>([
  {
    label: '非常满意',
    value: '1',
  },
  {
    label: '满意',
    value: '2',
  },
  {
    label: '基本满意',
    value: '3',
  },
  {
    label: '不满意',
    value: '4',
  },
  {
    label: '非常不满意',
    value: '5',
  },
  {
    label: '未评价',
    value: '6',
  }
]);// 部门评价列表
const departmentAtiAttitude = ref<EmptyArrayType>([
  {
    label: '非常满意',
    value: '1',
  },
  {
    label: '满意',
    value: '2',
  },
  {
    label: '基本满意',
    value: '3',
  },
  {
    label: '不满意',
    value: '4',
  },
  {
    label: '非常不满意',
    value: '5',
  },
  {
    label: '未评价',
    value: '6',
  }
]);// 部门态度列表
// 打开弹窗
const openDialog = () => {
  state.loading = false;
  state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.isShowDialog = false;
  state.ruleForm = {};
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 呼叫
const onCall = ()=>{
  // 呼叫外部电话
  telToOuter({ outerNo: state.ruleForm.fromPhone })
      .then(() => {
        ElNotification({
          title: '成功',
          message: '呼叫',
          type: 'success',
        });
      })
      .catch(() => {

      });
}
// 提交
const onSubmit = () => {
  ElMessageBox.confirm('您确定要提交吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(() => {
        state.loading = true;
        setTimeout(() => {
          state.loading = false;
          state.isShowDialog = false;
          emit('updateList');
        }, 1000);
      })
      .catch(() => {
        // 取消
      });
};
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>
