<template>
  <view>
    <u-sticky
        class="sticky"
        :custom-nav-height="0"
    >
      <u-navbar
          title="生产计划"
          bg-color="transparent"
          :auto-back="false"
          :title-style="{ fontWeight: 'bold' }"
          left-icon=""
          safe-area-inset-top
          placeholder
      />
      <u-tabs
          :list="menuList"
          :current="current"
          key-name="name"
          :scrollable="false"
          :active-style="{
          color: '#0E85FF',
        }"
          @change="change"
      >
      </u-tabs>
    </u-sticky>
    <uni-notice-bar show-icon scrollable text="安全生产！有序生产！高效生产！" />
    <!--    开工中-->
    <view v-if="current === 0" class="container" >
      <u-list>
        <u-list-item
            v-for="item in startList"
            :key="item"
        >
          <view class="content">
            <view class="header">
              <view class="title">
                <u-image
                    src="@/static/images/icon/product.png"
                    width="40rpx"
                    height="40rpx"
                />
                <text class="name">
                  {{ item.productName }}
                </text>
              </view>
              <el-text type="success">{{item.code}}</el-text>
            </view>
            <view class="flex-box">
              <el-text>计划数:{{ item.planNumber }}</el-text>
              <el-text>入库数:{{ item.finishNumber }}</el-text>
            </view>
            <view class="flex-box">
              <el-text>计划开始时间:{{ timestampToTime(item.planStartTime) }}</el-text>
              <el-text>计划结束时间:{{ timestampToTime(item.planEndTime) }}</el-text>
            </view>
            <view class="text">
              <el-text>备注:</el-text>
            </view>
            <view class="remark">
              <el-text>{{ item.remark }}</el-text>
            </view>
            <view class="u-m-t-30 u-m-b-30"><u-line/></view>
            <view class="u-flex justify-end">
              <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4" class="u-m-r-30">
                <u-button type="success" plain  @click="updatePlan(item.id, item.code,'end')">完工</u-button>
              </el-col>
              <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4" class="u-m-r-30">
                <u-button type="warning" plain  @click="updatePlan(item.id,item.code,'pause')">暂停</u-button>
              </el-col>
              <el-col :span="4">
                <u-button type="info" plain  @click="planProgress(item)">进度</u-button>
              </el-col>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
    <!--    派工中-->
    <view v-if="current === 1" class="container" >
      <u-list>
        <u-list-item
            v-for="item in dispatch"
            :key="item"
        >
          <view class="content">
            <view class="header">
              <view class="title">
                <u-image
                    src="@/static/images/icon/product.png"
                    width="40rpx"
                    height="40rpx"
                />
                <text class="name">
                  {{ item.productName }}
                </text>
              </view>
              <el-text type="success">{{item.code}}</el-text>
            </view>
            <view class="flex-box">
              <el-text>计划数:{{ item.planNumber }}</el-text>
              <el-text>入库数:{{ item.finishNumber }}</el-text>
            </view>
            <view class="flex-box">
              <el-text>计划开始时间:{{ timestampToTime(item.planStartTime) }}</el-text>
              <el-text>计划结束时间:{{ timestampToTime(item.planEndTime) }}</el-text>
            </view>
            <view class="text">
              <el-text>备注:</el-text>
            </view>
            <view class="remark">
              <el-text>{{ item.remark }}</el-text>
            </view>
            <view class="u-m-t-30 u-m-b-30"><u-line/></view>
            <view class="u-flex justify-end">
              <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
                <u-button type="info" plain  @click="updatePlan(item.id,item.code, 'start')">开工</u-button>
              </el-col>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
    <!--    计划中-->
    <view v-if="current === 2" class="container" >
      <u-list>
        <u-list-item
            v-for="item in planList"
            :key="item"
        >
          <view class="content">
            <view class="header">
              <view class="title">
                <u-image
                    src="@/static/images/icon/product.png"
                    width="40rpx"
                    height="40rpx"
                />
                <text class="name">
                  {{ item.productName }}
                </text>
              </view>
              <el-text type="success">{{item.code}}</el-text>
            </view>
            <view class="flex-box">
              <el-text>计划数:{{ item.planNumber }}</el-text>
              <el-text>入库数:{{ item.finishNumber }}</el-text>
            </view>
            <view class="flex-box">
              <el-text>计划开始时间:{{ timestampToTime(item.planStartTime) }}</el-text>
              <el-text>计划结束时间:{{ timestampToTime(item.planEndTime) }}</el-text>
            </view>
            <view class="text">
              <el-text>备注:</el-text>
            </view>
            <view class="remark">
              <el-text>{{ item.remark }}</el-text>
            </view>
            <view class="u-m-t-30 u-m-b-30"><u-line/></view>
            <view class="u-flex justify-end">
              <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
                <u-button type="primary" plain>派工</u-button>
              </el-col>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
    <!--   暂停中 -->
    <view v-if="current === 3" class="container" >
      <u-list>
        <u-list-item
            v-for="item in pauseList"
            :key="item"
        >
          <view class="content">
            <view class="header">
              <view class="title">
                <u-image
                    src="@/static/images/icon/product.png"
                    width="40rpx"
                    height="40rpx"
                />
                <text class="name">
                  {{ item.productName }}
                </text>
              </view>
              <el-text type="success">{{item.code}}</el-text>
            </view>
            <view class="flex-box">
              <el-text>计划数:{{ item.planNumber }}</el-text>
              <el-text>入库数:{{ item.finishNumber }}</el-text>
            </view>
            <view class="flex-box">
              <el-text>计划开始时间:{{ timestampToTime(item.planStartTime) }}</el-text>
              <el-text>计划结束时间:{{ timestampToTime(item.planEndTime) }}</el-text>
            </view>
            <view class="text">
              <el-text>备注:</el-text>
            </view>
            <view class="remark">
              <el-text>{{ item.remark }}</el-text>
            </view>
            <view class="u-m-t-30 u-m-b-30"><u-line/></view>
            <view class="u-flex justify-end">
              <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4" class="u-m-r-30">
                <u-button type="info" plain @click="updatePlan(item.id, item.code,'start')">开工</u-button>
              </el-col>
              <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
                <u-button type="success" plain  @click="updatePlan(item.id,item.code, 'end')">完工</u-button>
              </el-col>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>
    <!--    <view class="charts-box">-->
    <!--      <qiun-data-charts :chartData="chartData" type="column"/>-->
    <!--    </view>-->
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { updateStatus, getByStatus } from "@/api/mes/plan"
import { timestampToTime } from "@/utils/dateUtil";
import modal from "@/plugins/modal";
import tab from "@/plugins/tab";
import { showConfirm } from "@/utils/common";
import auth from "@/plugins/auth";

const startList = ref([]);
const dispatch = ref([]);
const pauseList = ref([]);
const planList = ref([]);
const chartData = ref({});

const menuList = ref([
  {
    name: '开工中'
  },
  {
    name: '派工中'
  },
  {
    name: '计划中'
  },
  {
    name: '暂停中'
  }
])
const current = ref(0)
const change = (index)=>{
  current.value = index.index
}

onMounted(() => {
  getServerData()
  getPlanList()
});

function getServerData() {
  // 模拟从服务器获取数据时的延时
  setTimeout(() => {
    let res = {
      categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
      series: [
        {
          name: '目标值',
          data: [35, 36, 31, 33, 13, 34],
        },
        {
          name: '完成量',
          data: [18, 27, 21, 24, 6, 28],
        },
      ],
    };
    chartData.value = JSON.parse(JSON.stringify(res));
  }, 500);
}
// 加载列表数据
function getPlanList() {
  getByStatus(0).then(response => {
    planList.value = response.data
  })
  getByStatus(1).then(response => {
    dispatch.value = response.data
  })
  getByStatus(2).then(response => {
    startList.value = response.data
  })
  getByStatus(3).then(response => {
    pauseList.value = response.data
  })

}

/** 开工 */
function updatePlan(id, planCode, type){
  let content = '确定['
  if(type==='start')content= content+'开工]' + planCode +'?'
  else if(type==='end')content= content+'完工]'+ planCode +'?'
  else if(type==='pause')content= content+'暂停]'+ planCode +'?'
  showConfirm(content).then(res => {
    if (res.confirm) {
      const data = {'id':id, 'code':type}
      updateStatus(data).then(response => {
        getPlanList()
      })
      modal.msgSuccess("操作成功")
    }
  })
}
//看进度
function planProgress(plan){
  tab.navigateTo('/page_report/planProgress',plan)
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%
}
.sticky {
  background: linear-gradient(180deg, #d4e9ff 0%, #f3f9ff 100%);
  backdrop-filter: blur(27.18px);
  box-shadow: 0 1px 1px 0 rgba(0, 72, 145, 0.1),
  0 0.5px 0 0 rgba(0, 0, 0, 0.1);
}
.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.charts-box {
  width: 100%;
  height: 300px;
}
.container {
  background-color: #f1f1f1;
  padding: 0 20rpx 20rpx 20rpx;
  .content {
    margin: 20rpx 0;
    padding: 20rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        display: flex;
        align-items: center;
        .name {
          font-size: 28rpx;
          font-weight: bold;
          margin-left: 16rpx;
          color: #333333;
        }
      }
    }
    .flex-box {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
    }
    .text {
      margin-top: 20rpx;
    }
    .remark {
      margin-top: 20rpx;
      display: flex;
      align-items: center;
      padding: 20rpx;
      background-color: #f5f7f9;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #555555;
    }
    .u-button {
      height: 60rpx
    }
  }
}
</style>
