<template>
  <view class="container">
    <!-- 导航栏 -->
    <u-navbar leftText="返回" title="任务开工" :placeholder="true" leftIconColor="	#409eff" @leftClick="backClick" />
    <view class="info-item">
      <view class="title">#30 任务名称 (任务编号: 90569010)</view>
      <view class="target">
        <view class="imgbox">
          <image slot='cover' class="unimg" mode="aspectFill" :src="info.imgurl"></image>
          <text class="name">xxx产品</text>
        </view>
        <view class="number">
          <text>计划数量: </text>
          <text style="color:#409eff;font-size: 16px;margin-left: 8px;">30</text>
        </view>
      </view>
      <view class="finishtime">
        <text>完工时间: </text>
        <text style="color:#999;margin-left: 8px;">2023-10-11 19:58:51</text>
      </view>
    </view>
    <u-gap height="5px"></u-gap>
    <view class="info-item">
      <view class="header">计划加工用时</view>
      <!-- <view class="header">阿里巴巴</view> -->
      <view class="time">
        <u-icon name="clock" color="#f56c6c" size="18"></u-icon>
        <text class="hour">80:00:00 (小时)</text>
      </view>
    </view>
    <u-gap height="5px"></u-gap>
    <view class="info-item">
      <view class="header">任务操作</view>
      <view class="options">
        <u-button type="primary" :plain="true" :hairline="true" text="领料申请" @click="applyPickingClick"></u-button>
        <u-button type="primary" :plain="true" :hairline="true" text="完工提报" @click="reportCompletionClick"></u-button>
        <u-button type="primary" :plain="false" :hairline="true" text="质检申请" @click="checkQualityClick"></u-button>
      </view>
    </view>

    <!-- 领料申请 -->
    <u-popup :show="popupApplyShow" mode="center" @close="popupApplyShow = false" :customStyle="{'width': '350px'}"
      closeable>
      <view class="picklist">
        <material-apply :picklist="picklist" :show.sync="popupApplyShow" :checkNumber="checkValid"></material-apply>
      </view>
    </u-popup>

    <!-- 完工报告 -->
    <u-popup :show="popupReviewShow" mode="center" @close="popupReviewShow = false" :customStyle="{'width': '350px'}"
      closeable>
      <view class="picklist">
        <work-report :picklist="picklist" :info="info" :show.sync="popupReviewShow"></work-report>
      </view>
    </u-popup>

    <!-- 返库物料选择 -->
    <u-popup :show="restoreSelectShow" mode="center" @close="restoreSelectShow = false" closeable>
      <view class="select-box">
        <uni-section title="选择返库物料" type="line">
          <uni-data-select :localdata="restoreRange" @change="changeRestore"></uni-data-select>
        </uni-section>
      </view>
    </u-popup>

    <!-- 消息提示 -->
    <u-toast ref="msg"></u-toast>
  </view>
</template>

<script>
  import materialApply from './material-apply.vue'
  import workReport from './work-report.vue'
  export default {
    components: {
      materialApply,
      workReport
    },
    provide() {
      return {
        checkData: this.checkValid,
      }
    },
    data() {
      return {
        info: {
          id: 90569010,
          title: "#001任务名称",
          productName: "xxx产品",
          unit: "件",
          imgurl: require('@/static/images/wuliao.png'),
          hours: 80,
          number: 30,
          completed: 0,
          status: 1,
          creator: '管理员',
          createtime: '2023-10-01 09:58:51',
          pointer: '小王',
          finishtime: '2023-10-11 19:58:51',
        },
        picklist: [{
            "id": 10001,
            "name": "实物物料202212050001",
            "spec": "330ml/瓶",
            "number": 1,
            "unit": "瓶"
          },
          {
            "id": 10002,
            "name": "实物物料202212050002",
            "spec": "330ml/瓶",
            "number": 2,
            "unit": "瓶"
          },
          {
            "id": 10003,
            "name": "实物物料202212050003",
            "spec": "330ml/瓶",
            "number": 3,
            "unit": "瓶"
          },
          {
            "id": 10004,
            "name": "实物物料202212050004",
            "spec": "100颗",
            "number": 20,
            "unit": "件"
          },
          {
            "id": 10005,
            "name": "实物物料202212050005",
            "spec": "100颗",
            "number": 10,
            "unit": "件"
          },
          {
            "id": 10006,
            "name": "实物物料202212050006",
            "spec": "100颗",
            "number": 10,
            "unit": "件"
          }
        ],
        popupApplyShow: false,
        popupReviewShow: false,
      }
    },
    onLoad(params) {
      console.log(params); // 接受列表页传递参数
    },
    methods: {
      backClick() {
        uni.switchTab({
          url: "/pages/renwu/index?status=1"
        });
      },
      // 领料申请
      applyPickingClick() {
        this.popupApplyShow = true;
      },
      // 完工提报
      reportCompletionClick() {
        this.popupReviewShow = true;
      },
      // 质检申请
      checkQualityClick() {
        this.$refs.msg.show({
          type: 'default',
          message: "质检申请暂未开发~",
        });
      },
      // 检测输入数字有效性
      checkValid(that, val) {
        let invalid = false;
        if (!/^\d{1,3}$/.test(val) || Number.parseInt(val) <= 0) {
          invalid = true;
          that.$nextTick(() => {
            that.$refs.uToast.show({
              type: 'error',
              icon: false,
              message: "必须为1-999之间的整数",
            })
          });
        }
        return invalid ? {
          'border-color': '#f56c6c !important'
        } : {};
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../styles/base.scss";

  .container {
    padding: 10px;
    // font-family: "Alibaba PuHuiTi 2.0 55 Regular";
  }

  .info-item {
    min-height: 60px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #f2f2f2;
    background-color: $custom-bg-color;

    .title {
      color: #409eff;
      font-size: 14px;
    }

    .target {
      margin-top: 10px;
      @include flex-space-between(row);

      .imgbox {
        @include imgbox(30, 30);
      }

      .number {
        font-size: 14px;
      }
    }

    .options {
      margin-top: 10px;
      @include flex-space-around(row);

      ::v-deep {
        .u-button {
          width: 100px;
          height: 35px;
          border-radius: 10px;
        }
      }
    }

    .finishtime {
      margin-top: 10px;
      font-size: 14px;
    }

    .header {
      font-size: 13px;
      font-weight: 500;
      color: #666;
      text-align: left;
    }

    .time {
      margin-top: 10px;
      @include flex-left(row);

      .hour {
        color: #f56c6c;
        margin-left: 5px;
        font-size: 28px;
        font-weight: 700;
      }
    }
  }



  .picklist {
    ::v-deep {
      .uni-table-scroll {
        max-height: 360px;
      }

      .uni-table-th {
        background-color: #f5f5f5;
      }

      .uni-table-td {
        vertical-align: middle;
      }

      .u-alert__content__title {
        margin: 0;
      }
    }
  }
</style>
