<!--
  @description: 退货审核/确认收货 弹框
  @Modifier：dijia
  @date：2021/07/29
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogData.visible"
      :before-close="handleClose"
      :title="title"
      width="55%"
      custom-class="shop_mall_dialog"
    >
      <div class="p8">
        <div class="mt10">
          <div class="commodity-res">
            <span>{{ optionType === 'audit' ? '是否同意退货：' : '是否收到退货：' }}</span>
            <el-radio-group v-model="formData.auditStatus">
              <el-radio v-for="(item,index) in commodityList" :key="index" :label="item.typecode">
                {{ item.typename }}
              </el-radio>
            </el-radio-group>
          </div>
          <div class="commodity-res">
            <span class="mt10">{{ optionType === 'audit' ? '审核意见：' : '备注：' }}</span>
            <el-input
              v-model="formData.auditOptions"
              :rows="5"
              type="textarea"
              maxlength="250"
              show-word-limit
              :placeholder="optionType === 'audit' ? '请输入审核意见' : '请输入备注'"
              style="margin-top:10px;"
            />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="purple" class="mr30" @click="dialogClick">
          提 交
        </el-button>
        <el-button @click="cancelClick">
          取 消
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// api
import { dealOrderBack, confirmProductBack } from '@/api/shoppingmall/order'
export default {
  name: 'CommodityAuditDialog',
  props: {
    dialogData: {
      type: Object,
      default: function() {}
    }
  },
  data() {
    return {
      // 审核状态
      commodityList: [
        { typename: '是', typecode: '1' },
        { typename: '否', typecode: '0' }
      ],
      formData: {
        // 审核意见
        auditOptions: null,
        // 商品ID
        id: null,
        // 审核标识位 0审核驳回 1审核通过
        auditStatus: '1'
      },
      title: '退货审核',
      // audit:审核 confirm:收货确认
      optionType: ''
    }
  },
  watch: {
    'dialogData.visible'(val) {
      if (val) {
        this.optionType = this.dialogData.type
        this.title = this.optionType === 'audit' ? '退货审核' : '确认收货'
      }
    }
  },
  methods: {
    // 关闭弹框
    handleClose(done) {
      done()
      this.formData = {
        auditOptions: null,
        id: null,
        auditStatus: '1'
      }
    },
    // 点击提交
    dialogClick() {
      const message = this.optionType === 'audit' ? '不同意退货时，请填写意见！' : '未收到货物时，请填写备注！'
      if (!this.formData.auditOptions && this.formData.auditStatus === '0') {
        this.$message.error(message)
        return
      }
      this.formData.id = this.dialogData.id
      if (this.optionType === 'audit') {
        dealOrderBack(this.formData).then(res => {
          if (res.header.ret === '0') {
            this.$message.success('提交成功！')
            this.dialogData.visible = false
            this.$emit('call-back')
            this.formData = {
              auditOptions: null,
              id: null,
              auditStatus: '1'
            }
          }
        })
      } else if (this.optionType === 'confirm') {
        confirmProductBack(this.formData).then(res => {
          if (res.header.ret === '0') {
            this.$message.success('提交成功！')
            this.dialogData.visible = false
            this.$emit('call-back')
            this.formData = {
              auditOptions: null,
              id: null,
              auditStatus: '1'
            }
          }
        })
      }
    },
    // 点击取消时重置
    cancelClick() {
      this.dialogData.visible = false
      this.formData = {
        auditOptions: null,
        id: null,
        auditStatus: '1'
      }
    }
  }
}
</script>

<style lang="less" scoped>

.amount {
  color: #1f94f4;
}
.table_res {
  width: 100%;
}
.commodity_table {
  width: 98%;
  margin: 0 auto;

  td {
    border: 1px solid #E0E0E0;
    line-height: 20px;
    padding: 6px;

    .el-form-item--small.el-form-item {
      margin: 0;
    }

    .el-input {
      width: 90%;
    }
  }

  tr td:nth-child(odd) {
    background-color: #F5F7F9;
    width: 16%;
  }

  tr td:nth-child(even) {
    width: 34%;
  }

}
.commodity-title {
  font-weight: 700;
  font-size: 15px;
}
.commodity-res {
  display: flex;
  width: 98%;
  margin: 0 auto 20px;
  span {
    margin-right: 20px;
    width: 12%;
  }
  .el-textarea {
    width: 80%;
  }
}
.commodity-title-res {
  width: 98%;
  left: 1%;
}
.mr30 {
  margin-right: 30px;
}
</style>
