<template>
  <div>
    <!-- 抽屉组件 -->
    <a-drawer
      title="工单详情"
      placement="right"
      :closable="true"
      :open="visible"
      @close="onClose"
      width="800px"
    >
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="详细信息">
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">所属项目：</span>{{ detail.projectName }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">所属合同：</span>{{ detail.contractName }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">编号：</span>{{ detail.id }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">报修人员：</span>{{ detail.repairer }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">状态：</span>{{ statusText(detail.status) }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">待处理人：</span>{{ detail.handler }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">报修时间：</span>{{ detail.repairTime }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">是否事故：</span>{{ detail.isAccident }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">故障大类：</span>{{ detail.faultCategory }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">故障小类：</span>{{ detail.faultSubcategory }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">所属机构：</span>{{ detail.organizationName }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">响应级别：</span>{{ detail.responseLevel }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">响应时限(小时)：</span>{{ detail.responseTime }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">故障地址：</span>{{ detail.faultLocation }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">故障描述：</span>{{ detail.faultDescription }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div
                ><span class="titleLabel">故障图片：</span>
                <a-upload v-model:file-list="fileLists" disabled> </a-upload>
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div
                ><span class="titleLabel">地图信息：</span>
                <div id="orderSendDetailMap" style="width: 100%; height: 500px"></div>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="处理信息" force-render>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">维修人员：</span>{{ dealDetail.fixPeople }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">修复时间：</span>{{ dealDetail.fixTime }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">修复结果：</span>{{ dealDetail.fixResult }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">费用情况：</span>{{ dealDetail.cost }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div
                ><span class="titleLabel">处理图片：</span>
                <a-upload v-model:file-list="fileLists1" disabled> </a-upload>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="3" tab="流程信息">
          <div style="margin-left: 20px">
            <a-timeline>
              <a-timeline-item v-for="(item, index) in progress" :key="index">
                <template #dot
                  ><span class="stage">{{ item.stage }}</span></template
                >
                <div class="timeText"
                  ><span class="person">{{ item.operator }}</span
                  >{{ item.description }}</div
                >
                <div class="timeText">{{ item.feedback }}</div>
                <div class="operationTime">{{ item.operationTime }}</div>
                <div class="duration" v-if="item.duration">
                  <Icon icon="ant-design:dashboard-outlined" />用时{{ item.duration }}</div
                >
                <a-divider></a-divider>
              </a-timeline-item>
            </a-timeline>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="历史信息">
          <a-table :dataSource="progress" :columns="historyColumns" bordered> </a-table>
        </a-tab-pane>
        <a-tab-pane key="5" tab="延期信息">
          <a-table :dataSource="delayInfo" :columns="delayColumns" bordered>
            <!-- <template #bodyCell="{ column }">
              <template v-if="column.key === 'action'">
                <a-button type="link">查看</a-button>
              </template>
            </template> -->
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-drawer>
  </div>
</template>

<script>
  import { reactive, ref, defineComponent } from 'vue';
  import { getInfo, dealInfo, queryProcess, getOrderDelayHistory } from './api';
  import AMapLoader from '@amap/amap-jsapi-loader';
  import Icon from '@/components/Icon/Icon.vue';
  export default defineComponent({
    components: { Icon },
    setup(props, { emit }) {
      //抽屉详情
      let detail = reactive({
        projectName: '',
        contractName: '',
        id: '',
        status: null,
        repairer: '',
        handler: '',
        repairTime: '',
        organizationName: '',
        isAccident: null,
        faultCategory: '',
        faultSubcategory: '',
        responseLevel: null,
        responseTime: '',
        faultLocation: '',
        faultDescription: '',
        attachments: '',
        longitude: '',
        latitude: '',
      });
      const dealDetail = reactive({
        fixPeople: '',
        fixTime: '',
        fixResult: '',
        cost: '',
        attachments: '',
      });
      const fileLists = ref([]);
      const fileLists1 = ref([]);
      const progress = ref([]);
      const statusOptions = [
        {
          label: '待派遣',
          value: 0,
        },
        {
          label: '待接单',
          value: 1,
        },
        {
          label: '处理中',
          value: 2,
        },
        {
          label: '处理中(已延期)',
          value: 7,
        },
        {
          label: '作废',
          value: 8,
        },
        {
          label: '待接单(派遣)',
          value: 9,
        },
        {
          label: '待接单(转派)',
          value: 10,
        },
        {
          label: '运维单位处理时回退至派遣',
          value: 3,
        },
        {
          label: '初审',
          value: 4,
        },
        {
          label: '终审',
          value: 5,
        },
        {
          label: '结案',
          value: 6,
        },
      ];
      const statusText = (val) => {
        return statusOptions.find((i) => {
          return i.value == val;
        })?.label;
      };
      const historyColumns = [
        {
          title: '环节',
          dataIndex: 'stage',
          key: 'stage',
        },
        {
          title: '操作',
          dataIndex: 'operationName',
          key: 'operationName',
        },
        {
          title: '操作人',
          dataIndex: 'operator',
          key: 'operator',
        },
        {
          title: '操作时间',
          dataIndex: 'operationTime',
          key: 'operationTime  ',
        },
      ];
      const delayInfo = ref([]);
      const delayColumns = [
        {
          title: '申请时间',
          dataIndex: 'createTime',
          key: 'createTime',
        },
        {
          title: '申请原因',
          dataIndex: 'delayReason',
          key: 'delayReason',
        },
        {
          title: '延期时间',
          dataIndex: 'afterDelayTime',
          key: 'afterDelayTime',
        },
        {
          title: '详细信息',
          dataIndex: 'handleResult',
          key: 'handleResult  ',
        },
      ];

      // 打开抽屉的方法
      const visible = ref(false);
      const showDrawer = async (id) => {
        visible.value = true;
        fileLists.value = [];
        fileLists1.value = [];
        const data = await getInfo(id);
        for (let i in detail) {
          detail[i] = data[i];
        }
        const progressLine = await queryProcess(id);
        progress.value = progressLine;
        console.log(progress.value);
        const data1 = await dealInfo(id);
        if (data1) {
          for (let i in dealDetail) {
            dealDetail[i] = data1[i];
          }
        }
        if (detail.attachments && detail.attachments.length > 0) {
          detail.attachments.forEach((i) => {
            fileLists.value.push({
              url: i.url,
              name: i.name,
              status: 'done',
            });
          });
        }
        if (dealDetail.attachments && dealDetail.attachments.length > 0) {
          dealDetail.attachments.forEach((i) => {
            fileLists1.value.push({
              url: i.url,
              name: i.name,
              status: 'done',
            });
          });
        }
        const data2 = await getOrderDelayHistory(id);
        if (data2) {
          delayInfo.value = data2;
        }
        initMap(detail.longitude, detail.latitude, detail.faultLocation);
      };

      // 关闭抽屉的方法
      const onClose = () => {
        visible.value = false;
        for (let i in dealDetail) {
          dealDetail[i] = '';
        }
        map.value?.destroy();
      };
      const activeKey = ref('1');

      //地图
      const map = ref(null);
      const initMap = async (longitude, latitude, organizationName) => {
        try {
          // 加载高德地图 JavaScript API
          await AMapLoader.load({
            key: '786a2e7cc6d4be5ba1d6174a0aa10f2b',
            version: '2.0',
            plugins: [],
          });

          // 初始化地图
          map.value = new AMap.Map('orderSendDetailMap', {
            zoom: 17,
            center: [longitude, latitude],
          });

          // 添加标记（可选）
          const marker = new AMap.Marker({
            position: new AMap.LngLat(longitude, latitude),
            title: organizationName,
          });
          const markerList = [marker];
          map.value.add(markerList);
        } catch (error) {
          console.error('加载高德地图失败:', error);
        }
      };
      return {
        visible,
        showDrawer,
        onClose,
        activeKey,
        historyColumns,
        delayInfo,
        delayColumns,
        detail,
        dealDetail,
        statusText,
        progress,
        fileLists,
        fileLists1,
      };
    },
  });
</script>

<style scoped>
  /* 可选样式调整 */
  .ant-btn {
    margin: 20px;
  }

  /* .singerDetail{
  margin-bottom: 10px;
} */
  div {
    margin-bottom: 1%;
  }
  .stage {
    font-weight: 600;
  }
  .timeText {
    margin: 0 20% 3% 3%;
  }
  .person {
    color: red;
    font-weight: 550;
  }
  .operationTime {
    color: gray;
    font-weight: 550;
    margin-left: 80%;
  }
  .duration {
    color: #00bbff;
    position: absolute;
    font-weight: 550;
    margin-left: 80%;
    top: 0.1%;
  }
  .titleLabel {
    color: gray;
  }
</style>
