<template>
  <div>
    <el-card>
      <el-form :model="determineData" label-width="150px" border>

        <el-row type="flex" justify="end">
          <el-button-group style="display: flex;margin-bottom: 15px; margin-right: 50px;margin-top: 10px">
            <el-button type="primary" @click.native="determineBtn()" :loading="determineLoading">确认</el-button>
            <el-button type="primary" @click.native="closeDialog(false)" :loading="loading">取消</el-button>
          </el-button-group>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="单据号" prop="billNo">
              <el-input v-model="determineData.billNo" style="width: 90%" auto-complete="off"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货仓库" prop="billNo">
              <el-input v-model="determineData.invName" style="width: 90%" auto-complete="off"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="单据类型" prop="billNo">
              <el-input v-model="determineData.billTypeName" style="width: 90%" auto-complete="off"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="送货单位" prop="billNo">
              <el-input v-model="determineData.fromCorpName" style="width: 90%" auto-complete="off"
                        :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-tabs type="border-card" style="margin: 15px">
      <!--单据业务详情-->
      <el-tab-pane>
        <span slot="label">单据 {{ determineData.billNo }}-单据详情</span>
        <el-table v-loading="bizDetailLoading" :data="codeDetailList" style="width: 100%" border
                  @row-click="BizDetail"
                  row-key="id" highlight-current-row
        >
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="登记状态" prop="regStatus" width="100">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.regStatus==0">
                未登记
              </el-tag>
              <el-tag type="success" v-if="scope.row.regStatus==1">
                全部登记
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="物资名称"
            prop="coName"
            width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="规格型号"
            width="150"
            prop="spec"
          ></el-table-column>
          <el-table-column
            label="批次号"
            width="100"
            prop="batchNo"
          ></el-table-column>
          <el-table-column
            label="数量"
            prop="count"
            width="100"
          ></el-table-column>
          <el-table-column
            label="扫码数量"
            prop="reCount"
            width="100"
          ></el-table-column>
          <el-table-column
            label="价格"
            prop="price"
            width="100"
          ></el-table-column>

          <el-table-column
            label="生产日期"
            prop="productDate"
            width="100"
          ></el-table-column>
          <el-table-column
            label="失效日期"
            prop="expireDate"
            width="100"
          ></el-table-column>
          <el-table-column width="100" label="计量单位" prop="measname">
          </el-table-column>
          <el-table-column
            label="生产企业"
            prop="manufacturer"
            width="160"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="注册/备案号"
            width="160"
            prop="certCode"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="发票编码"
            prop="invoiceCodes"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
        <pagination
          v-show="codeTotal>0"
          :total="codeTotal"
          :page.sync="codeQuery.page"
          :limit.sync="codeQuery.limit"
          @pagination="getCodeDetailList"
        />
      </el-tab-pane>


    </el-tabs>


    <el-tabs type="border-card" style="margin: 15px">
      <!--单据业务详情-->
      <el-tab-pane>
        <span slot="label">单据 {{ determineData.billNo }}-发票信息</span>
        <el-table v-loading="bizDetailLoading" :data="bizDetailList" style="width: 100%" border
                  row-key="id"
        >
          <el-table-column label="序号" type="index"></el-table-column>

          <el-table-column
            label="物资名称"
            prop="cpmctymc" width="150"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="规格型号" width="150"
            prop="ggxh"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="批次号" width="100"
            prop="batchNo"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="机器编码" width="150"
            prop="machineNo"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="发票代码" width="150"
            prop="invoiceCode"
          ></el-table-column>
          <el-table-column
            label="发票编码" width="150"
            prop="invoiceEncode"
          ></el-table-column>
          <el-table-column
            label="开票日期" width="150"
            prop="invoiceDate"
          ></el-table-column>
          <el-table-column
            label="发票价格"
            prop="price" width="100"
          ></el-table-column>
          <el-table-column
            label="生产日期" width="100"
            prop="productDate"
          ></el-table-column>
          <el-table-column
            label="失效日期"
            prop="expireDate" width="100"
          ></el-table-column>

          <el-table-column
            label="备注"
            prop="remark" width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作" width="160" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.native.stop="showImgViewer(scope.row)"
              >预览
              </el-button
              >

            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="invTotal>0"
          :total="invTotal"
          :page.sync="bizQuery.page"
          :limit.sync="bizQuery.limit"
          @pagination="getBizDetailList"
        />
      </el-tab-pane>
    </el-tabs>
    <el-image-viewer v-if="imgViewerVisible" style="z-index:9999" :on-close="closeImgViewer" :url-list="imgList"/>
  </div>
</template>

<script>
import {
  filterListInvoice,
  updateOrder,
  filterBizOrderList
} from '@/api/inout/orderDetailBiz'
import AcceptOrder from '@/views/inout/DialogReviewOrder'
import DialogInvoice from '@/views/inout/DialogInvoice'
import InvoiceRegister from '@/views/inout/InvoiceRegister'

import {previewImage} from '@/api/purchase/supCompany'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

const formJson = {
  site_id: '',
  site_name: '',
  describe: '',
  ads: []
}

export default {
  name: 'IoCheckSuccessOrder',
  props: {
    determineData: {
      type: Object,
      required: true
    },
    closeDialog: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      imgList: [],
      imgViewerVisible: false,
      BASE_URL: process.env.VUE_APP_BASE_API,
      showSearch: true,
      filterQuery: {
        id: '',
        billNo: null,
        mainAction: null,
        action: null,
        page: 1,
        supInoivceSearch: 'supInvoice',
        limit: 10,
        startTime: null,
        endTime: null,
        invCode: this.$store.getters.locInvCode
      },

      corpLoading: false,
      fromOptions: [],

      formName: 1,
      formMap: {
        1: '发票登记'
      },
      certFileUrl: '',
      Upinvoice: false,
      currentManufacturer: {},
      InvoiceRegisterv: false,
      checkStatus: {
        1: '草稿',
        2: '等待处理',
        3: '等待校验',
        4: '处理异常',
        5: '待核对',
        6: '校验异常',
        7: '已审核',
        8: '审核拒绝',
        9: '正在处理', 10: '待审核'
      },
      storageList: [],
      invList: [],
      deptList: [],
      list: [],
      total: 0,
      loading: false,
      determineLoading: false,
      index: null,
      enableDept: false,
      showSup: false,

      fromTypeMap: {
        '1': 'UDIMS平台',
        '2': '网页新增',
        '3': 'pda即时校验',
        '4': 'pda未校验',
        '5': 'pc端扫码精灵',
        '6': '流转自动补单',
        '7': 'UDI供应商平台',
        '8': '平衡补录单据',
        '10': '手动补单',
        '11': '仓库盘点',
        '12': '采购计划',
        '13': '领用单据',
        '14': '第三方系统单据'
      },
      deleteData: {
        id: '',
        status: 10
      },
      dialogTableVisible: false,
      formLoading: false,
      dialogVisible: false,
      formData: formJson,
      deleteLoading: false,
      busTypes: [],
      currentRow: {
        billNo: ''
      },
      actDateRange: [],
      auditDateRange: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      bizQuery: {
        productName: null,
        orderIdFk: null,
        page: 1,
        limit: 10
      },
      bizTotal: 0,
      invTotal: 0,
      bizDetailLoading: false,
      bizDetailList: [],
      codeQuery: {
        orderIdFk: null,
        page: 1,
        limit: 10
      },
      codeTotal: 0,
      codeDetailLoading: false,
      codeDetailList: [],
      resultQuery: {
        orderId: null,
        code: null,
        page: 1,
        limit: 10
      },
      resultTotal: 0,
      resultDetailLoading: false,
      resultDetailList: [],
      acceptQuery: null,
      acceptOrderVisible: false,
      subRow: null
    }
  },
  components: {AcceptOrder, DialogInvoice, InvoiceRegister, ElImageViewer},
  methods: {
    getOrderDetails() {
      this.codeQuery.page = 1;
      this.getCodeDetailList();
      //this.getResultDetailList();
    },

    getCodeDetailList() {
      this.codeQuery.orderIdFk = this.determineData.billNo;
      this.codeDetailLoading = true;
      filterBizOrderList(this.codeQuery).then((res) => {
        this.codeDetailLoading = false;
        if (res.code === 20000) {
          this.codeDetailList = res.data.list || [];
          this.codeTotal = res.data.total || 0;
        } else {
          this.$message.error(res.message);
          this.codeDetailList = [];
          this.codeTotal = 0;
        }
      }).catch((error) => {
        this.codeDetailLoading = true;
        this.$message.error(error.message);
        this.codeDetailList = [];
        this.codeTotal = 0;
      })
    },

    BizDetail(row) {
      this.bizQuery.page = 1;
      this.getBizDetailList(row);
    },
    getBizDetailList(row) {
      this.bizQuery.orderIdFk = this.determineData.billNo;
      if (row != null) {
        this.bizQuery.batchNo = row.batchNo;
        this.bizQuery.relId = row.bindRlFk;
      }
      filterListInvoice(this.bizQuery).then((res) => {
        this.bizDetailLoading = false;
        if (res.code === 20000) {
          this.bizDetailList = res.data.list || [];
          this.invTotal = res.data.total || 0;
        } else {
          this.$message.error(res.message);
          this.bizDetailList = [];
          this.invTotal = 0;
        }
      }).catch((error) => {
        this.bizDetailLoading = false;
        this.$message.error(error.message);
        this.bizDetailList = [];
        this.invTotal = 0;
      })
    },

    determineBtn() {
      var data = {
        billNo: this.determineData.billNo,
        checkStatus: 1
      }
      let index = this.codeDetailList.findIndex(item => item.regStatus == false)
      if (index != -1) {
        this.$confirm("还有未登记的发票, 是否继续提交?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.determineLoading = true
          updateOrder(data).then((res) => {
            this.determineLoading = false
            this.closeDialog();
          }).catch((error) => {
          })
        }).catch(() => {
          this.determineLoading = false
        })

      } else {
        this.determineLoading = true
        updateOrder(data).then((res) => {
          this.determineLoading = false
          this.closeDialog();
        }).catch((error) => {
          this.determineLoading = false
        })
      }


    },
    showImgViewer(row) {
      this.certFileUrl = this.BASE_URL + "/udiwms/image/register/file/getImage?type=image2&name=";
      this.imgList = [];
      previewImage({imageUrl: row.licenseUrl, certFileUrl: this.certFileUrl}).then(response => {
        if (response.code === 20000) {
          this.imgList = response.data;
        }
        console.log(this.imgList)
        this.imgViewerVisible = true;
      });
      const m = (e) => {
        e.preventDefault()
      };
      document.body.style.overflow = 'hidden';
      document.addEventListener("touchmove", m, false); // 禁止页面滑动
    },

    closeImgViewer() {
      this.imgViewerVisible = false;
      const m = (e) => {
        e.preventDefault()
      };
      document.body.style.overflow = 'auto';
      document.removeEventListener("touchmove", m, true);
    },
  },
  created() {
    this.getOrderDetails();
  }

}

</script>

<style type="text/scss" lang="scss">
</style>

