<template>
  <div class="bigBox" :style="{ height: bigHeight }">
    <MOSTY.FromPage :title="data.config.title" @closeDialog="black">
      <template #content>

        <div class="fromBox" style="display: flex;">
          <div style="flex: 1;">
            <el-form class="mosty-from-wrap" ref="ruleFormRef" label-width="129px" :model="data.fromObj" :inline="true"
              :rules="rules" :disabled="!data.config.saveBtnShow">
              <el-form-item label="车牌号:">
                <el-input v-model="data.fromObj.carnumber" style="width: 250px"></el-input>
              </el-form-item>
              <el-form-item label="车管员:">
                <el-input v-model="data.fromObj.cgyUsername" style="width: 250px"></el-input>
              </el-form-item>
              <el-form-item label="维修方:">
                <el-input v-model="data.fromObj.xgfname" style="width: 250px"></el-input>
              </el-form-item>
              <el-form-item label="类型:">
                <el-select v-model="data.fromObj.type" style="width: 250px">
                  <el-option v-for="item in D_BZ_WXSQDLX" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="驾驶员:">
                <el-input v-model="data.fromObj.username" style="width: 250px"></el-input>
              </el-form-item>
              <el-form-item label="维修金额:">
                <el-input v-model.number="allmoney" type='number' style="width: 250px">
                  <template #append>元</template>
                </el-input>
              </el-form-item>
              <el-form-item label="车辆双检发现隐患:">
                <el-input v-model="data.fromObj.content" type="textarea" autosize show-word-limit maxlength="200"
                  style="width: 1073px" />
              </el-form-item>
            </el-form>
            <MOSTY.Assort :title="'维修单位处置方案'" />
            <el-table :data="data.tableData" border stripe style="width: 1073px" :height="tableHeight" :key="keyCount"
              @current-change="handleCurrentChange">
              <el-table-column sortable prop="info" align="center" label="维修项">
              </el-table-column>
              <el-table-column sortable prop="money" label="单价">
              </el-table-column>
              <el-table-column sortable prop="count" align="center" label="数量">
              </el-table-column>
              <el-table-column sortable prop="allMoney" align="center" label="总价">
              </el-table-column>
            </el-table>
          </div>

          <div class="pr15 pb15 pl40  hh100 scrollbar" style="width: 800px;">
            <el-timeline>
              <el-timeline-item v-for="(activity, index) in timelist" :key="index" type="primary" placement="top"
                :color="activity.color" :timestamp="activity.time">
                <span :style="{ color: activity.color }">{{ activity.info }}</span>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>

      </template>
      <template #footer>
        <el-button @click="black()"><el-icon>
            <DocumentDelete />
          </el-icon>关闭</el-button>
      </template>
    </MOSTY.FromPage>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  watchEffect,
  getCurrentInstance,
  onMounted,
  watch,
  nextTick
} from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as rule from "@/utils/rules.js";
const { proxy } = getCurrentInstance();
const { D_BZ_WXSQDLX } = proxy.$dict("D_BZ_WXSQDLX");
const props = defineProps({
  saveBtnShow: {
    type: Boolean,
    default: true
  },
  editObj: {
    type: Object,
    default: () => { }
  }
});
const emit = defineEmits("changePage");
const ruleFormRef = ref();
const data = reactive({
  fromObj: {},
  config: {
    title: "",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  }
});
const timelist = ref([]);
const allmoney = ref(0);
onMounted(() => {
  if (props.editObj) {
    data.config = JSON.parse(JSON.stringify(props.editObj));
  }
  if (props.editObj.id) {
    getmain(props.editObj.id);
    timeData(props.editObj.id);
  }
});
//获取详情	/car3inspectionInfo/getCheckDetailList
function getmain(id) {
  getApi({ id: id }, "/mosty-jcgl/sqd/getWxsqdInfo").then((res) => {
    if (res) {
      data.fromObj = res;
      if (data.fromObj.money) {
        let arr = {
          info: "轮胎维修",
          count: data.fromObj.htcount,
          money: data.fromObj.money,
          allMoney: data.fromObj.money * data.fromObj.htcount
        };
        allmoney.value = data.fromObj.money * data.fromObj.htcount;
        let Array = [];
        Array.push(arr);
        data.tableData = Array;
      }
      if (data.fromObj.wbContent) {
        data.tableData = JSON.parse(data.fromObj.wbContent);
        data.tableData.forEach((el) => {
          allmoney.value = allmoney.value + parseFloat(el.allMoney);
        });
      }

    }
  });
}
//获取进度数据
const timeData = (id) => {
  getApi({ id }, "/mosty-jcgl/sqd/getLcList").then((res) => {
    if (res) {
      for (let i = 0; i < res.length; i++) {
        switch (res[i].state) {
          case "0":
            res[i].color = "gray";
            break;
          case "1":
            res[i].color = "gray";
            break;
          case "2":
            res[i].color = "green";
            break;
          case "3":
            res[i].color = "red";
            break;
        }
      }
      timelist.value = res;
    }
  });
};
const black = () => {
  // 关闭上一次的表单校验
  ruleFormRef.value.clearValidate();
  emit("changePage", "Main");
};


</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.box_cont {
  height: calc(100vh - 15vh);
  overflow-y: scroll;
}

.fromBox {
  margin: 20px auto;
  padding: 15px 15px 0 15px;
  border-radius: 1px;
}

.ld_box {
  display: flex;
  margin-right: 30px;
}

.el-form {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.el-form-item {
  display: flex;
  margin-right: 20px;
}

.addbtn {
  margin-bottom: 10px;
}

.bigBox {
  display: block !important;
  box-sizing: border-box;
}

.tabbox {
  max-height: 300px;
  overflow-y: scroll;

  .input {
    width: 100%;
    height: 100%;
  }
}

::v-deep .el-table .cell {
  padding: 0 0 !important;
}

::v-deep .el-table--border .el-table__cell .cell {
  padding-left: 0px !important;

  >input {
    width: 100%;
    height: 33px;
  }
}

::v-deep .el-upload-list {
  width: 50%;
}
</style>