<template>
  <view>
    <!-- <Navbar title="退料清点" :showRightText="true" :isBack="false" :text="'退料记录'" @chickIcon="handleRightText" /> -->
    <uni-section title="退料信息填写" type="line"></uni-section>
    <div class="cont">
      <u-form :model="formData" ref="uForm" labelWidth="auto" labelPosition="left">
        <u-form-item label="退料工程" prop="proName" borderBottom>
          <u-input
            v-model="formData.proName"
            placeholder="退料工程"
            border="none"
            disabled
            inputAlign="right"
          ></u-input>
        </u-form-item>
        <u-form-item label="退料日期" prop="backTime" borderBottom>
          <u-input
            v-model="formData.backTime"
            placeholder="退料日期"
            border="none"
            disabled
            inputAlign="right"
          ></u-input>
        </u-form-item>
        <u-form-item label="经办人" prop="manager" borderBottom>
          <u-input
            v-model="formData.manager"
            placeholder="请输入经办人"
            border="none"
            inputAlign="right"
            disabled
          ></u-input>
        </u-form-item>
        <u-form-item label="经办人电话" prop="phone" borderBottom>
          <u-input
            v-model="formData.phone"
            placeholder="经办人电话"
            border="none"
            inputAlign="right"
            maxlength="11"
            disabled
          ></u-input>
        </u-form-item>
        <u-form-item label="备注" prop="remark">
          <u-textarea
            v-model="formData.remark"
            placeholder="请输入备注"
            :rows="5"
            maxlength="200"
            count
            disabled
          ></u-textarea>
        </u-form-item>
        <u-form-item label="附件上传" prop="fileList">
          <uni-file-picker v-model="formData.fileList" :auto-upload="false" ref="files" limit="9" readonly />
        </u-form-item>
      </u-form>
    </div>

    <uni-section title="退料物资明细" type="line"></uni-section>
    <div class="cont">
      <div>
        <div class="top-cont">
          <u-input
            v-model="typeName"
            placeholder="请输入名称"
            suffixIcon="search"
            suffixIconStyle="color: #666"
            shape="circle"
            @blur="handleSearch"
          ></u-input>
        </div>
        <u-row justify="space-around" customStyle="margin: 10px 0;" gutter="6">
          <u-col span="2" textAlign="center">
            <div>序号</div>
          </u-col>
          <u-col span="3" textAlign="center">
            <div>名称</div>
          </u-col>
          <u-col span="4" textAlign="center">
            <div>规格</div>
          </u-col>
          <u-col span="3" textAlign="right">
            <div>退回数量</div>
          </u-col>
        </u-row>
        <div class="list-item" v-for="(item, index) in detailList" :key="index">
          <u-row justify="space-around" customStyle="margin-bottom: 10px;" gutter="6">
            <u-col span="2" textAlign="center">
              <div>{{ index + 1 }}</div>
            </u-col>
            <u-col span="3" textAlign="center">
              <div>{{ item.name }}</div>
            </u-col>
            <u-col span="4" textAlign="center">
              <div>{{ item.model }}</div>
            </u-col>
            <u-col span="3" textAlign="center">
              <div style="color: #5ae725">{{ item.num }}</div>
            </u-col>
          </u-row>
        </div>
        <!-- 空状态 -->
        <u-empty v-if="detailList.length == 0" mode="data"></u-empty>
      </div>
    </div>

    <div style="height: 20px"></div>
  </view>
</template>

<script>
import config from '@/config'
import { getDetail, getDetailList } from '@/api/aqSafety'

export default {
  data() {
    return {
      opt: {},
      actionUrl: config.baseUrl + config.uploadFileUrl,
      token: uni.getStorageSync('App-Token'),
      isLoading: false,
      showPicker: false,
      columns: [],
      showPickerTime: false,
      dataTime: Number(new Date()),
      showType: false, // 退料类型弹框
      formData: {
        projectName: '', // 退料工程
        projectId: '', // 退料工程id
        backTime: '', // 退料日期
        manager: '', // 经办人
        phone: '', // 经办人电话
        remark: '', // 备注
        fileList: [], // 附件
        uploadPaths: [] // 上传文件
      },
      // 退料物资明细-列表
      detailList: [],
      typeName: '', // 退料物资明细-搜索名称
    }
  },
  onLoad(opt) {
    console.log('🚀 ~ onLoad ~ opt', opt)
    this.opt = JSON.parse(opt.params)
    console.log('🚀 ~ onLoad ~ this.opt:', this.opt)
    this.getDetail()
    this.getDetailList()
  },
  methods: {
    handleSearch() {
      console.log('🚀 ~ handleSearch ~ ', this.typeName)
      // 前端搜索, 根据typeName搜索
      this.getDetailList()
    },
    // 获取详情
    async getDetail() {
      try {
        const params = {
          encryptedData: JSON.stringify({ id: this.opt.id })
        }
        console.log('🚀 ~ getDetail ~ params', params)
        const res = await getDetail(params)
        console.log('🚀 ~ getDetail ~ res', res)
        this.formData = res.data
        if (this.formData.fileList && this.formData.fileList.length > 0) {
          this.formData.fileList.forEach(item => {
            item.url = config.fileUrl + item.fileUrl + '?token=' + this.token
          })
        }
      } catch (error) {
        console.log('🚀 ~ getDetail ~ error', error)
      }
    },
    // 获取详情列表
    async getDetailList() {
      try {
        const params = {
          encryptedData: JSON.stringify({ id: this.opt.id, keyWord: this.typeName }),
          pageNum: 1,
          pageSize: 9999
        }
        console.log('🚀 ~ getDetailList ~ params', params)
        const res = await getDetailList(params)
        console.log('🚀 ~ getDetailList ~ res', res)
        this.detailList = res.data.list
      } catch (error) {
        console.log('🚀 ~ getDetailList ~ error', error)
      }
    },
  }
}
</script>

<style lang="scss">
.cont {
  padding: 0 15px;

  .list-no {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .top-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
  }
}

.bt-btn {
  padding-bottom: 8px;
  width: calc(100% - 30px);
  background: #fff;
  // 固定底部
  position: fixed;
  bottom: 0;
  left: 15px;
}
</style>
