<script lang="ts" setup>
import { getContainerList } from '@/apis/container'
import { getSelfStatus } from '@/apis/self'
import { useHomeStore } from 'stores/homeStore'
import { onMounted, ref, watch } from 'vue'

interface SelfStatus {
  name: string
  isOrign: boolean
  value: string
  type: string
}
const props = defineProps({
  checking: Boolean,
})
const emits = defineEmits(['update:checking'])
const homeStore = useHomeStore()
const visible = ref(props.checking)
const chemicalList = ref<Container.ContainerItem[]>([])
watch(() => props.checking, (newVal) => {
  visible.value = newVal
})
onMounted(() => {
  querySelfStatus()
  queryContainerList()
})
const statusMap: Record<string, Record<string, string>> = {
  gantryXOrigin: {
    name: '机械臂x轴',
    value: 'x',
    type: 'axis',
  },
  gantryYOrigin: {
    name: '机械臂y轴',
    value: 'y',
    type: 'axis',
  },
  gantryZOrigin: {
    name: '机械臂z轴',
    value: 'y',
    type: 'axis',
  },
  dualRobotJoint1Origin: {
    name: '机械臂01',
    value: 'largeArm',
    type: 'liquid',
  },
  dualRobotJoint2Origin: {
    name: '机械臂02',
    value: 'smallArm',
    type: 'liquid',
  },
  capLiftingOrigin: {
    name: '拍子电机升降',
    value: '',
    type: 'cap',
  },
  trayLifting01Origin: {
    name: '加热区01托盘升降',
    value: 'heat_module_01',
    type: 'heat',
  },
  trayLifting02Origin: {
    name: '加热区02托盘升降',
    value: 'heat_module_01',
    type: 'heat',
  },
  trayLifting03Origin: {
    name: '加热区03托盘升降',
    value: 'heat_module_01',
    type: 'heat',
  },
  trayLifting04Origin: {
    name: '加热区04托盘升降',
    value: 'heat_module_04',
    type: 'heat',
  },
  trayLifting05Origin: {
    name: '加热区05托盘升降',
    value: 'heat_module_05',
    type: 'heat',
  },
  trayLifting06Origin: {
    name: '加热区06托盘升降',
    value: 'heat_module_06',
    type: 'heat',
  },
}
const deviceStatusList = ref<SelfStatus[]>([])
const querySelfStatus = () => {
  getSelfStatus().then((res) => {
    if (res) {
      const list: SelfStatus[] = []
      Object.keys(res).forEach((item) => {
        list.push({
          name: statusMap[item].name,
          isOrign: res[item],
          value: statusMap[item].value,
          type: statusMap[item].type,
        })
      })
      deviceStatusList.value = list
    }
  })
}
// const pumpId = ref()
const queryContainerList = () => {
  getContainerList().then((res) => {
    if (res) {
      const list: Container.ContainerItem[] = res
      const solutionList: Container.ContainerItem[] = []
      list.forEach((item, index) => {
        // 只有8种，不会多也不会少, 多的不要
        if (index < 8) {
          solutionList.push({
            ...item,
            solutionName: `加液泵_0${index + 1}`,
          })
        }
      })
      chemicalList.value = solutionList
    }
  })
}

const resetOrign = (item: SelfStatus) => {
  if (item.value === 'x' || item.value === 'y' || item.value === 'z') {
    gantry_origin(item.value)
  }
  else if (item.type === 'liquied') {
    dual_robot_joint_origin(item.value)
  }
  else if (item.type === 'heat') {
    tray_lifting_origin(item.value)
  }
  else if (item.type === 'cap') {
    cap_lifting_origin()
  }
}

// 先注释 TODO
// const currentPumpId = ref()
// const onPumpChange = (value: string) => {
//   currentPumpId.value = value
// }
// const onPumpEmpty = () => {
//   console.log('===currentPumpId===', currentPumpId.value)
// }

let currentCommandId = ''
const gantry_origin = async (motor: 'x' | 'y' | 'z') => {
  currentCommandId = Date.now().toString()

  const params = {
    commandId: currentCommandId,
    command: 'gantry_origin',
    params: {
      [motor]: true,
    },
  }
  await homeStore.sendControl(params)
}

const dual_robot_joint_origin = async (arm: string) => {
  currentCommandId = Date.now().toString()
  const params = {
    commandId: currentCommandId,
    command: 'dual_robot_joint_origin',
    params: {
      target: [arm],
    },
  }
  await homeStore.sendControl(params)
}

const cap_lifting_origin = async () => {
  currentCommandId = Date.now().toString()
  const params = {
    commandId: currentCommandId,
    command: 'cap_lifting_origin',
    params: {},
  }
  await homeStore.sendControl(params)
}

const tray_lifting_origin = async (heatId: string) => {
  currentCommandId = Date.now().toString()
  const params = {
    commandId: currentCommandId,
    command: 'tray_lifting_origin',
    params: {
      heatId,
    },
  }
  await homeStore.sendControl(params)
}

const cancel = () => {
  emits('update:checking', false)
  visible.value = false
}
</script>

<template>
  <FtDialog v-model="visible" title="设备初始化" width="50%">
    <div class="check-main">
      <div class="check-status">
        <h3>名称</h3>
        <h3>是否在原点</h3>
        <h3 style="text-align: center;">
          操作
        </h3>
      </div>
      <div v-for="(item) in deviceStatusList" :key="item.name" class="check-status">
        <div>
          {{ item.name }}
        </div>
        <div style="margin-left: 2rem;">
          <el-icon v-if="!item.isOrign" style="color:red;font-size: 25px;">
            <CloseBold />
          </el-icon>
          <el-icon v-else style="color:#25be25;font-size: 25px;">
            <Select />
          </el-icon>
        </div>
        <div style="text-align: center;">
          <el-link type="primary" @click="resetOrign(item)">
            回原点
          </el-link>
        </div>
      </div>
      <!-- <div class="check-status">
        <div>
          加液泵：
          <el-select v-model="pumpId" size="small" style="width:10rem" @change="onPumpChange">
            <el-option v-for="item in chemicalList" :key="item.solutionId" :label="item.solutionName" :value="item.pumpId" />
          </el-select>
        </div>
        <div></div>
        <div style="text-align: center;">
          <el-link type="primary" @click="onPumpEmpty()">
            排空
          </el-link>
        </div>
      </div> -->
    </div>
    <template #footer>
      <FtButton @click="cancel">
        取消
      </FtButton>
    </template>
  </FtDialog>
</template>

<style scoped>
.check-main{
  height: 60vh;
}
.check-status{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  margin-top: 5px;
}
</style>
