<template>
  <div class="sales-order-information">
    <div class="sales-order-information-sl">
      <el-page-header @back="goBack" content="新件转销售"></el-page-header>
      <br />
      <el-descriptions :column="2" size="small" border labelClassName="labelClassName">
        <el-descriptions-item>
          <template slot="label"> 转销单 </template>
          <el-input disabled size="small" v-model="form.changeSalesNo"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 转单类型 </template>
          <el-input disabled size="small" v-model="form.changeType"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 申请单位 </template>
          <el-input disabled size="small" v-model="form.websitName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 总金额 </template>
          <el-input disabled size="small" v-model="form.totalAmount"></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>
      <div style="margin-top: -1px">
        <el-table
          :data="form.partsChangeSalesItemList || []"
          size="mini"
          border
          style="width: 100%"
          header-cell-class-name="headerRowColor"
        >
          <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.salesPrice }}</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.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>
      <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 {
  partsChangeSalesDetail,
  partsChangeSalesExamine
} from '@/api/material-system/website/website-new-parts-to-sales'
export default {
  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.changeSalesNo) {
      if (this.type === 2) {
        this.disabled = true
      }
      partsChangeSalesDetail({
        changeSalesNo: this.item.changeSalesNo
      })
        .then(res => {
          // this.form = res.data
          this.form = {
            ...res.data,
            changeType:
              {
                OUTSIDE_TO_SALES: '保外新件转销售',
                CHANGE_SALES: '新件转销售',
                NEW_REFUND: '新件返还',
                OLD_REFUND: '旧件返还',
                SALES: '销售'
              }?.[res.data.changeType] || ''
          }
          if (this.type === 1) {
            this.form.examineBy = this.$store.getters.name
            this.form.flag = this.t1options.find(item => item.value === this.form.flag) ? this.form.flag : ''
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  },
  methods: {
    goBack() {
      this.$emit('goBack')
    },
    reset() {
      this.form.examineRemark = ''
      this.form.flag = ''
    },
    determine() {
      var { changeSalesNo, examineRemark, flag } = this.form
      if (!changeSalesNo || !flag) {
        this.$message({
          type: 'info',
          message: `必填信息不完整!`
        })
        return
      }
      partsChangeSalesExamine({
        changeSalesNo,
        examineRemark,
        flag
      }).then(res => {
        this.$message({
          type: 'success',
          message: `提交成功!`
        })
        this.$emit('goBack', true)
      })
    }
  }
}
</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;
    text-align: center;
    padding: 6px !important;
  }
  ::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>
