Vue.component("devp-card", {
  template: `
    <div>
        <div style="display: flex;margin-bottom: 10px;">
            <div style="width: 100%;">输送监控</div>
            <div style="width: 100%;text-align: right;display: flex;"><el-input size="mini" v-model="searchStationId" placeholder="请输入站号"></el-input><el-button @click="getDevpStateInfo" size="mini">查询</el-button></div>
        </div>
        <div style="margin-bottom: 10px;">
            <div style="margin-bottom: 5px;">
               <el-button v-if="showControl" @click="openControl" size="mini">关闭控制中心</el-button>
               <el-button v-else @click="openControl" size="mini">打开控制中心</el-button>
            </div>
            <div v-if="showControl" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
                <div style="margin-bottom: 10px;width: 33%;"><el-input size="mini" v-model="controlParam.stationId" placeholder="站号"></el-input></div>
                <div style="margin-bottom: 10px;width: 33%;"><el-input size="mini" v-model="controlParam.taskNo" placeholder="工作号"></el-input></div>
                <div style="margin-bottom: 10px;width: 33%;"><el-input size="mini" v-model="controlParam.targetStationId" placeholder="目标站"></el-input></div>
                <div style="margin-bottom: 10px;"><el-button @click="controlCommand()" size="mini">下发</el-button></div>
            </div>
        </div>
        <div style="max-height: 55vh; overflow:auto;">
          <el-collapse v-model="activeNames" accordion>
            <el-collapse-item v-for="(item) in displayStationList" :name="item.stationId">
            <template slot="title">
                <div style="width: 100%;display: flex;">
                   <div style="width: 50%;">{{ item.stationId }}站</div>
                   <div style="width: 50%;text-align: right;">
                      <el-tag v-if="item.autoing" type="success" size="small">自动</el-tag>
                      <el-tag v-else type="warning" size="small">手动</el-tag>
                   </div>
                </div>
            </template>
            <el-descriptions border direction="vertical">
                <el-descriptions-item label="编号">{{ item.stationId }}</el-descriptions-item>
                <el-descriptions-item label="工作号">{{ item.taskNo }}</el-descriptions-item>
                <el-descriptions-item label="目标站">{{ item.targetStaNo }}</el-descriptions-item>
                <el-descriptions-item label="模式">{{ item.autoing ? '自动' : '手动' }}</el-descriptions-item>
                <el-descriptions-item label="有物">{{ item.loading ? '有' : '无' }}</el-descriptions-item>
                <el-descriptions-item label="可入">{{ item.inEnable ? 'Y' : 'N' }}</el-descriptions-item>
                <el-descriptions-item label="可出">{{ item.outEnable ? 'Y' : 'N' }}</el-descriptions-item>
                <el-descriptions-item label="空板信号">{{ item.emptyMk ? 'Y' : 'N' }}</el-descriptions-item>
                <el-descriptions-item label="满板信号">{{ item.fullPlt ? 'Y' : 'N' }}</el-descriptions-item>
                <el-descriptions-item label="托盘高度">{{ item.palletHeight }}</el-descriptions-item>
                <el-descriptions-item label="条码">{{ item.barcode }}</el-descriptions-item>
                <el-descriptions-item label="故障代码">{{ item.error }}</el-descriptions-item>
            </el-descriptions>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div style="display:flex; justify-content:flex-end; margin-top:8px;">
          <el-pagination
            small
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10,20,50,100]"
            layout="total, prev, pager, next"
            :total="stationList.length">
          </el-pagination>
        </div>
    </div>
    `,
  props: ["param"],
  data() {
    return {
      stationList: [],
      activeNames: "",
      searchStationId: "",
      showControl: false,
      controlParam: {
        stationId: "",
        taskNo: "",
        targetStationId: "",
      },
      pageSize: 25,
      currentPage: 1,
    };
  },
  created() {
    setInterval(() => {
      this.getDevpStateInfo();
    }, 1000);
  },
  computed: {
    displayStationList() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.stationList.slice(start, end);
    }
  },
  watch: {
    param: {
      handler(newVal, oldVal) {
        if (newVal.stationId != 0) {
          this.activeNames = newVal.stationId;
          this.searchStationId = newVal.stationId;
        }
      },
      deep: true, // 深度监听嵌套属性
      immediate: true, // 立即触发一次（可选）
    },
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.currentPage = 1;
    },
    getDevpStateInfo() {
      let that = this;
      $.ajax({
        url: baseUrl + "/console/latest/data/station",
        headers: {
          token: localStorage.getItem("token"),
        },
        method: "post",
        success: (res) => {
          // 堆垛机信息表获取
          if (res.code == 200) {
            let list = res.data;

            if (that.searchStationId == "") {
              that.stationList = list;
            } else {
              let tmp = [];
              list.forEach((item) => {
                if (item.stationId == that.searchStationId) {
                  tmp.push(item);
                }
              });
              that.stationList = tmp;
              that.currentPage = 1;
            }
          }
        },
      });
    },
    openControl() {
      this.showControl = !this.showControl;
    },
    controlCommand() {
      let that = this;
      //下发命令
      $.ajax({
        url: baseUrl + "/station/command/move",
        headers: {
          token: localStorage.getItem("token"),
        },
        contentType: "application/json",
        method: "post",
        data: JSON.stringify(that.controlParam),
        success: (res) => {
          if (res.code == 200) {
            that.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            that.$message({
              message: res.msg,
              type: "warning",
            });
          }
        },
      });
    },
  },
});