<template>
  <ele-modal
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    @close="handleClose"
    resizable
    maxable
    width="80%"
    append-to-body
  >
    <div v-if="rulesInfo && currentPlanOrders">
      <!-- {{ JSON.stringify(currentPlanOrders) }} -->
      <!-- 根据当前currentPlanOrders的 planStatus状态展示不同内容 -->
      <!-- 0 派单, 4为撤回的计划 -->
      <programRulesDialog
        v-if="
          currentPlanOrders.planStatus == 0 || currentPlanOrders.planStatus == 4
        "
        :planId="currentPlanOrders.planId"
        :info="currentPlanOrders"
        @done="setWorkOrderIdAndStatus"
      />
      <!-- 1 报工 -->
      <signingUpWork
        v-if="currentPlanOrders.planStatus == 1"
        :planId="currentPlanOrders.planId"
        :workOrderId="currentPlanOrders.eamWorkOrderId"
        @refresh="setPlanStatus(2)"
      ></signingUpWork>
      <!-- 2 执行中 3 完成展示详情-->
      <workOrderDetails
        v-if="
          currentPlanOrders.planStatus == 3 || currentPlanOrders.planStatus == 2
        "
        :workOrderId="currentPlanOrders.eamWorkOrderId"
      ></workOrderDetails>
    </div>

    <template v-slot:footer>
      <div v-if="rulesInfo" class="footer-box">
        <div class="txt-tip">
          共
          <span class="active">
            {{ rulesInfo ? rulesInfo.planOrders.length : 0 }}
          </span>
          条记录，当前位于第
          <span class="active">{{ activeIndex + 1 }}</span
          >条
        </div>

        <el-button
          type="primary"
          icon="el-icon-arrow-left"
          size="mini"
          :disabled="activeIndex === 0"
          @click="activeIndex--"
        >
          上一页
        </el-button>

        <el-button
          type="primary"
          size="mini"
          :disabled="activeIndex === rulesInfo.planOrders.length - 1"
          @click="activeIndex++"
        >
          下一页
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>

        <el-button @click="handleClose" size="mini">关 闭</el-button>
      </div>
    </template>
  </ele-modal>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import signingUpWork from './components/workOrder/signingUpWork.vue';
  import workOrderDetails from './components/workOrder/details.vue';
  import programRulesDialog from './components/workOrder/programRulesDialog.vue';

  export default {
    mixins: [dictMixins],
    components: {
      signingUpWork,
      workOrderDetails,
      programRulesDialog
    },
    data() {
      return {
        visible: false,
        title: '计划规则',
        // 规则信息
        rulesInfo: null,
        // 当前项
        activeIndex: 0
      };
    },
    computed: {
      // 当前设备信息
      currentPlanOrders() {
        if (this.rulesInfo && this.rulesInfo.planOrders) {
          return this.rulesInfo.planOrders[this.activeIndex];
        }
        return {};
      }
    },
    methods: {
      // 外部调用，打开弹窗
      open(data) {
        this.rulesInfo = data;
        console.log('this.rulesInfo', this.rulesInfo);
        this.title = data.planConfigName;
        this.visible = true;
      },
      // 关闭时清理表单
      handleClose() {
        this.rulesInfo = null;
        this.activeIndex = 0;
        // 触发父组件刷新
        this.$emit('reload');
        this.$nextTick(() => {
          this.visible = false;
        });
      },
      // 报工成功后刷新当前项状态
      setPlanStatus(status) {
        this.rulesInfo.planOrders[this.activeIndex].planStatus = status;
      },
      setWorkOrderIdAndStatus(workOrderId) {
        console.log('workOrderId', workOrderId);
        this.rulesInfo.planOrders[this.activeIndex].eamWorkOrderId =
          workOrderId;
        this.setPlanStatus(1);
      }
    }
  };
</script>

<style scoped lang="scss">
  .txt-tip {
    .active {
      color: #409eff;
      font-weight: bold;
    }
  }

  .footer-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
  }
</style>
