<template>
  <view>
    <u-sticky
        class="sticky"
        :custom-nav-height="0"
    >
      <u-navbar
          title="生产报工"
          bg-color="transparent"
          :title-style="{ fontWeight: 'bold' }"
          :auto-back="false"
          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>
    <view class="container">
      <view v-if="current === 0" >
        <uni-list :border="true">
          <uni-list-item v-for="(item, index) in reportList" :key="index">
            <!-- 自定义 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" />
      </view>
      <view  v-if="auth('mes:produce-report-detail:replace') && current === 1">
        <uni-fab :pattern="pattern"  ref="fabReplace" @fabClick="addReplaceReport" />
        <uni-forms ref="valiReplaceForm" :model="valiFormData">
          <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-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-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"  :key="index">
            <!-- 自定义 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>
      </view>
      <view v-if="current === 2 && auth('mes:produce-report-detail:replace')">
        <uni-forms ref="valiForm" :model="valiFormData">
          <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-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-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" key="index">
            <!-- 自定义 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>
      <view v-if="current === 3" >报工报表</view>
    </view>
  </view>
</template>

<script>
import { getMyList, getOtherList, 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: {
    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'
      },
      valiFormData: {
        reportDate: [],
        reportDateString:  getCurrentDate(),
        userId: '',
        orgType: 'chengxing',
        reportType: '个人',
      },
      menuList: [
        {
          name: '个人报工'
        },
        {
          name: '代报工'
        },
        {
          name: '个人报工审核'
        },
        {
          name: '报工报表'
        }
      ],
      current: 0
    };
  },
  onLoad() {
    this.loading = true
    this.getList();
    this.getReplaceReportList()
    this.getOtherReportList()
    this.getUserList()
    this.loading = false
  },
  methods: {
    change(index) {
      this.current = index.index
    },
    auth(permission) {
      return auth.hasPermi(permission)
    },
    processTypes() {
      return processTypes
    },
    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.current === 0) {
              this.getList()
            }
            if (this.current === 1) {
              this.getReplaceReportList()
            }
            if (this.current === 2) {
              this.getOtherReportList()
            }
          })
        }
        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.current === 0) {
              this.getList()
            }
            if (this.current === 1) {
              this.getReplaceReportList()
            }
            if (this.current === 2) {
              this.getOtherReportList()
            }
          })
        }
        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.current === 0) {
        this.getList()
      }
      if (this.current === 1) {
        this.getReplaceReportList()
      }
      if (this.current === 2) {
        this.getOtherReportList()
      }
    },
    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>
.container {
  padding: 15px;
  background-color: #ffffff;
}

.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);
}

.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>
