<template>
  <div class="sales-order-information">
    <div class="sales-order-information-sl">
      <el-page-header @back="goBack" content="新件返还"></el-page-header>
      <br />
      <div id="approve-new-order-information">
        <el-descriptions :column="2" size="small" border labelClassName="labelClassName">
          <el-descriptions-item>
            <template slot="label"> 申请单号 </template>
            <el-input disabled size="small" v-model="form.applyNo"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 申请类别 </template>
            <el-input
              disabled
              size="small"
              :value="
                ['家用空调', '商用空调', '生活电器（小家电）'][['HOME', 'TRADE', 'ELEC'].indexOf(form.applyCategory)]
              "
            ></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 申请类型 </template>
            <el-input
              disabled
              size="small"
              :value="['新件返还', '破损返还', '故障返还'][['NEW', 'LOST', 'BUG'].indexOf(form.applyType)]"
            ></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 申请人 </template>
            <el-input disabled size="small" v-model="form.createBy"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 申请单位 </template>
            <el-input disabled size="small" v-model="form.receiveShopName"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 申请日期 </template>
            <el-input disabled size="small" v-model="form.createTime"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 退款金额 </template>
            <el-input disabled size="small" v-model="form.refundAmount"></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 退件方式 </template>
            <el-input
              disabled
              size="small"
              :value="['物流快递', '网点自还'][['EXPRESS', 'SELF'].indexOf(form.refundMode)]"
            ></el-input>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 收货地址 </template>
            <div>{{ form.receiveAddress }}</div>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 发货单位 </template>
            <el-input disabled size="small" v-model="form.createBy"></el-input>
          </el-descriptions-item>
        </el-descriptions>
        <div style="margin-top: -1px">
          <el-descriptions size="small" border labelClassName="labelClassName">
            <el-descriptions-item labelStyle="width:15.45%">
              <template slot="label"> 备注 </template>
              <el-input disabled type="textarea" :rows="1" size="small" v-model="form.remark"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div style="margin-top: -1px">
          <el-table
            :data="form.newRefundManageItemBeanList || []"
            size="mini"
            border
            header-cell-class-name="headerRowColor"
            style="width: 100%"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.$index + 1 }}</div>
              </template>
            </el-table-column>
            <el-table-column label="配件编码">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.partsNumber }}</div>
              </template>
            </el-table-column>
            <el-table-column label="配件名称">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.partsName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="单位">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.unitName }}</div>
              </template>
            </el-table-column>

            <el-table-column label="数量">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.qty }}</div>
              </template>
            </el-table-column>
            <el-table-column label="申请备注">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.remark }}</div>
              </template>
            </el-table-column>
            <el-table-column label="图片">
              <template slot-scope="scope">
                <div v-if="scope.row.image" class="serial_number">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="$showImgUrl(scope.row.image)"
                    :preview-src-list="[$showImgUrl(scope.row.image)]"
                  >
                  </el-image>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="自编码">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.customNo }}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: -1px">
          <el-table
            :data="form.partsNewRefundManageRecordList || []"
            size="mini"
            border
            header-cell-class-name="headerRowColor"
            style="width: 100%"
          >
            <el-table-column label="序号" width="60">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.$index + 1 }}</div>
              </template>
            </el-table-column>
            <el-table-column label="市场价">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.marketPrice }}</div>
              </template>
            </el-table-column>
            <el-table-column label="配件名称">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.partsName }}</div>
              </template>
            </el-table-column>
            <el-table-column label="配件编码">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.partsNumber }}</div>
              </template>
            </el-table-column>
            <el-table-column label="数量">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.qty }}</div>
              </template>
            </el-table-column>

            <el-table-column label="退款金额">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.refundAmount }}</div>
              </template>
            </el-table-column>

            <el-table-column label="销售单号">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.salesId }}</div>
              </template>
            </el-table-column>
            <el-table-column label="销售价">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.salesPrice }}</div>
              </template>
            </el-table-column>
            <el-table-column label="优惠价2">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.secondPrice }}</div>
              </template>
            </el-table-column>
            <el-table-column label="总金额">
              <template slot-scope="scope">
                <div class="serial_number">{{ scope.row.totalAmount }}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: -1px">
          <el-descriptions :column="2" size="small" border labelClassName="labelClassName">
            <el-descriptions-item>
              <template slot="label"> 审批人 </template>
              <el-input disabled size="small" v-model="form.examineBy"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 审批结果 </template>
              <el-select placeholder="" :disabled="disabled" size="small" v-model="form.flag" style="width: 100%">
                <el-option
                  v-for="item in type == 1 ? t1options : t2options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div style="margin-top: -1px">
          <el-descriptions size="small" border labelClassName="labelClassName">
            <el-descriptions-item labelStyle="width:15.45%">
              <template slot="label"> 备注 </template>
              <el-input
                :disabled="disabled"
                type="textarea"
                :rows="1"
                size="small"
                v-model="form.examineRemark"
              ></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <template v-if="type === 2">
          <div style="margin-top: -1px">
            <el-descriptions :column="2" size="small" border labelClassName="labelClassName">
              <el-descriptions-item>
                <template slot="label"> 接收人 </template>
                <el-input disabled size="small" v-model="form.refundedBy"></el-input>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 接收时间 </template>
                <el-input disabled size="small" v-model="form.refundedTime"></el-input>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </template>
      </div>
      <br />
      <el-row style="text-align: right">
        <el-button v-if="!disabled" size="small" type="primary" @click="determine">提交</el-button>
        <el-button v-if="!disabled" size="small" @click="reset">重置</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  workerNewRefundDetail,
  workerNewRefundExamine
} from '@/api/material-system/website/website-parts-worker-refund-manage'
import templatePage1 from '@/components/template/template-page-1.vue'
export default {
  components: { templatePage1 },
  props: {
    type: {
      type: Number
    },
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      form: '',
      disabled: false,
      t1options: [
        { label: '通过', value: 'AGREE' },
        { label: '驳回', value: 'REJECT' }
      ],
      t2options: [
        { label: '保存', value: 'SAVE' },
        { label: '提交', value: 'SUBMIT' },
        { label: '通过', value: 'AGREE' },
        { label: '驳回', value: 'REJECT' },
        { label: '已返还', value: 'REFUNDED' },
        { label: '未返还', value: 'NOTREFUND' }
      ]
    }
  },
  mounted() {
    if (~[1, 2].indexOf(this.type) && this.item && this.item.applyNo) {
      if (this.type === 2) {
        this.disabled = true
      }
      workerNewRefundDetail({
        applyNo: this.item.applyNo
      })
        .then(res => {
          this.form = res.data
          if (this.type === 1) {
            this.form.examineBy = this.$store.getters.name
            this.form.flag = ''
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  methods: {
    goBack() {
      this.$emit('goBack')
    },
    reset() {
      this.form.flag = ''
      this.form.examineRemark = ''
    },
    determine() {
      var { applyNo, examineRemark, flag } = this.form
      if (!flag) {
        this.$message({
          type: 'info',
          message: `审批结果不能为空!`
        })
        return
      }
      workerNewRefundExamine({
        applyNo,
        examineRemark,
        flag
      }).then(res => {
        this.$message({
          type: 'success',
          message: `提交成功!`
        })
        this.$emit('goBack', true)
      })
    },
    printhtml() {
      var ht = document.getElementById('approve-new-order-information').innerHTML
      var h = window.open()
      h.document.write(ht)
      h.document.close()
      h.print()
      h.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.sales-order-information {
  min-width: 860px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #fff;
  overflow: hidden;
  ::v-deep .labelClassName {
    width: 200px !important;
  }
  .sales-order-information-sl {
    padding: 20px;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .serial_number {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 6px !important;
    text-align: center;
  }
  ::v-deep .is-disabled {
    .el-textarea__inner,
    .el-input__inner {
      background-color: #fff;
      color: #606266;
      border-color: #fff;
    }
    .el-input__suffix {
      display: none;
    }
  }
  ::v-deep th .cell {
    width: 100%;
    height: 100%;
    text-align: center;
  }
  ::v-deep .el-table__cell {
    .el-select,
    .el-input,
    .el-textarea__inner,
    .el-input__inner {
      height: 100%;
      border: none !important;
    }
  }
  ::v-deep .cell {
    height: 100%;
    padding: 0 !important;
  }
  ::v-deep .headerRowColor {
    .cell {
      height: 100%;
      padding: 6px !important;
    }
  }
}
</style>
