<template>
  <view>
    <u-sticky
        class="sticky"
        :custom-nav-height="0"
    >
      <u-navbar
          title="生产计划"
          bg-color="transparent"
          :auto-back="false"
          left-icon=""
          safe-area-inset-top
          placeholder
      />
    </u-sticky>
    <uni-notice-bar show-icon scrollable text="安全生产！有序生产！高效生产！" />
    <uni-section title="开工中" type="line" title-color="#18bc37"> </uni-section>
    <el-collapse accordion>
      <el-collapse-item v-for="(item, index) in startList"  :name="item.id">
        <template #title>
          <el-icon><Tickets /></el-icon>
          <el-text  size="large">{{item.productName}}</el-text>&nbsp;/&nbsp;
          <el-text type="success">计划数:{{ item.planNumber }}</el-text>
        </template>
        <el-row>
          <el-col :span="8">
            <el-text type="success">{{item.code}}</el-text>-
          </el-col>
          <el-col :span="12">
            <el-text  type="success">计划开始:{{ timestampToTime(item.planStartTime) }}</el-text>
          </el-col>
          <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
            <el-button type="success" plain  @click="updatePlan(item.id, item.code,'end')">完工</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-text type="warning">计划结束:{{ timestampToTime(item.planEndTime) }}</el-text>
          </el-col>
          <el-col :span="8">
            <el-text type="warning">入库数:{{ item.finishNumber }}</el-text>
          </el-col>
          <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
            <el-button type="warning" plain  @click="updatePlan(item.id,item.code,'pause')">暂停</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-text>备注:{{ item.remark }}</el-text>
          </el-col>
          <el-col :span="4">
            <el-button type="info" plain  @click="planProgress(item)">进度</el-button>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>

<!--    派工中-->
    <uni-section title="派工中" type="line" title-color="#2979ff"></uni-section>
    <el-collapse accordion>
      <el-collapse-item v-for="(item, index) in paigongList"  :name="item.id">
        <template #title>
          <el-icon><Tickets /></el-icon>
          <el-text  size="large">{{item.productName}}</el-text>&nbsp;/&nbsp;
          <el-text type="success">计划数:{{ item.planNumber }}</el-text>
        </template>
        <el-row>
          <el-col :span="8">
            <el-text type="success">{{item.code}}</el-text>-
          </el-col>
          <el-col :span="12">
            <el-text  type="success">计划开始:{{ timestampToTime(item.planStartTime) }}</el-text>
          </el-col>
          <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
            <el-button type="info" plain  @click="updatePlan(item.id,item.code, 'start')">开工</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-text type="warning">计划结束:{{ timestampToTime(item.planEndTime) }}</el-text>
          </el-col>
        </el-row>
        <el-text>备注:{{ item.remark }}</el-text>
      </el-collapse-item>
    </el-collapse>
<!--    计划中-->
    <uni-section title="计划中" type="line" title-color="#f3a73f"></uni-section>
    <el-collapse accordion>
      <el-collapse-item v-for="(item, index) in planList"  :name="item.id">
        <template #title>
          <el-icon><Tickets /></el-icon>
          <el-text  size="large">{{item.productName}}</el-text>&nbsp;/&nbsp;
          <el-text type="success">计划数:{{ item.planNumber }}</el-text>
        </template>
        <el-row>
          <el-col :span="8">
            <el-text type="success">{{item.code}}</el-text>-
          </el-col>
          <el-col :span="12">
            <el-text  type="success">计划开始:{{ timestampToTime(item.planStartTime) }}</el-text>
          </el-col>
          <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
            <el-button type="primary" plain>派工</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-text type="warning">计划结束:{{ timestampToTime(item.planEndTime) }}</el-text>
          </el-col>
        </el-row>
        <el-text>备注:{{ item.remark }}</el-text>
      </el-collapse-item>
    </el-collapse>
<!--   暂停中 -->
    <uni-section title="暂停中" type="line" title-color="#e43d33"></uni-section>
    <el-collapse accordion>
      <el-collapse-item v-for="(item, index) in pauseList"  :name="item.id">
        <template #title>
          <el-icon><Tickets /></el-icon>
          <el-text  size="large">{{item.productName}}</el-text>&nbsp;/&nbsp;
          <el-text type="success">计划数:{{ item.planNumber }}</el-text>
        </template>
        <el-row>
          <el-col :span="8">
            <el-text type="success">{{item.code}}</el-text>-
          </el-col>
          <el-col :span="12">
            <el-text  type="success">计划开始:{{ timestampToTime(item.planStartTime) }}</el-text>
          </el-col>
          <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
            <el-button type="success" plain  @click="updatePlan(item.id,item.code, 'end')">完工</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-text type="warning">计划结束:{{ timestampToTime(item.planEndTime) }}</el-text>
          </el-col>
          <el-col :span="8">
            <el-text type="warning">入库数:{{ item.finishNumber }}</el-text>
          </el-col>
          <el-col v-if="auth.hasPermi('mes:plan:update')" :span="4">
            <el-button type="info" plain @click="updatePlan(item.id, item.code,'start')">开工</el-button>
          </el-col>
        </el-row>
        <el-text>备注:{{ item.remark }}</el-text>
      </el-collapse-item>
    </el-collapse>
<!--    <view class="charts-box">-->
<!--      <qiun-data-charts :chartData="chartData" type="column"/>-->
<!--    </view>-->
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import useUserStore from '@/store/modules/user'
import {getPage, getById, paigong, updateStatus, getByStatus} from "@/api/mes/plan"
import {timestampToTime} from "@/utils/dateUtil";
import {Tickets} from "@element-plus/icons-vue";
import modal from "@/plugins/modal";
import tab from "@/plugins/tab";
import {showConfirm} from "@/utils/common";
import auth from "@/plugins/auth";
const userStore = useUserStore()
const startList = ref([]);
const paigongList = ref([]);
const pauseList = ref([]);
const planList = ref([]);
const chartData = ref({});

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 => {
    paigongList.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 => {
        console.log(response)
        getPlanList()
      })
      modal.msgSuccess("操作成功")
    }
  })
}
//看进度
function planProgress(plan){
  tab.navigateTo('/page_report/planProgress',plan)
}
</script>

<style lang="scss" scoped>
.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;
}
</style>
