<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="站点名称" prop="noticeTitle">
        <el-input
          v-model="queryParams.noticeTitle"
          placeholder="请输入站点名称"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="联系人" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入联系人"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入手机号"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="noticeType">
        <el-select
          v-model="queryParams.noticeType"
          placeholder="工单类型"
          clearable
          style="width: 200px"
        >
          <el-option
            v-for="dict in sys_notice_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['system:notice:add']"
          >新增</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:notice:remove']"
          >删除</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row> -->

    <el-table v-loading="loading" :data="orderList">
      <el-table-column label="序号" align="center" type="index" width="80" />
      <el-table-column label="站点名称" :show-overflow-tooltip="true">
        <template #default="scope">
          {{ scope.row.device.name }}
        </template>
      </el-table-column>
      <el-table-column label="区域" :show-overflow-tooltip="true">
        <template #default="scope">
          {{ scope.row.device.provinceName }}-{{ scope.row.device.cityName }}-{{
            scope.row.device.areaName
          }}
        </template>
      </el-table-column>
      <el-table-column label="报修人" align="center" prop="contactName">
        <template #default="scope">
          <span>{{ scope.row.contactName }}({{ scope.row.contactPhone }})</span>
        </template>
      </el-table-column>

      <el-table-column
        label="报修时间"
        align="center"
        prop="createTime"
        width="180"
      >
        <template #default="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="接单人" align="center" prop="">
          <template #default="scope">
            <span>{{ scope.row.contactName}}({{scope.row.contactPhone}})</span>
         </template>
        </el-table-column>

        <el-table-column label="接单时间" align="center" prop="createTime" width="100">
          <template #default="scope">
             <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
       </el-table-column> -->

      <el-table-column
        label="报修问题"
        align="center"
        prop="faultDesc"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        label="状态"
        align="center"
        prop="orderStatus"
        width="150"
      >
        <template #default="scope">
          <el-tag :type="orderStatus[scope.row.orderStatus].type">{{
            orderStatus[scope.row.orderStatus].label
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="View"
            @click="handleView(scope.row)"
            >查看</el-button
          >
          <el-button
            link
            type="primary"
            icon="Edit"
            :disabled="scope.row.orderStatus !== 5"
            @click="handlesCore(scope.row)"
            >主管评价</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改工单对话框 -->
    <el-dialog :title="title" v-model="open" width="50%" append-to-body>
      <el-timeline style="width: 100%">
        <el-timeline-item
          :timestamp="detailAction[0].actionTime"
          placement="top"
          v-if="detailAction.length > 0"
        >
          <el-card>
            <el-descriptions
              class="margin-top"
              title="用户报修"
              :column="3"
              border
            >
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">设备信息</div>
                </template>
                <div>{{ detailAction[0].actionInfo.device.ownerName }}</div>
                <div>{{ detailAction[0].actionInfo.device.ownerPhone }}</div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">设备地址</div>
                </template>
                {{ detailAction[0].actionInfo.device.provinceName
                }}{{ detailAction[0].actionInfo.device.cityName
                }}{{ detailAction[0].actionInfo.device.areaName
                }}{{ detailAction[0].actionInfo.device.townName
                }}{{ detailAction[0].actionInfo.device.community }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">保修时间</div>
                </template>
                <div style="width: 75px">
                  {{ detailAction[0].actionInfo.device.warrantyPeriod }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">报修联系人</div>
                </template>
                <div style="width: 100px">
                  {{ detailAction[0].actionInfo.contactName }}
                </div>
                <div>{{ detailAction[0].actionInfo.contactPhone }}</div>
              </el-descriptions-item>
              <el-descriptions-item span="2">
                <template #label>
                  <div class="cell-item">故障描述</div>
                </template>
                <div>{{ detailAction[0].actionInfo.faultDesc }}</div>
              </el-descriptions-item>

              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">图片/视频</div>
                </template>

                <div  v-for="item in detailAction[0].actionInfo.faultImg">
                  <el-image
                  style="width: 100px; height: 100px;float: left;margin: 5px;"
                  :src="item"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[item]"
                  :initial-index="4"
                  fit="cover"
                />


                </div>




              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          :timestamp="detailAction[1].actionTime"
          placement="top"
          v-if="detailAction.length > 1"
        >
          <el-card>
            <el-descriptions
              class="margin-top"
              title="维修师傅接单"
              :column="3"
              border
            >
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">维修人员</div>
                </template>
                {{ detailAction[1].actionInfo?.nickName }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">手机号</div>
                </template>
                {{ detailAction[1].actionInfo?.phonenumber }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          :timestamp="detailAction[2].actionTime"
          placement="top"
          v-if="detailAction.length > 2"
        >
          <el-card>
            <el-descriptions
              class="margin-top"
              title="维修师傅上门签到"
              :column="3"
              border
            >
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">签到地址</div>
                </template>
                {{ detailAction[2].actionInfo.location }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          :timestamp="detailAction[3].actionTime"
          placement="top"
          v-if="detailAction.length > 3"
        >
          <el-card>
            <el-descriptions
              class="margin-top"
              title="维修信息"
              :column="1"
              border
            >
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">更换配件</div>
                </template>
                <div>
                  <el-table
                    :data="detailAction[3].actionInfo.parts"
                    stripe
                    style="width: 100%"
                  >
                    <el-table-column
                      prop="partsName"
                      label="配件名"
                      width="180"
                    />
                    <el-table-column prop="partsModel" label="型号" />
                    <el-table-column prop="quantity" label="数量" width="80" />
                    <el-table-column prop="price" label="价格" width="80" />
                  </el-table>
                </div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">维修事项</div>
                </template>
                {{ detailAction[3].actionInfo.desc }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">维修图片</div>
                </template>
                <div  v-for="item in detailAction[3].actionInfo.img">
                  <el-image
                  style="width: 100px; height: 100px;float: left;margin: 5px;"
                  :src="item"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="[item]"
                  :initial-index="4"
                  fit="cover"
                />


                </div>

              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          :timestamp="detailAction[4].actionTime"
          placement="top"
          v-if="detailAction.length > 4"
        >
          <el-card>
            <el-descriptions
              class="margin-top"
              title="用户评价"
              :column="1"
              border
            >
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">服务描述</div>
                </template>
                {{ detailAction[4].actionInfo.desc }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">服务星级</div>
                </template>
                <div>
                  服务态度：<el-rate
                    v-model="detailAction[4].actionInfo.serviceAttitudeScore"
                    disabled
                    text-color="#ff9900"
                  />
                </div>
                <div>
                  技术水平：<el-rate
                    v-model="detailAction[4].actionInfo.technicalLevelScore"
                    disabled
                    text-color="#ff9900"
                  />
                </div>
                <div>
                  规范操作：<el-rate
                    v-model="detailAction[4].actionInfo.standardOperationScore"
                    disabled
                    text-color="#ff9900"
                  />
                </div>
                <div>
                  沟通能力：<el-rate
                    v-model="detailAction[4].actionInfo.communicationSkillScore"
                    disabled
                    text-color="#ff9900"
                  />
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          :timestamp="detailAction[5].actionTime"
          placement="top"
          v-if="detailAction.length > 5"
        >
          <el-card>
            <el-descriptions
              class="margin-top"
              title="主管评价"
              :column="1"
              border
            >
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">回访描述</div>
                </template>
              {{detailAction[5].actionInfo.desc}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">星级评价</div>
                </template>
                <el-rate
                v-model="detailAction[5].actionInfo.starScore"
                disabled
                text-color="#ff9900"
              />
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
        :timestamp="detailAction[6].actionTime"
        placement="top"
        v-if="detailAction.length > 6"
      >
        <el-card>
          <el-descriptions
            class="margin-top"
            title="主管评价"
            :column="2"
            border
          >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">身份证号</div>
            </template>
            {{ detailAction[6].actionInfo?.identityNumber }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">银行卡号</div>
            </template>
            {{ detailAction[6].actionInfo?.bankCardNumber }}
          </el-descriptions-item>
          <el-descriptions-item span="2">
            <template #label>
              <div class="cell-item">开户行</div>
            </template>
            {{ detailAction[6].actionInfo?.bankName }}
          </el-descriptions-item>
            <el-descriptions-item span="2">
              <template #label>
                <div class="cell-item">打款凭证</div>
              </template>
              <div  v-for="item in detailAction[6].actionInfo.bankReceiptUrl">
                <el-image
                style="width: 100px; height: 100px;float: left;margin: 5px;"
                :src="item"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="[item]"
                :initial-index="4"
                fit="cover"
              />


              </div>

            </el-descriptions-item>
            <el-descriptions-item span="2">
              <template #label>
                <div class="cell-item">备注</div>
              </template>
              {{ detailAction[6].actionInfo?.remark }}

            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-timeline-item>
      </el-timeline>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">关 闭</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog :title="title" v-model="openScore" width="40%" append-to-body>
      <el-card>
        <el-descriptions
          class="margin-top"
          title="电话回访客户评价"
          :column="1"
          border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item" style="width: 100px">维修人员</div>
            </template>
            <div></div>
            <el-input
              v-model="form.desc"
              style="width: 100%"
              :rows="2"
              type="textarea"
              placeholder="输入回访信息"
            />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">星级评价</div>
            </template>
            <el-rate v-model="form.starScore" text-color="#ff9900" />
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Notice">
import {
  getorderList,
  orderDetailByid,
  companyRating,
  orderactionByid,
} from "@/api/aftersales/order";

const { proxy } = getCurrentInstance();
const { sys_notice_status, sys_notice_type } = proxy.useDict(
  "sys_notice_status",
  "sys_notice_type"
);

const orderList = ref([]);
const open = ref(false);
const openScore = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);

const multiple = ref(true);
const total = ref(0);
const title = ref("");
const detailAction = ref([]);
const data = reactive({
  form: {
    orderId: undefined,
    desc: undefined,
    starScore: 0,
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,

    status: undefined,
  },
});
const orderStatus = ref({
  1: {
    label: "待维修人员接单",
    type: "warning",
  },
  2: {
    label: "维修人员已接单",
    type: "warning",
  },
  3: {
    label: "待上门维修",
    type: "warning",
  },
  4: {
    label: "待用户评价",
    type: "warning",
  },
  5: {
    label: "待主管评价",
    type: "danger",
  },
  6: {
    label: "未打款",
    type: "success",
  },
  7: {
    label: "财务已打款",
    type: "success",
  },
});
const { queryParams, form, rules } = toRefs(data);

/** 查询工单列表 */
function getList() {
  loading.value = true;
  getorderList(queryParams.value).then((response) => {
    orderList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  openScore.value=false
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    orderId: undefined,
    desc: undefined,
    starScore: null,
  };
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/**查看按钮操作 */
function handleView(row) {
  const Id = row.orderId;
  Promise.all([orderactionByid(Id), orderDetailByid(Id)]).then((res) => {
    res[0].data[0].actionInfo = res[1].data;
    detailAction.value = res[0].data;

    open.value = true;
    title.value = row.device.name;
    console.log(detailAction.value);
  });
}
function handlesCore(row) {
  reset()
  form.value.orderId = row.orderId;
  openScore.value = true;
  title.value = row.device.name;
}
/** 提交按钮 */
function submitForm() {
  if (form.value.orderId && form.value.desc && form.value.starScore!= null) {
    companyRating(form.value).then((response) => {

      proxy.$modal.msgSuccess("提交成功");
      openScore.value = false;

      getList();
    });
  }else{

  }
}
/** 删除按钮操作 */
function handleDelete(row) {
  const orderIds = row.orderId || ids.value;
  proxy.$modal
    .confirm('是否确认删除工单编号为"' + orderIds + '"的数据项？')
    .then(function () {
      return delNotice(orderIds);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
function checkFileSuffix(url){

}
getList();
</script>
<style scoped>
.cell-item {
  min-width: 80px;
}
</style>
