<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
    >

      <el-form-item label="联系人" prop="assigneeName">
        <el-input
          v-model="queryParams.assigneeName"
          placeholder="请输入联系人"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </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-table v-loading="loading" :data="orderList">
      <el-table-column label="序号" align="center" type="index" width="80" />
      <el-table-column label="联系人"  prop="assigneeName"></el-table-column>

      <el-table-column label="手机号"  prop="assigneePhonenumber"></el-table-column>
      <el-table-column label="身份证号"  prop="identityNumber"></el-table-column>
      <el-table-column label="银行卡号"  prop="bankCardNumber"></el-table-column>
      <el-table-column label="开户行"  prop="bankName"></el-table-column>
      <el-table-column label="打款金额"  prop="orderPrice"></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
          link
          type="primary"
          icon="Edit"
          :disabled="scope.row.orderStatus!=6"

          @click="handlesCore(scope.row)"
          >打款</el-button
        >
          <el-button
            link
            type="primary"
            icon="View"
            :disabled="scope.row.orderStatus!=7"
            @click="handleView(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">
                  <ImagePreview
                  v-if="checkFileSuffix(item)"
                  :width="100" :height="100"
                  :src="item"
                  :preview-src-list="[item]"/>

                </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>
                <img
                  :src="item"
                  v-for="item in detailAction[3].actionInfo.img"
                  alt=""
                />
              </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>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog :title="title" v-model="openHistory" 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: 0px">打款凭证</div>
            </template>
            <div v-for="item in bankReceipData.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="bankReceipData.bankReceiptUrl"
              :initial-index="4"
              fit="cover"
          />

            </div>


          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">备注</div>
            </template>
           {{bankReceipData.remark}}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
      <template #footer>
        <div class="dialog-footer">

          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog :title="title" v-model="openRepair" 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>
            <el-upload
            v-model:file-list="fileList"
            action="#"
            :http-request="uploadFile"
            list-type="picture-card"
            :before-upload="beforeUpload"

            :on-change="handleChange"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">备注</div>
            </template>
            <el-input
              v-model="form.remark"
              style="width: 100%"
              :rows="2"
              type="textarea"
              placeholder="输入备注"
            />
          </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 {
  settlementList,
  settlementAction,
  orderDetailByid,
  orderactionByid,
  upload,
  uploadDel,
  bankReceip
} 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 openHistory =ref(false)
const openRepair = 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 fileList =ref([])
const detailAction = ref([]);
const bankReceipData =ref({})
const data = reactive({
  form: {
    orderId: undefined,
    desc: undefined,
    starScore: 0,
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,

    status: undefined,
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询工单列表 */
function getList() {
  loading.value = true;
  settlementList(queryParams.value).then((response) => {
    orderList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  openHistory.value =false
  openRepair.value=false
  reset();
}
/** 表单重置 */
function reset() {
  form.value = {
    orderId: undefined,
    desc: undefined,
    starScore: null,
  };
}
function handleRemove(e){

  form.value.bankReceip.forEach(element => {
    if(element.uid == e.uid){
      uploadDel(element.ossId)
    }
  });

}

/** 打款凭证上传 */
function uploadFile(e){

  let param = new FormData();
  param.append('file',e.file)
  upload(param).then(res=>{

    form.value.bankReceip.push({...res.data,uid:e.file.uid})
    console.log(form.value.bankReceip)
  })
}
/** 搜索按钮操作 */
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.assigneeName;
  //   console.log(detailAction.value);
  // });
  bankReceip(Id).then(res=>{
    bankReceipData.value = res.data
    openHistory.value =true
    title.value = row.assigneeName;
  })

}
function handlesCore(row) {
  reset()
  form.value.orderId = row.orderId;
  form.value.bankReceip=[]
  openRepair.value = true;
  title.value = row.assigneeName;
}
/** 提交按钮 */
function submitForm() {
  if (form.value.bankReceip.length) {
    let data = {
      bankReceiptUrl:'',
      remark:form.value.remark,
      orderId: form.value.orderId
    }
    data.bankReceiptUrl=  form.value.bankReceip.map(item=>{
     return item. url
    })

    settlementAction(data).then((response) => {

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

      getList();
    });
  }else{
    proxy.$modal.msgWarning("请上传打款凭证");
  }
}
/** 删除按钮操作 */
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>
