<template>
  <view>
    <view class="single-fetch" v-for="(fetch, index) in fetchList" :key="index">
      <view class="fetch-lower">
        <view>
          <span>类型名称</span>
          <h4>{{ fetch.machineTypeName }}</h4>
        </view>
        <view>
          <span>规格型号</span>
          <h4>{{ fetch.specificationType }}</h4>
        </view>
        <view>
          <span>编码</span>
          <h4>{{ fetch.dictName }}</h4>
        </view>
        <view>
          <span>维修总量</span>
          <h4>{{ fetch.repairNum }}</h4>
        </view>
        <view>
          <span>维修数量</span>
          <h4>{{ fetch.repairedNum }}</h4>
        </view>
        <view>
          <span>报废数量</span>
          <h4>{{ fetch.scrapNum }}</h4>
        </view>
      </view>
    </view>
    <view class="btm-sticky">
      <view class="checked">
        <checkbox-group @tap="checkAll" style="margin-right: 15rpx">
          <checkbox :checked="allChecked" />
        </checkbox-group>
        <text>全选</text>
      </view>
      <view @click="toggleExam">
        <button class="exam" :disabled="!allChecked">审核</button>
      </view>
    </view>
    <uni-popup ref="popup" type="center" :mask-click="false">
      <view class="popup">
        <view class="pop-top">
          <h4>报废审核</h4>
          <uni-icons
            style="color: #aaaaaa; font-weight: bold"
            type="closeempty"
            size="32"
            @click="closePopup"
          >
          </uni-icons>
        </view>
        <view class="select-area">
          <uni-forms ref="form" :modelValue="formData" :rules="rules">
            <view>
              <uni-forms-item
                name="checkResult"
                required
                label="是否通过"
                label-width="150"
                prop="checkResult"
              >
                <uni-data-select
                  v-model="formData.checkResult"
                  :localdata="ifPassRange"
                  :clear="false"
                ></uni-data-select>
              </uni-forms-item>
            </view>
            <uni-forms-item
              required
              v-if="formData.checkResult !== 1"
              name="remark"
              label="不通过原因"
              label-width="150"
              prop="remark"
            >
              <uni-easyinput
                type="textarea"
                v-model="formData.remark"
                placeholder="请输入内容"
              ></uni-easyinput>
            </uni-forms-item>
            <!-- <uni-forms-item label="姓名" name="name">
              <uni-easyinput
                type="text"
                v-model="formData.name"
                placeholder="请输入姓名"
              />
            </uni-forms-item> -->
            <!-- <uni-forms-item label="邮箱" name="email">
              <input
                class="input"
                v-model="formData.email"
                type="text"
                placeholder="请输入用户名"
                @input="binddata('email', $event.detail.value)"
              />
            </uni-forms-item> -->
          </uni-forms>
          <view class="submit_box">
            <view @click="returnSubmit">取消</view>
            <view @click="formSubmit">提交</view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      taskId: "",
      fetchList: [],
      taskIdList: [],
      allChecked: false,
      examFormData: {
        ifPass: '',
        noPassReason: ''
      },
      formData: {
        checkResult: "",
        remark: ''
      },
      ifPassRange: [
        { text: '是', value: 1 },
        { text: '否', value: 0 }
      ],
      rules: {
        // 对name字段进行必填验证
        checkResult: {
          rules: [{
            required: true,
            errorMessage: '请选择是否通过',
          },
          ]
        },
        // 对email字段进行必填验证
        remark: {
          rules: [{
            required: true,
            errorMessage: '请输入不通过原因',
          }]
        }
      },
      fetchMaterialList: [],
      examList: [],
    }
  },
  onLoad(params) {
    this.taskIdList = []
    console.log('11111111111111', params.taskId);
    this.taskIdList.push(params.taskId)
    console.log(' this.taskIdList', this.taskIdList);
    let paramsObj = {
      taskId: params.taskId
    }
    this.$api.crashExam.crashExamDetails(paramsObj).then(res => {
      if (res.data.code == 200) {
        this.fetchList = res.data.rows
      }
    }).catch(err => {
      throw err
    })
  },
  onShow() {
    this.getPageList()
  },
  methods: {
    getPageList() {
      let that = this
      that.$api.crashExam.crashExamList().then(res => {
        if (res.data.code == 200) {
          this.fetchMaterialList = res.data.rows
        }
      }).catch(err => {
        throw err
      })
    },
    seeDetail(taskId) {
      uni.navigateTo({
        url: `/pages/crashExam/crashExamDetails?taskId=${taskId}`
      })
    },
    checkAll() {
      // this.taskIdList = []
      this.allChecked = !this.allChecked
      // if (this.allChecked) {
      //   this.fetchMaterialList = this.fetchMaterialList.map(item => {
      //     if (item.taskStatus == 58) {
      //       return {
      //         ...item,
      //         checked: true
      //       };
      //     } else {
      //       this.taskIdList = []
      //       return {
      //         ...item,
      //         checked: false
      //       };
      //     }
      //   });
      //   this.fetchMaterialList.map(item => {
      //     if (item.checked) {
      //       this.taskIdList.push(item.taskId)
      //     }
      //   })
      // } else {
      //   this.fetchMaterialList = this.fetchMaterialList.map(item => {
      //     return {
      //       ...item,
      //       checked: false
      //     };
      //   });
      //   this.taskIdList = []
      // }
    },
    toggleExam() {
      this.$refs.popup.open()
    },
    closePopup() {
      this.$refs.popup.close()
    },
    seeExam(taskId) {
      // this.formData = {
      //   checkResult: '',
      //   remark: ''
      // }
      // this.taskIdList = []
      // this.taskIdList.push(taskId)
      // this.$refs.popup.open()
      uni.navigateTo({
        url: `/pages/crashExam/crashExamList?taskId=${taskId}`
      })
    },
    returnSubmit() {
      this.$refs.popup.close()
      console.log(this.taskIdList);
    },
    formSubmit() {
      let that = this
      that.$refs.form.validate().then(res => {
        let params = {
          checkResult: that.formData.checkResult == 1 ? '通过' : '不通过',
          taskIdList: that.taskIdList,
          remark: that.formData.remark ? that.formData.remark : '',
        }
        that.$api.crashExam.crashExamAudit(params).then(res => {
          uni.showToast({
            title: res.data.msg,
            icon: 'success',
            duration: 2000
          })
          this.$refs.popup.close()
          this.allChecked = false
          uni.navigateTo({
            url: `/pages/crashExam/crashExam`
          })
        })
      }).catch(err => {
        uni.showToast({
          title: '请完善表单内容',
          icon: 'none',
          duration: 2000
        })
      })
    },
  }
}
</script>

<style lang="scss">
body {
  background-color: #f8f8f8;
  box-sizing: border-box;
  padding-bottom: 10vh;
}
.single-fetch {
  width: 95%;
  margin: 20rpx auto;
  background-color: #fff;
  border-radius: 15rpx;
  box-sizing: border-box;
  padding: 15rpx;
  position: relative;
  .fetch-upper {
    width: 100%;
    box-sizing: border-box;
    padding: 15rpx;
    border-bottom: 1px solid #d7d7d7;
    display: flex;
    align-items: center;
    .upper-lef {
      width: 12%;
      height: 5vh;
      border-radius: 15rpx;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      background-color: #3788ff;
      color: #fff;
    }
    .upper-rig {
      flex: 1;
      box-sizing: border-box;
      padding: 10rpx 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      h4 {
        font-weight: normal;
        font-size: 14px;
      }
    }
  }
  .fetch-lower {
    width: 100%;
    box-sizing: border-box;
    padding: 15rpx;
    border-bottom: 1px solid #d7d7d7;
    view {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 15rpx;
      font-size: 14px;
      span {
        width: 120px;
        color: #9d9d9d;
        padding-right: 20rpx;
      }
      h4 {
        color: #000;
        font-size: 14px;
        font-weight: normal;
      }
    }
    view:last-child {
      margin-bottom: 0;
    }
  }
  .fetch-btns {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    :first-child {
      margin-right: 8px;
    }
    // width: 100%;
    // box-sizing: border-box;
    // padding: 15rpx;
    // display: flex;
    // justify-content: flex-end;
    // view {
    //   box-sizing: border-box;
    //   padding: 8rpx 25rpx;
    //   border-radius: 15rpx;
    //   color: #fff;
    //   margin-right: 15rpx;
    //   font-size: 14px;
    // }
    // view:last-child {
    //   margin-right: 0;
    // }
  }
  .sticky-area {
    position: absolute;
    top: 0;
    right: 0;
    width: 11vh;
    height: 10vh;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.btm-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 15rpx 30rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .checked {
    display: flex;
    align-items: center;
  }
  .exam {
    box-sizing: border-box;
    // padding: 10rpx 50rpx;
    border-radius: 30rpx;
    background-color: #3788ff;
    font-size: 14px;
    color: #fff;
  }
}
.popup {
  width: 80vw;
  height: 60vh;
  background-color: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  background: linear-gradient(#d9e7fe, #fff, #fff, #fff);
  .pop-top {
    width: 100%;
    height: 5vh;
    box-sizing: border-box;
    padding: 0 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .select-area {
    width: 85%;
    margin: 40rpx auto;
    .submit_box {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      margin: 0 40px;
      :first-child {
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 4px;
        background: #fff;
        border: 1px solid #999;
        color: #999;
      }
      :last-child {
        width: 60px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 4px;
        background: #3788ff;
        color: #fff;
        border: 1px solid #3788ff;
      }
    }
    /deep/ .uni-forms-item {
      position: relative;
      display: flex;
      flex-direction: column;
      margin-bottom: 22px;
    }
    /deep/ .uni-forms-item__label {
      display: flex;
      flex-direction: row;
      justify-content: center !important;
      align-items: center;
      text-align: center;
      font-size: 14px;
      color: #606266;
      height: 36px;
      padding: 0 12px 0 0;
      vertical-align: middle;
      flex-shrink: 0;
      box-sizing: border-box;
    }
  }
}
</style>
