<template>
	<view class="container">
    <view class="example">
    <el-tabs v-loading="loading" v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="个人报工" name="first">
        <uni-list :border="true">
          <uni-list-item v-for="(item, index) in reportList">
            <!-- 自定义 header -->
            <template v-slot:header>
              <div onclick="">
                <text class="u-success"> {{timestampToTime(item.reportDate)}}</text>
                <text class="u-primary">/</text>
                {{item.userName}}
                <text class="u-primary">/</text>
                {{item.orgName}}
              </div>
            </template>
            <!-- 自定义 body -->
            <template v-slot:body>
            </template>
            <!-- 自定义 footer-->
            <template v-slot:footer>
              <el-button v-if="item.reportStatus === 0" type="primary" size="small"  :icon="Edit" circle @click="editOrAddReport(item.id)"/>
              <el-button v-if="item.reportStatus === 0" type="success" size="small" :icon="Check" circle @click="updateReport(item.id,1,'提交')"/>
              <el-button v-if="item.reportStatus === 0" type="danger" size="small" :icon="Delete" circle @click="deleteReport(item.id)"/>
              <el-button v-if="item.reportStatus >= 1" type="primary" size="small"  :icon="View" circle @click="handleView(item.id)"/>
            </template>
          </uni-list-item>
        </uni-list>
        <uni-fab ref="fab" @fabClick="editOrAddReport" />
      </el-tab-pane>
      <el-tab-pane label="代报工" name="second"  v-if="auth.hasPermi('mes:produce-report-detail:replace')">
        <uni-fab :pattern="pattern"  ref="fabReplace" @fabClick="addReplaceReport" />
        <uni-forms ref="valiReplaceForm" :model="valiFormData">
          <uni-row>
            <uni-col :xs="14" :sm="12" :md="6" :lg="3" :xl="1">
              <uni-forms-item label-width="50px" label-align="left" label="日期" name="reportDateString">
                <uni-datetime-picker v-model="valiFormData.reportDateString" type="date" :clear-icon="true"  @change="maskClick" />
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="10" :sm="8" :md="6" :lg="3" :xl="1">
              <uni-forms-item label-width="50px" label-align="left" label="工人"  name="userId">
                <uni-data-select v-model="valiFormData.userId" :localdata="userList" placement="top" @change="handleReplaceReportChange()">
                </uni-data-select>
              </uni-forms-item>
            </uni-col>
          </uni-row>
          <uni-forms-item label="工序"  name="orgType">
            <uni-data-checkbox v-model="valiFormData.orgType" :localdata="processTypes()" @change="handleReplaceReportChange()"/>
          </uni-forms-item>
        </uni-forms>
        <uni-list :border="true">
          <uni-list-item v-for="(item, index) in replaceReportList">
            <!-- 自定义 header -->
            <template v-slot:header>
              <div onclick="">
                <text class="u-success"> {{timestampToTime(item.reportDate)}}</text>
                <text class="u-primary">/</text>
                {{item.userName}}
                <text class="u-primary">/</text>
                {{item.orgName}}
              </div>
            </template>
            <!-- 自定义 body -->
            <template v-slot:body>
            </template>
            <!-- 自定义 footer-->
            <template v-slot:footer>
              <el-button v-if="item.reportStatus < 2" type="primary" size="small"  :icon="Edit" circle @click="addReplaceReport(item.id)"/>
              <el-button v-if="item.reportStatus === 0" type="success" size="small" :icon="Promotion" circle @click="updateReport(item.id,1,'提交')"/>
              <el-button v-if="item.reportStatus === 1" type="success" size="small" :icon="Check" circle @click="updateReport(item.id,2,'通过')"/>
              <el-button v-if="item.reportStatus < 2" type="danger" size="small" :icon="Delete" circle @click="deleteReport(item.id)"/>

            </template>
          </uni-list-item>
        </uni-list>
      </el-tab-pane>
      <el-tab-pane label="个人报工审核" name="third" v-if="auth.hasPermi('mes:produce-report-detail:replace')">
        <uni-forms ref="valiForm" :model="valiFormData">
          <uni-row>
            <uni-col :xs="14" :sm="12" :md="6" :lg="3" :xl="1">
              <uni-forms-item label-width="50px" label-align="left" label="日期" name="reportDateString">
                <uni-datetime-picker v-model="valiFormData.reportDateString" type="date" :clear-icon="true"  @change="maskClick" />
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="10" :sm="8" :md="6" :lg="3" :xl="1">
              <uni-forms-item label-width="50px" label-align="left" label="工人"  name="userId">
                <uni-data-select v-model="valiFormData.userId" :localdata="userList" placement="top" @change="handleOtherReportChange()">
                </uni-data-select>
              </uni-forms-item>
            </uni-col>
          </uni-row>
          <uni-forms-item label="工序"  name="orgType">
            <uni-data-checkbox v-model="valiFormData.orgType" :localdata="processTypes()" @change="handleOtherReportChange()"/>
          </uni-forms-item>
        </uni-forms>

        <uni-list :border="true">
          <uni-list-item v-for="(item, index) in otherReportList">
            <!-- 自定义 header -->
            <template v-slot:header>
              <div onclick="">
                <text class="u-success"> {{timestampToTime(item.reportDate)}}</text>
                <text class="u-primary">/</text>
                {{item.userName}}
                <text class="u-primary">/</text>
                {{item.orgName}}
              </div>
            </template>
            <!-- 自定义 body -->
            <template v-slot:body>
            </template>
            <!-- 自定义 footer-->
            <template v-slot:footer>
              <el-button v-if="item.reportStatus === 0" type="primary" size="small"  :icon="Edit" circle @click="addReplaceReport(item.id)"/>
              <el-button v-if="item.reportStatus === 0" type="success" size="small" :icon="Promotion" circle @click="updateReport(item.id,1,'提交')"/>
              <el-button v-if="item.reportStatus === 1" type="success" size="small" :icon="Check" circle @click="updateReport(item.id,2,'通过')"/>
              <el-button v-if="item.reportStatus === 1" type="warning" size="small" :icon="Close" circle @click="updateReport(item.id,3,'驳回')"/>
              <el-button v-if="item.reportStatus < 2" type="danger" size="small" :icon="Delete" circle @click="deleteReport(item.id)"/>
            </template>
          </uni-list-item>
        </uni-list>
        <view>
          <div></div>
        </view>
      </el-tab-pane>
      <el-tab-pane label="报工报表" name="four">报工报表</el-tab-pane>
    </el-tabs>
    </view>
	</view>
</template>

<script>
import {getMyList, getOtherList, getById, updateStatus,deleteByReportId } from "@/api/mes/report";
import {Check, Delete, Edit,Promotion,Close,View} from '@element-plus/icons-vue'
import tab from "@/plugins/tab";
import modal from "@/plugins/modal";
import auth from "@/plugins/auth";
import {showConfirm} from "@/utils/common";
import {getCurrentDate, timestampToTime} from "@/utils/dateUtil";
import {processTypes} from "@/api/system/dict/data";
import {getOtherPersonalUser} from "@/api/mes/organization";
export default {
  computed: {
    auth() {return auth},
    Delete() {return Delete},
    Promotion() {return Promotion},
    Close() {return Close},
    Edit() {return Edit},
    Check() {return Check},
    View() {return View}
  },
  data() {
    return {
      currentPaneName: '',
      loading: false,
      reportList: [],
      otherReportList: [],
      replaceReportList: [],
      userList: [],
      pattern: {
        color: '#7A7E83',
        backgroundColor: '#fff',
        selectedColor: '#007AFF',
        buttonColor: '#e66126',
        iconColor: '#fff'
      },
      activeName: 'first',
      valiFormData: {
        reportDate: [],
        reportDateString:  getCurrentDate(),
        userId: '',
        orgType: 'chengxing',
        reportType: '个人',
      },
    };
  },
  onLoad() {
    this.loading = true
    this.getList();
    this.getUserList()
    this.loading = false
  },
  onPullDownRefresh() {
    //请求个人报工审核数据
    if(this.currentPaneName==='third'){
      this.getOtherReportList()
    }
    //请求代报数据
    else if(this.currentPaneName==='second'){
      this.getReplaceReportList();
    }
    else {
      //请求个人报工数据
      this.getList();
    }
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    processTypes() {
      return processTypes
    },
    handleTabClick(tab) {
      this.loading = true
      this.currentPaneName=tab.paneName
      //请求个人报工审核数据
      if(tab.paneName==='third'){
        this.getOtherReportList()
      }
      //请求代报数据
      else if(tab.paneName==='second'){
        this.getReplaceReportList();
      }
      else {
        //请求个人报工数据
        this.getList();
      }
      this.loading = false
    },
    timestampToTime,
    getOtherReportList(){
      let date = this.valiFormData.reportDateString
      if(date.length<5)date = getCurrentDate()
      this.valiFormData.reportDate = [date+' 00:00:00', date+' 23:59:59']
      this.valiFormData.reportType = '个人'
      getOtherList(this.valiFormData).then(response => {
        this.otherReportList = response.data
      })
    },
    getReplaceReportList(){
      let date = this.valiFormData.reportDateString
      if(date.length<5)date = getCurrentDate()
      this.valiFormData.reportDate = [date+' 00:00:00', date+' 23:59:59']
      this.valiFormData.reportType = '代报工'
      getOtherList(this.valiFormData).then(response => {
        this.replaceReportList = response.data
      })
    },
    getUserList() {
      getOtherPersonalUser().then(response => {
        this.userList = response.data
      })
    },
    getList() {
      getMyList().then(response => {
        this.reportList = response.data
      })
    },
    deleteReport(id) {
      showConfirm("确认删除该报工信息吗？").then(res => {
        this.loading = true
        if (res.confirm) {
          deleteByReportId(id).then(response => {
            modal.msgSuccess("操作成功")
            if(this.activeName==='first')this.getList()
            if(this.activeName==='third')this.getOtherReportList()
            if(this.activeName==='second')this.getReplaceReportList()
          })
        }
        this.loading = false
      })
    },
    updateReport(id,status,type) {
      showConfirm("确认"+type+"该报工信息吗？").then(res => {
        this.loading = true
        if (res.confirm) {
          updateStatus(id,status).then(response => {
            modal.msgSuccess("操作成功")
            if(this.activeName==='first')this.getList()
            if(this.activeName==='third')this.getOtherReportList()
            if(this.activeName==='second')this.getReplaceReportList()
          })
        }
        this.loading = false
      })
    },
    editOrAddReport(id){
      if(id===null || id===undefined)tab.navigateTo('/page_report/reportForm')
      else tab.navigateTo('/page_report/reportForm',id)
    },
    addReplaceReport(id){
      if(id===null || id===undefined)tab.navigateTo('/page_report/replaceForm')
      else tab.navigateTo('/page_report/replaceForm',id)
    },
    maskClick(e){
      this.valiFormData.reportDateString = e
      if(this.activeName==='first')this.getList()
      if(this.activeName==='third')this.getOtherReportList()
      if(this.activeName==='second')this.getReplaceReportList()
    },
    handleOtherReportChange(){
      this.loading = true
      //查找个人报工审核列表
      this.getOtherReportList()
      this.loading = false
    },
    handleReplaceReportChange(){
      this.loading = true
      //查找个人报工审核列表
      this.getReplaceReportList()
      this.loading = false
    },
    handleView(id){
      tab.navigateTo('/page_report/ViewForm',id)
    }
  }
};

</script>

<style lang="scss" scoped>
.example {
  padding: 15px;
  background-color: #fff;
}
.addSite {
	display: flex;
	justify-content: space-around;
	width: 600rpx;
	line-height: 100rpx;
	position: absolute;
	bottom: 30rpx;
	left: 80rpx;
	background-color: red;
	border-radius: 60rpx;
	font-size: 30rpx;
	.add{
		display: flex;
		align-items: center;
		color: #ffffff;
		.icon{
			margin-right: 10rpx;
		}
	}
}
</style>
