<template>
  <!-- 设备的基本信息 -->
  <div class="el-overlay">
    <div class="box">
      <div class="box-header">
        <div class="box-title">零件基本信息</div>
        <div class="box-btn" @click="close"></div>
      </div>
      <div class="box-content">
        <div class="box-content-left">
          <div class="box-content-left-title">
            <span>零件列表</span>
          </div>
          <!-- 选择框 -->
          <div class="box-content-left-select">
            <el-select
              v-model="deviceListParams.name"
              @clear="clearHandle"
              @change="
                deviceNameChange();
                getDeviceList();
              "
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in allName"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
            <el-select
              v-model="deviceListParams.code"
              @change="deviceListParams.index=1;getDeviceList()"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in deviceIds"
                :key="item.id"
                :label="item"
                :value="item"
              />
            </el-select>
          </div>
          <!-- table -->
          <div class="box-content-left-table">
            <el-table
             :row-class-name="getRowClassName"
              :data="tableList"
              style="width: 100%"
              @row-click="rowClick"
            >
              <el-table-column prop="code" label="代号" />
              <el-table-column prop="name" show-overflow-tooltip label="名称" />
            </el-table>
           
          </div>
          <div style="float: right">
            <el-pagination
              v-model:current-page="deviceListParams.index"
              :page-size="deviceListParams.size"
              :size="deviceListParams.size"
              :pager-count='5'
              layout="total, prev, pager, next"
              :total="total"
              prev-text="上一页"
              next-text="下一页"
              @current-change="getDeviceList"
            >
            </el-pagination>
          </div>
        </div>
        <div class="box-content-right">
          <div class="box-content-right-title">
            <span>零件参数</span>
          </div>
          <div class="box-content-right-subtxt">
            <span>{{ deviceMsg.name }}</span>
          </div>
          <div class="box-content-right-data">
            <section>
              <p>
                <span>其他参数</span>
                <span class="underLine"></span>
              </p>
              <div class="chart">
                <div class="chart-pie" v-for="item in pieList" :key="item.id">
                  <pieChart :dataMap="item" ref="chartRef" />
                </div>
              </div>
              <div class="message">
                <ul>
                  <li>
                    <span>供应商：</span><span>{{ deviceMsg.supplyer }}</span>
                  </li>
                  <li>
                    <span>生产厂商：</span
                    ><span>{{ deviceMsg.productor }}</span>
                  </li>
                  <li>
                    <span>备注信息：</span><span>{{ deviceMsg.remark }}</span>
                  </li>
                </ul>
              </div>
            </section>
            <section>
              <p>
                <span>结构示意</span>
                <span class="underLine"></span>
              </p>
              <img src="@/assets/images/dialog/sketch-map.png" alt="" />
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, reactive, toRefs } from "vue";
import pieChart from "./components/pieChart";
import {
  allDevicId,
  allDeviceNames,
  getEquipTable,
  getDeviceDetail,
} from "@/api/equipmentManagement/index";
const emit = defineEmits(["closeDeviceInfo"]);
const tableList = ref([]);

// 获取设备列表数据
const deviceListParams = reactive({
  name: "",
  code: "",
  size:10,
  index:1
});
const total = ref(0)
const { facName, deviceCode } = toRefs(deviceListParams);
function getDeviceList() {
  getEquipTable(deviceListParams).then((res) => {
    tableList.value = res.result.data;
    rowClick(tableList.value[0]);
    total.value = res.result.totalNum
  });
}

const allName = ref([]);
function getAllDeviceNames() {
  allDeviceNames().then((res) => {
    allName.value = res.result;
  });
}

// 所有设备id
const deviceIds = ref([]);
function deviceNameChange() {
  deviceListParams.code = "";
  deviceListParams.index = 1
  allDevicId({ name: deviceListParams.name }).then((res) => {
    if (res.result.length) {
      deviceIds.value = res.result[0].models;
    }
  });
}
// 清空事件
function clearHandle() {
  deviceListParams.index = 1
  deviceListParams.code = "";
  deviceIds.value = "";
}

const chartRef = ref(null);

// 初始id
const currentRowId = ref(null);

const getRowClassName = ({ row, rowIndex }) => {
  if (currentRowId.value == row.id) {
    return "highlight-row";
  }
  return "";
};
// 设备详情信息
const deviceMsg = ref([]);
function rowClick(row) {
  currentRowId.value = row.id;
  getDeviceDetail({ id: row.id }).then((res) => {
    deviceMsg.value = res.result;
    if (res.result.stockNum / res.result.stockWarn > 1) {
      pieList.value[0].total = pieList.value[0].value;
    }
    pieList.value[0].value = res.result.stockNum;
    pieList.value[1].value = res.result.life;
    chartRef.value.forEach((el, index) => {
      el.drawChart();
    });
    // if (pieChart2.value) {
    //   pieChart2.value.darwChart();
    // }
  });
}
// 饼图数据列表
const pieList = ref([
  {
    id: 1,
    name: "库存数量",
    value: 48,
    total: 80,
  },
  {
    id: 2,
    name: "使用年限",
    value: 2,
    // total: 10,
  },
]);
// 关闭设备的基本信息弹窗
function close() {
  emit("closeDeviceInfo", -1);
}
onMounted(() => {
  getDeviceList();
  getAllDeviceNames();
});
</script>
<style scoped lang="scss">
:deep(.highlight-row) {
  background-color:rgba(174, 211, 255, 0.2) !important;
}
// :deep(.row) {
//   background-color: rgba(174, 211, 255, 0.2) !important;
//   // background: #000 !important;
// }
// :deep(.el-table__body tr.current-row > td.el-table__cell) {
//   background: rgba(174, 211, 255, 0.2) !important;
//   color: #ffffff !important;
// }
.box {
  width: vw(1380);
  height: vh(716);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  background-image: url("@/assets/images/dialog/device-dialog1.png");
  background-size: 100% 100%;
  &-header {
    width: 100%;
    height: vh(60);
    font-family: "pangmen";
    display: flex;
    font-size: 1.875rem;
    justify-content: center;
  }
  &-title {
    line-height: vh(60);
  }
  &-btn {
    background-image: url("@/assets/images/dialog/close.png");
    width: vw(34);
    height: vh(34);
    position: absolute;
    right: vw(20);
    top: vh(12);
    cursor: pointer;
  }
  &-content {
    height: vh(716 - 60);
    padding: vw(20) vh(20);
    box-sizing: border-box;
    justify-content: space-between;
    display: flex;
    &-left,
    &-right {
      font-size: 1rem;
      padding: vw(20) vh(20);
      box-sizing: border-box;
      height: 100%;
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(144, 218, 255, 0.5),
          rgba(144, 218, 255, 0.1000000015)
        )
        1 1;
      &-title {
        width: 100%;
        height: vh(36);
        padding-left: vw(32);
        line-height: vh(36);
        box-sizing: border-box;
        background-size: 100% 100%;
        background-image: url("@/assets/images/dialog/deviceInfo-title1.png");
        span {
          font-size: 1.375rem;
          font-family: "pangmen";
        }
      }
    }
    &-right {
      width: vw(840);
      &-title {
        background-image: url("@/assets/images/dialog/deviceInfo-title2.png") !important;
      }
      &-subtxt {
        line-height: vh(36);
        padding-left: vw(18);
        margin: vh(20) 0;
        background-size: 100%;
        background-size: 100%;
        box-sizing: border-box;
        background-image: url("@/assets/images/dialog/deviceInfo-subtxt.png");
      }
      &-data {
        display: flex;
        justify-content: space-between;
        section {
          width: vw(390);
          height: vh(462);
          background-image: url("@/assets/images/dialog/deviceInfo-item-bg.png");
          padding: vh(12) vw(16);
          background-size: 100% 100%;
          box-sizing: border-box;
          margin-bottom: vh(20);
          img {
            width: vw(358);
            height: vh(384);
          }
          span:nth-of-type(1) {
            position: relative;
            z-index: 99;
            margin-left: vw(20);
          }
          .underLine {
            background-image: url("@/assets/images/dialog/under-line.png");
            background-size: 100% 100%;
            width: 100%;
            height: vh(16);
            display: block;
            position: relative;
            top: vh(-10);
          }
          // 饼图的样式
          .chart {
            margin-bottom: vh(20);
            display: flex;
            height: vh(172);
            .chart-pie {
              width: vw(172);
              height: vh(172);
            }
          }
          .message {
            ul {
              li {
                position: relative;
                margin-bottom: vh(20);
                width: 100%;
                line-height: vh(44);
                height: vh(44);
                background-color: rgba(174, 211, 255, 0.03);
                span:nth-child(1) {
                  color: rgba(174, 211, 255, 1);
                }
              }
              li::before {
                content: "";
                top: vh(15);
                left: vw(4);
                position: absolute;
                width: vw(12);
                height: vh(12);
                background-image: url("@/assets/images/dialog/dot.png");
              }
            }
          }
        }
      }
    }
    &-left {
      width: vw(480);
      &-select {
        margin: vh(12) 0;
        justify-content: space-between;
        display: flex;
      }
      &-table {
        height: vh(440);
      }
    }
  }
}
:deep(.el-input__wrapper) {
  background-color: transparent;
  box-shadow: none !important;
}
:deep(.el-input) {
  border: 1px solid;
  border-image: linear-gradient(
      180deg,
      rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
      rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.6)
    )
    1 1;
}
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: none !important;
}
:deep(.el-table .cell ){
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:deep(.el-pagination__total){
  left: vw(40) !important;
}
</style>