<template>
  <div> 
    <el-dialog
      v-model="props.dialogVisible"
      width="60%"
      :before-close="closeModal"
    >
      <div class="clStyleCss">
        <div class="left">
          <div>
            <h2>工单内容</h2>
            <div>{{ rowData.content }}</div>
          </div>

          <div>
            <el-input
              :disabled="rowData.workorderstatename === '已完成'"
              v-model="clInputData"
              resize="none"
              :rows="7"
              type="textarea"
              placeholder="请输入办结结果，不能超过500字"
              maxlength="500"
            ></el-input>
            <div v-if="rowData.workorderstatename !== '已完成'">
              <el-upload
                :on-success="clUploadSucc"
                :headers="uploadHeadData"
                ref="uploadRef"
                class="upload-demo"
                :action="`${baseUrl}system/accessories/upload`"
                :show-file-list="false"
              >
                <template #trigger>
                  <el-button :icon="Link" text type="primary"
                    >添加附件（最多上传5个附件，单个文件最大20M）</el-button
                  >
                </template>
              </el-upload>
              <el-button @click="clClick" type="primary">处理</el-button>
            </div>
            <el-button
              style="margin: 0; padding: 0"
              :icon="Search"
              text
              type="info"
              @click="openFileFn"
              >查看附件</el-button
            >
          </div>

          <div>
            <el-tabs v-model="activeName" class="demo-tabs">
              <el-tab-pane label="操作日志" name="操作日志">
                <div class="czRizCss">
                  <div v-for="(item, index) in czRizDatas" :key="index">
                    <div>
                      <UserFilled />
                    </div>
                    <div>
                      <span>{{ item.operator }}</span>
                      <span>{{ item.operationtime }}</span>
                    </div>
                    <div>{{ item.logcontent }}</div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>

        <div class="right">
          <div>
            <h3>工单信息</h3>
            <div class="listCss">
              <div>
                <div>来电号码</div>
                <div>{{ rowData.callnum }}</div>
              </div>
              <div>
                <div>来电人</div>
                <div>{{ rowData.caller }}</div>
              </div>
              <div>
                <div>项目</div>
                <div>{{ rowData.projectname }}</div>
              </div>
              <div>
                <div>工单类型</div>
                <div>{{ rowData.workordercatename }}</div>
              </div>
              <div>
                <div>是否办结</div>
                <div>{{ rowData.workorderstatename }}</div>
              </div>
              <div>
                <div>创建时间</div>
                <div>{{ rowData.createtime }}</div>
              </div>
            </div>
          </div>
          <div>
            <h3>
              <span>客户信息</span>
              <Phone @click="callFn" />
            </h3>
            <div class="listCss">
              <div>
                <div>客户名称</div>
                <div>{{ 1 }}</div>
              </div>
              <div>
                <div>真实姓名</div>
                <div>{{ 1 }}</div>
              </div>
              <div>
                <div>客户电话</div>
                <div>{{ 1 }}</div>
              </div>
              <div>
                <div>客户邮箱</div>
                <div>{{ 1 }}</div>
              </div>
              <div>
                <div>客户公司</div>
                <div>{{ 1 }}</div>
              </div>
              <div>
                <div>客户地址</div>
                <div>{{ 1 }}</div>
              </div>
              <div>
                <div>客户等级</div>
                <div>{{ 1 }}</div>
              </div>
              <div>
                <div>客户来源</div>
                <div>{{ 1 }}</div>
              </div>
              <div>
                <div>客户备注</div>
                <div>{{ 1 }}</div>
              </div>
              <div>
                <div>客户标签</div>
                <div>{{ 1 }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 附件图片 -->
    <attachmentList
      v-model:dialogVisible="fjDialogVisible"
      v-if="fjDialogVisible"
      :fileList="[...ysUploadFiles , ...clUploadIds]"
    ></attachmentList>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps, getCurrentInstance } from 'vue'
import { Link, User, Search } from '@element-plus/icons-vue'
import { getToken } from '@/utils/auth'
import {
  getPageListData,
  deletePageData,
  createPageData,
  editPageData
} from '@/api/main/system/system'

const baseUrl = import.meta.env.VITE_APP_BASE_API

import attachmentList from '@/components/workOrder/attachmentList'

const { proxy } = getCurrentInstance()

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: String || Object
  }, 
})

const emit = defineEmits(['update:dialogVisible', 'closeModal'])

/*** ------------------------------------------------------------------------------------------------------------------- */

// 处理回复内容
const clInputData = ref('');
// 处理标签切换
const activeName = ref('操作日志');
// 本地上传返回的文件, 编辑情况下保存的文件列表
const clUploadIds = ref([]);
// 工单种的上传文件，查看详情下的文件列表
const ysUploadFiles = ref([]);
// 操作日志数据
const czRizDatas = ref([]);
// 文件上传请求头
const uploadHeadData = ref({ Authorization: `Bearer ${getToken()}` });

// 行数据
const rowData = ref(props.rowData)

// 附件弹出框
const fjDialogVisible = ref(false);


// 初始化
( async ()=>{  
	if( typeof rowData.value === 'string'){
		await new Promise((ok)=>{
			let params = {
				workordercode: rowData.value, 
				pageNum: 1,
				pageSize: 10
			}
			getPageListData(`/order/workorder` , params  ).then(({ data }) => {
				rowData.value = data[0]; 
				ok()
			}) 
		})
	} 

	// 查看详情，显示内容数据
	if (rowData.value.isend === 1) {
	  	clInputData.value = rowData.value.result || ''
	}
  
 
	// 获取操作日志数据
	getCzriz(rowData.value.workordercode)

})()

// 关闭弹出框
function closeModal() {
  emit('update:dialogVisible', false)
  emit('closeModal', false)
}

// 获取操作日志
function getCzriz(data) { 

  let params = {
    workordercode: data
  }

  getPageListData(`/order/workorderoperatelog`, params).then(({ data }) => {
    czRizDatas.value = data
  })
}

// 通话回拨
function callFn() {
  let params = {
    callid: 0,
    workorderId: rowData.value.workorderId
  }
  editPageData('/call/record', params).then((data) => {})
}

// 上传事件
function clUploadSucc({ state, data }) {
  if (state === 'success') {
    clUploadIds.value.push({
      id: data.Id,
      url: data.url
    })
    proxy.$modal.msgSuccess('附件上传成功！')
  }
}

// 处理按钮事件
function clClick() {
  if (clInputData.value === '') {
    proxy.$modal.msgError('办结结果不能为空，请输入办结结果')
    return
  }

  let params = {
    file: clUploadIds.value.map((val) => val.id).join(','),
    workorderId: rowData.value.workorderId,
    result: clInputData.value
  }

  editPageData('/order/workorder/editresult', params).then(({ state }) => {
    if (state === 'success') {
      proxy.$modal.msgSuccess('处理成功！')
      closeModal()
    }
  })
}

// 附件弹出框
function openFileFn() {
  fjDialogVisible.value = true

  ysUploadFiles.value = [];

  if (rowData.value.fileurl) {
    for (const key in rowData.value.fileurl) {
      ysUploadFiles.value.push({
        url: rowData.value.fileurl[key]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.clStyleCss {
  width: 100%;

  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: 650px;
  justify-content: space-evenly;
  overflow: hidden;

  background-color: rgb(211, 217, 231);

  > div {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }

  .left {
    padding: 10px;

    > div:nth-child(1) {
      h2 {
        font-weight: 700 !important;
      }
    }

    > div:nth-child(2) {
      margin-top: 20px;

      > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;
      }

      > .el-button {
        margin: 10px 0;
      }

      .el-upload {
        .el-button {
          padding: 0;
        }
      }
    }

    > div:nth-child(3) {
      .czRizCss {
        height: 260px;
        overflow: auto;
        padding-right: 10px;

        > div {
          display: grid;
          grid-template-columns: 60px 1fr;
          grid-template-rows: 30px minmax(30px, auto);
          align-items: center;
          column-gap: 10px;
          margin-bottom: 20px;

          > div:nth-child(1) {
            justify-self: center;
            grid-row: span 2;

            display: flex;
            justify-content: center;
            align-items: center;

            width: 48px;
            height: 48px;
            background-color: rgb(240, 150, 77);
            border-radius: 50px;

            svg {
              width: 30px;
              height: 30px;
              color: #fff;
            }
          }
          > div:nth-child(2) {
            > span:nth-child(1) {
              font-size: 16px;
              font-weight: 700;
              color: rgb(106, 142, 248);
              margin-right: 10px;
            }
            > span:nth-child(2) {
              font-size: 12px;
              color: rgb(161, 161, 161);
            }
          }
        }
      }
    }
  }

  .right {
    padding: 5px 20px;

    > div {
      margin-bottom: 40px;
    }

    h3 {
      font-size: 19px;
      font-weight: 600;
    }

    > div:nth-child(2) {
      > h3 {
        display: flex;
        justify-content: space-between;
        align-items: center;

        svg {
          width: 25px;
          height: 25px;
          margin-bottom: 3px;
          cursor: pointer;
        }
      }
    }

    .listCss {
      margin-left: 10px;
      margin-top: 20px;
      > div {
        display: grid;
        grid-template-columns: 70px 1fr;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 10px;

        > div:nth-child(1) {
          justify-self: left;
          color: rgb(172, 172, 172);
        }
      }
    }
  }
}
</style>
